:root {
    --bg: #0b1220;
    --card: #111a2e;
    --text: #eaf0ff;
    --muted: #b7c2e0;
    --primary: #ffcc00;
    --danger: #ff4d4f;
    --border: rgba(255, 255, 255, .10);
}

* {
    box-sizing: border-box
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%
}

/* Lưới an toàn: không cho BẤT KỲ phần tử nào (kể cả lỗi HTML/CSS phát sinh
   về sau, hay nội dung nhúng từ bên ngoài như TikTok/YouTube) đẩy toàn trang
   rộng hơn màn hình trên điện thoại, khiến trình duyệt tự thu nhỏ cả trang
   thay vì chỉ co giãn đúng theo từng khung. */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
    background: #0a1020;
    color: var(--text);
    font-size: 16px;
    line-height: 1.5
}

a {
    color: var(--primary);
    text-decoration: none
}

.container {
    max-width: 1050px;
    margin: 0 auto;
    padding: clamp(12px, 4vw, 16px)
}

/* Chữ (tiêu đề) tự co giãn mượt theo bề rộng màn hình, không chỉ nhảy bậc ở vài mốc cố định */
h1 {
    font-size: clamp(24px, 4vw + 8px, 40px);
    line-height: 1.2;
    margin: 0
}

h2 {
    font-size: clamp(20px, 2.2vw + 10px, 28px);
    line-height: 1.25;
    margin: 0
}

h3 {
    font-size: clamp(16px, 1.2vw + 10px, 20px);
    line-height: 1.3;
    margin: 0
}

/* Luật an toàn: MỌI ảnh trong site đều tự co theo khung chứa, không bao giờ tràn ra ngoài. */
img {
    max-width: 100%;
    height: auto;
    display: block
}

.topbar {
    position: sticky;
    top: 0;
    background: #0d1526;
    border-bottom: 1px solid var(--border);
    z-index: 10;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform
}

.topbar__inner {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-top: 6px;
    padding-bottom: 6px
}

.logo {
    font-weight: 800;
    color: var(--text);
    display: flex;
    align-items: center;
    flex-shrink: 0
}

.logo__img {
    height: 40px;
    width: auto;
    max-width: 160px;
    max-height: 40px;
    object-fit: contain;
    display: block;
    border-radius: 8px
}

.nav {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    min-width: 0;
    flex: 1
}

.nav__viewport {
    width: 100%;
    overflow: hidden
}

.nav__track {
    display: flex
}

.nav__set {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    flex-shrink: 0
}

.nav__set--dup {
    display: none
}

/* ẩn bản sao trên desktop, không cần chạy vòng lặp */
.nav a {
    color: var(--muted)
}

.nav a:hover {
    color: var(--text)
}

.cartLink {
    color: var(--text);
    border: 1px solid var(--border);
    padding: 8px 10px;
    border-radius: 10px;
    flex-shrink: 0
}

/* --- Bộ chuyển ngôn ngữ (VI / EN / 中文) --- */
.langSwitch {
    display: flex;
    gap: 6px;
    flex-shrink: 0
}

.langBtn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted);
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit
}

.langBtn:hover {
    color: var(--text);
    border-color: rgba(255, 255, 255, .25)
}

.langBtn--active {
    background: var(--primary);
    color: #111;
    border-color: transparent
}

/* --- Màn hình hẹp (điện thoại): xếp header thành từng hàng riêng biệt,
   nav TỰ TRÔI liên tục từ phải qua trái (không cần khách vuốt tay), tạm dừng
   khi khách chạm vào để chọn mục cho chính xác --- */


@keyframes cvpNavScroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* --- Ẩn thanh banner / tooltip mặc định do Google Translate tự chèn vào trang --- */
.goog-te-banner-frame.skiptranslate {
    display: none !important
}

.goog-te-gadget-icon {
    display: none !important
}

.goog-tooltip,
.goog-tooltip:hover {
    display: none !important
}

.goog-text-highlight {
    background: none !important;
    box-shadow: none !important;
    border: none !important
}

#google_translate_element {
    display: none !important
}

