/* ============================================================================
   THEME_DOCHOIV2 — "Toyland Magic" (Kawaii Storybook).

   22/08/2026: đổi bảng màu + font theo file thiết kế
   C:\Users\Tien Loi\Downloads\Color_Mau.md (bộ token dạng Material 3 kèm mô tả
   "Kawaii Storybook") — CHỈ đổi màu + kiểu chữ theo yêu cầu user, GIỮ NGUYÊN
   toàn bộ layout/component/cơ chế JS đã có (dc-hero/dc-product-card/dc-age-pill,
   hiệu ứng bay vào giỏ, slider...) — không động tới các phần "trang trí sâu"
   khác của tài liệu (squircle/blob/nav kính mờ/tim đập/đường kẻ răng cưa).

   Khác biệt lớn nhất so với bản MÀU CŨ ("ToyJoy" — vàng nắng, dual-font):
   - Màu chủ đạo đổi từ VÀNG NẮNG sang ĐỎ DÂU (Strawberry Red #ae2f34).
   - MỘT font duy nhất: Quicksand cho cả tiêu đề/nút LẪN phần thân (bỏ Nunito Sans).
   - Bóng đổ ngả ẤM ĐỎ/CAM (rgba(174,47,52,x)) thay vì ngả vàng.
   - 4 tông danh mục (.tone-1..4) đổi sang 4 màu named-swatch của tài liệu
     (strawberry/marigold/watermelon/lemon-chiffon) — tránh dùng token
     "tertiary" gốc (lục/xanh lá) vì lệch hẳn tinh thần "ấm, sun-baked" của tài
     liệu (nhiều khả năng chỉ là màu phát sinh tự động của bộ công cụ M3, prose
     không hề nhắc tới xanh lá ở đâu).

   Nạp SAU `site.css` (xem Shared/Layout.cshtml) — xem chú thích gốc ở
   Theme_DoChoi/css/theme.css về lý do và thứ tự nạp bắt buộc.
============================================================================ */

/* ---------- CHẾ ĐỘ SÁNG ---------- */
:root {
    /* background = token "background", surface = "surface-container-lowest" (trắng
       thật) của tài liệu — thẻ/header trắng nổi lên trên nền hồng-kem rất nhạt. */
    --background:          #fff8f7;
    --surface:             #ffffff;
    --surface-2:           #fff0ef;
    --border:              #e0bfbd;
    --border-strong:       #8c706f;
    --foreground:          #251818;
    --muted-foreground:    #584140;
    --muted-foreground-2:  #8c706f;

    /* Primary = "Strawberry Red" (đúng chữ trong tài liệu) — dùng ĐÚNG token
       `primary`/`on-primary` (không dùng `primary-container` #ff6b6b sáng hơn) vì
       đó mới là cặp có đủ độ tương phản để ghép chữ TRẮNG lên nút theo chuẩn M3
       gốc; hover dùng `on-primary-fixed-variant` (đậm hơn 1 nấc). */
    --accent:              #ae2f34;
    --accent-hover:        #8c1520;
    --accent-foreground:   #ffffff;
    --accent-subtle:       rgba(174, 47, 52, 0.12);
    --accent-subtle-hover: rgba(174, 47, 52, 0.18);
    --ring:                rgba(174, 47, 52, 0.45);

    /* success/danger gần như không dùng trong theme này (chỉ vài chỗ hiếm) —
       lấy đúng token `tertiary`/`error` của tài liệu, không tự chế. */
    --success:             #006c48;
    --danger:              #ba1a1a;

    /* Bo góc theo đúng thang "rounded" của tài liệu (sm/DEFAULT/md — bỏ lg/xl/full
       vì hệ biến hiện tại chỉ có 4 nấc, "full" 9999px vẫn viết tay ở chỗ cần pill). */
    --radius-sm:           8px;
    --radius:              16px;
    --radius-lg:           24px;
    --radius-xl:           32px;

    /* "Warm Glow" — bóng đổ ngả đỏ dâu ấm, mờ (mục Elevation & Depth của tài liệu). */
    --shadow-sm:           0 4px 10px -2px rgba(174, 47, 52, 0.08);
    --shadow:              0 10px 30px -6px rgba(174, 47, 52, 0.12);
    --shadow-lg:           0 24px 48px -12px rgba(174, 47, 52, 0.18);
}

