/* Phông chữ Inter KHÔNG khai ở đây nữa — xem <link> trong <head> của
   index.html và admin.html.

   @import nằm trong tệp này tạo một CHUỖI CHỜ NỐI TIẾP: trình duyệt phải tải
   xong style.css, đọc tới dòng @import, mới biết địa chỉ CSS phông, tải xong
   cái đó mới biết địa chỉ các tệp .woff2. Ba chặng, không chặng nào chạy song
   song được, vì địa chỉ chặng sau nằm bên trong chặng trước.

   Đưa lên <head> thì bộ quét của trình duyệt thấy ngay từ byte đầu và tải song
   song với chính style.css. */

/* ── BẢNG MÀU ──────────────────────────────────────────────────────────────
   Ba trạng thái: chưa chọn gì (theo thiết bị), chọn Sáng, chọn Tối.
   - :root trần            = bảng màu SÁNG, luôn định nghĩa đủ mọi biến
   - prefers-color-scheme  = theo thiết bị, chỉ áp khi người dùng CHƯA chọn Sáng
   - [data-theme="dark"]   = người dùng chọn Tối, thắng cả hai cái trên

   Không biến nào được định nghĩa lần đầu trong khối tối — quên thì ở chế độ
   sáng nó thành rỗng và cả trang mất màu.

   Màu cam thương hiệu giữ nguyên ở cả hai chế độ. */
:root {
    --primary:      #ee4d2d;
    --primary-dam:  #d23f20;
    --primary-nhat: #fff1ec;

    --bg-app:       #f8f9fa;   /* nền toàn trang */
    --nen-the:      #ffffff;   /* mặt thẻ, ô nổi lên trên nền */
    --nen-mo:       #f8fafc;   /* nền phụ rất nhạt (slate-50 / gray-50) */
    --nen-mo-2:     #f1f5f9;   /* nền phụ đậm hơn (slate-100) */
    --nen-mo-3:     #e2e8f0;   /* nền phụ đậm nhất (slate-200) */

    --chu:          #1e293b;   /* chữ chính */
    --chu-phu:      #475569;   /* chữ phụ */
    --chu-mo:       #94a3b8;   /* chữ mờ, nhãn nhỏ */
    --chu-rat-mo:   #cbd5e1;

    --vien:         #e2e8f0;
    --vien-mo:      #f1f5f9;

    --bong:         rgba(0,0,0,0.04);
    --bong-dam:     rgba(0,0,0,0.08);

    /* Hệ số cỡ chữ — nhân vào MỌI cỡ chữ ở khối FLUID FONT SIZE bên dưới.
       1 = Vừa (mặc định). JavaScript đặt data-co-chu trên <html>. */
    --co-chu: 1;
}

:root[data-co-chu="nho"] { --co-chu: 0.9;  }
:root[data-co-chu="vua"] { --co-chu: 1;    }
:root[data-co-chu="lon"] { --co-chu: 1.18; }

/* Theo thiết bị — chỉ khi người dùng chưa bấm chọn Sáng */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --primary-nhat: #3a1c12;
        --bg-app:    #0b1120;
        --nen-the:   #161f32;
        --nen-mo:    #1b2436;
        --nen-mo-2:  #223049;
        --nen-mo-3:  #2c3b57;
        --chu:        #e8edf6;
        --chu-phu:    #b6c2d6;
        --chu-mo:     #8f9db5;
        --chu-rat-mo: #7482a0;
        --vien:     #2a3852;
        --vien-mo:  #1f2b40;
        --bong:      rgba(0,0,0,0.35);
        --bong-dam:  rgba(0,0,0,0.5);
    }
}

/* Người dùng chọn Tối — thắng cả hai cái trên */
:root[data-theme="dark"] {
    --primary-nhat: #3a1c12;
    --bg-app:    #0b1120;
    --nen-the:   #161f32;
    --nen-mo:    #1b2436;
    --nen-mo-2:  #223049;
    --nen-mo-3:  #2c3b57;
    --chu:        #e8edf6;
    --chu-phu:    #b6c2d6;
    --chu-mo:     #8f9db5;
    --chu-rat-mo: #7482a0;
    --vien:     #2a3852;
    --vien-mo:  #1f2b40;
    --bong:      rgba(0,0,0,0.35);
    --bong-dam:  rgba(0,0,0,0.5);
}

html { background-color: var(--bg-app); }

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-app);
    color: var(--chu);
    -webkit-tap-highlight-color: transparent;
}

.home-gradient {
    background: linear-gradient(135deg, #ff8c00 0%, #ee4d2d 100%);
    border-radius: 0 0 40px 40px;
}

#user-view .home-gradient { border-radius: 32px; }

.app-card {
    background: var(--nen-the);
    border-radius: 24px;
    border: 1px solid var(--vien-mo);
    box-shadow: 0 4px 20px var(--bong);
}

.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 448px;
    background: var(--nen-the);
    background: color-mix(in srgb, var(--nen-the) 95%, transparent);
    backdrop-filter: blur(20px);
    display: flex;
    justify-content: space-around;
    padding: 12px 0 28px 0;
    border-top: 1px solid var(--vien-mo);
    z-index: 100;
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--chu-mo);
    cursor: pointer;
    flex: 1;
}

.nav-item i { font-size: 20px; margin-bottom: 4px; }

/* ── Thanh tiêu đề neo ────────────────────────────────────────────────────
   Mỗi trang con có sẵn một thanh "< Tiêu đề" ở đầu trang, nhưng cuộn xuống là
   nó trôi mất: muốn quay lại phải cuộn ngược lên tận đầu, mà đọc giữa chừng
   cũng không còn thấy mình đang ở trang nào.

   Thanh này bám đỉnh màn hình, hiện ra đúng lúc tiêu đề thật vừa trôi khỏi
   tầm mắt. Nội dung của nó chép từ chính trang đang mở, nên không có trang
   nào phải khai báo thêm gì.

   Dùng fixed chứ không dùng sticky: sticky phải cắm vào đúng thẻ cha của từng
   trang, mà 15 trang con ở đây có 15 kiểu bố cục khác nhau — có trang còn nằm
   trong khối overflow:hidden làm sticky chết hẳn. */
#thanh-neo {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 448px;
    display: none;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    background: var(--nen-the);
    background: color-mix(in srgb, var(--nen-the) 94%, transparent);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--vien-mo);
    box-shadow: 0 4px 16px var(--bong);
    z-index: 90;
}
#thanh-neo.hien { display: flex; }

#thanh-neo button {
    width: 34px; height: 34px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: var(--nen-mo-2);
    color: var(--chu-phu);
    border: none; cursor: pointer; flex-shrink: 0;
    transition: transform .15s ease;
}
#thanh-neo button:active { transform: scale(.9); }

#thanh-neo-ten {
    font-weight: 900;
    font-size: calc(13px * var(--co-chu));
    color: var(--chu);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* Màn rộng: thanh điều hướng trên cùng đang fixed cao 65px, còn nội dung bắt
   đầu từ mép trái 210px (xem khối main ở dưới). Thanh neo phải nằm khít vào
   khoảng đó, không thì nó chui xuống dưới thanh điều hướng. */
@media (min-width: 768px) {
    #thanh-neo {
        top: 65px;
        left: 210px;
        transform: none;
        width: auto;
        right: 0;
        max-width: none;
        padding: 12px 40px;
    }
}
@media (min-width: 1024px) {
    #thanh-neo { left: 230px; }
}
.nav-item.active { color: var(--primary); }

.input-field {
    width: 100%;
    background: var(--nen-mo-2);
    color: var(--chu);
    border: 2px solid transparent;
    padding: 18px;
    border-radius: 20px;
    font-size: 16px;
    font-weight: 600;
    outline: none;
    transition: all 0.2s;
}
.filter-chip-v3 {
    background: var(--nen-mo);
    border: 1px solid var(--vien);
    padding: 8px 16px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 800;
    color: var(--chu-phu);
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
}

.filter-chip-v2 {
    background: var(--nen-the);
    border: 1px solid var(--vien-mo);
    padding: 6px 12px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 800;
    color: var(--chu-phu);
    transition: all 0.2s;
    cursor: pointer;
}

.filter-chip-v2.active {
    background: #ee4d2d;
    color: white;
    border-color: #ee4d2d;
    box-shadow: 0 4px 12px rgba(238, 77, 45, 0.2);
}