.banner {
    background: linear-gradient(135deg, rgba(255, 204, 0, .25), rgba(17, 26, 46, 1));
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 22px;
    margin-top: 8px
}

.banner h1 {
    margin: 0 0 8px 0
}

.banner p {
    margin: 0 0 14px 0;
    color: var(--muted)
}

.banner--image {
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 18px
}

.banner__img {
    width: 100%;
    height: auto;
    display: block
}

.banner--image .banner__actions {
    padding: 16px;
    justify-content: center;
    background: rgba(255, 255, 255, .03)
}



.logo__img {
    height: 42px;
    width: auto;
    display: block;
    border-radius: 8px
}

.section {
    margin: 22px 0
}

.section h2 {
    margin: 0 0 14px 0
}

.section__actions {
    margin-top: 16px
}

.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px
}





.grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px
}



.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden
}

.card--clickable {
    cursor: pointer;
    transition: border-color .15s ease, transform .15s ease
}

.card--clickable:hover {
    border-color: rgba(255, 204, 0, .5)
}

/* --- Modal chi tiết sản phẩm --- */
.modalOverlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .65);
    z-index: 100;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.modalOverlay--open {
    display: flex
}

.modalBox {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 18px;
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
}

.modalClose {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .45);
    color: #fff;
    border: none;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
}

.modalClose:hover {
    background: rgba(0, 0, 0, .65)
}

.modalBox__imgWrap {
    position: relative;
    height: 260px;
    overflow: hidden;
    background: #0f1730
}

.modalBox__imgWrap::before {
    content: "";
    position: absolute;
    inset: -14px;
    background-image: var(--food-img);
    background-size: cover;
    background-position: center;
    filter: blur(22px) brightness(.55) saturate(1.15);
    transform: scale(1.15);
}

.modalBox__imgWrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    position: relative;
    z-index: 1;
    background: transparent
}

.modalBox__body {
    padding: 18px
}

.modalBox__body h3 {
    margin: 6px 0 10px 0;
    font-size: clamp(20px, 3vw + 10px, 26px)
}

.modalBox__body .card__price {
    font-size: 20px;
    margin: 10px 0
}

.modalBox__desc {
    color: var(--muted);
    line-height: 1.6;
    margin: 12px 0 0 0;
    white-space: pre-line
}

.modalBox__body form {
    margin-top: 14px
}

.modalBox__body .btn {
    width: 100%;
    text-align: center;
    padding: 12px
}



.card img {
    width: 100%;
    height: 200px;
    object-fit: contain;
    object-position: center;
    display: block;
    background: #0f1730
}

/* --- Khung ảnh món ăn: nền mờ (blur) lấp đầy khung + ảnh gốc hiển thị trọn vẹn ở giữa,
   để không có khoảng trống 2 bên mà cũng không bị cắt mất chữ/badge trên ảnh --- */
.card__imgWrap {
    position: relative;
    height: 200px;
    overflow: hidden;
    background: #0f1730
}

.card__imgWrap::before {
    content: "";
    position: absolute;
    inset: -14px;
    background-image: var(--food-img);
    background-size: cover;
    background-position: center;
    filter: blur(20px) brightness(.55) saturate(1.15);
    transform: scale(1.15);
}

.card__imgWrap img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    background: transparent;
}

/* --- Logo thương hiệu tự động hiện ở góc phải trên MỌI ảnh món ăn/sản phẩm
   (không cần đối tác/admin làm gì thêm khi đăng món, ảnh gốc trên server
   không bị chỉnh sửa - đây chỉ là lớp phủ hiển thị bằng CSS) --- */
.card__imgWrap::after {
    content: "";
    position: absolute;
    top: 6px;
    right: 6px;
    width: 62px;
    height: 62px;
    z-index: 2;
    background-image: url('/assets/logo-badge.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .55));
    pointer-events: none;
}



.soldoutRibbon {
    position: relative;
    z-index: 2
}

.card__body {
    padding: 12px
}

.card__title {
    font-weight: 700
}

.card__meta {
    color: var(--muted);
    font-size: 13px;
    margin-top: 4px
}

.card__price {
    margin: 10px 0;
    font-weight: 800
}

.card--pad {
    padding: 14px
}

.btn {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border);
    padding: 10px 12px;
    border-radius: 12px;
    cursor: pointer
}