/* ---------- CHẾ ĐỘ TỐI (theo hệ điều hành) ----------
   Tài liệu chỉ cho bảng màu SÁNG — dựng bảng tối bằng đúng các token "inverse-*"/
   "-fixed"/"-fixed-dim" mà tài liệu CÓ sẵn (không tự bịa màu mới), cùng cấu trúc
   nền/chữ/viền tối như các theme khác trong dự án. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --background:          #211514;
        --surface:             #2c1f1e;
        --surface-2:           #3a2b2a;
        --border:              #4a3736;
        --border-strong:       #5c4544;
        --foreground:          #ffedeb;
        --muted-foreground:    #d9bdba;
        --muted-foreground-2:  #b89490;

        --accent:              #ffb3b0;
        --accent-hover:        #ffdad8;
        --accent-foreground:   #410006;
        --accent-subtle:       rgba(255, 179, 176, 0.18);
        --accent-subtle-hover: rgba(255, 179, 176, 0.26);
        --ring:                rgba(255, 179, 176, 0.45);

        --success:             #52dea2;
        --danger:              #ffb4ab;

        --shadow-sm:           0 1px 2px 0 rgba(0, 0, 0, 0.40);
        --shadow:              0 2px 8px -1px rgba(0, 0, 0, 0.50);
        --shadow-lg:           0 20px 40px -12px rgba(0, 0, 0, 0.65);
    }
}

/* ---------- CHẾ ĐỘ TỐI (người dùng tự bật) ---------- */
:root[data-theme="dark"],
html.dark {
    --background:          #211514;
    --surface:             #2c1f1e;
    --surface-2:           #3a2b2a;
    --border:              #4a3736;
    --border-strong:       #5c4544;
    --foreground:          #ffedeb;
    --muted-foreground:    #d9bdba;
    --muted-foreground-2:  #b89490;

    --accent:              #ffb3b0;
    --accent-hover:        #ffdad8;
    --accent-foreground:   #410006;
    --accent-subtle:       rgba(255, 179, 176, 0.18);
    --accent-subtle-hover: rgba(255, 179, 176, 0.26);
    --ring:                rgba(255, 179, 176, 0.45);

    --success:             #52dea2;
    --danger:              #ffb4ab;

    --shadow-sm:           0 1px 2px 0 rgba(0, 0, 0, 0.40);
    --shadow:              0 2px 8px -1px rgba(0, 0, 0, 0.50);
    --shadow-lg:           0 20px 40px -12px rgba(0, 0, 0, 0.65);
}

/* ---------- Chữ — MỘT FONT DUY NHẤT (Quicksand) theo tài liệu mới ----------
   "This design system utilizes Quicksand exclusively" — bỏ hẳn Nunito Sans của
   bản màu cũ. Thân trang Medium(500), tiêu đề/nút giữ Bold(700) như trước. */
body {
    font-family: 'Quicksand', ui-sans-serif, system-ui, sans-serif;
    font-weight: 500;
}

.font-display,
h1, h2, h3,
button, .btn {
    font-family: 'Quicksand', ui-sans-serif, system-ui, sans-serif;
}


/* ============================================================
   BẢNG MÀU XOAY VÒNG cho ô danh mục — 4 màu "-fixed" của mẫu gốc (không đổi
   theo sáng/tối, đúng đặc tính "fixed" trong hệ màu Material 3 mà mẫu này
   dùng), KHÁC 6 tone hồng/tím/xanh của Theme_DoChoi.
============================================================ */
/* 4 tông named-swatch của tài liệu (strawberry/marigold/watermelon/lemon-chiffon,
   dùng bản "-fixed" nhạt của M3 làm nền pastel + "-on-fixed-variant" làm icon đậm) —
   xem lý do bỏ token "tertiary" gốc (lục) ở khối chú thích đầu file. */