.deal-countdown-text {
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

@keyframes shimmer {
    100% { transform: translateX(150%) skewX(-25deg); }
}

.filter-chip-v3.active {
    background: #ee4d2d;
    color: white;
    border-color: #ee4d2d;
    box-shadow: 0 4px 15px rgba(238, 77, 45, 0.3);
    transform: translateY(-2px);
}

.app-card {
    transition: all 0.3s ease;
}

.app-card:hover {
    box-shadow: 0 8px 30px var(--bong-dam);
}

.deal-text {
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.grayscale { filter: grayscale(1); }

.input-field:focus { border-color: var(--primary); background: var(--nen-the); }

.animate-fade-in { animation: fadeIn 0.4s ease-out forwards; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideUp { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

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


/* ── Ô CHỌN NGÀY ───────────────────────────────────────────────────────────
   ĐÃ GỠ `-webkit-appearance: none`. Nó từng được thêm vào để ô ngày khỏi tràn
   khung, nhưng trên iOS gỡ giao diện gốc làm Safari đo sai hộp neo của ô —
   bảng chọn ngày/tháng/năm bật ra lệch hẳn khỏi màn hình.
   Chống tràn giờ làm bằng cách cho ô ĐỦ CHỖ (xem .date-row bên dưới), chứ
   không bằng cách phá giao diện gốc của hệ điều hành. */
input[type="date"] {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}
/* iOS canh giữa phần dd/mm/yyyy, nhìn lệch hẳn so với các ô nhập khác */
input[type="date"]::-webkit-date-and-time-value {
    text-align: left;
}
input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0.5;
    cursor: pointer;
    padding: 0;
    margin-left: 2px;
}

/* Hai ô "Từ ngày" / "Đến ngày" xếp DỌC trên điện thoại.
   Xếp ngang thì mỗi ô chỉ còn khoảng 150px — không đủ cho "dd/mm/yyyy" cộng
   icon lịch, nên nội dung bị đẩy tràn ra ngoài. Đủ rộng mới cho nằm ngang. */
.date-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
@media (min-width: 420px) {
    .date-row { flex-direction: row; }
}
/* style.css */
.toast-animate {
    animation: toastIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards,
               toastOut 0.3s ease-in 2.7s forwards;
}

@keyframes toastIn {
    from { opacity: 0; transform: translateY(-20px) scale(0.9); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toastOut {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(0.8); }
}

/* public/style.css */

/* Segmented control — bộ lọc trạng thái đơn hàng */
.status-seg-btn {
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--chu-mo);
    cursor: pointer;
    text-align: center;
}
.status-seg-btn.active {
    background-color: var(--nen-the);
    box-shadow: 0 1px 4px var(--bong-dam), 0 1px 2px var(--bong);
    color: var(--chu);
}

/* ═══ BỐN NHÃN CHIA ĐỀU MỘT HÀNG: CHỐNG RỚT CHỮ ═══
 *
 * Từ 26/09/2026 thanh lọc gọn có 4 nút thay vì 3, nên mỗi nút hẹp đi 1/4.
 * Nhãn để white-space: nowrap — hẹp quá thì nó TRÀN ra ngoài nút chứ không
 * tự xuống dòng, và tràn thì đè sang nhãn bên cạnh.
 *
 * Đo ngày 26/09/2026 với PHÔNG THẬT (Inter — phông dự phòng của máy tính hẹp
 * hơn Inter nên đo bằng nó cho số đẹp giả). Nhãn dài nhất là "Chờ xác nhận";
 * đây là chỗ còn thừa trong nút, TRƯỚC khi có luật dưới đây:
 *
 *              320px   360px   390px   414px
 *     nhỏ      +19     +27     +30     +32
 *     vừa       +8     +15     +16     +18
 *     lớn       −4      +3      +3      +3     ← tràn, hoặc sát tới mức nguy
 *
 * Chỉ cỡ chữ "lớn" (1,18 lần) có vấn đề, và ở MỌI bề ngang điện thoại chứ
 * không riêng máy hẹp: 3px là khoảng cách không chịu nổi một phông khác hay
 * một lần Chrome làm tròn khác đi.
 *
 * Trần phải CO THEO BỀ NGANG vì bề ngang nút cũng vậy: nút = (bề ngang − 24)/4
 * khi trang còn hẹp hơn mốc max-w-md. 3,7vw − 1,5px là trần vừa đủ để nhãn
 * dài nhất luôn còn dư ≥ 5px.
 *
 * Chặn ở 447px vì từ 448px trở lên trang ngừng rộng ra (max-w-md), nút đứng
 * yên ở 106px và chữ 14,16px chỉ chiếm 94px — dư 12px, không cần đụng tới.
 *
 * min(...) chứ không đặt thẳng một cỡ: nó chỉ HẠ trần, không bao giờ làm chữ
 * to lên, nên cỡ "nhỏ" và "vừa" giữ nguyên y như trước. Vế đầu chép lại đúng
 * công thức của .text-\[9px\] ở dưới — sửa chỗ đó thì nhớ sửa cả đây.
 *
 * Cần !important vì .text-\[9px\] cũng !important; thiếu nó thì luật này thua
 * bất kể độ ưu tiên. (Bản đầu tôi viết không có, và nó im lặng không chạy.)
 */
@media (max-width: 447px) {
    #order-filters-compact .status-seg-btn > span:last-child {
        font-size: min(
            clamp(calc(10px * var(--co-chu)),
                  calc(2.9vw * var(--co-chu)),
                  calc(12px * var(--co-chu))),
            calc(3.7vw - 1.5px)) !important;
    }
}

/* .status-seg-chip đã gỡ 30/09/2026 cùng thanh lọc đầy đủ — không
   chỗ nào dùng nữa. */

/* ═══ DẢI TÓM TẮT Ở TRANG ĐƠN HÀNG: SỐ TIỀN KHÔNG ĐƯỢC BỊ CẮT ═══
 *
 * Hai ô tiền chia đôi một hàng, mỗi ô còn phải chứa biểu tượng và mũi tên.
 * Số tiền có thể lên tới 8 chữ số, mà .text-sm chung cho cả app lại rộng rãi
 * hơn chỗ này chịu được.
 *
 * Đo 30/09/2026 với "12.345.678 đ", phông Inter thật, KHI CHƯA có luật này —
 * chỗ còn thiếu trong ô:
 *
 *              320px   360px   390px   430px
 *     vừa        0       0       0       0
 *     lớn       −3       0       0       0
 *
 * Đúng MỘT tổ hợp tràn: máy hẹp nhất cộng cỡ chữ "lớn" (1,18 lần). Nên trần
 * để 4,8vw — vừa đủ kẹp riêng ca đó (16,52px → 15,4px), còn mọi cỡ và mọi bề
 * ngang khác đều nằm dưới trần nên giữ nguyên chữ như cũ.
 *
 * Từ 448px trở lên trang ngừng rộng ra (max-w-md) nên không cần đụng tới.
 *
 * KHÔNG nhân --co-chu vào trần: chính cỡ chữ "lớn" mới là thứ tràn, nên nó
 * phải bị kẹp. min() chỉ hạ, không bao giờ nâng.
 */
@media (max-width: 447px) {
    #hist-so-du, #hist-cho-duyet {
        font-size: min(
            clamp(calc(14px * var(--co-chu)),
                  calc(4.0vw * var(--co-chu)),
                  calc(16px * var(--co-chu))),
            4.8vw) !important;
    }
}

/* Chip lọc thời gian */
.order-filter-chip {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    cursor: pointer;
    background-color: var(--nen-the);
    color: var(--chu-mo);
    border: 1px solid var(--vien-mo);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.order-filter-chip:hover {
    color: var(--chu-phu);
}
.order-filter-chip.active {
    background-color: #ea580c !important;
    color: #ffffff !important;
    border-color: #ea580c !important;
    box-shadow: 0 4px 12px rgba(234, 88, 12, 0.3);
}

/* Ẩn thanh cuộn cho bộ lọc khi bị tràn màn hình */
.hide-scroll {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.hide-scroll::-webkit-scrollbar {
    display: none;
}

/* =============================================
   FLUID FONT SIZE — tự scale theo màn hình
   clamp(min, fluid, max):
     min  = phone nhỏ  ≤ 320px
     fluid = scale tuyến tính theo vw
     max  = phone lớn  ≥ 414px
   Kiểm tra thực tế:
     320px: min   | 375px: giữa  | 414px: max
   input giữ 16px cứng — ngăn iOS auto-zoom
   ============================================= */
.text-\[9px\]  { font-size: clamp(calc(10px * var(--co-chu)), calc(2.9vw * var(--co-chu)), calc(12px * var(--co-chu))) !important; }
.text-\[10px\] { font-size: clamp(calc(11px * var(--co-chu)), calc(3.2vw * var(--co-chu)), calc(13px * var(--co-chu))) !important; }
.text-\[11px\] { font-size: clamp(calc(12px * var(--co-chu)), calc(3.5vw * var(--co-chu)), calc(14px * var(--co-chu))) !important; }
.text-xs       { font-size: clamp(calc(12px * var(--co-chu)), calc(3.5vw * var(--co-chu)), calc(14px * var(--co-chu))) !important; }
.text-sm       { font-size: clamp(calc(14px * var(--co-chu)), calc(4.0vw * var(--co-chu)), calc(16px * var(--co-chu))) !important; }

/* Các cỡ còn lại chưa từng nằm trong khối này. Không thêm thì chỉnh cỡ chữ chỉ
   ăn được một phần trang — tiêu đề và số tiền đứng yên trong khi chữ quanh nó
   to lên, nhìn còn lệch hơn là để nguyên. */
.text-\[7px\]  { font-size: calc(7px  * var(--co-chu)) !important; }
.text-\[8px\]  { font-size: calc(9px  * var(--co-chu)) !important; }
.text-\[12px\] { font-size: calc(13px * var(--co-chu)) !important; }
.text-\[13px\] { font-size: calc(14px * var(--co-chu)) !important; }
.text-\[15px\] { font-size: calc(15px * var(--co-chu)) !important; }
.text-\[17px\] { font-size: calc(17px * var(--co-chu)) !important; }
.text-\[28px\] { font-size: calc(28px * var(--co-chu)) !important; }
.text-base     { font-size: calc(1rem    * var(--co-chu)) !important; }
.text-lg       { font-size: calc(1.125rem * var(--co-chu)) !important; }
.text-xl       { font-size: calc(1.25rem  * var(--co-chu)) !important; }
.text-2xl      { font-size: calc(1.5rem   * var(--co-chu)) !important; }
.text-3xl      { font-size: calc(1.875rem * var(--co-chu)) !important; }
.text-4xl      { font-size: calc(2.25rem  * var(--co-chu)) !important; }
.text-5xl      { font-size: calc(3rem     * var(--co-chu)) !important; }

/* ── Tiêu đề "BẢNG ĐUA THÁNG 10" — co theo chỗ trống, không rớt nút đuôi ──
   Hàng đầu bảng đua: nút quay lại + tiêu đề + (Thể lệ, chia sẻ, tải lại). Tiêu
   đề rộng ~12,5 lần cỡ chữ; chỗ còn lại cho nó là 100vw trừ ~170px (Thể lệ chỉ
   còn biểu tượng, dưới 400px) hoặc ~206px (Thể lệ có chữ). Nên cỡ chữ = chỗ
   trống / 12,5, trần là cỡ text-sm bình thường (theo cỡ chữ khách chọn), sàn
   11px. Đo bằng ảnh chụp ở 320 / 360 / 390px, cả ba cỡ chữ Nhỏ / Vừa / Lớn.
   Có truncate đỡ phía sau: lỡ vẫn thiếu chỗ thì cụt chữ, không đẩy nút. */
#lb-tieude { font-size: max(11px, min(calc(14px * var(--co-chu)), calc((100vw - 170px) / 12.5))) !important; }
@media (min-width: 400px) {
    #lb-tieude { font-size: max(11px, min(calc(14px * var(--co-chu)), calc((100vw - 206px) / 12.5))) !important; }
}

/* ── "Cập nhật lúc 9:30 ngày 08/10/2026" — dòng nhỏ sát dưới tiêu đề (08/10/2026) ──
   Cùng cụm với #lb-tieude nên chỉ có đúng chỗ của tiêu đề: đo bằng phông Inter
   thật, chỗ đó ≈ 100vw − 172px (dưới 400px, Thể lệ chỉ còn biểu tượng) hoặc
   100vw − 215px (từ 400px); câu dài nhất (giờ 2 chữ số) rộng ≈ 17,93 lần cỡ chữ.
   Cỡ 9px theo cỡ chữ khách chọn, trần = chỗ trống / 18 → máy 320px còn ~8px
   nhưng không bao giờ đè lên nút bên phải. Từ 448px trang ngừng rộng: cỡ "lớn"
   10,6px vẫn dưới trần 12,8px.
   Chữ mờ (tím nhạt 55%, đậm vừa) — chỉ là dòng phụ, đừng tranh với tiêu đề;
   vẫn đọc được: tương phản ≈ 3,6 trên nền tím đậm. */
#lb-capnhat {
    font-size: min(calc(9px * var(--co-chu)), calc((100vw - 174px) / 18)) !important;
    color: rgba(199, 210, 254, .55);
    font-weight: 600;
}
@media (min-width: 400px) {
    #lb-capnhat { font-size: min(calc(9px * var(--co-chu)), calc((100vw - 217px) / 18)) !important; }
}

/* ── Bảng đua: bộ chọn loại bảng (08/10/2026) ──
   Nút đang chọn màu vàng — cùng màu vương miện và bục hạng 1 — trên rãnh kính mờ. */
.lb-tab-ray { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.lb-tab-vang {
    background: linear-gradient(135deg, #fde68a, #f59e0b);
    color: #78350f;
    box-shadow: 0 2px 10px rgba(245, 158, 11, .45), inset 0 1px 0 rgba(255, 255, 255, .6);
}
/* Tên bảng MỘT DÒNG IN HOA, không bao giờ rớt dòng: "HOÀN TIỀN NHIỀU NHẤT" /
   "ĐƠN HÀNG NHIỀU NHẤT". Cỡ chữ theo cỡ khách chọn (công thức của .text-\[10px\])
   nhưng có TRẦN theo bề ngang nút — máy hẹp thì chữ tự nhỏ lại.
   Đo 08/10/2026 bằng phông Inter thật: biểu tượng + chữ dài nhất rộng ≈ 13,2 lần
   cỡ chữ, cộng khoảng cách 6px; nút = (bề ngang − 28px) / 2; chừa 8px mỗi bên →
   trần = (bề ngang − 72px) / 26,4 = 3,788vw − 2,727px. Từ 448px trang ngừng rộng
   (max-w-md) nên trần dừng ở 14,24px. Theo id + !important để thắng .text-\[10px\]
   (cũng !important). */
#lb-tab-points, #lb-tab-orders {
    white-space: nowrap;
    font-size: min(clamp(calc(11px * var(--co-chu)), calc(3.2vw * var(--co-chu)), calc(13px * var(--co-chu))),
                   calc(3.788vw - 2.727px), 14.24px) !important;
}

/* ── Bảng đua: chọn tháng — chữ gạch chân, ghi rõ số tháng (08/10/2026) ──
   Tháng đang chọn: chữ trắng + vạch vàng bên dưới. Chấm xanh = tháng đang đua. */
.lb-ky { position: relative; padding: 2px 2px 9px; color: rgba(255, 255, 255, .45); }
.lb-ky-chon { color: #fff; }
.lb-ky-chon::after {
    content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
    width: 32px; height: 3px; border-radius: 9999px;
    background: linear-gradient(90deg, #fde68a, #f59e0b);
}
.lb-cham-song {
    display: inline-block; flex-shrink: 0; width: 6px; height: 6px; border-radius: 9999px;
    background: #34d399; box-shadow: 0 0 0 3px rgba(52, 211, 153, .25);
}

/* ═══ BẢNG ĐUA: KHỐI TIỀN THƯỞNG TRONG CỘT BỤC TOP 3 (08/10/2026) ═══
 *
 * Kính màu cùng tông với cột — vàng / bạc / đồng — đậm hơn cột một bậc
 * (amber / slate / orange 600 → 700) và TRONG 50% để thấy màu cột xuyên qua.
 * Vệt sáng mép trên + viền sáng mảnh cho cảm giác nổi. Chữ trắng có bóng:
 * độ tương phản 2,6–6,0, ngang với số 1/2/3 màu trắng của chính bục.
 *
 * CỠ CHỮ theo cỡ khách chọn (--co-chu) nhưng có TRẦN theo bề ngang cột — cùng
 * cách với #hist-so-du ở dưới. Nhãn dài nhất "🎁 +1.000.000 đ" rộng ≈ 8,6 lần cỡ
 * chữ (đo bằng phông Inter thật); cột = (bề ngang − 32px) / 3; trừ lề 2 × 6px và
 * 4px dư → trần = 3,876vw − 3,1px. Từ 448px trang ngừng rộng (max-w-md) nên trần
 * dừng ở 14,26px. Không có trần thì cỡ "lớn" ở máy 320px tràn khỏi bục — mà bục
 * có overflow-hidden, tràn là bị cắt mất chữ.
 */
.lb-thuong-buc {
    font-size: min(clamp(calc(9px * var(--co-chu)), calc(3vw * var(--co-chu)), calc(14px * var(--co-chu))),
                   calc(3.876vw - 3.1px), 14.26px);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 0 0 1px rgba(255, 255, 255, .28), 0 2px 5px rgba(0, 0, 0, .12);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
.lb-thuong-1 { background: linear-gradient(180deg, rgba(217, 119, 6, .5), rgba(180, 83, 9, .5)); }
.lb-thuong-2 { background: linear-gradient(180deg, rgba(100, 116, 139, .5), rgba(71, 85, 105, .5)); }
.lb-thuong-3 { background: linear-gradient(180deg, rgba(234, 88, 12, .5), rgba(194, 65, 12, .5)); }

input, textarea, select {
    /* Không được xuống dưới 16px: iOS tự phóng to cả trang khi con trỏ vào ô
       nhập nhỏ hơn thế. Cỡ chữ Lớn thì vẫn cho to lên. */
    font-size: max(16px, calc(16px * var(--co-chu))) !important;
}

/* Nav & chip cũng scale theo màn hình */
.nav-item       { font-size: clamp(10px, 2.9vw, 12px); }
.filter-chip-v2,
.filter-chip-v3 { font-size: clamp(10px, 2.9vw, 12px); }
.order-filter-chip { font-size: clamp(10px, 2.9vw, 12px); }

/* =============================================
   TABLET / IPAD LAYOUT (≥ 768px)
   - Bottom nav → Left sidebar dọc
   - Main content mở rộng sang phải
   - Grid phụ chuyển thành 4 cột
   ============================================= */
@media (min-width: 768px) {

    /* Reset fluid font — dùng kích thước cố định trên tablet */
    .text-\[9px\]  { font-size: 11px !important; }
    .text-\[10px\] { font-size: 12px !important; }
    .text-\[11px\] { font-size: 13px !important; }
    .text-xs       { font-size: 13px !important; }
    .text-sm       { font-size: 14px !important; }
    .text-base     { font-size: 16px !important; }

    /* Top nav: chuyển từ sticky → fixed, full-width */
    body > nav {
        position: fixed !important;
        top: 0; left: 0; right: 0;
        z-index: 200;
        padding: 14px 28px;
    }

    /* Bottom nav → Left sidebar */
    .bottom-nav {
        top: 65px !important;
        left: 0 !important;
        right: auto !important;
        bottom: 0 !important;
        width: 210px;
        max-width: 210px;
        transform: none !important;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        padding: 20px 10px 20px;
        gap: 2px;
        border-top: none;
        border-right: 1px solid rgba(0,0,0,0.06);
        box-shadow: none;
    }

    /* Nav items: icon bên trái, text bên phải */
    .nav-item {
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        gap: 13px;
        padding: 13px 14px;
        border-radius: 14px;
        font-size: 13px;
        font-weight: 700;
        color: var(--chu-phu);
        width: 100%;
        transition: background 0.15s, color 0.15s;
    }

    .nav-item i {
        font-size: 18px;
        margin-bottom: 0;
        width: 22px;
        text-align: center;
        flex-shrink: 0;
    }

    .nav-item.active {
        background: var(--primary-nhat);
        color: var(--primary);
    }

    .nav-item:hover:not(.active) {
        background: var(--nen-mo);
        color: var(--chu-phu);
    }

    /* Main: lùi sang phải (sidebar) + xuống dưới (top nav) */
    main {
        margin-left: 210px !important;
        margin-top: 65px !important;
        max-width: none !important;
        padding-left: 40px !important;
        padding-right: 40px !important;
        padding-bottom: 40px !important;
    }

    /* Nội dung tab giữ max-width để dễ đọc, căn giữa */
    .tab-pane > div {
        max-width: 820px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Grid phụ (Xếp hạng / Deal / Blog / Áp mã): 4 cột */
    .secondary-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    /* Cards nổi bật hơn trên màn lớn */
    .app-card {
        border-radius: 22px;
    }

    /* Bottom padding reset (không cần safe-area của iPhone) */
    .bottom-nav { padding-bottom: 20px; }
}

/* =============================================
   DESKTOP / LAPTOP (≥ 1024px)
   ============================================= */
@media (min-width: 1024px) {
    body > nav { padding: 14px 36px; }

    .bottom-nav {
        width: 230px;
        max-width: 230px;
        padding: 24px 14px;
    }

    main {
        margin-left: 230px !important;
        padding-left: 56px !important;
        padding-right: 56px !important;
    }

    .tab-pane > div {
        max-width: 920px;
    }
}

/* =============================================
   MOBILE POLISH — tổng thể
   ============================================= */

/* Ngăn nội dung tràn ngang trên mọi tab */
.tab-pane { overflow-x: hidden; }

/* Xử lý văn bản dài không wrap trong card */
.app-card, .tab-pane { word-break: break-word; overflow-wrap: break-word; }

/* ===== PROSE BLOG — render nội dung từ Quill editor ===== */

/* Ảnh, bảng, code không tràn */
.prose-blog img { max-width: 100%; height: auto; border-radius: 12px; margin: 8px 0; }
.prose-blog table { width: 100%; display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; border-collapse: collapse; }
.prose-blog td, .prose-blog th { border: 1px solid #e2e8f0; padding: 6px 10px; }
.prose-blog pre { max-width: 100%; overflow-x: auto; white-space: pre-wrap;
    background: var(--nen-mo); border: 1px solid var(--vien); border-radius: 8px;
    padding: 0.75rem 1rem; margin: 0.75rem 0; font-family: 'Courier New', monospace;
    font-size: 13px; line-height: 1.6; }
.prose-blog a { word-break: break-all; color: #ea580c; text-decoration: underline; }

/* Video YouTube: ảnh trước, bấm mới tải trình phát (utils/videoNhe.js).
   Khung giữ tỷ lệ 16:9 TRƯỚC khi ảnh tải xong, để chữ phía dưới không nhảy. */
.prose-blog .yt-lite-boc { display: block; position: relative; aspect-ratio: 16 / 9;
    margin: 12px 0; border-radius: 12px; overflow: hidden; background: #000; }
.prose-blog .yt-lite { position: absolute; inset: 0; display: block; text-decoration: none; }
.prose-blog .yt-lite img { width: 100%; height: 100%; object-fit: cover; margin: 0; border-radius: 0; }
.prose-blog .yt-lite-nut { position: absolute; left: 50%; top: 50%; width: 68px; height: 48px;
    transform: translate(-50%, -50%); border-radius: 14px; background: rgba(255, 0, 0, .9);
    transition: transform .15s; }
.prose-blog .yt-lite-nut::after { content: ''; position: absolute; left: 50%; top: 50%;
    transform: translate(-35%, -50%); border-style: solid; border-width: 10px 0 10px 18px;
    border-color: transparent transparent transparent #fff; }
.prose-blog .yt-lite:active .yt-lite-nut { transform: translate(-50%, -50%) scale(.92); }
.prose-blog .yt-lite-khung { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Tiêu đề */
.prose-blog h1 { font-size: 1.5rem; font-weight: 900; margin: 1rem 0 0.5rem; line-height: 1.3; }
.prose-blog h2 { font-size: 1.25rem; font-weight: 800; margin: 0.875rem 0 0.4rem; line-height: 1.35; }
.prose-blog h3 { font-size: 1.1rem; font-weight: 700; margin: 0.75rem 0 0.35rem; line-height: 1.4; }

/* Đoạn văn */
/* Căn đều hai đầu cho phần thân bài.
   Đặt ở .prose-blog nên áp cho MỌI bài — cũ, mới, và cả bài đăng sau này —
   không phải sửa HTML từng bài.
   Không đụng tới tiêu đề: h1/h2/h3 căn đều trông rất kỳ khi chỉ có một dòng.
   Các đoạn có căn lề riêng (.ql-align-center/right) vẫn thắng, vì chúng là
   chọn theo class (0,2,0) còn luật này chọn theo thẻ (0,1,1). */
.prose-blog p { margin-bottom: 0.5rem; line-height: 1.7; text-align: justify; text-justify: inter-word; }

/* Blockquote */
.prose-blog blockquote { border-left: 4px solid #ea580c; margin: 0.75rem 0; padding: 0.5rem 1rem; background: #fff7ed; border-radius: 0 8px 8px 0; color: #92400e; font-style: italic; text-align: justify; text-justify: inter-word; }

/* Code block (ql-syntax) */
.prose-blog pre.ql-syntax { background: #1e293b; color: #e2e8f0; padding: 1rem; border-radius: 8px; font-family: 'Courier New', monospace; font-size: 13px; margin: 0.75rem 0; white-space: pre-wrap; overflow-x: auto; }
.prose-blog code { background: #f1f5f9; padding: 1px 5px; border-radius: 4px; font-family: monospace; font-size: 0.9em; }

/* Danh sách */
.prose-blog ul, .prose-blog ol { padding-left: 1.5rem; margin: 0.4rem 0; }
.prose-blog ul { list-style-type: disc; }
.prose-blog ol { list-style-type: decimal; }
.prose-blog li { margin-bottom: 0.2rem; line-height: 1.7; text-align: justify; text-justify: inter-word; }
/* Quill 1.x: li[data-list] không nằm trong ul/ol */
.prose-blog li[data-list="bullet"] { list-style-type: disc; display: list-item; margin-left: 1.5rem; }
.prose-blog li[data-list="ordered"] { list-style-type: decimal; display: list-item; margin-left: 1.5rem; }

/* Indent 1–8 cấp */
.prose-blog .ql-indent-1 { padding-left: 3em; }
.prose-blog .ql-indent-2 { padding-left: 6em; }
.prose-blog .ql-indent-3 { padding-left: 9em; }
.prose-blog .ql-indent-4 { padding-left: 12em; }
.prose-blog .ql-indent-5 { padding-left: 15em; }
.prose-blog .ql-indent-6 { padding-left: 18em; }
.prose-blog .ql-indent-7 { padding-left: 21em; }
.prose-blog .ql-indent-8 { padding-left: 24em; }

/* Căn chỉnh — class fallback cho bài cũ (bài mới dùng inline style) */
.prose-blog .ql-align-center { text-align: center; }
.prose-blog .ql-align-right  { text-align: right; }
.prose-blog .ql-align-justify { text-align: justify; }

/* Định dạng chữ */
.prose-blog strong, .prose-blog b { font-weight: 700; }
.prose-blog em, .prose-blog i { font-style: italic; }
.prose-blog u { text-decoration: underline; }
.prose-blog s { text-decoration: line-through; }

/* Touch targets: mọi nút bấm tối thiểu 44px chiều cao */
button, .nav-item, [role="button"] { min-height: 44px; }

/* Nút "Trả lời" / "Xóa" dưới bình luận (08/10/2026). Luật 44px ở trên biến mỗi
   nút chữ nhỏ thành một hàng cao 44px — thẻ trả lời có hai nút là hai hàng trống,
   danh sách dài lê thê. Hai nút nay đứng chung một hàng, cao 28px (vẫn trên mức
   tối thiểu 24px của WCAG 2.2), cách nhau gap-3 nên không bấm nhầm. */
.bl-nut { min-height: 28px; display: inline-flex; align-items: center; padding: 0 4px; }

/* ── CÔNG TẮC GẠT ──────────────────────────────────────────────────────────
   Dùng cho hàng "Thông báo" trong mục Tôi.
   BẮT BUỘC có min-height riêng: luật button{min-height:44px} ngay phía trên
   ép nút cao bằng chiều rộng, cộng bo tròn là ra hình tròn chứ không ra
   thanh gạt. Vùng chạm 44px được giữ lại bằng ::before nên vẫn đạt chuẩn
   tiếp cận mà không phải phình phần nhìn thấy. */
.switch {
    position: relative;
    display: inline-block;
    flex: none;
    width: 46px;
    height: 26px;
    min-height: 26px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #cbd5e1;
    cursor: pointer;
    transition: background .2s ease, transform .1s ease;
    -webkit-appearance: none;
    appearance: none;
}
.switch::before {                      /* vùng chạm 44px, không nhìn thấy */
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 44px;
}
.switch-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    transition: transform .2s ease;
    pointer-events: none;
}
.switch[aria-checked="true"] { background: #ee4d2d; }
.switch[aria-checked="true"] .switch-knob { transform: translateX(20px); }
.switch:active { transform: scale(.94); }
/* Ba trạng thái không tự gạt được → làm mờ để báo trước là bấm sẽ không đổi */
.switch[data-state="blocked"],
.switch[data-state="unsupported"],
.switch[data-state="need-install"] { background: #e2e8f0; opacity: .55; }

/* Neo thêm theo id: độ ưu tiên (1,0,0) nên thắng cả utility của Tailwind
   (w-11 h-6 rounded-full) lẫn luật button{min-height:44px}. Nhờ vậy nút vẫn ra
   thanh ngang ngay cả khi trình duyệt còn giữ bản HTML cũ chưa có class .switch
   — không phụ thuộc vào việc cache đã hết hạn hay chưa. */
#notif-toggle {
    position: relative;
    display: inline-block;
    flex: none;
    box-sizing: border-box;
    width: 46px;
    height: 26px;
    min-height: 26px;
    max-height: 26px;
    padding: 0;
    border: 0;
    border-radius: 999px;
}
#notif-toggle-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    pointer-events: none;
}
.nav-item { min-height: 44px; }

/* Loại bỏ flash xanh khi tap trên Android */
button, a, [onclick] { -webkit-tap-highlight-color: transparent; }

/* Textarea placeholder dễ đọc hơn */
textarea::placeholder, input::placeholder { opacity: 0.5; }

/* Focus ring nổi bật hơn trên mobile */
textarea:focus, input:focus { outline: none; }

/* Prevent scroll bounce trên iOS gây layout shift */
.tab-pane { -webkit-overflow-scrolling: touch; }

/* Shopee Video: thumbnail doc 9:16 giong ti le video goc (do that: 280x500) */
.vd-thumb { aspect-ratio: 9 / 16; }
.vd-thumb.vd-noimg {
    background: linear-gradient(135deg, #e2e8f0, #f1f5f9);
}
/* Cat tieu de con 2 dong, khong de the cao thap khong deu */
.vd-clamp2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Dai tab ma giam: keo ngang duoc nhung khong hien thanh cuon */
#vd-tabs::-webkit-scrollbar { display: none; }
/* Tailwind dat .hidden{display:none} truoc, nhung .flex trong cung the se de len.
   Ep .hidden thang the de dai tab an duoc khi khong co ma giam nao. */
#vd-tabs.hidden { display: none !important; }

/* Popup chi tiet don hang: phong nhe khi mo, cho cam giac "bung ra" thay vi
   hien dot ngot. Dung lai duong cong cua toast cho dong bo toan app. */
#order-detail-modal.flex > #od-box {
    animation: odPopIn .22s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
@keyframes odPopIn {
    from { opacity: 0; transform: scale(.94) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
/* Nguoi dung tat hieu ung chuyen dong thi khong phong nua */
@media (prefers-reduced-motion: reduce) {
    #order-detail-modal.flex > #od-box { animation: none; }
}

/* ── Mui ten "sang buoc sau" cua khoi Cach nhan hoan tien ──────────────────
   Khi dong ho tu chuyen buoc dang tat (nguoi dung bam tam dung, hoac may xin
   it chuyen dong) ma nguoi xem dung mot buoc qua lau, mui ten khe nhun vai cai
   de chi cho can bam. Giu -50% theo truc doc vi nut dang duoc can giua bang
   -translate-y-1/2 cua Tailwind — animation ghi de transform nen phai tu giu
   lay, khong thi nut tut xuong duoi. */
@keyframes hdNhun {
    0%, 55%, 100% { transform: translate(0, -50%); }
    15%           { transform: translate(5px, -50%); }
    30%           { transform: translate(0, -50%); }
    45%           { transform: translate(5px, -50%); }
}
.hd-nhun { animation: hdNhun 1.9s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
    .hd-nhun { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LOP PHU GIAO DIEN TOI — anh xa tien ich Tailwind sang bien mau

   Vi sao lam kieu nay: mau trong trang duoc viet thang bang lop tien ich
   Tailwind (bg-white, text-slate-400, ...) o hon 700 cho, ca trong index.html
   lan trong HTML do JavaScript sinh ra. Sua tung cho mot thi vua lau vua de
   sot, va HTML sinh dong khong sua duoc bang tay.

   Nen thay vi vay, o day anh xa mot lan tu lop tien ich sang bien mau. Them
   trang moi dung dung bo lop nay la tu dong co giao dien toi.

   Dung !important vi Tailwind CDN chen bang kieu cua no vao <head> va minh
   khong kiem soat duoc thu tu. Tien ich cua Tailwind khong co !important nen
   khong xung dot nguoc lai.

   Chi ap trong che do toi. Che do sang giu nguyen mau goc cua Tailwind.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) { color-scheme: dark; }
}
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }

/* Duoi day chi khop [data-theme="dark"]. Khi nguoi dung de "theo thiet bi",
   JavaScript van gan san thuoc tinh do (dark hoac light) vao <html> va cap nhat
   lai moi khi he dieu hanh doi — nho vay khong phai viet moi quy tac hai lan.
   Khoi bien mau o dau file van co nhanh prefers-color-scheme rieng, de may nao
   tat JavaScript thi it nhat nen va chu van dung. */

/* ── Nen ─────────────────────────────────────────────────────────────────── */
:root[data-theme="dark"] .bg-white,
:root[data-theme="dark"] .bg-slate-50,
:root[data-theme="dark"] .bg-gray-50 { background-color: var(--nen-the) !important; }

:root[data-theme="dark"] .bg-slate-100,
:root[data-theme="dark"] .bg-gray-100 { background-color: var(--nen-mo-2) !important; }

:root[data-theme="dark"] .bg-slate-200,
:root[data-theme="dark"] .bg-gray-200 { background-color: var(--nen-mo-3) !important; }

/* ── Chu ─────────────────────────────────────────────────────────────────── */
:root[data-theme="dark"] .text-slate-900,
:root[data-theme="dark"] .text-slate-800,
:root[data-theme="dark"] .text-slate-700,
:root[data-theme="dark"] .text-gray-800,
:root[data-theme="dark"] .text-gray-700 { color: var(--chu) !important; }

:root[data-theme="dark"] .text-slate-600,
:root[data-theme="dark"] .text-slate-500,
:root[data-theme="dark"] .text-gray-600,
:root[data-theme="dark"] .text-gray-500 { color: var(--chu-phu) !important; }

:root[data-theme="dark"] .text-slate-400,
:root[data-theme="dark"] .text-gray-400 { color: var(--chu-mo) !important; }

:root[data-theme="dark"] .text-slate-300,
:root[data-theme="dark"] .text-slate-200,
:root[data-theme="dark"] .text-gray-300,
:root[data-theme="dark"] .text-gray-200 { color: var(--chu-rat-mo) !important; }

:root[data-theme="dark"] .placeholder-slate-400::placeholder,
:root[data-theme="dark"] .placeholder-gray-400::placeholder { color: var(--chu-rat-mo) !important; }

/* ── Vien ────────────────────────────────────────────────────────────────── */
:root[data-theme="dark"] .border-slate-100,
:root[data-theme="dark"] .border-slate-50,
:root[data-theme="dark"] .border-gray-100,
:root[data-theme="dark"] .border-gray-50 { border-color: var(--vien-mo) !important; }

:root[data-theme="dark"] .border-slate-200,
:root[data-theme="dark"] .border-slate-300,
:root[data-theme="dark"] .border-gray-200,
:root[data-theme="dark"] .border-gray-300 { border-color: var(--vien) !important; }

/* ── Anh, khung anh ──────────────────────────────────────────────────────── */
/* Anh san pham nen sang hon nen toi mot chut cho do choi mat */
:root[data-theme="dark"] img:not([src*="logo"]):not(.khong-lam-diu) { filter: brightness(0.92); }

/* ── Nen mau nhat ────────────────────────────────────────────────────────── */
/* bg-orange-50, bg-emerald-50... o che do toi qua choi. Thay bang mot lop mau
   trong suot: van giu duoc y nghia mau, ma khong sang loa. */
:root[data-theme="dark"] .bg-orange-50   { background-color: rgba(249,115,22,0.14) !important; }
:root[data-theme="dark"] .bg-orange-100  { background-color: rgba(249,115,22,0.20) !important; }
:root[data-theme="dark"] .bg-amber-50    { background-color: rgba(245,158,11,0.14) !important; }
:root[data-theme="dark"] .bg-amber-100   { background-color: rgba(245,158,11,0.20) !important; }
:root[data-theme="dark"] .bg-yellow-100  { background-color: rgba(234,179,8,0.20)  !important; }
:root[data-theme="dark"] .bg-emerald-50  { background-color: rgba(16,185,129,0.14) !important; }
:root[data-theme="dark"] .bg-emerald-100 { background-color: rgba(16,185,129,0.20) !important; }
:root[data-theme="dark"] .bg-green-50    { background-color: rgba(34,197,94,0.14)  !important; }
:root[data-theme="dark"] .bg-green-100   { background-color: rgba(34,197,94,0.20)  !important; }
:root[data-theme="dark"] .bg-red-50      { background-color: rgba(239,68,68,0.14)  !important; }
:root[data-theme="dark"] .bg-red-100     { background-color: rgba(239,68,68,0.20)  !important; }
:root[data-theme="dark"] .bg-rose-50     { background-color: rgba(244,63,94,0.14)  !important; }
:root[data-theme="dark"] .bg-rose-100    { background-color: rgba(244,63,94,0.20)  !important; }
:root[data-theme="dark"] .bg-blue-50     { background-color: rgba(59,130,246,0.14) !important; }
:root[data-theme="dark"] .bg-blue-100    { background-color: rgba(59,130,246,0.20) !important; }
:root[data-theme="dark"] .bg-sky-50      { background-color: rgba(14,165,233,0.14) !important; }
:root[data-theme="dark"] .bg-sky-100     { background-color: rgba(14,165,233,0.20) !important; }
:root[data-theme="dark"] .bg-indigo-50   { background-color: rgba(99,102,241,0.14) !important; }
:root[data-theme="dark"] .bg-indigo-100  { background-color: rgba(99,102,241,0.20) !important; }
:root[data-theme="dark"] .bg-purple-50   { background-color: rgba(168,85,247,0.14) !important; }
:root[data-theme="dark"] .bg-purple-100  { background-color: rgba(168,85,247,0.20) !important; }
:root[data-theme="dark"] .bg-violet-100  { background-color: rgba(139,92,246,0.20) !important; }
:root[data-theme="dark"] .bg-pink-50     { background-color: rgba(236,72,153,0.14) !important; }
:root[data-theme="dark"] .bg-pink-100    { background-color: rgba(236,72,153,0.20) !important; }
:root[data-theme="dark"] .bg-teal-50     { background-color: rgba(20,184,166,0.14) !important; }
:root[data-theme="dark"] .bg-teal-100    { background-color: rgba(20,184,166,0.20) !important; }

/* ── Nhung cho PHAI giu nguyen mau ───────────────────────────────────────── */
/* Chu trang nam tren nen gradient cam / dai banner tham — doi mau la mat chu.
   Cac lop nay khong bao gio bi lop phu o tren dong toi. */
:root[data-theme="dark"] .home-gradient,
:root[data-theme="dark"] .home-gradient * { color: inherit; }

/* Nut chinh mau cam: chu luon trang */
:root[data-theme="dark"] [style*="linear-gradient"] .text-white,
:root[data-theme="dark"] .text-white { color: #ffffff !important; }

/* Anh dai dien va logo khong bi lam toi */
:root[data-theme="dark"] #nav-avatar,
:root[data-theme="dark"] .logo-img { filter: none !important; }

/* ── NEN SANG VIET THANG TRONG THE ───────────────────────────────────────────
   Mot so khoi dat mau ngay trong thuoc tinh style=, khong qua lop tien ich —
   nen bang anh xa o tren khong voi toi duoc. O che do toi chung van sang truoc,
   ma chu thi da doi sang mau nhat, thanh ra khong doc noi.

   Bat theo chinh chuoi mau trong thuoc tinh style. Cach nay voi toi duoc ca
   HTML do JavaScript sinh ra, va them mot khoi moi dung dung mau cu thi tu
   dong duoc bao. Doi mau trong the thi nho them mot dong o day.

   Danh sach hien tai (dem trong index.html, main.js, ui.js, trends.js):
     #fff7ed / #fef3c7 / #ffedd5 / #fffbeb  — kem, khoi huong dan & tan binh
     #fef2f2 / #fecaca                      — do nhat, khoi canh bao
     #eef2ff / #e0e7ff                      — tim nhat
     #ecfdf5                                — xanh nhat
     #f8fafc / #f8f9fa / #e2e8f0            — xam nhat
   ------------------------------------------------------------------------- */

/* Kem — khối hướng dẫn, nhiệm vụ tân binh */
:root[data-theme="dark"] [style*="#fff7ed"],
:root[data-theme="dark"] [style*="#fffbeb"],
:root[data-theme="dark"] [style*="#fef3c7"],
:root[data-theme="dark"] [style*="#ffedd5"] {
    background: linear-gradient(135deg, rgba(249,115,22,0.16), rgba(245,158,11,0.12)) !important;
    border-color: rgba(249,115,22,0.3) !important;
}

/* Đỏ nhạt — khối cảnh báo */
:root[data-theme="dark"] [style*="#fef2f2"],
:root[data-theme="dark"] [style*="#fecaca"] {
    background: rgba(239,68,68,0.16) !important;
    border-color: rgba(239,68,68,0.35) !important;
}

/* Tím nhạt */
:root[data-theme="dark"] [style*="#eef2ff"],
:root[data-theme="dark"] [style*="#e0e7ff"] {
    background: linear-gradient(135deg, rgba(99,102,241,0.18), rgba(129,140,248,0.12)) !important;
    border-color: rgba(99,102,241,0.32) !important;
}

/* Xanh nhạt */
:root[data-theme="dark"] [style*="#ecfdf5"] {
    background: rgba(16,185,129,0.16) !important;
    border-color: rgba(16,185,129,0.32) !important;
}

/* Xám nhạt */
:root[data-theme="dark"] [style*="#f8fafc"],
:root[data-theme="dark"] [style*="#f8f9fa"] {
    background: var(--nen-mo) !important;
    border-color: var(--vien) !important;
}

/* Dải cam thương hiệu và các thanh tiến độ GIỮ NGUYÊN. Đặt sau để thắng mọi
   quy tắc ở trên, phòng khi một thẻ mang cả hai chuỗi màu. */
:root[data-theme="dark"] [style*="#ee4d2d"],
:root[data-theme="dark"] [style*="#ff6b35"],
:root[data-theme="dark"] [style*="#f59e0b"],
:root[data-theme="dark"] [style*="#ef4444"],
:root[data-theme="dark"] [style*="#d97706"],
:root[data-theme="dark"] [style*="#cc1500"] {
    border-color: transparent;
}

/* ── Vài chỗ còn sót ─────────────────────────────────────────────────────── */

/* Ô nhập của trình duyệt: ngày, chọn, vùng văn bản */
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
    color: var(--chu);
}
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder { color: var(--chu-rat-mo); }

/* Lớp phủ của hộp thoại: ở chế độ tối cần tối hơn cho tách bạch */
:root[data-theme="dark"] .bg-black\/60 { background-color: rgba(0,0,0,0.78) !important; }
:root[data-theme="dark"] .bg-black\/50 { background-color: rgba(0,0,0,0.7)  !important; }

/* Ảnh khung rỗng (placeholder) trên nền tối */
:root[data-theme="dark"] .bg-slate-900,
:root[data-theme="dark"] .bg-slate-800 { background-color: #05090f !important; }

/* Chuyển màu khi đổi chế độ cho đỡ giật. Không áp cho ai đã tắt hiệu ứng. */
@media (prefers-reduced-motion: no-preference) {
    body, .app-card, .bottom-nav, .input-field {
        transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    }
}

/* ── CHU MAU DAM TREN NEN TOI ────────────────────────────────────────────────
   Bac 600/700/800 cua Tailwind duoc chon de doc tren nen TRANG. Dat len nen
   the o che do toi (#161f32) thi tuong phan tut han: text-indigo-700 (#4338ca)
   chi con khoang 1.6:1 — gan nhu khong doc duoc. Bac 400 dat khoang 7:1.

   Khong dung o day cho chu mau nam tren nen cam thuong hieu: cac nut do dung
   text-white, khong roi vao bo chon nay.
   ------------------------------------------------------------------------- */
:root[data-theme="dark"] .text-orange-600,
:root[data-theme="dark"] .text-orange-700,
:root[data-theme="dark"] .text-orange-800 { color: #fb923c !important; }
:root[data-theme="dark"] .text-amber-600,
:root[data-theme="dark"] .text-amber-700,
:root[data-theme="dark"] .text-amber-800 { color: #fbbf24 !important; }
:root[data-theme="dark"] .text-yellow-600,
:root[data-theme="dark"] .text-yellow-700,
:root[data-theme="dark"] .text-yellow-800 { color: #facc15 !important; }
:root[data-theme="dark"] .text-red-600,
:root[data-theme="dark"] .text-red-700,
:root[data-theme="dark"] .text-red-800 { color: #f87171 !important; }
:root[data-theme="dark"] .text-rose-600,
:root[data-theme="dark"] .text-rose-700,
:root[data-theme="dark"] .text-rose-800 { color: #fb7185 !important; }
:root[data-theme="dark"] .text-pink-600,
:root[data-theme="dark"] .text-pink-700,
:root[data-theme="dark"] .text-pink-800 { color: #f472b6 !important; }
:root[data-theme="dark"] .text-emerald-600,
:root[data-theme="dark"] .text-emerald-700,
:root[data-theme="dark"] .text-emerald-800 { color: #34d399 !important; }
:root[data-theme="dark"] .text-green-600,
:root[data-theme="dark"] .text-green-700,
:root[data-theme="dark"] .text-green-800 { color: #4ade80 !important; }
:root[data-theme="dark"] .text-teal-600,
:root[data-theme="dark"] .text-teal-700,
:root[data-theme="dark"] .text-teal-800 { color: #2dd4bf !important; }
:root[data-theme="dark"] .text-sky-600,
:root[data-theme="dark"] .text-sky-700,
:root[data-theme="dark"] .text-sky-800 { color: #38bdf8 !important; }
:root[data-theme="dark"] .text-blue-600,
:root[data-theme="dark"] .text-blue-700,
:root[data-theme="dark"] .text-blue-800 { color: #60a5fa !important; }
:root[data-theme="dark"] .text-indigo-600,
:root[data-theme="dark"] .text-indigo-700,
:root[data-theme="dark"] .text-indigo-800 { color: #818cf8 !important; }
:root[data-theme="dark"] .text-violet-600,
:root[data-theme="dark"] .text-violet-700,
:root[data-theme="dark"] .text-violet-800 { color: #a78bfa !important; }
:root[data-theme="dark"] .text-purple-600,
:root[data-theme="dark"] .text-purple-700,
:root[data-theme="dark"] .text-purple-800 { color: #c084fc !important; }

/* ── GRADIENT SANG ───────────────────────────────────────────────────────────
   Hai o "Mua hang hoan tien" va "Rut tien" o trang chu dung lop GRADIENT
   (bg-gradient-to-br from-orange-50 to-amber-50), khong phai bg-*. Lop phu nen
   o tren chi doi background-color nen khong voi toi duoc: o che do toi nen van
   kem sang nguyen, ma chu text-slate-800 thi da bi lam sang — thanh ra trang
   tren trang, mat chu.

   Tailwind dung bien --tw-gradient-from / --tw-gradient-to, nen sua thang bien.
   ------------------------------------------------------------------------- */
:root[data-theme="dark"] .from-orange-50 {
    --tw-gradient-from: rgba(249,115,22,0.18) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(249,115,22,0)) !important;
}
:root[data-theme="dark"] .from-amber-50 {
    --tw-gradient-from: rgba(245,158,11,0.18) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(245,158,11,0)) !important;
}
:root[data-theme="dark"] .from-white {
    --tw-gradient-from: var(--nen-the) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(22,31,50,0)) !important;
}
:root[data-theme="dark"] .to-amber-50  { --tw-gradient-to: rgba(245,158,11,0.10) !important; }
:root[data-theme="dark"] .to-yellow-50 { --tw-gradient-to: rgba(234,179,8,0.10)  !important; }
:root[data-theme="dark"] .to-slate-50  { --tw-gradient-to: var(--nen-mo)         !important; }

/* Vien cua hai o do cung phai diu lai, khong thi vien cam sang gat tren nen toi */
:root[data-theme="dark"] .border-orange-100 { border-color: rgba(249,115,22,0.28) !important; }
:root[data-theme="dark"] .border-amber-100  { border-color: rgba(245,158,11,0.28) !important; }
:root[data-theme="dark"] .border-indigo-100 { border-color: rgba(99,102,241,0.28) !important; }
:root[data-theme="dark"] .border-emerald-100{ border-color: rgba(16,185,129,0.28) !important; }
:root[data-theme="dark"] .border-red-100,
:root[data-theme="dark"] .border-rose-100   { border-color: rgba(239,68,68,0.28)  !important; }

/* ── THE THONG BAO ───────────────────────────────────────────────────────────
   Trang Thong bao co 6 kieu the, moi kieu mot mau nen: trang, kem (chao mung),
   cam nhat 60% (tin he thong)... O che do sang nhin ra duoc tung loai, nhung o
   che do toi chung thanh mot mang xam nhat nhoa, chu dat len kho doc.

   O che do toi cho TAT CA the ve cung mot nen toi. Mau van phan biet duoc qua
   vong tron icon ben trai (cam / xanh / do / vang) — cho do van giu nguyen.
   ------------------------------------------------------------------------- */
:root[data-theme="dark"] #points-logs-list > div {
    background: var(--nen-the) !important;
    border-color: var(--vien-mo) !important;
}

/* Nhan loai tin ben trong the: giu mau nhung phai du sang de doc */
:root[data-theme="dark"] #points-logs-list [style*="color:#ee4d2d"] { color: #fb923c !important; }

/* Lop tien ich co do trong suot (bg-orange-50/60, bg-white/90...) khong trung
   ten voi lop dac, phai ghi rieng. */
:root[data-theme="dark"] .bg-orange-50\/60  { background-color: rgba(249,115,22,0.14) !important; }
:root[data-theme="dark"] .bg-orange-100\/60 { background-color: rgba(249,115,22,0.22) !important; }

/* ── THANH BON BUOC ──────────────────────────────────────────────────────────
   Vong tron cua buoc DA DI QUA dung lop bg-orange-100. O che do toi lop do
   duoc doi thanh mot mang mau TRONG SUOT — nen duong noi mau cam chay phia
   sau xuyen thang qua, gach ngang len chinh con so cua buoc do.

   Rieng may vong tron nay phai duc, khong duoc trong suot.
   ------------------------------------------------------------------------- */
:root[data-theme="dark"] [data-hd-tron] {
    background-color: var(--nen-the) !important;
}
:root[data-theme="dark"] [data-hd-tron].bg-orange-100 {
    background-color: #4a2b16 !important;
    border-color: rgba(249,115,22,0.5) !important;
}
:root[data-theme="dark"] [data-hd-tron].bg-orange-500 {
    background-color: #ea580c !important;
}

/* ── BAI VIET O CHE DO TOI ───────────────────────────────────────────────────
   Khoi .prose-blog viet mau cung tu truoc: vien bang xam nhat, nen trich dan
   kem, nen code xam. O che do toi chung van sang nguyen trong khi chu da doi
   sang mau nhat — bai viet thanh ra doc khong noi.

   Chu trong bai khong dat lop tien ich nao nen thua mau tu <body>, da dung san.
   Chi phai vet lai may cho co mau viet thang.
   ------------------------------------------------------------------------- */
:root[data-theme="dark"] .prose-blog td,
:root[data-theme="dark"] .prose-blog th {
    border-color: var(--vien) !important;
}
:root[data-theme="dark"] .prose-blog th {
    background: var(--nen-mo-2);
}

/* Cam #ea580c tren nen toi chi dat ~4.6:1; bac 400 dat ~7:1 */
:root[data-theme="dark"] .prose-blog a { color: #fb923c !important; }

:root[data-theme="dark"] .prose-blog blockquote {
    background: rgba(249,115,22,0.14) !important;
    border-left-color: #fb923c !important;
    color: #fcd9a8 !important;
}

:root[data-theme="dark"] .prose-blog code {
    background: var(--nen-mo-2) !important;
    color: var(--chu) !important;
}

/* pre.ql-syntax von da toi san, giu nguyen */
:root[data-theme="dark"] .prose-blog pre:not(.ql-syntax) {
    background: var(--nen-mo) !important;
    border-color: var(--vien) !important;
}

/* Anh trong bai khong bi lam toi qua muc — quy tac chung o tren ha sang 92%,
   voi anh huong dan chup man hinh thi vay la du. */
:root[data-theme="dark"] .prose-blog img { filter: brightness(0.94); }

/* ── LOP CO DO TRONG SUOT ────────────────────────────────────────────────────
   Tailwind coi "bg-white/80" la mot lop RIENG, ten khac han "bg-white". Anh xa
   nen o tren chi bat ".bg-white" nen khong voi toi duoc — thanh tieu de bai
   viet giu nguyen 80% trang, phu them backdrop-blur, o che do toi nhin ra mot
   mang XAM.

   Chi doi nhung lop nam tren NEN TRANG. Cac lop nam tren dai mau hoac nen toi
   san (bg-white/10, /15, /20 o dau trang chu va bang dua; bg-black/40 phu len
   anh banner; bg-slate-900/*) thi GIU NGUYEN — chung von da dung o ca hai che
   do, doi di la hong.

   Them lop trong suot moi vao trang thi nho them mot dong o day.
   ------------------------------------------------------------------------- */

/* Thanh tieu de dinh o trang bai viet */
:root[data-theme="dark"] .bg-white\/80 {
    background-color: rgba(22,31,50,0.80) !important;   /* đường lui cho Safari < 16.2 */
    background-color: color-mix(in srgb, var(--nen-the) 80%, transparent) !important;
}
:root[data-theme="dark"] .bg-white\/90 {
    background-color: rgba(22,31,50,0.90) !important;
    background-color: color-mix(in srgb, var(--nen-the) 90%, transparent) !important;
}
:root[data-theme="dark"] .bg-white\/95 {
    background-color: rgba(22,31,50,0.95) !important;
    background-color: color-mix(in srgb, var(--nen-the) 95%, transparent) !important;
}

/* Đường kẻ phân cách mờ */
:root[data-theme="dark"] .border-slate-200\/60 {
    border-color: rgba(42,56,82,0.6) !important;
    border-color: color-mix(in srgb, var(--vien) 60%, transparent) !important;
}

/* ── TRANG KHACH (chua dang nhap) ────────────────────────────────────────────
   O "Rut tien" o muc Tinh nang noi bat dung bg-amber-50/30 — lop co do trong
   suot, ten khac bg-amber-50 nen anh xa nen khong voi toi.

   Hai nut Facebook / Zalo dung mau thuong hieu cua chinh hai hang do. Tren nen
   toi #1877F2 chi dat 4.45:1 va #0068FF chi 3.97:1 — duoi muc doc thoai mai cho
   chu nho. Lam sang len o che do toi, van giu dung sac xanh nhan ra duoc.
   ------------------------------------------------------------------------- */
:root[data-theme="dark"] .bg-amber-50\/30 { background-color: rgba(245,158,11,0.10) !important; }

:root[data-theme="dark"] .text-\[\#1877F2\] { color: #5b9cf8 !important; }   /* Facebook — 6.77:1 */
:root[data-theme="dark"] .text-\[\#0068FF\] { color: #4d9bff !important; }   /* Zalo — 6.68:1 */

/* ── SĂN DEAL 1K ─────────────────────────────────────────────────────────────
   Gộp từ trang riêng homnaycosalekhong.com vào 15/09/2026. Trang đó dùng nền tối
   + kính mờ + tím indigo; ở đây viết lại theo biến màu của Hôm Nay Sale nên tự
   chạy đúng ở cả chế độ sáng và tối, không cần khối [data-theme="dark"] riêng.
   ------------------------------------------------------------------------- */

/* Hai lối xem: tất cả / yêu thích. Cùng khuôn với ba ô trạng thái ở trang Đơn
   hàng — số ở trên, nhãn ở dưới, nền trắng nổi lên khi được chọn. */
.d1k-tab {
    flex: 1 1 0%;
    min-width: 0;
    min-height: 0;
    padding: 6px 2px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: var(--chu-mo);
    background: transparent;
    transition: all .2s ease;
}
.d1k-tab-chon {
    background: var(--nen-the);
    color: var(--chu);
    box-shadow: 0 1px 4px var(--bong);
}

/* Nút lọc. Bấm vào thì đổi hẳn sang màu cam thương hiệu, không chỉ đổi viền —
   trên màn nhỏ ngoài nắng thì đổi viền gần như không thấy. */
.d1k-chip {
    min-height: 0;
    padding: 6px 10px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
    color: var(--chu-phu);
    background: var(--nen-mo-2);
    border: 1px solid transparent;
    transition: all .15s ease;
}
.d1k-chip:active { transform: scale(.94); }
/* Phiên đang chạy: viền đỏ nhạt để mắt bám vào ngay, nhưng KHÔNG tô nền đỏ
   — nền đỏ đã dành cho nhóm "Ẩn bậc giá" khi được chọn, hai thứ khác nghĩa
   nhau mà cùng màu thì đọc nhầm. Nút này được chọn vẫn ra cam như mọi nút. */
.d1k-chip.d1k-dang-sale {
    border-color: #dc2626;
    color: #dc2626;
    background: rgba(220,38,38,.08);
}
.d1k-chip.d1k-dang-sale.d1k-chon {
    background: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
}
.d1k-chip.d1k-chon {
    background: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(238,77,45,.3);
}
/* Nhóm "Ẩn bậc giá" là hành động loại bỏ, nên chọn xong ra màu đỏ chứ không cam:
   cùng màu cam thì hai nhóm ngược nghĩa nhau lại trông giống nhau. */
.d1k-chip-an.d1k-chon {
    background: #dc2626;
    border-color: #dc2626;
    box-shadow: 0 2px 8px rgba(220,38,38,.3);
}

/* Số bước trong hộp hướng dẫn */
.d1k-buoc {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 1px;
    border-radius: 999px;
    background: var(--primary-nhat);
    color: var(--primary);
    font-size: 10px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Mũi tên của <details> tự quay khi mở */
#tab-deal-1k details[open] summary .fa-chevron-down { transform: rotate(180deg); }
#tab-deal-1k summary .fa-chevron-down { transition: transform .2s ease; }
#tab-deal-1k summary::-webkit-details-marker { display: none; }
#tab-deal-1k summary { list-style: none; }

/* ── NUT "NHAN HOAN TIEN NGAY" O TRANG CHAO ────────────────────────────────
   Nut duy nhat dang ke tren trang khach la, nen no phai tu keo mat nguoi ve.
   Ba lop chong len nhau, moi lop lam mot viec khac nhau:

     1. nutGoiMoiTho  — phong rat nhe (1 -> 1.025). Chuyen dong cham, bien do
        nho, de mat bat duoc o ria thi giac ma khong thay nhap nhay kho chiu.
     2. nutGoiMoiVien — vong sang lan ra roi tat. Dung box-shadow chu khong
        dung the that, nen khong chiem cho va khong lam xo bo cuc.
     3. nutGoiMoiLuot — vet sang quet ngang qua mat nut, 3,2 giay mot lan.

   Vet sang phai o z-index: -1, khong phai 1. Trong mot lop xep chong, chu la
   noi dung inline nen ve o buoc 5, con phan tu duoc dinh vi voi z-index 0 ve o
   buoc 6 — tuc dat 0 hay 1 deu khien vet sang phu LEN chu. Con -1 thi ve ngay
   sau nen va truoc chu, dung cho can. `isolation: isolate` giu -1 nam trong
   long cai nut, khong tut ra sau ca trang.

   Dat animation-delay lech nhau de ba lop khong cung "nay" mot luc — cung luc
   thi thanh mot cu giat, lech nhau thi thanh nhip. */
.nut-goi-moi {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    /* LUÔN MỘT DÒNG (05/10/2026). Với font dự phòng (Inter chưa tải xong) chữ
       "Nhận hoàn tiền ngay — miễn phí" rộng hơn nên xuống dòng — nút cao 68px —
       rồi Inter về thì co lại 48px, kéo cả trang chào dịch lên (CLS 0,38 đo trên
       máy chậm). Không xuống dòng thì chiều cao không phụ thuộc font nào đang có. */
    white-space: nowrap;
    animation: nutGoiMoiTho 2.6s ease-in-out infinite,
               nutGoiMoiVien 2.6s ease-out infinite;
}
/* Cỡ chữ co theo bề rộng để một dòng vẫn vừa trên máy hẹp (320px), kể cả với
   font dự phòng. Đè .text-sm (đã !important ở trên, nhân --co-chu) — trần vẫn
   theo cỡ chữ khách chọn. */
.nut-goi-moi.text-sm { font-size: min(calc(14px * var(--co-chu)), max(11px, 3.6vw)) !important; }

/* Vet sang quet ngang. inset -50% de duong cheo van phu kin goc nut. */
.nut-goi-moi::after {
    content: '';
    position: absolute;
    inset: -50%;
    z-index: -1;
    background: linear-gradient(115deg,
        transparent 40%,
        rgba(238, 77, 45, .16) 50%,
        transparent 60%);
    animation: nutGoiMoiLuot 3.2s ease-in-out infinite;
}

@keyframes nutGoiMoiTho {
    0%, 70%, 100% { transform: scale(1); }
    35%           { transform: scale(1.025); }
}
@keyframes nutGoiMoiVien {
    0%   { box-shadow: 0 10px 25px rgba(0, 0, 0, .18), 0 0 0 0 rgba(255, 255, 255, .55); }
    45%  { box-shadow: 0 10px 25px rgba(0, 0, 0, .18), 0 0 0 12px rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 10px 25px rgba(0, 0, 0, .18), 0 0 0 0 rgba(255, 255, 255, 0); }
}
@keyframes nutGoiMoiLuot {
    0%, 55%  { transform: translateX(-110%); }
    85%, 100% { transform: translateX(110%); }
}

/* May xin it chuyen dong thi tat sach. Nut van la nut trang noi bat tren nen
   cam, khong bam nham duoc di dau. */
@media (prefers-reduced-motion: reduce) {
    .nut-goi-moi { animation: none; }
    .nut-goi-moi::after { animation: none; display: none; }
}

/* ── Ô nhập form "Góp ý về web/app" (trang Hỗ trợ) ──────────────────────────
   Viền phải THẤY ĐƯỢC: --vien-mo gần trùng màu thẻ nên trước đây ô trông như
   không có khung. Đang nhập thì viền cam. Nền lấy màu thẻ cho hợp chế độ tối. */
.o-gop-y {
    border: 1.5px solid #cbd5e1;
    background: var(--nen-the);
    transition: border-color .15s, box-shadow .15s;
}
.o-gop-y:focus {
    border-color: #fb923c;
    box-shadow: 0 0 0 3px rgba(251, 146, 60, .15);
    outline: none;
}
:root[data-theme="dark"] .o-gop-y { border-color: #3b4a66; }
:root[data-theme="dark"] .o-gop-y:focus { border-color: #fb923c; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .o-gop-y { border-color: #3b4a66; }
    :root:not([data-theme="light"]) .o-gop-y:focus { border-color: #fb923c; }
}

/* Ghi chú "Đơn được ghi nhận sau 24H - 48H…" (trang đổi link): CHỈ hiện khi đã có
   kết quả. #result-box là anh em đứng trước trong cùng khối; mọi chỗ ẩn/hiện kết
   quả (đổi link, xoá link, gõ lại, lỗi) đều đi qua lớp .hidden của nó, nên một
   quy tắc CSS ở đây theo được hết, không phải rải thêm dòng JS. */
#result-box.hidden ~ #ghi-chu-ghi-nhan-don { display: none; }

/* Hai thẻ ở trang Lịch sử chuyển đổi (Đã xem gần đây / Yêu thích). Thẻ đang chọn
   nổi lên bằng màu mặt thẻ, chữ cam; thẻ còn lại chìm vào nền xám. */
.lh-the { color: var(--chu-mo, #94a3b8); background: transparent; min-height: 0; }
.lh-the[aria-selected="true"] { color: #ea580c; background: var(--nen-the); box-shadow: 0 1px 3px rgba(15, 23, 42, .08); }