.btn:hover {
    border-color: rgba(255, 255, 255, .25)
}

.btn--primary {
    background: var(--primary);
    color: #111;
    border-color: transparent;
    font-weight: 800
}

.btn--sm {
    padding: 6px 10px;
    border-radius: 10px
}

.btn--danger {
    border-color: rgba(255, 77, 79, .5);
    color: #ffd6d6
}

.categoryNav {
    position: relative;
    margin: 14px 0 18px;
    padding: 12px 12px 10px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.018));
    box-shadow: 0 8px 28px rgba(0,0,0,.12);
}

.categoryNav__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 4px 9px;
}

.categoryNav__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .2px;
}

.categoryNav__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 4px rgba(255,204,0,.10);
}

.categoryNav__allBtn {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--primary);
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    padding: 4px 2px;
    white-space: nowrap;
}

.categoryNav__allBtn span { display: inline-block; margin-left: 3px; }

.categoryNav__railWrap {
    position: relative;
    min-width: 0;
}

.categoryNav__viewport {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
    cursor: grab;
    scroll-behavior: smooth;
    padding: 2px 36px 4px;
    outline: none;
}

.categoryNav__viewport::-webkit-scrollbar { display: none; }
.categoryNav__viewport.is-dragging { cursor: grabbing; scroll-behavior: auto; }

.categoryNav__track {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    gap: 8px;
}

.categoryChip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 7px 13px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 999px;
    background: rgba(255,255,255,.025);
    color: var(--muted);
    white-space: nowrap;
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 700;
    transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
}

.categoryChip:hover {
    color: var(--text);
    border-color: rgba(255,204,0,.35);
    transform: translateY(-1px);
}

.categoryChip--active {
    color: #111;
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 5px 16px rgba(255,204,0,.16);
}

.categoryChip--active:hover { color: #111; }

.categoryChip__icon {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    font-size: 14px;
    line-height: 1;
}

.categoryNav__arrow {
    position: absolute;
    z-index: 3;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 50%;
    background: rgba(11,18,32,.94);
    color: var(--text);
    display: grid;
    place-items: center;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 5px 16px rgba(0,0,0,.22);
    transition: opacity .18s ease, transform .18s ease, border-color .18s ease;
}

.categoryNav__arrow:hover { border-color: rgba(255,204,0,.55); }
.categoryNav__arrow:active { transform: translateY(-50%) scale(.94); }
.categoryNav__arrow:disabled { opacity: 0; pointer-events: none; }
.categoryNav__arrow--left { left: 2px; }
.categoryNav__arrow--right { right: 2px; }

.categoryNav__fade {
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    width: 48px;
    pointer-events: none;
}
.categoryNav__fade--left { left: 0; background: linear-gradient(90deg, rgba(14,22,38,1), rgba(14,22,38,0)); }
.categoryNav__fade--right { right: 0; background: linear-gradient(270deg, rgba(14,22,38,1), rgba(14,22,38,0)); }

.categoryModal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
}
.categoryModal.is-open { display: flex; }
.categoryModal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2,6,16,.72);
    backdrop-filter: blur(5px);
}
.categoryModal__box {
    position: relative;
    width: min(720px, 100%);
    max-height: min(82vh, 760px);
    overflow: auto;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 22px;
    background: #0d1629;
    box-shadow: 0 24px 80px rgba(0,0,0,.48);
    padding: 20px;
}
.categoryModal__head {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: flex-start;
    margin-bottom: 16px;
}
.categoryModal__eyebrow {
    color: var(--primary);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.6px;
    margin-bottom: 4px;
}
.categoryModal__head h3 { margin: 0; color: var(--text); font-size: 22px; }
.categoryModal__head p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.categoryModal__close {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 50%;
    background: rgba(255,255,255,.035);
    color: var(--text);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}
