/* =========================================================================
   GiftTo — hệ thiết kế "luxury romantic"
   Nền lavender chuyển sắc, khối tối burgundy tương phản, thẻ bo lớn viền sáng.
   Mọi tên class cũ được giữ nguyên để các trang khác (dashboard, auth,
   editor, checkout) không phải sửa theo.
   ========================================================================= */

:root {
    /* --- Sắc thương hiệu --- */
    --rose: #ef5f86;
    --rose-deep: #d43f6b;
    --pink: #ef5f86;          /* alias cũ, giữ cho các trang đang dùng */
    --pink-soft: #fdeef3;
    --lilac: #a78bfa;
    --purple: #7c4ddb;
    --purple-deep: #5b2ec4;
    --purple-soft: #f2ebfd;
    --gold: #c99a3f;
    --gold-soft: #fbf3e2;

    /* --- Nền & chữ --- */
    --ink: #241a33;
    --ink-soft: #4a3f5c;
    --muted: #7a7090;
    --line: #ece3f8;
    --line-strong: #ddd0f0;
    --bg: #faf7fd;
    --card: #ffffff;

    /* --- Khối tối (khu QR / CTA) --- */
    --wine-900: #250d16;
    --wine-800: #3a1421;
    --wine-line: rgba(255, 205, 222, .16);

    /* --- Trạng thái --- */
    --ok: #10b981;
    --warn: #d99413;
    --danger: #ef4444;
    /* Bí danh cho --ok/--danger: templates.php, create.php, pricing.php, vouchers.php
       và vài trang admin đang gọi var(--green)/var(--red) — trước đây hai biến này
       không tồn tại nên chữ "Miễn phí", cảnh báo hết hạn… đổ về màu thừa kế. */
    --green: #10b981;
    --red: #ef4444;
    /* Tương tự: gop-y/pricing/templates/checkout/create/vouchers dùng
       var(--purple-light) cho viền và var(--pink-grad) cho nền nút. Thiếu biến
       thì cả khai báo `border` hỏng ở bước tính giá trị — viền mất hẳn. */
    --purple-light: #ddd0f0;
    --pink-grad: var(--grad-brand);

    /* --- Hình khối --- */
    --radius: 22px;
    --radius-lg: 30px;
    --radius-xl: 38px;

    /* --- Đổ bóng: mềm, nhiều lớp, ám tím --- */
    --shadow-xs: 0 1px 2px rgba(58, 26, 88, .05);
    --shadow: 0 2px 4px rgba(58, 26, 88, .04), 0 14px 34px -14px rgba(88, 44, 140, .18);
    --shadow-lg: 0 4px 10px rgba(58, 26, 88, .05), 0 30px 60px -22px rgba(120, 60, 170, .32);
    --shadow-xl: 0 8px 18px rgba(58, 26, 88, .06), 0 50px 90px -30px rgba(120, 60, 170, .40);
    --glow-rose: 0 18px 44px -14px rgba(232, 84, 128, .55);
    --glow-lilac: 0 18px 44px -14px rgba(139, 92, 246, .48);

    /* --- Gradient dùng lại --- */
    --grad-brand: linear-gradient(118deg, #f2708f 0%, #b06ae4 52%, #7c4ddb 100%);
    --grad-soft: linear-gradient(140deg, #fbeaf1 0%, #f0e6fb 55%, #eef0fd 100%);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    color: var(--ink);
    background: var(--bg);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Ánh sáng nền toàn trang — các quầng màu mờ nằm sau mọi nội dung.
   Dùng lớp cố định thay vì background trên body để cuộn trang không kéo theo. */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(760px 520px at 8% -6%, rgba(196, 152, 255, .34), transparent 62%),
        radial-gradient(680px 460px at 96% 2%, rgba(255, 158, 190, .30), transparent 60%),
        radial-gradient(900px 620px at 50% 108%, rgba(178, 166, 255, .20), transparent 62%),
        var(--bg);
}

img { max-width: 100%; display: block; }
a { color: var(--purple); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5em; font-weight: 800; letter-spacing: -.028em; }
h1 { font-size: clamp(2.15rem, 5.2vw, 3.7rem); letter-spacing: -.038em; }
h2 { font-size: clamp(1.65rem, 3.6vw, 2.5rem); letter-spacing: -.032em; }
h3 { font-size: 1.12rem; }
p { margin: 0 0 1em; }

::selection { background: rgba(176, 106, 228, .22); }

.container { width: min(1180px, 92vw); margin-inline: auto; }
.container-narrow { width: min(820px, 92vw); margin-inline: auto; }
.section { padding: 92px 0; position: relative; }
.section-sm { padding: 44px 0; }
.text-center { text-align: center; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.stack > * + * { margin-top: 14px; }

/* Chữ nhấn kiểu serif nghiêng — điểm sang trọng của bộ nhận diện */
.serif {
    font-family: 'Playfair Display', 'Be Vietnam Pro', Georgia, serif;
    font-style: italic;
    font-weight: 500;
    letter-spacing: -.01em;
}
.grad-text {
    background: var(--grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Nhãn nhỏ trên tiêu đề mỗi khu */
.eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 16px 7px 10px; border-radius: 999px;
    background: rgba(255, 255, 255, .78);
    border: 1px solid var(--line-strong);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-weight: 700; font-size: .82rem; letter-spacing: .01em;
    color: var(--purple);
    box-shadow: var(--shadow-xs);
    margin-bottom: 18px;
}
.eyebrow .dot {
    width: 22px; height: 22px; border-radius: 999px; display: grid; place-items: center;
    background: var(--grad-brand); color: #fff; font-size: .72rem;
}

.section-head { max-width: 640px; margin: 0 auto 52px; text-align: center; }
.section-head h2 { margin-bottom: 12px; }
.section-head p { color: var(--muted); font-size: 1.04rem; margin: 0; }

/* ---------- Nút ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    padding: 13px 26px; border-radius: 999px; border: 0; cursor: pointer;
    font: inherit; font-weight: 700; text-decoration: none; letter-spacing: -.01em;
    position: relative; overflow: hidden;
    transition: transform .22s cubic-bezier(.2, .9, .3, 1), box-shadow .22s ease, background .2s ease, border-color .2s ease, color .2s ease;
    white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 3px solid rgba(124, 77, 219, .35); outline-offset: 2px; }

.btn-primary {
    background: var(--grad-brand);
    background-size: 160% 100%;
    color: #fff;
    box-shadow: var(--glow-rose);
}
/* Vệt sáng chạy ngang khi rê chuột — gợi bề mặt bóng */
.btn-primary::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .38) 46%, transparent 68%);
    transform: translateX(-120%);
    transition: transform .7s cubic-bezier(.19, 1, .22, 1);
}
.btn-primary:hover { background-position: 100% 0; box-shadow: 0 22px 50px -14px rgba(232, 84, 128, .62); }
.btn-primary:hover::after { transform: translateX(120%); }

.btn-ghost {
    background: rgba(255, 255, 255, .82);
    color: var(--ink);
    border: 1.5px solid var(--line-strong);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: var(--shadow-xs);
}
.btn-ghost:hover { border-color: var(--lilac); color: var(--purple); box-shadow: var(--shadow); }
.btn-soft { background: var(--purple-soft); color: var(--purple-deep); }
.btn-soft:hover { background: #e9ddfb; }
.btn-danger { background: #fdecec; color: var(--danger); }
.btn-block { width: 100%; }
.btn-sm { padding: 9px 18px; font-size: .875rem; }
.btn-lg { padding: 16px 34px; font-size: 1.05rem; }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }

/* Nút trên nền tối */
.on-dark .btn-ghost {
    background: rgba(255, 255, 255, .07);
    border-color: rgba(255, 214, 230, .26);
    color: #fff;
}
.on-dark .btn-ghost:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 214, 230, .5); color: #fff; }

/* ---------- Header ---------- */
.site-header {
    position: sticky; top: 0; z-index: 50;
    background: rgba(252, 249, 255, .72);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border-bottom: 1px solid rgba(236, 227, 248, .9);
}
.site-header .inner { display: flex; align-items: center; gap: 18px; height: 74px; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 900; font-size: 1.24rem; color: var(--ink); letter-spacing: -.03em; }
.logo:hover { text-decoration: none; }
.logo-mark {
    width: 38px; height: 38px; border-radius: 13px; display: grid; place-items: center;
    background: var(--grad-brand); color: #fff; font-size: 1.08rem;
    box-shadow: var(--glow-rose);
    position: relative; overflow: hidden;
}
.logo-mark::after {
    content: ''; position: absolute; inset: 0 0 55% 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, .45), transparent);
}
.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav a {
    padding: 9px 14px; border-radius: 999px; color: var(--ink-soft); font-weight: 600; font-size: .93rem;
    transition: background .18s ease, color .18s ease;
}
.nav a:hover, .nav a.is-active { background: var(--purple-soft); color: var(--purple-deep); text-decoration: none; }
.nav-toggle { display: none; margin-left: auto; background: none; border: 0; font-size: 1.6rem; cursor: pointer; color: var(--ink); }