.tone-1 { background: #ffdad8; }
.tone-2 { background: #ffe173; }
.tone-3 { background: #ffd4d8; }
.tone-4 { background: #fbe3e1; }

.tone-1 .tone-icon, .tone-1.tone-icon { color: #8c1520; }
.tone-2 .tone-icon, .tone-2.tone-icon { color: #554500; }
.tone-3 .tone-icon, .tone-3.tone-icon { color: #ae2f34; }
.tone-4 .tone-icon, .tone-4.tone-icon { color: #8c706f; }

/* Chế độ tối: hạ pastel sáng chói về sắc tối cùng tông thay vì để nguyên. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .tone-1 { background: #3a1f1f; }
    :root:not([data-theme="light"]) .tone-2 { background: #332a12; }
    :root:not([data-theme="light"]) .tone-3 { background: #3a2224; }
    :root:not([data-theme="light"]) .tone-4 { background: #332625; }
}
:root[data-theme="dark"] .tone-1, html.dark .tone-1 { background: #3a1f1f; }
:root[data-theme="dark"] .tone-2, html.dark .tone-2 { background: #332a12; }
:root[data-theme="dark"] .tone-3, html.dark .tone-3 { background: #3a2224; }
:root[data-theme="dark"] .tone-4, html.dark .tone-4 { background: #332625; }

/* Chân trang — 22/08/2026, user chốt lại thành ĐỎ NHẠT (đổi từ marigold vàng lúc trước) —
   dùng "primary-fixed" của tài liệu, CỐ Ý không đổi theo sáng/tối (đúng bản chất "fixed"
   trong hệ màu gốc, khớp cách header/logo badge cũng không đổi màu theo sáng/tối). */
.theme-footer      { background: #ffdad8; color: #6d0010; }
.theme-footer-rule { border-color: rgba(109, 0, 16, 0.15); }
.theme-footer h4   { color: #8c1520; }
.theme-footer a:hover { color: #ae2f34; }


/* ============================================================
   DẢI TRANG TRÍ — riêng của mẫu này, không phải màu thương hiệu.
============================================================ */
.theme-announce   { background: linear-gradient(90deg, #ffe173 0%, #ffdad8 100%); color: #402d00; }
.theme-hero-band  { background: linear-gradient(90deg, #fff4b0 0%, #ffe9e7 100%); }
.theme-hero-card  { background: linear-gradient(135deg, #ff6b6b 0%, #ae2f34 100%); }
.theme-logo-badge { background: var(--accent); color: var(--accent-foreground); }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-hero-band { background: linear-gradient(90deg, #332a12 0%, #3a2224 100%); }
}
:root[data-theme="dark"] .theme-hero-band,
html.dark .theme-hero-band { background: linear-gradient(90deg, #332a12 0%, #3a2224 100%); }

/* ============================================================
   HERO BANNER SLIDER — cơ chế JS giữ nguyên từ Theme_DoChoi, chỉ đổi màu.
============================================================ */
.dc-hero {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 1.5rem;
}
.dc-hero-track {
    display: flex;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
}
.dc-hero-slide {
    min-width: 100%;
    position: relative;
}
.dc-hero-img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    border-radius: 1.5rem;
}
@media (min-width: 768px) {
    .dc-hero-img {
        height: 480px;
    }
}
.dc-hero-caption {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(25, 28, 29, 0.70) 0%, rgba(25, 28, 29, 0.35) 60%, rgba(25, 28, 29, 0.05) 100%);
    border-radius: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2.5rem;
    color: #ffffff;
}
.dc-hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 9999px;
    background-color: rgba(255, 255, 255, 0.85);
    color: #191c1d;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    box-shadow: 0 4px 12px rgba(174, 47, 52, 0.15);
    cursor: pointer;
    transition: all 0.2s ease;
}
.dc-hero-arrow:hover {
    background-color: #ffffff;
    transform: translateY(-50%) scale(1.1);
}
.dc-hero-arrow-prev { left: 1rem; }
.dc-hero-arrow-next { right: 1rem; }

.dc-hero-dots {
    position: absolute;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    display: flex;
    gap: 0.5rem;
}
.dc-hero-dot {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 9999px;
    background-color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
}
.dc-hero-dot.is-active {
    width: 1.75rem;
    background-color: var(--accent);
    border-radius: 9999px;
}

/* ============================================================
   HIỆU ỨNG HOVER PRODUCT CARD & AGE FILTER — "bouncy, soft volume" theo
   DESIGN.md mục Cards ("scale up 2%, shadow deepen"), không nhấc thẻ lên cao
   như Theme_DoChoi (translateY -8px là quá "energetic" so với mẫu này).
============================================================ */
.dc-product-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.dc-product-card:hover {
    transform: scale(1.02);
    box-shadow: 0 20px 35px -10px rgba(174, 47, 52, 0.20);
    border-color: var(--accent);
}
.dc-product-card img {
    transition: transform 0.5s ease;
}
.dc-product-card:hover img {
    transform: scale(1.05);
}

.dc-age-pill {
    transition: all 0.25s ease;
    cursor: pointer;
}
.dc-age-pill:hover,
.dc-age-pill.active {
    background-color: var(--accent);
    color: var(--accent-foreground);
    border-color: var(--accent);
    box-shadow: 0 6px 16px -4px rgba(174, 47, 52, 0.35);
}

/* ============================================================
   MICRO-INTERACTIONS & ANIMATIONS
============================================================ */
@keyframes dcShake {
    0%, 100% { transform: rotate(0deg) scale(1); }
    20% { transform: rotate(-12deg) scale(1.15); }
    40% { transform: rotate(12deg) scale(1.15); }
    60% { transform: rotate(-8deg) scale(1.1); }
    80% { transform: rotate(8deg) scale(1.1); }
}
.dc-shake {
    animation: dcShake 0.6s ease-in-out;
}

/* Flying Item Element — đổi lại thành đỏ dâu (accent mới) theo bảng màu Toyland Magic. */
.dc-flying-toy {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff6b6b, #ae2f34);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    box-shadow: 0 8px 20px rgba(174, 47, 52, 0.35);
    transition: all 0.8s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

/* ============================================================
   SKELETON LOADING
============================================================ */
@keyframes dcPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
.dc-skeleton {
    background-color: var(--border-strong);
    animation: dcPulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    border-radius: var(--radius);
}


/* ============================================================
   CĂNG GIỮA — form đăng nhập / đăng ký / quên mật khẩu & trang tài khoản
============================================================ */
.auth-shell {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.tai-khoan-layout {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}