.categoryModal__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.categoryModal__item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 13px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 15px;
    background: rgba(255,255,255,.025);
    color: var(--text);
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.categoryModal__item:hover { border-color: rgba(255,204,0,.32); transform: translateY(-1px); }
.categoryModal__item.is-active { border-color: rgba(255,204,0,.48); background: rgba(255,204,0,.08); }
.categoryModal__icon { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border-radius: 12px; background: rgba(255,255,255,.055); font-size: 19px; }
.categoryModal__item strong { display: block; font-size: 14px; }
.categoryModal__item small { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }

.checklist {
    margin: 0;
    padding-left: 18px
}

.checklist li {
    margin: 6px 0
}

.footer {
    border-top: 1px solid var(--border);
    color: var(--muted);
    padding: 18px 0;
    margin-top: 24px
}

.form {
    max-width: 720px
}

.formRow {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 10px 0
}

input,
textarea {
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: #0f1730;
    color: var(--text)
}

hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 16px 0
}

.alert {
    border-radius: 14px;
    padding: 12px;
    border: 1px solid var(--border);
    margin: 10px 0
}

.alert--success {
    border-color: rgba(0, 255, 120, .25);
    background: rgba(0, 255, 120, .08)
}

.alert--danger {
    border-color: rgba(255, 77, 79, .35);
    background: rgba(255, 77, 79, .08)
}

.cartRow {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 10px;
    padding: 12px;
    border-bottom: 1px solid var(--border)
}

.cartRow__info {
    display: flex;
    flex-direction: column;
    gap: 6px
}

.cartRow__price {
    color: var(--muted)
}

.cartRow__qty form {
    display: flex;
    align-items: center;
    gap: 8px
}

.qty {
    min-width: 26px;
    text-align: center
}

.totalBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 12px;
    margin-top: 14px;
    background: rgba(255, 255, 255, .03)
}

.orderLine {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px dashed rgba(255, 255, 255, .12)
}

.badge {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    color: var(--text)
}

.table {
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden
}

.tableRow {
    display: grid;
    grid-template-columns: 170px 1fr 120px 160px 180px;
    gap: 10px;
    padding: 12px;
    border-bottom: 1px solid var(--border)
}

.tableRow--head {
    background: rgba(255, 255, 255, .04);
    font-weight: 700
}

.tableRow--lucky {
    grid-template-columns: 150px 1fr 110px 150px 90px
}

/* Bảng "Đơn hàng của tôi" (account.php) có 6 cột: Mã đơn, Tổng tiền,
   Thanh toán, Trạng thái, Quay thưởng, Nhận hàng. */
.tableRow--accountOrders {
    grid-template-columns: 170px 120px 150px 150px 180px 220px
}

/* Bảng "Lịch sử mã dự thưởng" (account.php) có 4 cột: Mã đơn, Kỳ dự
   thưởng, 4 số cuối, Kết quả. */
.tableRow--luckyHistory {
    grid-template-columns: 150px 150px 120px 1fr
}

/* Hàng tiêu đề + gợi ý "Vuốt để xem thêm" nằm cùng hàng ngang. */
.sectionHeadRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

/* Gợi ý vuốt ngang cho bảng rộng hơn màn hình — mặc định ẩn, chỉ hiện
   trên mobile (xem style-mobile.css) vì trên desktop bảng đã vừa khung. */
.swipeHint {
    display: none;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.swipeHint__arrow {
    display: inline-block;
    font-weight: 700;
    animation: cvpSwipeHintRight 1.6s ease-in-out infinite;
}

.swipeHint__arrow--left {
    animation-name: cvpSwipeHintLeft;
    animation-delay: .3s;
}

@keyframes cvpSwipeHintRight {

    0%,
    100% {
        transform: translateX(0);
        opacity: .55;
    }

    50% {
        transform: translateX(3px);
        opacity: 1;
    }
}

@keyframes cvpSwipeHintLeft {

    0%,
    100% {
        transform: translateX(0);
        opacity: .55;
    }

    50% {
        transform: translateX(-3px);
        opacity: 1;
    }
}

.tableRow--banners {
    grid-template-columns: 240px minmax(220px, 1fr) 140px 90px 130px 170px;
}

/* Bảng "Tài khoản đối tác" có 7 cột (đã thêm cột Giới hạn bài/ngày + Đã đăng hôm nay) */
.tableRow--partners {
    grid-template-columns: 140px 1fr 110px 110px 1fr 100px 190px
}





.mapBox {
    height: 260px;
    border: 1px dashed rgba(255, 255, 255, .2);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted)
}