/* Các nút đặc biệt trên thanh điều hướng */
.nav-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px; border-radius: 999px;
    font-weight: 700; font-size: .88rem; font-family: inherit;
    border: 1px solid transparent; cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.nav-pill:hover { text-decoration: none; transform: translateY(-1px); }
.nav-pill-gold { background: var(--gold-soft); color: #96701f; border-color: #f0dcae; }
.nav-pill-gold:hover { background: #f7ebd2; box-shadow: 0 8px 18px -8px rgba(201, 154, 63, .5); }
.nav-pill-rose { background: var(--pink-soft); color: var(--rose-deep); border-color: #fbd7e3; }
.nav-pill-rose:hover { background: #fce3ec; box-shadow: 0 8px 18px -8px rgba(212, 63, 107, .45); }
.nav-pill-lilac { background: var(--purple-soft); color: var(--purple-deep); border-color: #e3d6fa; }
.nav-pill-lilac:hover { background: #e9ddfb; box-shadow: 0 8px 18px -8px rgba(124, 77, 219, .45); }
.nav-pill .badge-count {
    background: var(--rose-deep); color: #fff; font-size: 10px; font-weight: 800;
    padding: 1px 6px; border-radius: 999px; min-width: 17px; text-align: center;
    box-shadow: 0 0 0 3px rgba(212, 63, 107, .14);
}
.nav-avatar {
    width: 23px; height: 23px; border-radius: 50%; display: inline-flex;
    align-items: center; justify-content: center; font-size: 11px; font-weight: 800;
    text-transform: uppercase; background: var(--grad-brand); color: #fff;
}

/* Menu thả xuống dùng chung cho thông báo + tài khoản */
.head-pop {
    position: absolute; top: calc(100% + 12px); z-index: 999;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--line-strong);
    border-radius: 24px;
    box-shadow: var(--shadow-xl);
    padding: 8px;
    animation: popIn .2s cubic-bezier(.19, 1, .22, 1);
}
.head-pop-title {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 12px; margin-bottom: 6px;
    border-bottom: 1px solid var(--line);
    font-weight: 800; font-size: .93rem; color: var(--ink);
}
.head-pop-close { border: 0; background: none; font-size: 1.25rem; line-height: 1; cursor: pointer; color: var(--muted); }
.head-pop-close:hover { color: var(--ink); }
.head-pop-item {
    display: flex; align-items: center; gap: 11px;
    padding: 10px 13px; border-radius: 14px;
    color: var(--ink-soft); font-weight: 600; font-size: .89rem;
    transition: background .15s ease, color .15s ease;
}
.head-pop-item:hover { background: var(--purple-soft); color: var(--purple-deep); text-decoration: none; }
.head-pop-item.is-admin { color: var(--purple-deep); font-weight: 700; }
.head-pop-item.is-danger { color: var(--danger); font-weight: 700; }
.head-pop-item.is-danger:hover { background: #fdecec; color: #b4262a; }
.head-pop-sep { border: 0; border-top: 1px solid var(--line); margin: 6px 8px; }

.ann-card {
    background: linear-gradient(140deg, #fdf1f6, #f5edfd);
    border: 1px solid var(--line-strong);
    border-radius: 18px; padding: 13px 15px; text-align: left;
}
.ann-card h5 { font-weight: 800; color: var(--rose-deep); font-size: .9rem; margin: 0 0 4px; }
.ann-card p { font-size: .82rem; color: var(--ink-soft); line-height: 1.55; white-space: pre-line; margin: 0 0 10px; }
.ann-card p:last-child { margin-bottom: 0; }

@media (max-width: 980px) {
    .nav-toggle { display: block; }
    .nav {
        position: absolute; top: 74px; left: 0; right: 0; flex-direction: column; align-items: stretch;
        background: rgba(255, 255, 255, .97);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        padding: 14px; gap: 4px; border-bottom: 1px solid var(--line);
        box-shadow: var(--shadow-lg); display: none;
    }
    .nav.is-open { display: flex; }
    .nav .btn, .nav .nav-pill { width: 100%; justify-content: center; }
    .head-pop { position: static; width: auto !important; box-shadow: none; margin-top: 6px; }
}

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding: 74px 0 96px; }
/* z-index giữ nội dung nằm trên lớp tim rơi (GiftFX ở cuối index.php).
   Không dựa vào z-index âm cho lớp hiệu ứng: .hero không tạo stacking context,
   nên chỉ cần ai đó thêm transform/opacity vào .hero là hiệu ứng biến mất. */
.hero-grid {
    display: grid; grid-template-columns: 1.02fr .98fr; gap: 56px; align-items: center;
    position: relative; z-index: 1;
}
.hero .eyebrow { background: rgba(255, 255, 255, .86); color: var(--rose-deep); }
.hero h1 { margin-bottom: 20px; }
.hero h1 span { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-lead { font-size: 1.12rem; color: var(--ink-soft); max-width: 47ch; line-height: 1.75; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

.hero-stats {
    display: flex; gap: 14px; margin-top: 42px; flex-wrap: wrap;
    padding-top: 34px; border-top: 1px solid var(--line-strong);
}
.hero-stats > div {
    flex: 1 1 120px;
    padding: 2px 0;
}
.hero-stats b {
    display: block; font-size: 1.72rem; font-weight: 800; letter-spacing: -.035em;
    background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-stats span { font-size: .84rem; color: var(--muted); font-weight: 600; }

/* Hàng tin cậy nhỏ dưới nút CTA */
.trust-row { display: flex; align-items: center; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.trust-faces { display: flex; }
.trust-faces span {
    width: 32px; height: 32px; border-radius: 999px; display: grid; place-items: center;
    font-size: .95rem; border: 2.5px solid #fff; margin-left: -10px;
    background: var(--grad-soft); box-shadow: var(--shadow-xs);
}
.trust-faces span:first-child { margin-left: 0; }
.trust-row .trust-text { font-size: .85rem; color: var(--muted); font-weight: 600; }
.trust-row .trust-text b { color: var(--ink); }

@media (max-width: 960px) {
    .hero { padding: 48px 0 64px; }
    .hero-grid { grid-template-columns: 1fr; gap: 44px; }
    .hero-lead { max-width: none; }
}

/* --- Sân khấu thiết bị bên phải hero --- */
.hero-stage {
    position: relative;
    min-height: 460px;
    display: grid;
    place-items: center;
    perspective: 1400px;
}
/* Quầng sáng phía sau cụm thiết bị */
.hero-stage::before {
    content: ''; position: absolute; inset: 6% -4%;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 45%, rgba(216, 168, 255, .5), rgba(255, 168, 196, .28) 45%, transparent 70%);
    filter: blur(28px);
}

.mock-laptop {
    position: relative; width: min(100%, 460px);
    transform: rotateY(-9deg) rotateX(4deg) rotateZ(.6deg);
    filter: drop-shadow(0 40px 60px rgba(90, 40, 130, .28));
}
.mock-laptop .screen {
    border-radius: 16px 16px 6px 6px;
    background: #1a1023;
    padding: 10px 10px 12px;
    border: 1px solid rgba(255, 255, 255, .18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
}
.mock-laptop .viewport {
    border-radius: 9px; overflow: hidden; aspect-ratio: 16 / 10;
    background: linear-gradient(150deg, #f7ecf6, #efe6fb 55%, #fbeaf1);
    position: relative;
}
.mock-laptop .base {
    height: 13px; margin: 0 -9%;
    border-radius: 0 0 12px 12px;
    background: linear-gradient(180deg, #d8cde6, #ada0c4);
    box-shadow: 0 12px 22px -8px rgba(90, 40, 130, .4);
}
.mock-laptop .base::after {
    content: ''; display: block; width: 84px; height: 4px; margin: 0 auto;
    border-radius: 0 0 6px 6px; background: rgba(0, 0, 0, .14);
}

.mock-phone {
    position: absolute; right: -2%; bottom: -4%; width: 168px;
    border-radius: 30px; padding: 8px;
    background: linear-gradient(160deg, #2a1a38, #17101f);
    border: 1px solid rgba(255, 255, 255, .2);
    box-shadow: 0 32px 60px -20px rgba(70, 25, 110, .58), inset 0 1px 0 rgba(255, 255, 255, .25);
    transform: rotateY(-9deg) rotate(3deg);
    animation: floaty 7s ease-in-out infinite;
}
.mock-phone .viewport {
    border-radius: 23px; overflow: hidden; aspect-ratio: 9 / 18;
    background: linear-gradient(165deg, #fdf0f6, #efe6fb);
    position: relative;
}
.mock-phone .notch {
    position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
    width: 52px; height: 6px; border-radius: 99px; background: rgba(20, 12, 30, .55); z-index: 3;
}

/* Nội dung giả lập bên trong màn hình */
.mock-ui { position: absolute; inset: 0; padding: 9%; display: flex; flex-direction: column; gap: 7%; }
.mock-ui .bar { height: 7px; border-radius: 99px; background: rgba(124, 77, 219, .18); }
.mock-ui .bar.w-70 { width: 70%; }
.mock-ui .bar.w-45 { width: 45%; }
.mock-ui .bar.w-90 { width: 90%; }
.mock-ui .bar.accent { background: var(--grad-brand); opacity: .8; }
.mock-ui .tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; flex: 1; }
.mock-ui .tile {
    border-radius: 10px;
    background: linear-gradient(150deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .55));
    border: 1px solid rgba(255, 255, 255, .9);
    box-shadow: 0 6px 14px -6px rgba(90, 40, 130, .28);
    display: grid; place-items: center; font-size: 1.35rem;
}
.mock-ui .pill {
    align-self: flex-start; padding: 5px 13px; border-radius: 99px;
    background: var(--grad-brand); color: #fff; font-size: .58rem; font-weight: 800;
    box-shadow: var(--glow-rose);
}

/* Vật thể 3D bay quanh sân khấu */
.orb {
    position: absolute; z-index: 2;
    animation: floaty 6s ease-in-out infinite;
    filter: drop-shadow(0 16px 26px rgba(150, 60, 120, .3));
}
.orb svg { display: block; width: 100%; height: auto; }
.orb-1 { width: 96px; top: 2%; left: -4%; animation-delay: 0s; }
.orb-2 { width: 62px; top: 26%; right: -6%; animation-delay: 1.1s; }
.orb-3 { width: 54px; bottom: 14%; left: 4%; animation-delay: 2.2s; }

/* Thẻ nổi "vừa có người gửi quà" */
.hero-toast {
    position: absolute; z-index: 4; left: -6%; bottom: 16%;
    display: flex; align-items: center; gap: 10px;
    padding: 11px 16px 11px 12px; border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, .95);
    box-shadow: var(--shadow-lg);
    animation: floaty 8s ease-in-out infinite reverse;
}
.hero-toast .ico {
    width: 32px; height: 32px; border-radius: 999px; display: grid; place-items: center;
    background: var(--grad-brand); color: #fff; font-size: .9rem;
}
.hero-toast b { display: block; font-size: .8rem; line-height: 1.3; }
.hero-toast span { font-size: .72rem; color: var(--muted); }

@media (max-width: 1080px) { .hero-toast { display: none; } }
@media (max-width: 960px) {
    .hero-stage { min-height: 400px; }
    .mock-laptop { transform: none; width: min(100%, 420px); }
    .mock-phone { transform: rotate(3deg); }
}
@media (max-width: 520px) {
    .hero-stage { min-height: 320px; }
    .mock-phone { width: 122px; right: -1%; }
    .orb-1 { width: 70px; }
}

/* Thẻ quà cũ (một số trang còn dùng) */
.hero-card {
    position: relative; border-radius: var(--radius-lg); padding: 28px; color: #fff; min-height: 340px;
    background: linear-gradient(150deg, #f2708f, #7c4ddb);
    box-shadow: var(--shadow-xl); overflow: hidden; display: grid; place-items: center; text-align: center;
}
.hero-card .float { position: absolute; animation: floaty 6s ease-in-out infinite; opacity: .9; font-size: 1.6rem; }
@keyframes floaty { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-16px) rotate(6deg); } }
@keyframes popIn { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } }

/* ---------- Dải logo / tin cậy ---------- */
.marquee-band {
    border-block: 1px solid var(--line);
    background: rgba(255, 255, 255, .55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 22px 0;
}
.marquee-band .row {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    gap: 14px 34px;
}
.marquee-band .item {
    display: inline-flex; align-items: center; gap: 9px;
    font-weight: 700; font-size: .88rem; color: var(--ink-soft); white-space: nowrap;
}
.marquee-band .item .ico { font-size: 1.05rem; }

/* ---------- Lưới & thẻ ---------- */
.grid { display: grid; gap: 24px; }
.grid-3 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.card {
    background: var(--card); border-radius: var(--radius); border: 1px solid var(--line);
    box-shadow: var(--shadow); overflow: hidden;
}
.card-body { padding: 22px; }

/* Thẻ mẫu quà — viền phát sáng khi rê chuột, giống các ô trong ảnh mẫu */
.tpl-card {
    display: flex; flex-direction: column; position: relative;
    border-radius: var(--radius-lg);
    transition: transform .35s cubic-bezier(.19, 1, .22, 1), box-shadow .35s ease, border-color .35s ease;
}
.tpl-card::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    box-shadow: inset 0 0 0 1.5px transparent;
    transition: box-shadow .35s ease;
}
.tpl-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
    border-color: transparent;
}
.tpl-card:hover::after { box-shadow: inset 0 0 0 1.5px rgba(176, 106, 228, .55); }
.tpl-thumb {
    position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden;
    color: #fff; text-align: center;
}
.tpl-thumb .emoji { font-size: 3.4rem; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .25)); animation: floaty 5s ease-in-out infinite; }
/* Mẫu có file cover.svg thì tranh phủ kín ô thumbnail thay cho emoji */
.tpl-cover { position: absolute; inset: 0; }
.tpl-cover svg {
    width: 100%; height: 100%; display: block;
    transition: transform .6s cubic-bezier(.19, 1, .22, 1);
}
.tpl-card:hover .tpl-cover svg { transform: scale(1.07); }
.tpl-thumb::after {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(circle at 28% 18%, rgba(255, 255, 255, .35), transparent 55%),
        linear-gradient(180deg, transparent 62%, rgba(36, 16, 52, .22));
}
.tpl-card h3 { font-size: 1.06rem; margin-bottom: 4px; }
.tpl-card .desc { font-size: .875rem; color: var(--muted); margin: 0; flex: 1; line-height: 1.6; }
.tpl-card .card-body { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.tpl-actions { display: flex; gap: 8px; }

.tag {
    display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--purple-soft);
    color: var(--purple-deep); font-size: .75rem; font-weight: 700;
}
.tag-pink { background: var(--pink-soft); color: var(--rose-deep); }
.tag-ok { background: #e4f7ef; color: #0f7a55; }
.tag-warn { background: var(--gold-soft); color: #96701f; }
.tag-danger { background: #fdecec; color: #b4262a; }

/* ---------- Bộ lọc ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 30px; }
.filters a {
    padding: 10px 20px; border-radius: 999px;
    background: rgba(255, 255, 255, .8); border: 1px solid var(--line-strong);
    color: var(--ink-soft); font-weight: 600; font-size: .9rem;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.filters a:hover { transform: translateY(-2px); color: var(--purple-deep); border-color: var(--lilac); text-decoration: none; }
.filters a.is-active {
    background: var(--grad-brand); color: #fff; border-color: transparent;
    box-shadow: var(--glow-lilac); text-decoration: none;
}

/* ---------- Form ---------- */
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 700; font-size: .9rem; margin-bottom: 7px; }
.field .hint { font-size: .8rem; color: var(--muted); margin-top: 6px; }
.input, .textarea, .select {
    width: 100%; padding: 13px 16px; border: 1.5px solid var(--line-strong); border-radius: 15px;
    font: inherit; background: var(--card); color: var(--ink);
    transition: border-color .16s ease, box-shadow .16s ease;
}
.input:focus, .textarea:focus, .select:focus {
    outline: 0; border-color: var(--lilac); box-shadow: 0 0 0 4px rgba(167, 139, 250, .18);
}
.input::placeholder, .textarea::placeholder { color: #b3a9c6; }
.textarea { min-height: 120px; resize: vertical; line-height: 1.65; }
.input-error { border-color: var(--danger); }
.error-text { color: var(--danger); font-size: .82rem; margin-top: 5px; }

.switch { display: flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; }
.switch input { width: 20px; height: 20px; accent-color: var(--purple); }

.color-row { display: flex; align-items: center; gap: 10px; }
.color-row input[type=color] { width: 52px; height: 42px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--card); padding: 3px; cursor: pointer; }

/* ---------- Thông báo ---------- */
.alert { padding: 14px 18px; border-radius: 15px; margin-bottom: 16px; font-weight: 600; font-size: .92rem; }
.alert-success { background: #e4f7ef; color: #0f7a55; }
.alert-error { background: #fdecec; color: #b4262a; }
.alert-info { background: var(--purple-soft); color: var(--purple-deep); }
.alert-warning { background: var(--gold-soft); color: #96701f; }

/* ---------- Bảng ---------- */
.table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow-xs); }
table.table { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 620px; }
table.table th, table.table td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--line); }
table.table th { background: #fbf8ff; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 800; }
table.table tr:last-child td { border-bottom: 0; }

/* ---------- Trạng thái khoá theo gói ---------- */
.link-box.is-locked input { color: var(--muted); background: var(--bg); cursor: not-allowed; }
.qr-locked {
    width: 260px; max-width: 100%; aspect-ratio: 1;
    display: flex; align-items: center; justify-content: center;
    font-size: 3rem; border-radius: var(--radius);
    background: repeating-linear-gradient(45deg, var(--bg), var(--bg) 10px, var(--pink-soft) 10px, var(--pink-soft) 20px);
    border: 1px dashed var(--line-strong); margin-inline: auto;
}

/* ---------- Biểu đồ quản trị ---------- */
.chart-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.chart { display: block; width: 100%; height: 110px; overflow: visible; }
.chart rect { transition: opacity .15s; }
.chart:hover rect { opacity: .45; }
.chart rect:hover { opacity: 1; }
.chart-axis { display: flex; justify-content: space-between; margin-top: 6px; }

/* ---------- Khu ba bước ---------- */
.steps { counter-reset: step; }
.step-num {
    width: 52px; height: 52px; border-radius: 17px; color: #fff;
    background: var(--grad-brand);
    display: grid; place-items: center; font-weight: 900; font-size: 1.2rem; margin-bottom: 16px;
    box-shadow: var(--glow-lilac);
    position: relative; overflow: hidden;
}
.step-num::after {
    content: ''; position: absolute; inset: 0 0 58% 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, .42), transparent);
}

.step-card {
    position: relative; padding: 34px 30px 30px;
    border-radius: var(--radius-lg);
    background: linear-gradient(160deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .78));
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    transition: transform .35s cubic-bezier(.19, 1, .22, 1), box-shadow .35s ease;
    overflow: hidden;
}
.step-card::before {
    content: ''; position: absolute; top: -60px; right: -60px; width: 180px; height: 180px;
    border-radius: 50%; background: radial-gradient(circle, rgba(196, 152, 255, .28), transparent 68%);
    pointer-events: none;
}
.step-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.step-card h3 { font-size: 1.2rem; margin-bottom: 8px; }
.step-card p { margin: 0; color: var(--muted); font-size: .93rem; }
.step-art {
    height: 108px; margin-bottom: 20px; display: grid; place-items: center;
    position: relative;
}
.step-art svg { width: 108px; height: 108px; filter: drop-shadow(0 16px 24px rgba(140, 60, 160, .26)); }
.step-index {
    position: absolute; top: 22px; right: 26px;
    font-family: 'Playfair Display', Georgia, serif; font-style: italic;
    font-size: 2.6rem; font-weight: 700; line-height: 1;
    color: rgba(124, 77, 219, .12);
}

/* ---------- Khu nền tối (QR / xem thử) ---------- */
.section-dark {
    position: relative; overflow: hidden; color: #fff;
    background: linear-gradient(150deg, var(--wine-900) 0%, var(--wine-800) 52%, #1d0c1f 100%);
    padding: 96px 0;
}
.section-dark::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(700px 480px at 78% 42%, rgba(255, 122, 158, .28), transparent 62%),
        radial-gradient(600px 420px at 12% 8%, rgba(150, 100, 235, .22), transparent 60%);
}
.section-dark > * { position: relative; z-index: 1; }
.section-dark h2, .section-dark h3 { color: #fff; }
.section-dark p { color: rgba(255, 232, 240, .75); }
.section-dark .muted { color: rgba(255, 232, 240, .62); }
.section-dark .eyebrow {
    background: rgba(255, 255, 255, .08);
    border-color: var(--wine-line);
    color: #ffd3e0;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.section-dark .section-head p { color: rgba(255, 232, 240, .72); }

.dark-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 60px; align-items: center; }
@media (max-width: 960px) { .dark-grid { grid-template-columns: 1fr; gap: 44px; } }

.feature-list { list-style: none; padding: 0; margin: 28px 0 34px; display: grid; gap: 16px; }
.feature-list li { display: flex; gap: 14px; align-items: flex-start; }
.feature-list .ico {
    flex: 0 0 auto; width: 38px; height: 38px; border-radius: 13px; display: grid; place-items: center;
    background: rgba(255, 255, 255, .1); border: 1px solid var(--wine-line);
    font-size: 1rem;
}
.feature-list b { display: block; font-size: .97rem; color: #fff; }
.feature-list span { font-size: .87rem; color: rgba(255, 232, 240, .68); line-height: 1.55; }

/* Cụm điện thoại + ảnh polaroid trong khu tối */
.qr-stage { position: relative; display: grid; place-items: center; min-height: 420px; }
.qr-stage::before {
    content: ''; position: absolute; width: 340px; height: 340px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 120, 160, .45), transparent 66%);
    filter: blur(30px);
}
.qr-stage .mock-phone {
    position: relative; right: auto; bottom: auto; width: 210px;
    transform: rotate(-3deg);
    box-shadow: 0 44px 80px -24px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.qr-stage .mock-phone .viewport { background: linear-gradient(170deg, #2a1220, #3d1728); }
.polaroid {
    position: absolute; width: 108px; padding: 8px 8px 22px;
    background: #fffaf7; border-radius: 6px;
    box-shadow: 0 22px 40px -14px rgba(0, 0, 0, .6);
    animation: floaty 9s ease-in-out infinite;
}
.polaroid i {
    display: block; aspect-ratio: 1; border-radius: 3px;
    background: linear-gradient(150deg, #f4c9d9, #cbb4ef);
    display: grid; place-items: center; font-size: 1.6rem; font-style: normal;
}
.polaroid-1 { top: 8%; left: 2%; transform: rotate(-11deg); animation-delay: .4s; }
.polaroid-2 { bottom: 10%; right: 0%; transform: rotate(9deg); animation-delay: 1.8s; }
@media (max-width: 520px) { .polaroid { width: 82px; } .qr-stage .mock-phone { width: 168px; } }

/* Ô mã QR sáng trong khu tối */
.qr-chip {
    position: absolute; right: 2%; top: 12%;
    width: 92px; padding: 9px; border-radius: 16px;
    background: rgba(255, 255, 255, .95);
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, .6);
    transform: rotate(6deg);
    animation: floaty 7.5s ease-in-out infinite reverse;
}
.qr-chip .grid-dots {
    aspect-ratio: 1; border-radius: 7px;
    background:
        linear-gradient(90deg, #241a33 25%, transparent 0) 0 0 / 25% 25%,
        linear-gradient(0deg, #241a33 25%, transparent 0) 0 0 / 25% 25%,
        #fff;
    opacity: .82;
}

/* ---------- Bảng giá ---------- */
.price-card {
    text-align: center; padding: 38px 28px; position: relative;
    border-radius: var(--radius-lg);
    transition: transform .35s cubic-bezier(.19, 1, .22, 1), box-shadow .35s ease;
}
.price-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.price-card h3 { font-size: 1.05rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 800; }
.price-card .price {
    font-size: 2.5rem; font-weight: 900; margin: 10px 0; letter-spacing: -.04em;
    background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.price-card ul { list-style: none; padding: 0; margin: 22px 0 26px; text-align: left; }
.price-card li { padding: 8px 0 8px 30px; position: relative; font-size: .92rem; color: var(--ink-soft); }
.price-card li::before {
    content: '✓'; position: absolute; left: 0; top: 8px;
    width: 20px; height: 20px; border-radius: 999px;
    background: rgba(16, 185, 129, .12); color: var(--ok);
    display: grid; place-items: center; font-size: .7rem; font-weight: 900;
}
/* Gói nổi bật: viền gradient thật bằng lớp phủ, tránh cắt bo góc */
.price-card.is-featured {
    border-color: transparent;
    box-shadow: var(--shadow-xl);
    background:
        linear-gradient(var(--card), var(--card)) padding-box,
        var(--grad-brand) border-box;
    border: 2px solid transparent;
    transform: translateY(-8px);
}
.price-card.is-featured:hover { transform: translateY(-14px); }
.ribbon {
    position: absolute; top: 18px; right: -34px; transform: rotate(38deg);
    background: var(--grad-brand); color: #fff;
    padding: 5px 40px; font-size: .7rem; font-weight: 800; letter-spacing: .03em;
    box-shadow: 0 6px 16px -6px rgba(212, 63, 107, .6);
}

/* ---------- Thẻ đánh giá ---------- */
.review-card {
    display: flex; flex-direction: column; justify-content: space-between;
    padding: 26px; border-radius: var(--radius-lg);
    background: var(--card); border: 1px solid var(--line);
    box-shadow: var(--shadow);
    transition: transform .35s cubic-bezier(.19, 1, .22, 1), box-shadow .35s ease;
}
.review-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.review-card .head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.review-card .stars { color: var(--gold); font-size: 1rem; letter-spacing: 2px; }
.review-card .quote {
    font-family: 'Playfair Display', Georgia, serif; font-style: italic;
    font-size: 1.02rem; line-height: 1.65; color: var(--ink-soft); margin-bottom: 20px;
}
.review-card .tpl-chip {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin-bottom: 16px; padding: 9px 14px; border-radius: 14px;
    background: linear-gradient(120deg, var(--pink-soft), var(--purple-soft));
    border: 1px solid var(--line-strong);
    font-size: .81rem; font-weight: 700;
}
.review-card .tpl-chip .name { color: var(--rose-deep); }
.review-card .tpl-chip a { color: var(--purple-deep); white-space: nowrap; }
.review-card .who { display: flex; align-items: center; gap: 11px; }
.review-card .avatar {
    width: 42px; height: 42px; border-radius: 999px; display: grid; place-items: center;
    background: var(--grad-brand); color: #fff; font-weight: 800; font-size: 1rem;
    box-shadow: var(--glow-rose);
}
.review-card .who b { display: block; font-size: .92rem; }
.review-card .who span { font-size: .78rem; color: var(--muted); }

.rating-band {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--gold-soft); color: #96701f;
    border: 1px solid #f0dcae;
    font-weight: 800; padding: 7px 18px; border-radius: 999px; font-size: .86rem; margin-bottom: 14px;
}

/* ---------- Câu hỏi thường gặp ---------- */
.faq-item {
    border-radius: 20px; border: 1px solid var(--line); background: var(--card);
    box-shadow: var(--shadow-xs); margin-bottom: 12px; overflow: hidden;
    transition: box-shadow .25s ease, border-color .25s ease;
}
.faq-item[open] { border-color: var(--line-strong); box-shadow: var(--shadow); }
.faq-item summary {
    cursor: pointer; font-weight: 700; padding: 20px 24px; list-style: none;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    font-size: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: '+'; flex: 0 0 auto;
    width: 28px; height: 28px; border-radius: 999px;
    background: var(--purple-soft); color: var(--purple-deep);
    display: grid; place-items: center; font-size: 1.1rem; font-weight: 700;
    transition: transform .25s ease, background .25s ease;
}
.faq-item[open] summary::after { content: '+'; transform: rotate(45deg); background: var(--grad-brand); color: #fff; }
.faq-item .answer { padding: 0 24px 22px; color: var(--muted); margin: 0; font-size: .95rem; }

/* ---------- Dải kêu gọi hành động cuối trang ---------- */
.cta-band {
    position: relative; overflow: hidden;
    border-radius: var(--radius-xl);
    padding: 68px 40px;
    text-align: center; color: #fff;
    background: linear-gradient(135deg, #b8446f 0%, #7c3fbd 55%, #5b2ec4 100%);
    box-shadow: var(--shadow-xl);
}
.cta-band::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(520px 340px at 16% 8%, rgba(255, 255, 255, .26), transparent 62%),
        radial-gradient(460px 320px at 88% 96%, rgba(255, 190, 215, .3), transparent 60%);
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; margin-bottom: 12px; }
.cta-band p { color: rgba(255, 236, 244, .85); margin-bottom: 28px; font-size: 1.05rem; }
.cta-band .btn-ghost {
    background: #fff; color: var(--purple-deep); border-color: #fff;
}
.cta-band .btn-ghost:hover { background: #fff; color: var(--rose-deep); }
@media (max-width: 620px) { .cta-band { padding: 48px 24px; border-radius: var(--radius-lg); } }

/* ---------- Footer ---------- */
.site-footer {
    position: relative;
    background: linear-gradient(180deg, rgba(247, 240, 253, .7), rgba(250, 243, 247, .9));
    border-top: 1px solid var(--line);
    padding: 72px 0 32px;
    margin-top: 80px;
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 44px;
}
.footer-brand-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.footer-brand-desc {
    font-size: 0.9rem;
    color: var(--muted);
    line-height: 1.65;
    max-width: 34ch;
    margin: 0;
}
.footer-support-line {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, .7);
    border: 1px solid var(--line-strong);
    border-radius: 99px;
    padding: 7px 16px;
    font-size: 0.8rem;
    color: var(--ink-soft);
    width: fit-content;
    white-space: nowrap;
    box-shadow: var(--shadow-xs);
}
.footer-support-line .support-label {
    font-weight: 700;
    color: var(--rose-deep);
}
.footer-support-line .divider {
    color: var(--line-strong);
}

.footer-socials {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}
.footer-social-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1.5px solid var(--line-strong);
    background: var(--card);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rose);
    transition: all 0.25s cubic-bezier(.19, 1, .22, 1);
}
.footer-social-btn svg {
    width: 18px;
    height: 18px;
}
.footer-social-btn:hover {
    transform: translateY(-3px);
    background: var(--grad-brand);
    border-color: transparent;
    color: #ffffff;
    box-shadow: var(--glow-rose);
}

.site-footer h4 {
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
    margin-bottom: 20px;
}
.site-footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.site-footer li {
    margin-bottom: 12px;
    font-size: 0.92rem;
}
.site-footer a {
    color: var(--ink-soft);
    font-weight: 600;
    transition: color 0.15s ease;
}
.site-footer a:hover {
    color: var(--purple-deep);
    text-decoration: none;
}
.footer-brand-col a.logo {
    color: var(--ink) !important;
}

.footer-bottom {
    border-top: 1px solid var(--line-strong);
    margin-top: 52px;
    padding-top: 26px;
    font-size: 0.84rem;
    color: var(--muted);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}
.footer-copyright {
    max-width: 65ch;
    line-height: 1.5;
}
.footer-love {
    font-weight: 700;
}

@media (max-width: 991px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }
}
@media (max-width: 540px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .footer-bottom {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }
}

/* ---------- Hộp copy link ---------- */
.link-box {
    display: flex; gap: 8px; align-items: center; background: var(--card);
    border: 1.5px dashed var(--lilac); border-radius: 16px; padding: 9px 9px 9px 16px;
}
.link-box input { flex: 1; border: 0; font: inherit; background: transparent; color: var(--purple-deep); font-weight: 700; min-width: 0; }
.link-box input:focus { outline: 0; }

/* ---------- Toast ---------- */
.toast {
    position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px);
    background: var(--ink); color: #fff; padding: 13px 24px; border-radius: 999px; font-weight: 600;
    opacity: 0; pointer-events: none; transition: all .25s ease; z-index: 200; font-size: .92rem;
    box-shadow: var(--shadow-xl);
}
.toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Trang xác thực ---------- */
.auth-wrap { display: grid; place-items: center; min-height: calc(100vh - 74px); padding: 40px 0; }
.auth-card { width: min(440px, 92vw); padding: 36px; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }

.empty { text-align: center; padding: 70px 20px; color: var(--muted); }
.empty .emoji { font-size: 3rem; margin-bottom: 10px; }

/* ---- Đánh giá hiệu ứng ---- */
.stars-gold {
    color: var(--gold);
    font-size: 0.95rem;
    margin-right: 4px;
}
/* Hàng thông tin nhanh dưới tên mẫu: sao đánh giá + lượt dùng */
.tpl-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin: 4px 0 8px;
}
.tpl-meta .tpl-rating-stars { margin: 0; }

.tpl-uses {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border-radius: 99px;
    background: var(--purple-soft);
    color: var(--muted);
    font-size: .77rem;
    font-weight: 700;
    white-space: nowrap;
}
.tpl-uses b { color: var(--purple-deep); font-weight: 800; }
/* Mẫu chưa ai dùng thì khoe "mới" thay vì phơi số 0 */
.tpl-uses.is-new { background: var(--pink-soft); color: var(--rose-deep); }

.tpl-rating-stars {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    font-size: 0.83rem;
    background: var(--gold-soft);
    border: 1px solid #f0dcae;
    padding: 4px 11px;
    border-radius: 99px;
    transition: all 0.2s ease;
}
.tpl-rating-stars:hover {
    background: #f7ebd2;
    border-color: #e6c98d;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px -6px rgba(201, 154, 63, .45);
}
.tpl-rating-stars:hover .rating-text {
    color: #7d5c15;
}
.tpl-rating-stars .rating-text {
    color: #96701f;
    font-weight: 800;
}

/* Hộp thoại Đánh giá (Modal) */
.review-modal {
    position: fixed;
    inset: 0;
    background: rgba(36, 20, 52, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.25s ease;
}
.review-modal-content {
    background: var(--card);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    width: min(520px, 94vw);
    max-height: 85vh;
    overflow-y: auto;
    padding: 30px;
    position: relative;
    box-shadow: var(--shadow-xl);
    animation: slideUp 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}
.review-modal-close {
    position: absolute;
    top: 20px; right: 20px;
    background: none;
    border: none;
    font-size: 1.8rem;
    cursor: pointer;
    color: var(--muted);
    line-height: 1;
}
.review-modal-close:hover {
    color: var(--ink);
}
.reviews-list-container {
    margin-bottom: 20px;
}
.reviews-list {
    max-height: 190px;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 16px;
    background: #fbf8ff;
}
.review-item {
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--line);
}
.review-item:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 0;
}
.review-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}
.review-item-name {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--ink);
}
.review-item-date {
    font-size: 0.75rem;
    color: var(--muted);
}
.review-item-stars {
    color: var(--gold);
    font-size: 0.85rem;
    margin-bottom: 4px;
}
.review-item-comment {
    font-size: 0.88rem;
    color: var(--ink-soft);
    line-height: 1.5;
    margin: 0;
}

/* Star rating input (CSS radio stars) */
.star-rating-input {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 6px;
}
.star-rating-input input {
    display: none;
}
.star-rating-input label {
    font-size: 2rem;
    color: #e5dcf2;
    cursor: pointer;
    transition: color 0.15s ease, transform 0.1s ease;
}
.star-rating-input label:hover {
    transform: scale(1.15);
}
.star-rating-input input:checked ~ label,
.star-rating-input label:hover,
.star-rating-input label:hover ~ label {
    color: var(--gold);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes slideUp {
    from { transform: translateY(30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Tôn trọng thiết lập giảm chuyển động của hệ điều hành */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- Chữ nhấn serif theo từng nền ---------- */
.hero h1 em.serif { color: var(--rose-deep); font-style: italic; }
.section-dark h2 em.serif { color: #ffc4d6; }
.cta-band h2 em.serif { color: #ffe2ee; }
.section-head h2 em.serif { font-style: italic; }