/* =========================================================
   V95 — Kho Mã Giảm Giá
   Scope độc lập hoàn toàn để không ảnh hưởng account pages.
   ========================================================= */
.cpv1,
.cpv1 *{box-sizing:border-box}
.cpv1{
    min-height:calc(100vh - 70px);
    padding:96px 0 68px;
    background:rgba(248,250,252,.68);
    color:#18181b;
    font-family:Roboto,Arial,sans-serif;
}
.cpv1-shell{
    width:min(1180px,calc(100% - 32px));
    margin:0 auto;
}
.cpv1-hero{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    margin:0 auto 42px;
    text-align:center;
}
.cpv1-hero-icon{
    width:66px;
    height:66px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-bottom:18px;
    border:1px solid rgba(236,72,153,.10);
    border-radius:20px;
    background:linear-gradient(135deg,rgba(236,72,153,.16),rgba(147,51,234,.16));
    box-shadow:0 12px 28px rgba(147,51,234,.08);
    color:#ec4899;
}
.cpv1-hero-icon svg{width:40px;height:40px}
.cpv1-hero h1{
    margin:0;
    font-family:"IBM Plex Sans",Roboto,Arial,sans-serif;
    font-size:40px;
    line-height:1.12;
    font-weight:800;
    letter-spacing:-.035em;
    background:linear-gradient(90deg,#ec4899 0%,#a855f7 51%,#3b82f6 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}
.cpv1-hero p{
    width:min(590px,100%);
    margin:15px auto 0;
    color:#71717a;
    font-size:17px;
    line-height:1.65;
    font-weight:400;
}
.cpv1-available{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:30px;
    margin-top:16px;
    padding:0 12px;
    border:1px solid #dbeafe;
    border-radius:999px;
    background:#eff6ff;
    color:#2563eb;
    font-size:12px;
    font-weight:700;
}
.cpv1-empty{
    min-height:350px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:54px 20px;
    text-align:center;
}
.cpv1-empty-icon{
    width:96px;
    height:96px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:22px;
    border-radius:999px;
    background:#f4f4f5;
    color:#d4d4d8;
}
.cpv1-empty-icon svg{width:42px;height:42px}
.cpv1-empty h2{
    margin:0;
    font-family:"IBM Plex Sans",Roboto,Arial,sans-serif;
    color:#18181b;
    font-size:21px;
    line-height:1.35;
    font-weight:700;
}
.cpv1-empty p{
    width:min(430px,100%);
    margin:9px auto 0;
    color:#71717a;
    font-size:14px;
    line-height:1.65;
}
.cpv1-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:22px;
}
.cpv1-card{
    position:relative;
    min-width:0;
    display:grid;
    grid-template-columns:128px minmax(0,1fr);
    overflow:hidden;
    border:1px solid #e4e4e7;
    border-radius:24px;
    background:#fff;
    box-shadow:0 10px 32px rgba(15,23,42,.045);
    transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.cpv1-card:hover{
    transform:translateY(-2px);
    border-color:#d8b4fe;
    box-shadow:0 16px 42px rgba(126,34,206,.08);
}
.cpv1-card-side{
    position:relative;
    min-height:225px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:22px 12px;
    background:linear-gradient(155deg,#ec4899 0%,#a855f7 55%,#6366f1 100%);
    color:#fff;
}
/* Mép vé đục lỗ kiểu coupon: các nửa hình tròn ăn vào dải màu.
   Dùng màu nền của phần coupon nên nhìn như lỗ cắt thật, không phải chấm trang trí. */
.cpv1-card{--cpv1-card-bg:#fff}
.cpv1-card-side:before{
    content:"";
    position:absolute;
    top:8px;
    bottom:8px;
    right:-7px;
    width:14px;
    height:auto;
    border-radius:0;
    background:
        radial-gradient(circle at 50% 7px, var(--cpv1-card-bg) 0 6px, transparent 6.4px)
        center top / 14px 40px repeat-y;
    z-index:4;
    pointer-events:none;
}
.cpv1-card-side:after{display:none}
.cpv1-card-side span{
    font-family:"IBM Plex Sans",Roboto,Arial,sans-serif;
    font-size:30px;
    line-height:1;
    font-weight:800;
    letter-spacing:-.035em;
}
.cpv1-card-side small{
    margin-top:8px;
    font-size:11px;
    line-height:1;
    font-weight:800;
    letter-spacing:.15em;
}
.cpv1-card-main{
    position:relative;
    min-width:0;
    padding:22px 22px 20px 25px;
}
.cpv1-card-main:before{
    content:"";
    position:absolute;
    top:17px;
    bottom:17px;
    left:0;
    border-left:1px dashed #e4e4e7;
}
.cpv1-card-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}
.cpv1-card-label{
    color:#a1a1aa;
    font-size:10px;
    line-height:1;
    font-weight:800;
    letter-spacing:.13em;
}
.cpv1-remaining{
    display:inline-flex;
    align-items:center;
    min-height:25px;
    padding:0 9px;
    border-radius:999px;
    background:#f0fdf4;
    color:#16a34a;
    font-size:10.5px;
    line-height:1;
    font-weight:700;
    white-space:nowrap;
}
.cpv1-code-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-top:12px;
}
.cpv1-code-row code{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    color:#18181b;
    font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
    font-size:22px;
    line-height:1.25;
    font-weight:700;
    letter-spacing:.04em;
    white-space:nowrap;
}
.cpv1-copy-icon{
    width:36px;
    height:36px;
    flex:0 0 36px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0;
    border:1px solid #e4e4e7;
    border-radius:11px;
    background:#fff;
    color:#71717a;
    cursor:pointer;
    transition:.18s ease;
}
.cpv1-copy-icon svg{width:16px;height:16px}
.cpv1-copy-icon:hover,
.cpv1-copy-icon.is-copied{border-color:#bfdbfe;background:#eff6ff;color:#2563eb}
.cpv1-rule{height:1px;margin:17px 0 15px;background:#f1f5f9}
.cpv1-meta{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.cpv1-meta>span{
    min-width:0;
    display:flex;
    align-items:center;
    gap:6px;
    color:#71717a;
    font-size:11px;
    line-height:1.45;
}
.cpv1-meta svg{width:14px;height:14px;flex:0 0 14px;color:#a855f7}
.cpv1-meta strong{color:#3f3f46;font-weight:700}
.cpv1-copy{
    width:100%;
    height:42px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-top:17px;
    padding:0 16px;
    border:0;
    border-radius:13px;
    background:linear-gradient(90deg,#ec4899,#a855f7 52%,#6366f1);
    color:#fff;
    font-family:"IBM Plex Sans",Roboto,Arial,sans-serif;
    font-size:13px;
    font-weight:700;
    cursor:pointer;
    box-shadow:0 8px 20px rgba(168,85,247,.13);
    transition:transform .18s ease,filter .18s ease;
}
.cpv1-copy:hover{filter:brightness(.98);transform:translateY(-1px)}
.cpv1-copy.is-copied{background:linear-gradient(90deg,#10b981,#22c55e)}
.cpv1-copy svg{width:16px;height:16px}
.cpv1-note{
    margin:24px 0 0;
    color:#94a3b8;
    font-size:11.5px;
    line-height:1.6;
    text-align:center;
}

@media (max-width:900px){
    .cpv1{padding-top:72px}
    .cpv1-grid{grid-template-columns:1fr}
}
@media (max-width:575px){
    .cpv1{padding:54px 0 50px}
    .cpv1-shell{width:min(100% - 22px,1180px)}
    .cpv1-hero{margin-bottom:28px}
    .cpv1-hero-icon{width:58px;height:58px;border-radius:17px;margin-bottom:14px}
    .cpv1-hero-icon svg{width:34px;height:34px}
    .cpv1-hero h1{font-size:31px}
    .cpv1-hero p{margin-top:10px;font-size:13.5px;line-height:1.6}
    .cpv1-card{grid-template-columns:94px minmax(0,1fr);border-radius:20px}
    .cpv1-card-side{min-height:215px;padding:18px 8px}
    .cpv1-card-side span{font-size:23px}
    .cpv1-card-main{padding:18px 15px 17px 19px}
    .cpv1-code-row code{font-size:18px}
    .cpv1-meta{grid-template-columns:1fr}
}

html.dark .cpv1{background:rgba(9,9,11,.72);color:#fafafa}
html.dark .cpv1-hero p,
html.dark .cpv1-empty p,
html.dark .cpv1-meta>span,
html.dark .cpv1-note{color:#a1a1aa}
html.dark .cpv1-empty-icon{background:#18181b;color:#3f3f46}
html.dark .cpv1-empty h2{color:#fafafa}
html.dark .cpv1-card{--cpv1-card-bg:#18181b;border-color:#27272a;background:#18181b;box-shadow:none}
html.dark .cpv1-card:hover{border-color:#6b21a8}
html.dark .cpv1-card-main:before{border-color:#3f3f46}
html.dark .cpv1-code-row code{color:#fafafa}
html.dark .cpv1-copy-icon{border-color:#3f3f46;background:#18181b;color:#a1a1aa}
html.dark .cpv1-rule{background:#27272a}
html.dark .cpv1-meta strong{color:#e4e4e7}
html.dark .cpv1-remaining{background:rgba(34,197,94,.12);color:#4ade80}
html.dark .cpv1-available{border-color:rgba(59,130,246,.22);background:rgba(59,130,246,.10);color:#60a5fa}

/* =========================================================
   V96 — ticket perforation + page spacing/footer correction
   ========================================================= */
.cpv1{
    min-height:0 !important;
    height:auto !important;
    padding-top:132px !important;
    padding-bottom:30px !important;
}
.cpv1-shell{padding-bottom:0 !important}
.cpv1-hero{margin-bottom:34px !important}
.cpv1-note{margin-bottom:0 !important}

/* Dải ưu đãi giống ticket: có nhãn ƯU ĐÃI + mốc đơn hàng. */
.cpv1-card-side{
    justify-content:flex-start !important;
    gap:0;
    padding:24px 12px 20px !important;
}
.cpv1-side-kicker,
.cpv1-side-min,
.cpv1-side-order{
    display:block;
    width:100%;
    text-align:center;
    color:#fff;
    font-family:"IBM Plex Sans",Roboto,Arial,sans-serif;
    text-transform:uppercase;
}
.cpv1-side-kicker{
    margin-top:4px;
    font-size:10px !important;
    line-height:1.1;
    font-weight:800;
    letter-spacing:.13em;
    opacity:.96;
}
.cpv1-side-discount{
    display:block;
    width:100%;
    margin-top:28px;
    text-align:center;
    color:#fff;
    font-family:"IBM Plex Sans",Roboto,Arial,sans-serif;
    font-size:31px;
    line-height:1;
    font-weight:800;
    letter-spacing:-.04em;
}
.cpv1-side-min{
    margin-top:11px;
    font-size:10px !important;
    line-height:1.1;
    font-weight:700;
    letter-spacing:.01em;
    text-transform:none;
}
.cpv1-side-order{
    margin-top:auto;
    padding-top:24px;
    font-size:9.5px !important;
    line-height:1.1;
    font-weight:800;
    letter-spacing:.12em;
}
/* Tắt perforation cũ để không bị repeat sai số lỗ. */
.cpv1-card-side:before,
.cpv1-card-side:after{display:none !important}

/* Chính xác 6 lỗ, đặt dọc đường nối giữa phần màu và phần trắng. */
.cpv1-ticket-holes{
    position:absolute;
    z-index:8;
    top:0;
    bottom:0;
    left:128px;
    width:16px;
    transform:translateX(-50%);
    pointer-events:none;
    display:flex;
    flex-direction:column;
    justify-content:space-evenly;
    align-items:center;
}
.cpv1-ticket-holes i{
    display:block;
    width:15px;
    height:15px;
    flex:0 0 15px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 0 0 1px rgba(228,228,231,.18);
}
/* đường đứt đoạn chạy giữa các lỗ */
.cpv1-card-main:before{
    left:0 !important;
    top:13px !important;
    bottom:13px !important;
    border-left:1px dashed #e4e4e7 !important;
    z-index:1;
}

html.dark .cpv1-ticket-holes i{
    background:#18181b;
    box-shadow:0 0 0 1px rgba(63,63,70,.35);
}

@media (max-width:900px){
    .cpv1{padding-top:104px !important;padding-bottom:28px !important}
}
@media (max-width:575px){
    .cpv1{padding-top:86px !important;padding-bottom:24px !important}
    .cpv1-ticket-holes{left:94px}
    .cpv1-side-discount{font-size:24px;margin-top:24px}
    .cpv1-side-min{font-size:9px !important}
    .cpv1-side-order{padding-top:18px;font-size:8.5px !important}
}

/* =========================================================
   V97 — đồng bộ typography + bố cục chữ coupon theo mẫu F12
   ========================================================= */
.cpv1,
.cpv1 button,
.cpv1 input,
.cpv1 code,
.cpv1 span,
.cpv1 strong,
.cpv1 p,
.cpv1 h1,
.cpv1 h2{
    font-family:Roboto,Arial,sans-serif !important;
}
.cpv1-hero h1{
    font-family:Roboto,Arial,sans-serif !important;
    font-weight:800 !important;
    letter-spacing:-.03em !important;
}
.cpv1-card-label{
    font-weight:700 !important;
    letter-spacing:.11em !important;
}
.cpv1-code-row code{
    font-family:Roboto,Arial,sans-serif !important;
    font-weight:700 !important;
    letter-spacing:.02em !important;
}
.cpv1-copy{
    font-family:Roboto,Arial,sans-serif !important;
    font-weight:700 !important;
}

/* Trái coupon: Ưu đãi -> % -> Tối đa -> điều kiện đơn, giống F12. */
.cpv1-card-side{
    justify-content:flex-start !important;
    padding:24px 12px 19px !important;
    font-family:Roboto,Arial,sans-serif !important;
}
.cpv1-side-kicker{
    margin:0 !important;
    color:#fff !important;
    font-family:Roboto,Arial,sans-serif !important;
    font-size:10px !important;
    line-height:1.2 !important;
    font-weight:800 !important;
    letter-spacing:.02em !important;
    text-transform:none !important;
}
.cpv1-side-discount{
    margin-top:30px !important;
    color:#fff !important;
    font-family:Roboto,Arial,sans-serif !important;
    font-size:31px !important;
    line-height:1 !important;
    font-weight:900 !important;
    letter-spacing:-.035em !important;
}
.cpv1-side-max{
    display:block;
    width:100%;
    margin-top:9px;
    color:rgba(255,255,255,.96);
    font-family:Roboto,Arial,sans-serif !important;
    font-size:9px;
    line-height:1.35;
    font-weight:700;
    text-align:center;
}
.cpv1-side-min{
    display:block;
    width:100%;
    margin-top:auto !important;
    padding-top:18px;
    color:#fff !important;
    font-family:Roboto,Arial,sans-serif !important;
    font-size:9px !important;
    line-height:1.35 !important;
    font-weight:800 !important;
    letter-spacing:0 !important;
    text-align:center;
    text-transform:none !important;
}
.cpv1-side-order{display:none !important}

@media (max-width:575px){
    /* Search mobile V97 đã nằm trong header, vì vậy nội dung coupon chỉ cần cách nhẹ. */
    .cpv1{
        padding-top:18px !important;
        padding-bottom:22px !important;
    }
    .cpv1-hero{
        margin-bottom:24px !important;
    }
    .cpv1-hero-icon{
        margin-bottom:11px !important;
    }
    .cpv1-hero h1{
        font-size:29px !important;
        line-height:1.12 !important;
    }
    .cpv1-hero p{
        margin-top:8px !important;
        font-size:13px !important;
        line-height:1.55 !important;
    }
    .cpv1-available{
        margin-top:12px !important;
    }
    .cpv1-card{
        grid-template-columns:108px minmax(0,1fr) !important;
    }
    .cpv1-ticket-holes{
        left:108px !important;
    }
    .cpv1-card-side{
        min-height:220px !important;
        padding:21px 8px 18px !important;
    }
    .cpv1-side-kicker{
        font-size:9.5px !important;
    }
    .cpv1-side-discount{
        margin-top:25px !important;
        font-size:25px !important;
    }
    .cpv1-side-max{
        margin-top:7px !important;
        padding:0 2px;
        font-size:8.3px !important;
        line-height:1.3 !important;
    }
    .cpv1-side-min{
        padding-top:14px !important;
        font-size:8.5px !important;
        line-height:1.3 !important;
    }
    .cpv1-card-main{
        padding:17px 14px 16px 18px !important;
    }
    .cpv1-card-label{
        font-size:9px !important;
    }
    .cpv1-code-row code{
        font-size:17px !important;
    }
    .cpv1-meta>span{
        font-size:10px !important;
    }
    .cpv1-copy{
        height:40px !important;
        font-size:12px !important;
    }
}

/* =========================================================
   V98 — Coupon card compact theo cấu trúc F12
   Ưu đãi | tiêu đề + code + tiến độ | footer còn lượt + sao chép
   ========================================================= */
.cpv1-grid{
    grid-template-columns:repeat(2,minmax(0,520px))!important;
    justify-content:center!important;
    align-items:start!important;
    gap:18px!important;
}
.cpv1-card{
    display:grid!important;
    grid-template-columns:126px minmax(0,1fr)!important;
    width:100%!important;
    min-height:176px!important;
    border-radius:18px!important;
    overflow:hidden!important;
    box-shadow:0 8px 26px rgba(15,23,42,.05)!important;
}
.cpv1-card-side{
    min-height:176px!important;
    justify-content:flex-start!important;
    padding:18px 10px 15px!important;
}
.cpv1-side-kicker{
    font-size:10px!important;
    line-height:1.15!important;
    font-weight:700!important;
}
.cpv1-side-discount{
    margin-top:22px!important;
    font-size:29px!important;
    line-height:1!important;
    font-weight:800!important;
}
.cpv1-side-max{
    margin-top:7px!important;
    padding:0 4px!important;
    font-size:9px!important;
    line-height:1.25!important;
    font-weight:600!important;
}
.cpv1-side-min{
    margin-top:auto!important;
    padding-top:13px!important;
    font-size:9px!important;
    line-height:1.2!important;
    font-weight:700!important;
}
.cpv1-ticket-holes{
    top:0!important;
    bottom:0!important;
    left:auto!important;
    right:-8px!important;
    width:16px!important;
    transform:none!important;
    justify-content:space-evenly!important;
}
.cpv1-ticket-holes i{
    width:15px!important;
    height:15px!important;
    flex:0 0 15px!important;
}
.cpv1-card-main{
    min-height:176px!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:space-between!important;
    padding:16px 16px 13px 20px!important;
}
.cpv1-card-main:before{display:none!important}
.cpv1-card-body{min-width:0!important}
.cpv1-card-title{
    display:-webkit-box!important;
    overflow:hidden!important;
    color:#18181b!important;
    font-size:13px!important;
    line-height:1.35!important;
    font-weight:700!important;
    -webkit-box-orient:vertical!important;
    -webkit-line-clamp:2!important;
}
.cpv1-code-chip{
    display:inline-flex!important;
    align-items:center!important;
    max-width:100%!important;
    margin-top:8px!important;
    padding:4px 8px!important;
    border:1px solid #dcfce7!important;
    border-radius:8px!important;
    background:#f0fdf4!important;
    color:#16a34a!important;
    font-size:11px!important;
    line-height:1.2!important;
    font-weight:700!important;
    cursor:pointer!important;
}
.cpv1-code-chip span{
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
}
.cpv1-code-chip.is-copied{border-color:#bfdbfe!important;background:#eff6ff!important;color:#2563eb!important}
.cpv1-progress-label{
    display:block!important;
    margin-top:8px!important;
    color:#94a3b8!important;
    font-size:10px!important;
    line-height:1.2!important;
    font-weight:500!important;
}
.cpv1-progress{
    width:100%!important;
    height:5px!important;
    margin-top:5px!important;
    overflow:hidden!important;
    border-radius:999px!important;
    background:#e2e8f0!important;
}
.cpv1-progress-bar{
    display:block!important;
    height:100%!important;
    min-width:0!important;
    border-radius:inherit!important;
    background:linear-gradient(90deg,#22c55e,#16a34a)!important;
}
.cpv1-card-footer{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:8px!important;
    margin-top:12px!important;
    padding-top:10px!important;
    border-top:1px solid #f1f5f9!important;
}
.cpv1-expire{
    display:inline-flex!important;
    align-items:center!important;
    gap:5px!important;
    min-width:0!important;
    color:#71717a!important;
    font-size:10px!important;
    line-height:1.2!important;
    font-weight:500!important;
    white-space:nowrap!important;
}
.cpv1-expire svg{width:13px!important;height:13px!important;flex:0 0 13px!important}
.cpv1-copy{
    width:auto!important;
    height:30px!important;
    min-width:78px!important;
    margin:0!important;
    padding:0 10px!important;
    border:1px solid #dce5f0!important;
    border-radius:9px!important;
    background:#fff!important;
    color:#2563eb!important;
    box-shadow:none!important;
    font-size:10px!important;
    font-weight:600!important;
    gap:5px!important;
}
.cpv1-copy:hover{transform:none!important;background:#f8fbff!important;border-color:#bfdbfe!important;filter:none!important}
.cpv1-copy.is-copied{border-color:#bbf7d0!important;background:#f0fdf4!important;color:#16a34a!important}
.cpv1-copy svg{width:13px!important;height:13px!important}

/* Các phần tử layout cũ không còn dùng ở V98. */
.cpv1-card-top,.cpv1-code-row,.cpv1-rule,.cpv1-meta,.cpv1-copy-icon{display:none!important}

@media (max-width:900px){
    .cpv1-grid{grid-template-columns:minmax(0,520px)!important}
}
@media (max-width:575px){
    .cpv1{padding-top:14px!important}
    .cpv1-grid{grid-template-columns:1fr!important;gap:14px!important}
    .cpv1-card{
        grid-template-columns:112px minmax(0,1fr)!important;
        min-height:168px!important;
        border-radius:18px!important;
    }
    .cpv1-card-side{min-height:168px!important;padding:16px 8px 13px!important}
    .cpv1-side-discount{margin-top:20px!important;font-size:27px!important}
    .cpv1-side-max,.cpv1-side-min{font-size:8.5px!important}
    .cpv1-card-main{min-height:168px!important;padding:14px 12px 11px 17px!important}
    .cpv1-card-title{font-size:12px!important}
    .cpv1-code-chip{margin-top:7px!important;font-size:10px!important;padding:4px 7px!important}
    .cpv1-progress-label{font-size:9.5px!important}
    .cpv1-card-footer{margin-top:9px!important;padding-top:8px!important}
    .cpv1-expire{font-size:9.5px!important}
    .cpv1-copy{height:28px!important;min-width:70px!important;padding:0 8px!important;font-size:9.5px!important}
}

html.dark .cpv1-card-title{color:#fafafa!important}
html.dark .cpv1-code-chip{border-color:rgba(34,197,94,.2)!important;background:rgba(34,197,94,.1)!important;color:#4ade80!important}
html.dark .cpv1-progress{background:#27272a!important}
html.dark .cpv1-card-footer{border-top-color:#27272a!important}
html.dark .cpv1-expire{color:#a1a1aa!important}
html.dark .cpv1-copy{border-color:#3f3f46!important;background:#18181b!important;color:#60a5fa!important}

/* =========================================================
   V99 — sắp xếp coupon sát mẫu F12 + toast sao chép
   Không đổi dữ liệu/logic coupon.
   ========================================================= */
.cpv1-grid{
    grid-template-columns:repeat(2,minmax(0,480px))!important;
    gap:18px!important;
}
.cpv1-card{
    grid-template-columns:132px minmax(0,1fr)!important;
    min-height:184px!important;
    border-radius:17px!important;
    border-color:#e2e8f0!important;
    box-shadow:0 7px 22px rgba(15,23,42,.055)!important;
}
.cpv1-card-side{
    min-height:184px!important;
    padding:17px 10px 14px!important;
}
.cpv1-ticket-holes{
    right:-8px!important;
}
.cpv1-side-kicker{
    font-size:10px!important;
    font-weight:800!important;
    line-height:1.15!important;
}
.cpv1-side-discount{
    margin-top:20px!important;
    font-size:29px!important;
    font-weight:900!important;
}
.cpv1-side-max{
    max-width:112px!important;
    margin-top:7px!important;
    font-size:8.8px!important;
    font-weight:700!important;
    line-height:1.25!important;
    white-space:normal!important;
}
.cpv1-side-min{
    margin-top:auto!important;
    padding-top:11px!important;
    font-size:8.8px!important;
    font-weight:800!important;
}
.cpv1-card-main{
    min-height:184px!important;
    padding:14px 13px 11px 18px!important;
}
.cpv1-card-body{
    display:flex!important;
    min-width:0!important;
    flex-direction:column!important;
    align-items:flex-start!important;
}
.cpv1-card-title{
    width:100%!important;
    display:block!important;
    overflow:visible!important;
    color:#111827!important;
    font-size:12.5px!important;
    line-height:1.22!important;
    font-weight:800!important;
    letter-spacing:-.008em!important;
    -webkit-line-clamp:unset!important;
}
.cpv1-card-title>span{
    display:block!important;
    font:inherit!important;
    color:inherit!important;
}
.cpv1-card-title>span+span{
    margin-top:1px!important;
}
.cpv1-code-chip{
    width:auto!important;
    max-width:100%!important;
    margin-top:7px!important;
    padding:3px 7px!important;
    border:1px dashed #22c55e!important;
    border-radius:7px!important;
    background:#f0fdf4!important;
    color:#16a34a!important;
    font-size:9.5px!important;
    line-height:1.15!important;
    font-weight:700!important;
}
.cpv1-code-chip span{
    max-width:100%!important;
    font:inherit!important;
    color:inherit!important;
}
.cpv1-progress-label{
    margin-top:7px!important;
    color:#9ca3af!important;
    font-size:9.5px!important;
    line-height:1.1!important;
    font-weight:500!important;
}
.cpv1-progress{
    height:4px!important;
    margin-top:5px!important;
    background:#e5e7eb!important;
}
.cpv1-progress-bar{
    background:#22a447!important;
}
.cpv1-card-footer{
    min-height:40px!important;
    margin-top:9px!important;
    padding-top:9px!important;
    border-top:1px solid #e5e7eb!important;
}
.cpv1-expire{
    color:#6b7280!important;
    font-size:9.5px!important;
    font-weight:500!important;
}
.cpv1-copy{
    height:29px!important;
    min-width:76px!important;
    padding:0 9px!important;
    border:1px solid #22c55e!important;
    border-radius:9px!important;
    background:#fff!important;
    color:#16a34a!important;
    font-size:9.5px!important;
    font-weight:700!important;
}
.cpv1-copy:hover{
    border-color:#16a34a!important;
    background:#f0fdf4!important;
    color:#15803d!important;
}
.cpv1-copy.is-copied{
    border-color:#16a34a!important;
    background:#ecfdf5!important;
    color:#15803d!important;
}

/* Thông báo sau khi sao chép: nhỏ, không chặn thao tác. */
.cpv1-toast{
    position:fixed;
    z-index:99999;
    top:88px;
    right:22px;
    display:flex;
    align-items:center;
    gap:9px;
    max-width:min(360px,calc(100vw - 32px));
    min-height:44px;
    padding:10px 14px;
    border:1px solid #bbf7d0;
    border-radius:13px;
    background:#f0fdf4;
    color:#166534;
    box-shadow:0 14px 35px rgba(15,23,42,.13);
    font-family:Roboto,Arial,sans-serif!important;
    font-size:12px;
    font-weight:600;
    opacity:0;
    visibility:hidden;
    transform:translateY(-8px) scale(.98);
    transition:opacity .2s ease,transform .2s ease,visibility .2s ease;
    pointer-events:none;
}
.cpv1-toast.is-show{
    opacity:1;
    visibility:visible;
    transform:translateY(0) scale(1);
}
.cpv1-toast-icon{
    width:25px;
    height:25px;
    flex:0 0 25px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    background:#dcfce7;
    color:#16a34a;
}
.cpv1-toast-icon svg{width:14px;height:14px}
.cpv1-toast-text{font:inherit!important;color:inherit!important}

@media (max-width:900px){
    .cpv1-grid{grid-template-columns:minmax(0,480px)!important}
}
@media (max-width:575px){
    .cpv1-card{
        grid-template-columns:105px minmax(0,1fr)!important;
        min-height:178px!important;
    }
    .cpv1-card-side{min-height:178px!important;padding:16px 7px 13px!important}
    .cpv1-side-discount{margin-top:19px!important;font-size:26px!important}
    .cpv1-side-max,.cpv1-side-min{font-size:8px!important}
    .cpv1-card-main{min-height:178px!important;padding:13px 11px 10px 16px!important}
    .cpv1-card-title{font-size:11.5px!important;line-height:1.22!important}
    .cpv1-code-chip{font-size:9px!important;margin-top:6px!important}
    .cpv1-progress-label{margin-top:6px!important;font-size:9px!important}
    .cpv1-card-footer{min-height:37px!important;margin-top:8px!important;padding-top:8px!important}
    .cpv1-expire{font-size:9px!important}
    .cpv1-copy{height:28px!important;min-width:70px!important;font-size:9px!important}
    .cpv1-toast{
        top:82px;
        left:50%;
        right:auto;
        width:max-content;
        max-width:calc(100vw - 28px);
        transform:translate(-50%,-8px) scale(.98);
    }
    .cpv1-toast.is-show{transform:translate(-50%,0) scale(1)}
}
html.dark .cpv1-card-title{color:#fafafa!important}
html.dark .cpv1-card-footer{border-top-color:#3f3f46!important}
html.dark .cpv1-copy{background:#18181b!important;border-color:#22c55e!important;color:#4ade80!important}
html.dark .cpv1-toast{border-color:rgba(34,197,94,.28);background:#052e16;color:#bbf7d0}

/* =========================================================
   V100 — coupon sát bố cục F12 hơn
   - Text/title gọn và gần nhau
   - Đã dùng + progress nằm liền nhau
   - Mã coupon đặt dưới phần Đã dùng theo yêu cầu
   - Có divider ngang riêng, luôn nhìn thấy rõ
   ========================================================= */
.cpv1-card-main{
    display:flex!important;
    flex-direction:column!important;
}
.cpv1-card-body{
    flex:1 1 auto!important;
    gap:0!important;
}
.cpv1-card-title{
    margin:0!important;
    font-size:12.5px!important;
    line-height:1.14!important;
    font-weight:800!important;
    letter-spacing:-.012em!important;
}
.cpv1-card-title>span+span{
    margin-top:0!important;
}
.cpv1-progress-label{
    order:2!important;
    margin-top:8px!important;
    font-size:9.5px!important;
    line-height:1!important;
    font-weight:500!important;
    color:#9ca3af!important;
}
.cpv1-progress{
    order:3!important;
    width:100%!important;
    height:4px!important;
    margin-top:4px!important;
    border-radius:999px!important;
    overflow:hidden!important;
    background:#e5e7eb!important;
}
.cpv1-code-chip{
    order:4!important;
    display:inline-flex!important;
    align-items:center!important;
    align-self:flex-start!important;
    width:auto!important;
    max-width:100%!important;
    margin-top:7px!important;
    padding:3px 7px!important;
    border:1px dashed #22c55e!important;
    border-radius:7px!important;
    background:#f0fdf4!important;
    color:#16a34a!important;
    font-size:9.5px!important;
    line-height:1.12!important;
    font-weight:700!important;
}
.cpv1-divider{
    width:100%!important;
    height:1px!important;
    flex:0 0 1px!important;
    margin:8px 0 0!important;
    background:#dfe4ea!important;
}
.cpv1-card-footer{
    width:100%!important;
    min-height:36px!important;
    margin-top:0!important;
    padding-top:8px!important;
    border-top:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:10px!important;
}
.cpv1-expire{
    line-height:1!important;
}
.cpv1-copy{
    flex:0 0 auto!important;
}
@media (max-width:575px){
    .cpv1-card-title{
        font-size:11.5px!important;
        line-height:1.13!important;
    }
    .cpv1-progress-label{
        margin-top:7px!important;
        font-size:9px!important;
    }
    .cpv1-progress{
        margin-top:4px!important;
    }
    .cpv1-code-chip{
        margin-top:6px!important;
        font-size:9px!important;
    }
    .cpv1-divider{
        margin-top:7px!important;
    }
    .cpv1-card-footer{
        min-height:34px!important;
        padding-top:7px!important;
    }
}
html.dark .cpv1-divider{background:#3f3f46!important}

/* =========================================================
   V101 — sửa đúng vị trí "gạch" theo mẫu F12
   - Không có đường phân cách ngang phía trên footer.
   - Chỉ giữ progress track ngay dưới "Đã dùng ...%".
   - Footer Còn lượt + Sao chép nằm tự nhiên phía dưới, không có gạch kẻ.
   ========================================================= */
.cpv1-divider{display:none!important}
.cpv1-card-footer{
    margin-top:10px!important;
    padding-top:0!important;
    border-top:0!important;
}
@media (max-width:575px){
    .cpv1-card-footer{
        margin-top:9px!important;
        padding-top:0!important;
    }
}

/* =========================================================
   V102 — ticket left side matches F12 reference
   - separator belongs ONLY to the coloured left stub
   - compact vertical rhythm like the green reference ticket
   - moves the upper labels slightly lower
   - removes the large empty gap in the white section
   ========================================================= */
.cpv1-card{
    min-height:168px!important;
}
.cpv1-card-side{
    min-height:168px!important;
    padding:20px 10px 15px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
}
.cpv1-side-kicker{
    margin:6px 0 0!important;
    line-height:1!important;
}
.cpv1-side-discount{
    margin:15px 0 0!important;
    line-height:.95!important;
}
.cpv1-side-max{
    margin:7px 0 0!important;
    line-height:1.08!important;
}
.cpv1-side-separator{
    display:block!important;
    width:calc(100% - 14px)!important;
    height:1px!important;
    flex:0 0 1px!important;
    margin:17px auto 0!important;
    background:rgba(255,255,255,.22)!important;
    border:0!important;
}
.cpv1-side-min{
    width:100%!important;
    margin:10px 0 0!important;
    padding:0!important;
    line-height:1.05!important;
    text-align:center!important;
}

/* Keep the white area compact instead of pinning footer far away. */
.cpv1-card-main{
    min-height:168px!important;
    padding-top:16px!important;
    padding-bottom:12px!important;
    justify-content:flex-start!important;
}
.cpv1-card-body{
    flex:0 0 auto!important;
}
.cpv1-card-title{
    margin:0!important;
}
.cpv1-progress-label{
    margin-top:7px!important;
}
.cpv1-progress{
    margin-top:4px!important;
}
.cpv1-code-chip{
    margin-top:7px!important;
}
.cpv1-card-footer{
    margin-top:12px!important;
    padding-top:0!important;
}

@media (max-width:575px){
    .cpv1-card{min-height:164px!important}
    .cpv1-card-side{
        min-height:164px!important;
        padding:18px 7px 13px!important;
    }
    .cpv1-side-kicker{margin-top:5px!important}
    .cpv1-side-discount{margin-top:13px!important}
    .cpv1-side-max{margin-top:6px!important}
    .cpv1-side-separator{
        width:calc(100% - 12px)!important;
        margin-top:15px!important;
    }
    .cpv1-side-min{margin-top:9px!important}
    .cpv1-card-main{
        min-height:164px!important;
        padding-top:14px!important;
        padding-bottom:10px!important;
    }
    .cpv1-card-footer{margin-top:10px!important}
}

/* =========================================================
   V103 — cân lại phần trắng bên phải coupon
   - Giữ nguyên phần Ưu đãi bên trái của V102
   - Không ghim footer xuống đáy tạo khoảng trắng lớn
   - Gom title / đã dùng / progress / code / footer thành một cụm cân giữa theo chiều dọc
   ========================================================= */
.cpv1-card-main{
    display:grid!important;
    grid-template-rows:max-content max-content!important;
    align-content:center!important;
    justify-content:stretch!important;
    row-gap:12px!important;
    min-height:168px!important;
    padding:13px 14px 13px 20px!important;
}
.cpv1-card-body{
    display:flex!important;
    flex:0 0 auto!important;
    min-width:0!important;
    flex-direction:column!important;
    align-items:flex-start!important;
}
.cpv1-card-title{
    margin:0!important;
}
.cpv1-progress-label{
    margin-top:7px!important;
}
.cpv1-progress{
    margin-top:4px!important;
}
.cpv1-code-chip{
    margin-top:7px!important;
}
.cpv1-card-footer{
    align-self:auto!important;
    width:100%!important;
    min-height:30px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:10px!important;
}
.cpv1-expire,
.cpv1-copy{
    margin:0!important;
}

@media (max-width:575px){
    .cpv1-card-main{
        min-height:164px!important;
        padding:12px 11px 12px 16px!important;
        row-gap:10px!important;
    }
    .cpv1-card-footer{
        min-height:28px!important;
        margin:0!important;
        padding:0!important;
    }
}

/* =========================================================
   V104 — tạo khoảng thở trước footer
   Chỉ tăng khoảng cách sau khu coupon, không kéo page thành 100vh.
   ========================================================= */
.cpv1{
    padding-bottom:110px!important;
}

@media (max-width:767px){
    .cpv1{
        padding-bottom:72px!important;
    }
}

/* =========================================================
   V114 — giữ coupon đã dùng/hết lượt trong kho
   ========================================================= */
.cpv1-card.is-exhausted{
    --cpv1-card-bg:#f4f4f5!important;
    position:relative!important;
    border-color:#d9dde3!important;
    background:#f4f4f5!important;
    box-shadow:none!important;
    filter:grayscale(.96)!important;
    opacity:.78!important;
    transform:none!important;
}
.cpv1-card.is-exhausted:hover{
    transform:none!important;
    border-color:#d9dde3!important;
    box-shadow:none!important;
}
.cpv1-card.is-exhausted .cpv1-card-side{
    background:linear-gradient(155deg,#a1a1aa 0%,#71717a 58%,#52525b 100%)!important;
}
.cpv1-card.is-exhausted .cpv1-progress-bar{
    background:#a1a1aa!important;
}
.cpv1-card.is-exhausted .cpv1-code-chip,
.cpv1-card.is-exhausted .cpv1-copy,
.cpv1-card.is-exhausted .cpv1-expire{
    color:#71717a!important;
}
.cpv1-card.is-exhausted .cpv1-code-chip{
    border-color:#cbd0d6!important;
    background:#eceef1!important;
    cursor:not-allowed!important;
}
.cpv1-card.is-exhausted .cpv1-copy{
    border-color:#cbd0d6!important;
    background:#eceef1!important;
    color:#7b818a!important;
    cursor:not-allowed!important;
    pointer-events:none!important;
}
.cpv1-used-stamp{
    position:absolute!important;
    z-index:20!important;
    left:142px!important;
    right:14px!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:34px!important;
    padding:6px 10px!important;
    border-top:1px solid rgba(113,113,122,.28)!important;
    border-bottom:1px solid rgba(113,113,122,.28)!important;
    background:rgba(244,244,245,.82)!important;
    color:#71717a!important;
    font-family:Roboto,Arial,sans-serif!important;
    font-size:14px!important;
    line-height:1!important;
    font-weight:900!important;
    letter-spacing:.16em!important;
    text-align:center!important;
    white-space:nowrap!important;
    pointer-events:none!important;
}
@media(max-width:575px){
    .cpv1-used-stamp{
        left:118px!important;
        right:10px!important;
        min-height:30px!important;
        font-size:11px!important;
        letter-spacing:.12em!important;
    }
}
html.dark .cpv1-card.is-exhausted{
    --cpv1-card-bg:#27272a!important;
    border-color:#3f3f46!important;
    background:#27272a!important;
}
html.dark .cpv1-used-stamp{
    border-color:rgba(161,161,170,.25)!important;
    background:rgba(39,39,42,.88)!important;
    color:#a1a1aa!important;
}

/* =========================================================
   V115 — trạng thái coupon đã dùng đẹp hơn + dùng toast hệ thống
   ========================================================= */
.cpv1-toast{display:none!important}
.cpv1-card.is-exhausted{
    filter:none!important;
    opacity:1!important;
    background:#f7f7f8!important;
    border-color:#dfe3e8!important;
    overflow:hidden!important;
}
.cpv1-card.is-exhausted .cpv1-card-side{
    background:linear-gradient(155deg,#b5b8bd 0%,#8c9199 58%,#6b7280 100%)!important;
}
.cpv1-card.is-exhausted .cpv1-card-main{
    background:linear-gradient(180deg,#fafafa 0%,#f3f4f6 100%)!important;
}
.cpv1-card.is-exhausted .cpv1-card-title,
.cpv1-card.is-exhausted .cpv1-progress-label,
.cpv1-card.is-exhausted .cpv1-expire{
    color:#9ca3af!important;
}
.cpv1-card.is-exhausted .cpv1-code-chip{
    opacity:.62!important;
    text-decoration:line-through!important;
    text-decoration-thickness:1.5px!important;
}
.cpv1-used-stamp{
    left:calc(50% + 32px)!important;
    right:auto!important;
    top:51%!important;
    width:max-content!important;
    min-width:168px!important;
    min-height:0!important;
    padding:8px 16px!important;
    border:2px solid #9ca3af!important;
    border-radius:8px!important;
    background:rgba(255,255,255,.76)!important;
    color:#7c838d!important;
    box-shadow:inset 0 0 0 2px rgba(156,163,175,.12)!important;
    transform:translate(-50%,-50%) rotate(-5deg)!important;
    font-size:13px!important;
    line-height:1!important;
    font-weight:900!important;
    letter-spacing:.18em!important;
    text-shadow:0 1px 0 rgba(255,255,255,.65)!important;
}
.cpv1-used-stamp::before,
.cpv1-used-stamp::after{
    content:"";
    position:absolute;
    left:8px;
    right:8px;
    height:1px;
    background:rgba(156,163,175,.32);
}
.cpv1-used-stamp::before{top:4px}
.cpv1-used-stamp::after{bottom:4px}
@media(max-width:575px){
    .cpv1-used-stamp{
        left:calc(50% + 24px)!important;
        min-width:132px!important;
        padding:7px 10px!important;
        font-size:10px!important;
        letter-spacing:.13em!important;
    }
}
html.dark .cpv1-card.is-exhausted .cpv1-card-main{background:#27272a!important}
html.dark .cpv1-used-stamp{
    border-color:#71717a!important;
    background:rgba(39,39,42,.82)!important;
    color:#a1a1aa!important;
    text-shadow:none!important;
}