.hint {
    color: var(--muted);
    margin-top: 10px
}

/* --- Khung nhúng nội dung ngoài (xổ số / YouTube / TikTok) trên trang Giải trí:
   luôn giới hạn trong khung trang, không cho bất kỳ nội dung nhúng nào (kể cả khi
   chính widget bên ngoài tự đặt chiều rộng cứng) đẩy tràn ngang trên điện thoại. --- */
.embedBox {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 14px;
}

.embedBox iframe {
    width: 100%;
    max-width: 100%;
    display: block;
    border-radius: 14px;
}

.embedBox--video iframe {
    aspect-ratio: 16 / 9;
    height: auto;
}

.embedBox--tiktok {
    display: flex;
    justify-content: center;
}

.embedBox--tiktok>* {
    max-width: 100% !important;
}

/* --- Banner actions --- */
.banner__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap
}

.btn--gift {
    background: linear-gradient(135deg, #ff7a59, #ffcc00);
    color: #111;
    border-color: transparent;
    font-weight: 800
}

/* --- Section head with inline action --- */
.section__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px
}

.section__head h2 {
    margin: 0
}

/* --- Promo box (home page lucky-draw teaser) --- */
.promoBox {
    display: flex;
    gap: 18px;
    align-items: center;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 18px;
    flex-wrap: wrap
}

.promoBox__icon img {
    width: 84px;
    height: 84px;
    object-fit: contain
}

.promoBox__text h3 {
    margin: 0 0 6px 0
}

.promoBox__text p {
    margin: 0 0 12px 0;
    color: var(--muted)
}

/* --- Feedback / góp ý --- */
.grid3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px
}



.stars {
    color: var(--primary);
    letter-spacing: 2px;
    font-size: 15px
}

.fbContent {
    color: var(--text);
    margin: 8px 0;
    font-style: italic
}

.fbName {
    color: var(--muted);
    font-size: 13px
}

.ratingPicker {
    display: flex;
    gap: 12px;
    flex-wrap: wrap
}

.ratingPicker__opt {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    color: var(--muted)
}

.ratingPicker__opt input {
    width: auto
}

.ratingPicker__opt span {
    color: var(--primary);
    font-size: 16px
}

/* --- Lucky draw page --- */
.luckyHead {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 16px
}

.luckyHead__img {
    width: 96px;
    height: 96px;
    object-fit: contain
}

.prizeBox {
    background: linear-gradient(135deg, rgba(255, 204, 0, .18), rgba(255, 122, 89, .10));
    border: 1px solid rgba(255, 204, 0, .35);
    border-radius: 18px;
    padding: 20px;
    text-align: center;
    margin-bottom: 16px
}

.prizeBox__title {
    color: var(--muted);
    font-weight: 700
}

.prizeBox__prize {
    font-size: 26px;
    font-weight: 800;
    margin: 10px 0
}

/* --- Badges --- */
.badge--alert {
    background: rgba(255, 77, 79, .18);
    border-color: rgba(255, 77, 79, .4);
    color: #ffd6d6;
    margin-left: 6px;
    font-size: 12px;
    padding: 2px 8px
}

/* --- Admin image preview --- */
.imgPreview {
    margin-top: 8px
}

/* ============================================================
   RESPONSIVE TỔNG THỂ: tinh chỉnh thêm cho các khối dễ bị chật
   trên điện thoại (giỏ hàng, khung tổng tiền, ô quà tặng, bảng...)
   ============================================================ */




