:root {
            --color: #10b98131;
            --main-color: #10b981;
        }

        body {font-family: "Lexend", sans-serif;background:#f9f9f9;}
        nav {padding: 12px;border-bottom: 1px solid #d7d7d7;background:#fff;}
        nav > div {display: flex;justify-content: space-between;align-items: center;}
        nav .logo img {height:40px;}
        nav input {width: 100%;padding: 7px 10px;border: 1px solid #ddd;border-radius: 5px;}
        nav .links {display:flex;gap:20px;align-items:center}
        nav .links a {text-decoration:none;color:#444;}
        nav a.active-link {background:var(--main-color);color:#fff;border-radius:25px;padding:8px 20px;}

        .newest-coupons {background: #f5f7fc;padding: 10px 10px;padding-bottom: 30px;border-bottom: 1px solid #eee;}
        .title {font-size: 1.2rem;margin: 15px 0px;font-weight: bold;}

        .newest-coupons .items {display: flex;overflow: auto;gap: 15px;}
        .newest-coupons .items::-webkit-scrollbar {display: none;}
        .newest-coupons .items .item {background: #fff;border: 1px solid #ddd;padding: 15px;width: 300px;border-radius: 15px;flex-shrink: 0;}
        .newest-coupons .items .item .header {display: flex;}
        .newest-coupons .items .item .header .img {margin-right: 10px;}
        .newest-coupons .items .item .header img {width: 50px;}
        .newest-coupons .items .item .explain {color: #999;}
        .newest-coupons .items .item .action {text-align: center;background: var(--color);margin-top: 10px;border-radius: 10px;padding: 8px 10px;color: var(--main-color);}
        .newest-coupons .items .item .bi {color: var(--main-color);font-size: 1.3rem;margin-right: 3px;    vertical-align: -0.11em;}
        .newest-coupons .items .item .action .bi {font-size: 1rem;vertical-align: 0em;}
        
        .all-coupons {background: #fff;padding: 10px;}
        .all-coupons .item {border: 1px solid #ddd;border-radius: 10px;margin-top: 20px;box-shadow: 1px 1px 15px rgba(0,0,0,.1);}
        .all-coupons .item .header {position: relative;}
        .all-coupons .item .header .star {position: absolute;top: 10px;left: 10px;font-size: .7rem;background: #fff;padding: 4px 7px;border-radius: 5px;}
        .all-coupons .item .header .cover {width: 100%;border-radius: 10px 10px 0 0;}
        .all-coupons .item .header .logo {width: 50px;margin-top: -15px;margin-left: 15px;border: 1px solid #fff;border-radius: 10px;}
        .all-coupons .item .header .info {margin-left: calc(50px + 15px + 10px);margin-top: calc(15px - 50px + 10px);font-size: .96rem;}
        .all-coupons .item .header .type {font-weight: bold;display:flex;align-items:center;gap:5px}
        .all-coupons .item .header img {width:17px;}
        .all-coupons .item .header .name {color: #888;}
        .all-coupons .item .action .bi {font-size: 1rem;vertical-align: 0em;}
        .all-coupons .item .action {text-align: center;background: var(--color);margin-top: 10px;border-radius: 10px;padding: 8px 10px;color: var(--main-color);border: 1px dotted var(--main-color);border-style: dashed;cursor: pointer;}
        .all-coupons .item .action:hover {background: var(--main-color);color:#fff;animation: shakeX 0.5s ease-in-out;}
        @keyframes shakeX {
    0%   { transform: translateX(0); }
    20%  { transform: translateX(-5px); }
    40%  { transform: translateX(5px); }
    60%  { transform: translateX(-5px); }
    80%  { transform: translateX(5px); }
    100% { transform: translateX(0); }
}
        .all-coupons .item .more {padding: 20px;}
        .codes {position: absolute;top: 10px;right: 10px;background: var(--main-color);color: #fff;padding: 3px 10px;border-radius: 15px;font-size: .85rem;}
        .codes i {margin-right: 5px;justify-content: end;}

        .modal-show {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(0, 0, 0, 0.5);display: flex;justify-content: center;align-items: center;padding: 20px;}
        .modal-show > div {width: 550px;height: 90vh; margin: auto;position: relative;background: #fff;border-radius: 10px;}
        .modal-show .close {position: absolute;top: 15px;right: 15px;background-color: var(--color);width: 30px;height: 30px;border-radius: 50%;padding: 7px;z-index: 7777;display: flex;justify-content: center;align-items: center}
        .modal-show .close img {width: 100%;}
        .footer {padding: 20px 40px;position: absolute;bottom: 0;left: 0;right: 0;}
        .action {text-align: center;background: var(--color);margin-top: 10px;border-radius: 10px;padding: 8px 10px;color: var(--main-color);border: 1px dotted var(--main-color);border-style: dashed;}
        .modal-show .header {background-repeat: no-repeat;background-size: cover;color: #fff;border-radius: 10px 10px 0 0;overflow: hidden;}
        .modal-show .header .img img {width: 60px;border-radius: 6px;}
        .modal-show .header .info {display: flex;align-items: start;}
        .modal-show .header .info .more {padding-left: 15px;}
        .modal-show .header .info .more .name {color: #dbdbdb;}
        .modal-show .header .info .more .type {font-weight: bold;font-size: 1.2rem;}
        .details {display: flex;gap: 10px;color: #fff;margin-top: 20px;}
        .details > div {border-radius: 19px;background-color: rgba(255, 255, 255, .1);padding: 4px 15px;font-size: .8rem;} 
        .header-overlay {background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7));backdrop-filter: blur(8px);padding: 30px;}
        .body {padding: 20px;overflow: scroll;}
        .ticket {background: var(--color);border-radius: 20px;padding: 20px;text-align: center;position: relative;}
        .ticket .the-title {font-weight: bold;font-size: 1.3rem;color: var(--main-color);}
        .circle-1 {background-color: #fff;position: absolute;height: 25px;width: 25px;border-radius: 50%; left: -12px;transform: translateY(-50%);top: 50%;}
        .circle-2 {background-color: #fff;position: absolute;height: 25px;width: 25px;border-radius: 50%; right: -12px;transform: translateY(-50%);top: 50%;}
        .stats {display: flex;justify-content: space-around;padding: 20px 0;text-align: center;border-bottom: 1px solid #ddd;}
        .stats .bi {color: var(--main-color);margin-right: 2px;}
        .stats .stat {font-size: 1rem;}
        .stats .data {color: #999;}
        .detail {padding: 20px 0;color: #888;}
        .detail .detail-title {font-weight: bold;color: #000;font-size: 1.1rem;margin-bottom: 5px;}
        .footer {background-color: #f9f9f9;border-top: 1px solid #eee;text-align: center;border-radius:0 0 10px 10px;}
        .cop {background-color: #fff;border: 1px solid var(--main-color);border-style: dashed;border-radius: 15px;padding: 10px;font-size: 1.5rem;font-weight: bold;text-align: right;position: relative;cursor: pointer;user-select: none;margin: 0 auto;}
        .show {position: absolute;top: 0;left: 0;bottom: 0;background: var(--main-color);display: flex;align-items: center;justify-content: center;color: #fff;font-size: 1.1rem;right: 35px;border-radius: 15px 0 0 15px;}
        .show.active, .show:hover {right: 90px;} 
        
        .one-line-text {
            padding-right:15px;
    white-space: nowrap;        /* one line only */
    overflow: hidden;           /* hide overflow */
    text-overflow: ellipsis;    /* add ... */
    /*max-width: 300px;          */
    
}
        
        .circular-progress{
    position: relative;
    height: 150px;
    width: 150px;
    border-radius: 50%;
    background: conic-gradient(var(--main-color) 3.6deg, #ededed 0deg);
    display: flex;
    align-items: center;
    justify-content: center;
}
.circular-progress::before{
    content: "";
    position: absolute;
    height: 140px;
    width: 140px;
    border-radius: 50%;
    background-color: #fff;
}
.progress-value{
    position: relative;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--main-color);
}

.circle-loader {display: flex;align-items: center;justify-content: center;}
.text {text-align: center;margin: 30px;font-size: 1.2rem;}

#step-3 {padding: 0 20px;text-align: center;}
.locker {display: inline-block;background-color: var(--main-color);color: #fff;padding: 1rem 2rem;text-align: center;border-radius: 10px;font-size: 1.3rem;margin-top: 20px;}
.locker a {text-decoration: none;color: #fff;}
.coupon-card {padding: 30px;border: 2px dashed var(--main-color);border-radius: 10px;background-color: #eee;height: 170px;display: flex;align-items: center;justify-content: center;font-size: 2rem;position: relative;}
.blur-box {
  font-weight: bold;
  color: black;
  filter: blur(6px); /* full blur by default */
  margin-top: 40px;
}
.more-text {position: absolute;top: 30px;display: flex;font-size: .9rem;align-items: center;gap: 10px;}
.more-text > div:last-child {background: #fff;border-radius: 20px;padding: 3px 9px;}
.box {width: 20px;height: 20px;position: absolute;border-width: 0px;border-color: var(--main-color);border-style: dashed;opacity: .6;}
.box-1 {border-top-width: 2px;border-right-width: 2px; top: 20px;right: 20px;border-radius:0 5px 0 0}
.box-2 {border-top-width: 2px;border-left-width: 2px; top: 20px;left: 20px;border-radius:5px 0px 0 0}
.box-3 {border-bottom-width: 2px;border-left-width: 2px; bottom: 20px;left: 20px;border-radius:0 0 0 5px}
.box-4 {border-bottom-width: 2px;border-right-width: 2px; bottom: 20px;right: 20px;border-radius:0 0 5px 0}


@media (max-width: 768px) {
    .modal-show {padding: 0;align-items: normal;}
    .modal-show > div {height: 100%;width: 100%;margin: 0;}
    .modal-show > div .header {border-radius: 0;}
}


.offers > a {text-decoration:none;}
.offers .the-offer {background:var(--main-color);color:#fff;padding:12px;border-radius:5px;display:flex;align-items:start;gap:10px;margin:10px 0;text-align:left}
.offers .the-offer:hover {opacity:.8;}
.offers .imgs img {width:50px;height:50px;border-radius:5px;}
.the-offer .the-name {font-weight:bold;}
.the-offer .the-desc {font-size:.9rem;}


.main-card {background:#FFF;border:1px solid #ddd;padding:15px;border-radius:15px;margin-bottom:20px;}
.main-card .img  img {width:100%;background:#FFF;border:1px solid #ddd;border-radius:9px;}
.main-card h1 {font-size:1.2rem;margin:10px 0}
.main-card p {font-size:.85rem;color:#666;}


.codes-list .code-list {background:#FFF;border:1px solid #ddd;padding:15px;border-radius:15px;margin-bottom:10px;display:flex;align-items:center;}
.codes-list .code-list .discount-count {font-family: "Platypi", serif;font-weight:bold;font-size:1.3rem;padding:15px;border-right:1px dotted #888;text-align:center}
.codes-list .code-list .code-details {padding-left:15px;align-items:center;justify-content:space-between;width:100%;}
.codes-list .code-list .code-details .tags {display:flex;gap:5px}
.codes-list .code-list .code-details .tags > div {padding:4px 10px;background:#faedc9;border-radius:6px;font-size:.8rem;}
.codes-list .code-list .code-details .code-title {font-family: "Platypi", serif;font-weight:bold;font-size:1.3rem;margin-top:5px;}
.codes-action {display:flex;}
.codes-action > button {all:unset;background:var(--main-color);color:#fff;padding:8px 20px;border-radius:10px;width:100%;text-align:center;margin-top:10px;}

.titles-badge {display:flex;gap:8px;align-items:center;margin-bottom:20px;}
.titles-badge i {font-size:.75rem;}
.titles-badge div:last-child {color:var(--main-color);}

.comments {background:#FFF;border:1px solid #ddd;padding:15px;border-radius:15px;margin-bottom:10px;}