/* --- Món bán chạy: trôi ngang phải → trái, tự dừng khi khách chạm/vuốt --- */
.bestSeller__viewport {
    overflow-x: auto;
    overflow-y: hidden;
    position: relative;
    -webkit-overflow-scrolling: touch;
    /* cuộn mượt trên iOS */
    scrollbar-width: none;
    /* Firefox: ẩn thanh cuộn */
    -ms-overflow-style: none;
    /* IE/Edge cũ: ẩn thanh cuộn */
    /* fade nhẹ 2 bên mép để trông mượt hơn khi card trôi vào/ra */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}

.bestSeller__viewport::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari: ẩn thanh cuộn cho gọn, khách vẫn vuốt bình thường */
}

.bestSeller__track {
    display: flex;
    gap: 12px;
    width: max-content;
}

/* Không đủ 3 món -> hiển thị tĩnh, tự xuống dòng như grid bình thường */
.bestSeller__track:not(.bestSeller__track--marquee) {
    flex-wrap: wrap;
    width: 100%;
}

.bestSeller__card {
    flex: 0 0 220px;
    width: 220px;
}

/* Việc tự trôi ngang giờ do JS (assets/app.js) điều khiển qua scrollLeft,
   để khách có thể vuốt tay tự nhiên; JS sẽ tự tạm dừng khi khách chạm vào
   và tự chạy lại sau vài giây không thao tác. */



/* --- Modul cố định 2 bên banner (chỉ ở trang chủ) --- */
.sideModule {
    display: none;
    /* mặc định ẩn, chỉ bật ở màn hình đủ rộng bên dưới */
}



/* --- Hiệu ứng nhấp nháy thu hút cho các liên kết "Góp ý" --- */
@keyframes cvpLedBlink {

    0%,
    49% {
        opacity: 1;
    }

    50%,
    100% {
        opacity: 0.15;
    }
}

.cvpBlink {
    animation: cvpLedBlink 0.9s steps(1, end) infinite;
    font-weight: 800 !important;
    color: var(--primary) !important;
}

.cvpBlink.btn {
    border-color: var(--primary) !important;
}

/* --- Nút "+ Thêm" / "+ Thêm vào giỏ" nổi bật, nhấp nháy để thu hút khách bấm --- */
.btnAddBlink {
    animation: cvpBtnLed 0.9s steps(1, end) infinite;
    font-weight: 800 !important;
    border-color: transparent !important;
    color: #111 !important;
}

@keyframes cvpBtnLed {

    0%,
    49% {
        background: var(--primary);
        box-shadow: 0 0 10px 2px rgba(255, 204, 0, .6);
    }

    50%,
    100% {
        background: #ff7a1a;
        box-shadow: 0 0 10px 2px rgba(255, 122, 26, .6);
    }
}

/* --- Mèo Thần Tài bay lượn tự do khắp màn hình ---
   Vị trí (top/left) do JS (cuối trang) cập nhật ngẫu nhiên theo chu kỳ;
   CSS chỉ lo kích thước, hiệu ứng đung đưa tại chỗ, và việc chuyển vị trí mượt.
   z-index thấp hơn .sideModule (6) để không che module quảng cáo/iframe ở trang chủ. */
.cvpLuckyCat {
    position: fixed;
    top: 0;
    left: 0;
    width: 64px;
    z-index: 5;
    cursor: pointer;
    display: block;
    opacity: 0;
    transition: left 3.5s ease-in-out, top 3.5s ease-in-out, opacity .6s ease, transform .15s ease;
}

.cvpLuckyCat--ready {
    opacity: 1;
}

.cvpLuckyCat:hover {
    transform: scale(1.12);
}

.cvpLuckyCat:active {
    transform: scale(0.95);
}

.cvpLuckyCat img {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .3));
    pointer-events: none;
    animation: cvpBob 3s ease-in-out infinite;
}

@keyframes cvpBob {

    0%,
    100% {
        transform: translateY(0) rotate(-4deg);
    }

    50% {
        transform: translateY(-10px) rotate(4deg);
    }
}



/* --- Banner / link affiliate (trang chủ + trang Giải trí) --- */
.affiliateBanners {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 20px 0;
}

.affiliateBanner {
    display: block;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--card);
    text-decoration: none;
    color: inherit;
    transition: transform .2s ease, box-shadow .2s ease;
}

.affiliateBanner:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .15);
}

.affiliateBanner img {
    width: 100%;
    height: auto;
    display: block;
}

.affiliateBanner__text {
    padding: 12px 16px;
}

.affiliateBanner__title {
    font-weight: 800;
    font-size: 17px;
    display: inline-block;
    animation: cvpAffiliateLed 0.9s steps(1, end) infinite;
    text-shadow: 0 0 8px currentColor;
}

@keyframes cvpAffiliateLed {

    0%,
    49% {
        color: var(--primary);
    }

    50%,
    100% {
        color: var(--danger);
    }
}

.affiliateBanner__desc {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    opacity: .95;
    margin-top: 4px;
}

/* --- Bộ chọn ngôn ngữ nổi: nằm ngay phía trên nút hotline Trung Quốc --- */
.floatingLang {
    position: fixed;
    right: 14px;
    bottom: 96px;
    z-index: 10;
    width: 150px;
}

.floatingLang__toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 13px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 12px;
    background: rgba(15, 23, 42, .96);
    color: var(--text);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .35);
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
}

.floatingLang__toggle:hover {
    border-color: var(--primary);
}

.floatingLang__chevron {
    font-size: 17px;
    line-height: 1;
    transition: transform .15s ease;
}

.floatingLang.is-open .floatingLang__chevron {
    transform: rotate(180deg);
}

.floatingLang__menu {
    display: none;
    position: absolute;
    right: 0;
    bottom: calc(100% + 7px);
    width: 100%;
    padding: 6px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 12px;
    background: rgba(15, 23, 42, .98);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .45);
}

.floatingLang.is-open .floatingLang__menu {
    display: block;
}

.floatingLang__item {
    width: 100%;
    display: block;
    border: 0;
    border-radius: 8px;
    padding: 9px 10px;
    background: transparent;
    color: var(--muted);
    text-align: left;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
}

.floatingLang__item:hover,
.floatingLang__item.is-active {
    background: rgba(255, 204, 0, .14);
    color: var(--text);
}

/* Không hiển thị bộ nút ngôn ngữ cũ trên thanh menu; dùng bộ chọn nổi phía dưới. */
.topbar .langSwitch {
    display: none !important;
}

/* --- Hotline dành riêng cho khách Trung Quốc: nằm cố định 1 góc màn hình,
   luôn hiển thị trên mọi trang, có icon điện thoại, bấm vào để gọi thẳng --- */
.cnHotline {
    position: fixed;
    right: 14px;
    bottom: 14px;
    z-index: 8;
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #d0021b, #ff4d4f);
    color: #fff;
    padding: 10px 14px;
    border-radius: 999px;
    border: 2px solid var(--primary);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .35);
    text-decoration: none;
    max-width: calc(100vw - 28px);
    transition: transform .15s ease, box-shadow .15s ease;
}

.cnHotline:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .45);
}

.cnHotline__icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cnHotline__text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}

.cnHotline__label {
    font-size: 11px;
    font-weight: 600;
    opacity: .95;
    white-space: normal;
    max-width: 150px;
}

.cnHotline__phone {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .3px;
}


/* =========================================================
   BỘ NGÔN NGỮ HIỂN THỊ CỐ ĐỊNH TRÊN HOTLINE
   Không cần click VI để mở menu.
   ========================================================= */
.floatingLang {
    position: fixed !important;
    right: 14px !important;
    bottom: 82px !important;
    width: auto !important;
    max-width: calc(100vw - 28px) !important;
    z-index: 20 !important;
}

/* Ẩn nút VI/EN/中文 dạng dropdown */
.floatingLang__toggle {
    display: none !important;
}

/* Luôn hiển thị 3 ngôn ngữ */
.floatingLang__menu,
.floatingLang.is-open .floatingLang__menu {
    display: flex !important;
    position: static !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 5px !important;
    gap: 5px !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    border-radius: 12px !important;
    background: rgba(15,23,42,.98) !important;
    box-shadow: 0 8px 20px rgba(0,0,0,.35) !important;
}

.floatingLang__item {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 8px 6px !important;
    margin: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

/* Đặt bộ ngôn ngữ sát phía trên hotline */
.cnHotline {
    bottom: 14px !important;
    z-index: 19 !important;
}


/* ========================================================================
   Thanh chọn KCN — căn cùng bề rộng với nội dung/header/banner
   ======================================================================== */
.kcnBar {
    width: 100%;
    max-width: 1018px;
    margin: 0 auto;
}

/* ========================================================================
   Banner trang chủ - slider ngang, tự chạy và cho phép vuốt/kéo
   Kích thước chuẩn: tỷ lệ 2:1 theo banner 1774x887, tránh banner bị quá cao.
   ======================================================================== */
.homeBannerSlider {
    width: 100%;
    max-width: 100%;
    margin: 8px auto 0;
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
    background: var(--card);
}

.homeBannerSlider__viewport {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
    cursor: grab;
}

.homeBannerSlider__viewport::-webkit-scrollbar {
    display: none;
}

.homeBannerSlider__viewport.is-dragging {
    cursor: grabbing;
}

.homeBannerSlider__track {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    height: auto;
    align-items: flex-start;
}

.homeBannerSlider__slide {
    display: block;
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    height: auto;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    user-select: none;
    -webkit-user-select: none;
}

.homeBannerSlider__slide img {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    object-fit: contain;
    object-position: center;
    user-select: none;
    -webkit-user-drag: none;
}

.homeBannerSlider__slide:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: -3px;
}


/* ============================================================
   TRÌNH XEM ẢNH SẢN PHẨM — CLICK ẢNH ĐỂ PHÓNG TO / THU NHỎ
   ============================================================ */

.modalBox__imgWrap {
    cursor: zoom-in;
}

.modalBox__imgWrap .imageZoomHint {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 3;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 50%;
    background: rgba(0,0,0,.55);
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: zoom-in;
    display: flex;
    align-items: center;
    justify-content: center;
}

.imageViewer {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0,0,0,.94);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 70px 16px 50px;
    touch-action: none;
}

.imageViewer--open {
    display: flex;
}

body.imageViewer-open {
    overflow: hidden !important;
}

.imageViewer__stage {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    touch-action: none;
    cursor: default;
}

.imageViewer__stage.is-dragging {
    cursor: grabbing;
}

.imageViewer__stage img {
    max-width: 92vw;
    max-height: 82vh;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    transform-origin: center center;
    transition: transform .12s ease-out;
    user-select: none;
    -webkit-user-drag: none;
    touch-action: none;
    cursor: default;
}

.imageViewer__stage img.is-zoomed {
    cursor: grab;
}

.imageViewer__stage.is-dragging img {
    cursor: grabbing;
    transition: none;
}

.imageViewer__toolbar {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 14px;
    background: rgba(15,23,48,.88);
    backdrop-filter: blur(8px);
}

.imageViewer__toolbar button {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 10px;
    background: rgba(255,255,255,.08);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.imageViewer__toolbar button:hover {
    background: rgba(255,255,255,.18);
}

.imageViewer__toolbar span {
    min-width: 58px;
    text-align: center;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}

.imageViewer__tip {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    max-width: calc(100vw - 30px);
    padding: 6px 10px;
    border-radius: 9px;
    background: rgba(0,0,0,.55);
    color: rgba(255,255,255,.82);
    font-size: 12px;
    text-align: center;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .imageViewer {
        padding: 62px 8px 42px;
    }

    .imageViewer__toolbar {
        top: 8px;
        gap: 5px;
        padding: 5px;
    }

    .imageViewer__toolbar button {
        width: 36px;
        height: 36px;
    }

    .imageViewer__toolbar span {
        min-width: 48px;
        font-size: 13px;
    }

    .imageViewer__stage img {
        max-width: 96vw;
        max-height: 84vh;
    }

    .imageViewer__tip {
        bottom: 7px;
        font-size: 11px;
        white-space: normal;
    }

    .modalBox__imgWrap .imageZoomHint {
        width: 34px;
        height: 34px;
        right: 8px;
        bottom: 8px;
    }
}
body.categoryModal-open { overflow: hidden; }