/* ========== GLOBAL SCROLLBAR ========== */
/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

html[data-theme="light"],
body[data-theme="light"],
[data-theme="light"] * {
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

/* Chrome, Edge, Safari */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    border: 1px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.5);
}

/* Light Theme overrides for Webkit */
body[data-theme="light"] ::-webkit-scrollbar-thumb,
[data-theme="light"]::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
}

body[data-theme="light"] ::-webkit-scrollbar-thumb:hover,
[data-theme="light"]::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.4);
}

/* ========== RESET & BASE ========== */
* {
    margin: 0;
    padding: 0;
    font-family: "Kanit", sans-serif;
    box-sizing: border-box;
}

/* PC-ONLY Navigation Styles - Shadcn UI Doc Style (Fluid & Responsive) */
.nav-center.pc-only {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    /* flex: 1 (= 1 1 0%) ทำให้กล่องนี้ยอมย่อตัวเองจนเหลือศูนย์ก่อนใคร
       แรงบีบจึงไปไม่ถึง .nav-left ชื่อร้านเลยไม่เคยย่อ ส่วนแถวเมนูข้างในย่อไม่ได้
       (ลิงก์เป็น nowrap) มันเลยล้นออกไปทางซ้ายทับชื่อร้านแทน
       เปลี่ยน basis เป็น auto กล่องนี้จึงเอาความกว้างเนื้อหาจริงไปต่อรอง
       แรงบีบเลยถูกแบ่งกันระหว่างชื่อร้านกับแถบเมนูตามสัดส่วน

       และ min-width ต้องเป็น auto ไม่ใช่ 0 — ของเดิมเป็น 0 กล่องจึงย่อลงต่ำกว่า
       ความกว้างเนื้อหาได้ พอข้างในเป็น justify-content: flex-end แถวเมนูก็ล้น
       ออกไปทางซ้ายไปทับชื่อร้าน ซึ่งคืออาการที่เห็นในภาพพอดี
       auto = ย่อได้แค่ถึง min-content แล้วผลักแรงบีบที่เหลือไปให้ชื่อร้านแทน */
    flex: 1 1 auto !important;
    min-width: auto !important;
    margin: 0 16px !important;
    gap: 16px !important;
}

.nav-links {
    display: flex !important;
    align-items: center !important;
    gap: clamp(12px, 1.5vw, 24px) !important;
    /* ห้ามย่อ — ลิงก์เป็น white-space: nowrap ย่อกล่องไปก็ไม่ได้ทำให้ตัวอักษรเล็กลง
       มีแต่จะล้นออกนอกกล่องไปทับชื่อร้าน ให้ช่องค้นหากับชื่อร้านเป็นฝ่ายยอมแทน */
    flex-shrink: 0 !important;
}

.nav-link {
    color: rgba(255, 255, 255, 0.7) !important;
    /* High Contrast White (70%) */
    text-decoration: none !important;
    font-size: clamp(13px, 1.1vw, 14px) !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
    padding: 6px 4px !important;
}

/* ไอคอนใน navbar เปลี่ยนจาก lucide (SVG ที่ JS วาดให้) มาเป็น Remixicon (icon font)
   เพราะ lucide เป็นไฟล์ ~100KB ที่โหลดมาเพื่อวาดไอคอนแค่ 7 ตัวตรงนี้
   เก็บกฎของ svg ไว้ด้วยเผื่อมี SVG หลงเหลือ ขนาดจะได้เท่ากันทั้งสองแบบ */
.nav-link i {
    font-size: clamp(16px, 1.2vw, 18px) !important;
    line-height: 1 !important;
    opacity: 0.8 !important;
    transition: opacity 0.2s ease !important;
}

.nav-link svg {
    width: clamp(16px, 1.2vw, 18px) !important;
    height: clamp(16px, 1.2vw, 18px) !important;
    stroke: currentColor !important;
    stroke-width: 2.2px !important;
    /* Shadcn characteristic stroke */
    opacity: 0.8 !important;
    transition: all 0.2s ease !important;
}

.nav-link:hover {
    color: #ffffff !important;
    /* Foreground for Dark */
}

.nav-link:hover svg {
    opacity: 1 !important;
    stroke-width: 2.5px !important;
}

/* Light Mode support (High Contrast Monochrome) */
body[data-theme="light"] .nav-link {
    color: #000000 !important;
}

body[data-theme="light"] .nav-link:hover {
    color: #000000 !important;
}

body[data-theme="light"] .nameshop {
    color: #000000 !important;
}

/* ชื่อร้านต้องยอมย่อก่อนเมนูเสมอ — เฉพาะจอที่มีแถบเมนูอยู่จริง

   .nav-left ขาด min-width: 0 อยู่ กล่องจึงย่อต่ำกว่าความกว้างข้อความไม่ได้
   (flex item ตั้งต้นเป็น min-width: auto = min-content) ellipsis ที่ .nameshop h2
   ซึ่งเจ้าของเดิมเขียนเตรียมไว้แล้วจึงไม่เคยทำงาน ชื่อร้านเลยดันแถบเมนูจนล้นไปทับกัน

   จำกัดไว้ที่ min-width: 1181px ขึ้นไปเท่านั้น เพราะต่ำกว่านั้นแถบเมนูถูกซ่อน
   (ย้ายไปอยู่ในแถบข้าง) ไม่มีอะไรให้ชน ถ้าเปิดไว้ด้วยชื่อร้านบนมือถือจะโดนย่อฟรีๆ */
@media (min-width: 1181px) {
    .nav-left {
        /* 110px คือพื้นขั้นต่ำของชื่อร้าน ไม่ใช่ 0
           ถ้าเป็น 0 เวลาที่คับมากๆ (เช่นยังไม่ล็อกอิน ที่มีปุ่มสมัคร+เข้าสู่ระบบสองปุ่ม)
           flex จะบีบกล่องนี้จนเหลือศูนย์ ชื่อร้านหายไปทั้งอัน
           เท่านี้พอให้เหลือชื่อกับ ... ให้คนอ่านออกว่าร้านอะไร
           ส่วนที่ล้นจะไปกินพื้นที่ padding 18% ด้านขวาซึ่งว่างอยู่แล้ว ไม่มีอะไรโดนตัด
           (ต้องใส่ที่กล่องนี้ ไม่ใช่ที่ .nameshop เพราะถ้ากล่องแม่ถูกบีบเหลือ 0
           ลูกที่มี min-width ก็แค่ล้นออกมา ไม่ได้ดันกล่องแม่ให้กว้างขึ้น) */
        min-width: 110px !important;
        flex-shrink: 1 !important;
    }

    .nameshop {
        max-width: min(30vw, 340px);
    }
}

/* ซ่อนเมนูทีละตัวตามความกว้างจอ — ของเดิมของเจ้าของ คืนกลับมาตามที่สั่ง
   ทำหน้าที่เป็นวาล์วสำรอง: ในช่วงจอที่คับจริงๆ ให้เมนูหายไปหนึ่งตัว
   ดีกว่าปล่อยให้ชื่อร้านโดนย่อจนไม่เหลืออะไร */
@media (max-width: 1400px) {
    .nav-item-topup {
        display: none !important;
    }
}

@media (max-width: 1300px) {
    .nav-item-categories {
        display: none !important;
    }
}

@media (max-width: 1250px) {
    .nav-item-products {
        display: none !important;
    }
}

@media (max-width: 1180px) {
    .nav-center.pc-only {
        display: none !important;
    }
}

/* ---- สลับธีมให้เปลี่ยนพร้อมกันทั้งหน้า ----
   ทั้งไฟล์นี้มี transition กระจายอยู่หลายค่า (0.2s / 0.25s / 0.3s / บางชิ้นไม่มีเลย
   อย่าง body::before กับ body::after ที่เป็นแสงฟุ้งกับลายจุดพื้นหลัง)
   พอกดสลับธีม แต่ละชิ้นจึงไล่สีจบไม่พร้อมกัน กลายเป็นพื้นหลังหลายผืนซ้อนกัน
   ยิ่งกดสลับเร็วๆ ยิ่งเห็นชัด เพราะชิ้นที่ยังไล่ไม่จบโดนสั่งย้อนกลับกลางทาง

   ตอนสลับธีมจึงปิด transition ทุกตัวชั่วคราวหนึ่งเฟรม
   (JS ใส่คลาสนี้ที่ <html> แล้วถอดออกทันทีหลังบังคับ reflow — ดู applyTheme() ใน script.js)
   ทั้งหน้าจึงเปลี่ยนสีพร้อมกันในเฟรมเดียว เหมือนเป็นพื้นผืนเดียว

   selector ต้องมี html/* ประกอบ เพื่อให้ specificity ชนะ transition: ... !important
   ที่มีอยู่เดิมในไฟล์นี้ (.nav-link ฯลฯ) */
html.theme-switching,
html.theme-switching::before,
html.theme-switching::after,
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
    transition: none !important;
}

/* ---- เฟดตอนสลับธีม ----
   เอฟเฟกต์เฟดถูกย้ายมาทำที่ View Transition แทน transition ของแต่ละชิ้น
   เพราะเบราว์เซอร์จะถ่ายภาพหน้าเก่าไว้ทั้งหน้า เปลี่ยนธีมทันทีในเฟรมเดียว
   (ดูคลาส .theme-switching ด้านบน) แล้วค่อยเฟดภาพใหม่ทับภาพเก่า
   ผลคือได้เฟดนุ่มๆ เหมือนเดิม แต่เป็น "ภาพเดียว" ไม่มีชิ้นไหนตามไม่ทัน

   ค่า default ของเบราว์เซอร์คือเฟดออก+เฟดเข้าพร้อมกัน ซึ่งช่วงกลางทางทั้งสองภาพ
   จะโปร่งพร้อมกันจนเห็นสีพื้นทะลุ แวบเป็นรอยจาง จึงเปลี่ยนเป็น
   ภาพเก่าอยู่นิ่งทึบไว้ แล้วให้ภาพใหม่เฟดเข้ามาทับ — ความสว่างจึงคงที่ตลอด
   (ต้องตั้ง mix-blend-mode: normal ด้วย เพราะ default ของเบราว์เซอร์คือ
   plus-lighter ที่เอาไว้ใช้คู่กับการเฟดสองทางเท่านั้น ถ้าไม่ตั้งจะสว่างวูบ) */
html.theme-fading::view-transition-old(root),
html.theme-fading::view-transition-new(root) {
    mix-blend-mode: normal;
}

html.theme-fading::view-transition-old(root) {
    animation: none;
}

html.theme-fading::view-transition-new(root) {
    animation: theme-fade-in 0.3s ease;
}

@keyframes theme-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ผู้ใช้ที่ตั้งค่าลดการเคลื่อนไหวไว้ ให้เปลี่ยนทันทีไปเลย
   (ฝั่ง JS ก็เช็คซ้ำอีกชั้น จะได้ไม่เสียเวลาถ่ายภาพหน้าจอเปล่าๆ) */
@media (prefers-reduced-motion: reduce) {
    html.theme-fading::view-transition-new(root) {
        animation: none;
    }
}


html {
    background-color: #000000;
    color: #ffffff;
    transition: background-color 0.3s ease, color 0.3s ease;
}

html[data-theme="light"] {
    background-color: #ffffff;
    color: #000000;
}

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    background-color: #000000;
    color: #ffffff;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow-x: hidden;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* ========== BACKGROUND EFFECTS ========== */
body::before {
    content: '';
    position: fixed;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(600px, 80vw);
    height: min(600px, 80vw);
    background: radial-gradient(circle, #ffffff23 0%, #ffffff00 60%, transparent 0%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 30px 30px;
    pointer-events: none;
    z-index: 0;
}

nav,
.hero,
.footer,
.content,
.wrapper {
    position: relative;
    z-index: 1;
}

/* ========== LIGHT THEME ========== */
body[data-theme="light"] {
    background-color: #ffffff;
    color: #000000;
}

body[data-theme="light"] nav {
    background-color: rgba(255, 255, 255, 0.95);
    border-bottom-color: #e5e5e5;
}

body[data-theme="light"] .nameshop h2 {
    color: #000000;
}

body[data-theme="light"] .search-box {
    background: #f5f5f5;
    border-color: #e0e0e0;
}

body[data-theme="light"] .search-box input {
    color: #000000;
}

body[data-theme="light"] .search-box input::placeholder {
    color: #999;
}

body[data-theme="light"] .search-icon {
    color: #666;
}

body[data-theme="light"] .search-icon:hover {
    color: #000;
}

body[data-theme="light"] .nav-btn {
    background: transparent;
    border-color: #e0e0e0;
    color: #000000;
}

body[data-theme="light"] .nav-btn:hover {
    background: #f5f5f5;
    border-color: #ccc;
}

body[data-theme="light"] .nav-btn.login {
    background: #000000;
    color: #ffffff;
}

body[data-theme="light"] .nav-btn.login:hover {
    background: #333;
}

body[data-theme="light"] .theme-toggle {
    border-color: #e0e0e0;
    color: #000000;
}

body[data-theme="light"] .theme-toggle:hover {
    background: #f5f5f5;
}

body[data-theme="light"] .hero-title {
    background: linear-gradient(to right, #000000, #666666);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

body[data-theme="light"] .hero-description {
    color: #666;
}

body[data-theme="light"] .btn-primary {
    background: #000000;
    color: #ffffff;
}

body[data-theme="light"] .btn-primary:hover {
    background: #333;
}

body[data-theme="light"] .btn-secondary {
    background: transparent;
    color: #000000;
    border-color: #e0e0e0;
}

body[data-theme="light"] .btn-secondary:hover {
    background: #f5f5f5;
    border-color: #ccc;
}

body[data-theme="light"] .footer {
    color: #999;
    border-top-color: #e5e5e5;
}

body[data-theme="light"]::before {
    background: radial-gradient(circle,
            rgba(0, 0, 0, 0.08) 0%,
            /* ความเข้มกลาง */
            rgba(0, 0, 0, 0.03) 45%,
            /* ขอบกลางฟุ้ง */
            rgba(0, 0, 0, 0) 70%);
    /* ขอบนอกสุดจางหาย */
}

body[data-theme="light"]::after {
    background-image: radial-gradient(circle, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
}


/* ========== WRAPPER & CONTENT ========== */
.wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding-top: 60px;
}

.content {
    flex: 1;
    /* padding: 12px 5%; */
}

/* ========== NAVIGATION ========== */
nav {
    width: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid #262626;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 5%;
    box-sizing: border-box;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: 60px;
    gap: 15px;
    /* Added gap to prevent elements from touching */
}

.nameshop {
    color: #ffffff;
    white-space: nowrap;
    transition: color 0.3s ease;
    cursor: pointer;
    min-width: 0;
    /* Important for flex-shrink/ellipsis */
    flex-shrink: 1;
}

.nameshop:hover {
    opacity: 0.8;
}

.nameshop h2 {
    font-size: clamp(0.9rem, 2vw, 1.3rem);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: clamp(6px, 1vw, 12px);
    flex-shrink: 0;
}

/* ========== SEARCH BOX ========== */
.search-box {
    background: #111;
    border: 1px solid #333;
    padding: 8px 14px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    width: clamp(120px, 15vw, 240px);
    /* ยอมย่อก่อนชื่อร้าน (flex-shrink สูงกว่า) แต่ min-width กันไม่ให้แคบจนใช้ไม่ได้
       ถ้าไม่ใส่ min-width flex จะย่อลงไปถึง min-content ซึ่งเหลือแค่ไอคอนแว่น */
    min-width: 120px;
    flex-shrink: 3;
    transition: all 0.3s ease;
}

.search-box:focus-within {
    border-color: #555;
    background: #1a1a1a;
}

.search-box input {
    border: none;
    background: transparent;
    color: inherit;
    /* ใช้สีเดียวกับ Text หลัก */
    outline: none;
    width: 100%;
    font-size: 14px;
    margin-right: 8px;
}

.search-box input::placeholder {
    color: #666;
    transition: color 0.3s ease;
}

.search-box .search-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    font-size: 16px;
}

/* ป้ายปุ่มลัดในช่องค้นหา — หน้าตาของตัวป้ายอยู่ที่ .ds-kbd ใน design-system.css
   ตรงนี้จัดการแค่เรื่องตำแหน่งกับพฤติกรรมในกล่องค้นหา */
.search-box .search-kbd {
    /* กล่องค้นหาแคบลงเรื่อยๆ ตามจอ ปล่อยให้ช่องพิมพ์หดแทน ป้ายห้ามหด
       ไม่งั้น "Ctrl" จะถูกบีบจนตัวอักษรตกบรรทัด */
    flex-shrink: 0;

    /* onclick อยู่ที่ตัวกล่อง ไม่ใช่ที่ป้าย — ถ้าไม่ปล่อยคลิกทะลุ
       กดโดนป้ายพอดีแล้วจะไม่มีอะไรเกิดขึ้น */
    pointer-events: none;
}

/* ต่ำกว่า 1280px กล่องค้นหาเหลือ 180px ป้ายจะไปเบียดจนอ่าน placeholder ไม่ออก
   (ต่ำกว่า 1180px .nav-center.pc-only ซ่อนทั้งก้อนอยู่แล้ว ไม่ต้องสนใจต่อ)
   ปุ่มลัดยังกดได้อยู่ แค่ไม่มีป้ายบอก */
@media (max-width: 1279px) {
    .search-box .search-kbd {
        display: none;
    }
}

.search-icon:hover {
    color: white;
}

/* ========== BUTTONS ========== */
.nav-btn {
    background: transparent;
    border: 1px solid #333;
    color: white;
    padding: clamp(6px, 1vw, 10px) clamp(12px, 1.5vw, 18px);
    border-radius: 20px;
    cursor: pointer;
    font-size: clamp(12px, 1.1vw, 14px);
    white-space: nowrap;
    font-family: "Kanit", sans-serif;
}

.nav-btn:hover {
    background: #111;
    border-color: #555;
}

.nav-btn.login {
    background: #ffffff;
    color: #000000;
    border: none;
}

.nav-btn.login:hover {
    background: #e2e8f0;
}

.auth-buttons {
    display: flex;
    align-items: center;
    gap: 12px;
}

.nav-btn.signup {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.nav-btn.signup:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.4);
}

body[data-theme="light"] .nav-btn.signup {
    border-color: #000000;
    color: #000000;
}

body[data-theme="light"] .nav-btn.signup:hover {
    background: rgba(0, 0, 0, 0.05);
}

body[data-theme="light"] .search-box {
    background: #f1f1f1;
    border-color: #e2e8f0;
}

body[data-theme="light"] .theme-toggle {
    color: #000000;
    border-color: #e2e8f0;
}

body[data-theme="light"] .theme-toggle:hover {
    background: #f1f1f1;
}

/* ========== THEME TOGGLE ========== */
.theme-toggle {
    background: transparent;
    color: #ffffff;
    border: 1px solid #333;
    padding: 8px;
    border-radius: 50%;
    cursor: pointer;
    font-size: clamp(14px, 1.5vw, 18px);
    transition: all 0.3s ease;
    width: clamp(36px, 4vw, 42px);
    height: clamp(36px, 4vw, 42px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.theme-toggle:hover {
    background: #111;
    transform: rotate(20deg);
}

/* Mobile Search Button Visibility */
.mobile-search-btn {
    display: none;
    /* Hide on desktop where main search bar is visible */
}

@media (max-width: 1180px) {
    .mobile-search-btn {
        display: flex !important;
        /* Show on mobile/tablet when main search bar is hidden */
    }
}

@media (max-width: 480px) {

    .theme-toggle,
    .mobile-search-btn {
        width: 34px !important;
        height: 34px !important;
        font-size: 14px !important;
    }
}

.theme-toggle i {
    transition: transform 0.3s ease;
}

/* ========== HERO SECTION ========== */
.hero {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: clamp(40px, 8vh, 100px) clamp(20px, 5vw, 80px);
    min-height: calc(80vh - 60px);
}

.hero-content {
    max-width: 900px;
    width: 100%;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 20px;
    font-size: clamp(11px, 1vw, 13px);
    font-weight: 500;
    color: #22c55e;
    letter-spacing: 0.5px;
}

.status-dot {
    width: clamp(6px, 0.8vw, 8px);
    height: clamp(6px, 0.8vw, 8px);
    background: #22c55e;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(0.95);
    }
}

.hero-title {
    font-size: clamp(2rem, 6vw, 4.5rem);
    font-weight: 700;
    margin-bottom: clamp(15px, 2vh, 25px);
    background: linear-gradient(to right, #ffffff, #888888);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: background 0.3s ease;
    line-height: 1.2;
}

.hero-description {
    font-size: clamp(0.95rem, 1.5vw, 1.15rem);
    color: #999;
    margin-bottom: clamp(30px, 4vh, 45px);
    line-height: 1.7;
    transition: color 0.3s ease;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.hero-buttons {
    display: flex;
    gap: clamp(12px, 2vw, 18px);
    justify-content: center;
    flex-wrap: wrap;
}

.btn-primary,
.btn-secondary {
    padding: clamp(12px, 1.5vw, 16px) clamp(24px, 3vw, 36px);
    border-radius: 12px;
    font-size: clamp(14px, 1.3vw, 16px);
    font-weight: 500;
    cursor: pointer;
    border: none;
    font-family: "Kanit", sans-serif;
}

.btn-primary {
    background: #ffffff;
    color: #000000;
}

.btn-primary:hover {
    background: #e0e0e0;
    box-shadow: 0 8px 20px rgba(255, 255, 255, 0.1);
}

.btn-secondary {
    background: transparent;
    color: #ffffff;
    border: 1px solid #333;
}

.btn-secondary:hover {
    background: #111;
    border-color: #555;
}

/* Scoped override for Hero section buttons - more opaque (Default/Dark) */
.hero-buttons .btn-secondary {
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(5px);
    border-color: rgba(255, 255, 255, 0.2);
}

.hero-buttons .btn-secondary:hover {
    background: rgba(0, 0, 0, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.4);
}

/* ========== FOOTER ========== */
.footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 5%;
    width: 100%;
    box-sizing: border-box;
    color: #999;
    font-size: clamp(11px, 1.1vw, 13px);
    border-top: 1px solid #262626;
    background-color: rgba(0, 0, 0, 0.95);
    transition: all 0.3s ease;
    flex-wrap: wrap;
    gap: 12px;
}

@media (min-width: 2560px) {
    .footer {
        padding: 15px 5%;
    }
}

@media (min-width: 1920px) and (max-width: 2559px) {
    .footer {
        padding: 14px 5%;
    }
}

@media (min-width: 1440px) and (max-width: 1919px) {
    .footer {
        padding: 13px 5%;
    }
}

@media (max-width: 1279px) {
    .footer {
        padding: 12px 5%;
    }
}

@media (max-width: 899px) {
    .footer {
        padding: 10px 5%;
    }
}

@media (max-width: 639px) {
    .footer {
        padding: 10px 5%;
    }
}

@media (max-width: 479px) {
    .footer {
        padding: 10px 5%;
    }
}

@media (max-width: 413px) {
    .footer {
        padding: 8px 5%;
    }
}

.footer-left {
    display: flex;
    align-items: center;
}

.footer-right {
    display: flex;
    align-items: center;
}

.footer-report-link {
    color: #999;
    text-decoration: none;
    transition: color 0.2s;
}

.footer-report-link:hover {
    color: #fff;
    text-decoration: underline;
}

body[data-theme="light"] .footer-report-link {
    color: #666;
}

body[data-theme="light"] .footer-report-link:hover {
    color: #000;
}

@media (max-width: 768px) {
    .footer {
        flex-direction: column;
        justify-content: center;
        text-align: center;
        padding: 16px 5%;
    }
}

/* ============ 404 Page ============ */
.error-container {
    max-width: clamp(300px, 80vw, 500px);
    margin: 0 auto;
    text-align: center;
    padding: clamp(40px, 10vh, 100px) 20px;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: calc(90vh - 120px);
    justify-content: center;
}

.error-img {
    width: clamp(150px, 40vw, 280px);
    margin-bottom: clamp(20px, 4vh, 35px);
    content: url("assets/404.png");
}

/* LIGHT THEME */
body[data-theme="light"] .error-img {
    content: url("assets/404.png");
}


/* ========== DARK MODE (ของเดิม) ========== */
.error-title {
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    font-weight: 600;
    margin-bottom: clamp(8px, 2vh, 12px);
    color: #ffffff;
    /* ใส่ไว้ให้ชัดเจน */
}

.error-desc {
    font-size: clamp(0.9rem, 1.5vw, 1.1rem);
    color: #cccccc;
    margin-bottom: clamp(25px, 4vh, 40px);
}

/* ========== LIGHT MODE ========== */
body[data-theme="light"] .error-title {
    color: #111111;
    /* เข้มแบบ modern เนียน ๆ */
}

body[data-theme="light"] .error-desc {
    color: #555555;
    /* เทาเข้ม อ่านง่ายบนพื้นขาว */
}


.error-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 25px;
    flex-wrap: wrap;
}

/* ปุ่มใช้ class เดิมได้เลย ไม่ต้องสร้างใหม่ */
.error-buttons .btn-primary,
.error-buttons .btn-secondary {
    padding: 12px 26px;
    font-size: 15px;
    border-radius: 12px;
    white-space: nowrap;
}

/* มือถือ — ให้ปุ่มเรียงลง */
@media (max-width: 480px) {
    .error-buttons {
        flex-direction: column;
    }

    .error-buttons button {
        width: 100%;
        max-width: 280px;
        margin: 0 auto;
    }
}

/* Tiny Phones (≤ 360px) */
@media (max-width: 360px) {
    .error-img {
        width: 60%;
    }

    .error-title {
        font-size: 1.4rem;
    }

    .error-desc {
        font-size: 0.85rem;
    }
}

/* ========== RESPONSIVE BREAKPOINTS ========== */

/* 4K & Ultra Wide (2560px+) */
@media (min-width: 2560px) {
    nav {
        padding: 15px 5%;
        height: 70px;
    }

    .wrapper {
        padding-top: 70px;
    }

    .search-box {
        width: 350px;
    }

    .hero {
        min-height: calc(100vh - 70px);
    }
}

/* Desktop Large (1920px - 2559px) */
@media (min-width: 1920px) and (max-width: 2559px) {
    nav {
        padding: 14px 5%;
        height: 65px;
    }

    .wrapper {
        padding-top: 65px;
    }
}

/* Desktop (1440px - 1919px) */
@media (min-width: 1440px) and (max-width: 1919px) {
    nav {
        padding: 13px 5%;
    }
}

/* Laptop Large (1280px - 1439px) */
@media (min-width: 1280px) and (max-width: 1439px) {
    .search-box {
        width: 220px;
    }
}

/* Laptop (1024px - 1279px) */
@media (max-width: 1279px) {
    nav {
        padding: 12px 5%;
    }

    .search-box {
        width: 180px;
    }
}

/* Tablet Landscape (900px - 1023px) */
@media (max-width: 1023px) {
    .search-box {
        width: 160px;
    }

    .nav-right {
        gap: 8px;
    }
}

/* Tablet Portrait (768px - 899px) */
@media (max-width: 899px) {
    nav {
        padding: 10px 5%;
    }

    .search-box {
        width: 140px;
        padding: 6px 10px;
    }

    .hero {
        padding: 40px 30px;
    }
}

/* Mobile Landscape (640px - 767px) */
@media (max-width: 767px) {
    .search-box {
        width: 120px;
    }

    .nav-btn:first-of-type {
        padding: 6px 10px;
    }

    .hero-buttons {
        flex-direction: column;
        width: 100%;
    }

    .btn-primary,
    .btn-secondary {
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }
}

/* Mobile Large (540px - 639px) */
@media (max-width: 639px) {
    nav {
        padding: 10px 5%;
    }

    .search-box {
        width: 100px;
        padding: 5px 8px;
    }

    .search-box input {
        font-size: 11px;
    }
}

/* Mobile Medium (480px - 539px) */
@media (max-width: 539px) {
    .search-box {
        width: 80px;
    }

    .nav-btn {
        padding: 6px 8px;
    }

    .nav-right {
        gap: 6px;
    }
}

/* Mobile (414px - 479px) */
@media (max-width: 479px) {

    /* --- ส่วนที่เพิ่ม/แก้ไข --- */
    .search-box {
        width: auto;
        /* ปล่อยความกว้างเป็นอิสระ (หุ้ม icon) */
        padding: 0 5px;
        /* ลดช่องว่างซ้ายขวาให้กระชับ */
        background: transparent;
        /* เอาพื้นหลังออก (ถ้าต้องการแค่ไอคอนลอยๆ) */
        border: none;
        /* เอาเส้นขอบออก */
    }

    /* ----------------------- */

    /* ซ่อนช่องพิมพ์ข้อความ */
    .search-box input {
        display: none !important;
    }

    /* ขยายไอคอนให้ใหญ่ขึ้นนิดหน่อยเพื่อให้กดง่าย */
    .search-box .search-icon {
        font-size: 24px;
        /* ถ้าไอคอนมันชิดซ้ายไป หรือไม่กลาง ให้เปิด flex บรรทัดนี้ */
        /* display: flex; justify-content: center; */
    }

    .btn-signup {
        display: none;
    }

    nav {
        padding: 10px 5%;
    }

    .hero {
        padding: 30px 20px;
    }

    .hero-description br {
        display: none;
    }
}

/* Mobile Small (375px - 413px) */
@media (max-width: 413px) {
    nav {
        padding: 8px 5%;
    }

    .btn-signup {
        display: none;
    }

    .nav-btn:first-of-type {
        display: none;
    }

    .theme-toggle {
        width: 34px;
        height: 34px;
        font-size: 14px;
    }
}

/* Mobile Extra Small (360px - 374px) */
@media (max-width: 374px) {
    .nameshop h2 {
        font-size: 0.85rem;
    }

    .nav-btn {
        font-size: 11px;
        padding: 5px 8px;
    }

    .hero {
        padding: 25px 15px;
    }
}

/* Mobile Tiny (320px - 359px) */
@media (max-width: 359px) {
    .nameshop h2 {
        font-size: 0.8rem;
    }

    .nav-btn {
        font-size: 10px;
        padding: 4px 6px;
    }

    .theme-toggle {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }

    .footer {
        font-size: 11px;
    }
}

/* Extra Tiny (below 320px) */
@media (max-width: 319px) {
    .nameshop h2 {
        font-size: 0.75rem;
    }

    .nav-right {
        gap: 4px;
    }

    .btn-primary,
    .btn-secondary {
        font-size: 12px;
        padding: 10px 20px;
    }
}

/* ========== AUTH COMPONENT STYLES (BASE DARK) ========== */
.auth-section {
    width: 100%;
    min-height: calc(100vh - 60px);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.auth-card {
    background-color: #080808;
    border: 1px solid #1f1f1f;
    border-radius: 16px;
    padding: 40px;
    width: 100%;
    max-width: 440px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
    isolation: isolate;
    transition: background-color 0.3s, border-color 0.3s;
}

.auth-watermark {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 8rem;
    font-weight: 900;
    background: linear-gradient(to bottom,
            rgba(255, 255, 255, 0.165) 0%,
            /* บนสุด - สว่างกว่า */
            rgba(255, 255, 255, 0.03) 50%,
            /* กลาง */
            rgba(255, 255, 255, 0.01) 100%
            /* ล่างสุด - จางมาก */
        );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    white-space: nowrap;
    pointer-events: none;
    z-index: -1;
    user-select: none;
    transition: color 0.3s;
}

.auth-content {
    position: relative;
    z-index: 1;
}

.auth-header {
    text-align: center;
    margin-bottom: 25px;
}

.auth-header h2 {
    font-size: 1.8rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 5px;
    transition: color 0.3s;
}

.auth-header p {
    color: #888;
    font-size: 0.9rem;
    font-weight: 300;
    transition: color 0.3s;
}

.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    color: #aaa;
    font-size: 0.9rem;
    margin-bottom: 8px;
    transition: color 0.3s;
}

.auth-input {
    width: 100%;
    background-color: #0f0f0f;
    border: 1px solid #262626;
    border-radius: 8px;
    padding: 12px 16px;
    color: #fff;
    font-size: 1rem;
    transition: all 0.2s ease;
    outline: none;
}

.auth-input:focus {
    border-color: #666;
    background-color: #141414;
}

.auth-input::placeholder {
    color: #444;
    transition: color 0.3s;
}

/* Password Toggle */
.password-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.btn-eye {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    color: #666;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.8rem;
    padding: 4px;
    transition: color 0.2s;
}

.btn-eye:hover {
    color: #fff;
}

.btn-auth-submit {
    width: 100%;
    background-color: #e6e6e6;
    color: #000;
    font-weight: 600;
    padding: 12px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    margin-top: 10px;
    font-size: 1rem;
    transition: all 0.2s;
}

.btn-auth-submit:hover {
    background-color: #fff;
    transform: translateY(-1px);
}

.auth-divider {
    display: flex;
    align-items: center;
    margin: 20px 0;
    color: #444;
    font-size: 0.85rem;
    transition: color 0.3s;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: #262626;
    transition: background-color 0.3s;
}

.auth-divider span {
    padding: 0 10px;
}

.btn-auth-discord {
    width: 100%;
    background-color: #0f0f0f;
    border: 1px solid #262626;
    color: #fff;
    padding: 12px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 0.95rem;
    transition: all 0.2s;
    margin-bottom: 20px;
}

.btn-auth-discord:hover {
    background-color: #1a1a1a;
    border-color: #444;
}

.btn-auth-discord svg {
    width: 20px;
    height: 20px;
    fill: #5865F2;
}

.btn-auth-google {
    width: 100%;
    background-color: #0f0f0f;
    border: 1px solid #262626;
    color: #fff;
    padding: 12px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 0.95rem;
    transition: all 0.2s;
}

.btn-auth-google:hover {
    background-color: #1a1a1a;
    border-color: #444;
}

.btn-auth-google svg {
    width: 20px;
    height: 20px;
    fill: #5865F2;
}

.auth-footer-link {
    text-align: center;
    margin-top: 20px;
    font-size: 0.9rem;
    color: #666;
}

.auth-footer-link a {
    color: #fff;
    text-decoration: underline;
    text-decoration-color: #555;
    text-underline-offset: 3px;
    margin-left: 5px;
    transition: color 0.3s;
}

.auth-tips {
    margin-top: 35px;
    font-size: 0.8rem;
    color: #444;
    line-height: 1.6;
}

.kbd {
    background: #262626;
    padding: 2px 6px;
    border-radius: 4px;
    color: #999;
    font-family: monospace;
    font-size: 0.75rem;
    border: 1px solid #333;
}

.link-tips {
    color: #777;
    text-decoration: underline;
    cursor: pointer;
}

/* ========== LIGHT THEME OVERRIDES ========== */
body[data-theme="light"] .auth-card {
    background-color: #ffffff;
    border-color: #e5e5e5;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}

body[data-theme="light"] .auth-watermark {
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0.08) 0%,
            /* บนสุด - เข้มกว่า (เพิ่มจาก 0.03) */
            rgba(0, 0, 0, 0.04) 50%,
            /* กลาง */
            rgba(0, 0, 0, 0.01) 100%
            /* ล่างสุด - จางมาก */
        );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

body[data-theme="light"] .auth-header h2 {
    color: #000;
}

body[data-theme="light"] .auth-header p {
    color: #666;
}

body[data-theme="light"] .form-group label {
    color: #444;
}

body[data-theme="light"] .auth-input {
    background-color: #f5f5f5;
    border-color: #e0e0e0;
    color: #000;
}

body[data-theme="light"] .auth-input:focus {
    background-color: #fff;
    border-color: #999;
}

body[data-theme="light"] .auth-input::placeholder {
    color: #999;
}

body[data-theme="light"] .btn-eye {
    color: #888;
}

body[data-theme="light"] .btn-eye:hover {
    color: #000;
}

body[data-theme="light"] .btn-auth-submit {
    background-color: #000;
    color: #fff;
}

body[data-theme="light"] .btn-auth-submit:hover {
    background-color: #333;
}

body[data-theme="light"] .auth-divider {
    color: #999;
}

body[data-theme="light"] .auth-divider::before,
body[data-theme="light"] .auth-divider::after {
    background-color: #e5e5e5;
}

body[data-theme="light"] .btn-auth-discord {
    background-color: #ffffff;
    border-color: #e5e5e5;
    color: #000;
}

body[data-theme="light"] .btn-auth-discord:hover {
    background-color: #f9f9f9;
    border-color: #ccc;
}

body[data-theme="light"] .btn-auth-google {
    background-color: #ffffff;
    border-color: #e5e5e5;
    color: #000;
}

body[data-theme="light"] .btn-auth-google:hover {
    background-color: #f9f9f9;
    border-color: #ccc;
}

body[data-theme="light"] .auth-footer-link {
    color: #888;
}

body[data-theme="light"] .footer {
    background-color: rgba(255, 255, 255, 0.95);
    border-bottom-color: #e5e5e5;
}

body[data-theme="light"] .auth-footer-link a {
    color: #000;
    text-decoration-color: #ccc;
}

body[data-theme="light"] .auth-tips {
    color: #888;
}

body[data-theme="light"] .kbd {
    background: #f0f0f0;
    color: #666;
    border-color: #ddd;
}

/* ========== GLOBAL RESPONSIVE FIXES ========== */
img {
    max-width: 100%;
    height: auto;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
    .btn-signup {
        display: none !important;
        /* ซ่อนปุ่มสมัครสมาชิกบนมือถือเพื่อลดพื้นที่ */
    }

    .nav-btn.login {
        padding: 6px 12px;
    }

    .auth-card {
        padding: 30px 25px;
        max-width: 400px;
    }

    .auth-watermark {
        font-size: 6rem;
        top: -20px;
    }
}

@media (max-width: 480px) {
    .auth-section {
        padding: 15px;
        align-items: flex-start;
        padding-top: 30px;
    }

    .auth-card {
        padding: 25px 20px;
        box-shadow: none;
    }

    .auth-watermark {
        font-size: 5rem;
        top: -15px;
        opacity: 0.05;
    }

    .auth-header h2 {
        font-size: 1.5rem;
    }
}

@media (max-width: 360px) {
    .auth-watermark {
        display: none;
    }

    .auth-card {
        padding: 20px 15px;
        border: none;
        background: transparent;
    }

    /* ปรับสีพื้นหลังให้ทึบนิดนึงตอนจอเล็กมากในธีม Light เพื่อให้อ่านง่าย */
    body[data-theme="light"] .auth-card {
        background: transparent;
    }

    .auth-input,
    .btn-auth-submit,
    .btn-auth-discord,
    .btn-auth-google {
        font-size: 14px;
    }
}

.loading-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
    animation: spin 0.6s linear infinite;
    transition: border-color 0.3s ease, border-top-color 0.3s ease;
}

/* Dark Theme (Default) */
body[data-theme="dark"] .loading-spinner,
.loading-spinner {
    border-color: rgba(255, 255, 255, 0.4);
    border-top-color: #ffffff;
}

/* Light Theme */
body[data-theme="light"] .loading-spinner {
    border-color: rgba(0, 0, 0, 0.3);
    border-top-color: #000000;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ไอคอนหมุน — แทน .fa-spin ที่หายไปพร้อม Font Awesome
   ใช้กับ <i class="ri-loader-4-line ri-spin"> ตามปุ่มที่กำลังโหลดทั่วเว็บ
   display:inline-block จำเป็น เพราะ transform ไม่มีผลกับ inline element */
.ri-spin {
    display: inline-block;
    animation: spin 1s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .ri-spin {
        animation-duration: 2.5s;
    }
}

/* ============ TOAST NOTIFICATION (Bottom Center) ============ */
#toast-container {
    position: fixed;
    /* ยกเลิกค่าเดิม */
    top: auto;
    right: auto;

    /* ตั้งค่าใหม่: อยู่ล่างสุด ตรงกลาง */
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    /* ดึงกลับมา 50% เพื่อให้กึ่งกลางเป๊ะ */

    display: flex;
    flex-direction: column-reverse;
    /* ให้อันใหม่ล่าสุดอยู่ล่างสุด แล้วดันอันเก่าขึ้น */
    align-items: center;
    /* จัดให้กล่อง Toast อยู่กลางคอนเทนเนอร์ */
    gap: 12px;
    z-index: 2000;
    pointer-events: none;
}

.toast {
    /* Base Size & Layout */
    min-width: 280px;
    max-width: 350px;
    width: 100%;
    /* เพิ่มเพื่อให้ยืดหยุ่น */
    padding: 16px 20px;
    border-radius: 12px;
    pointer-events: auto;

    /* Dark Theme (Default) */
    background: rgba(18, 18, 18, 0.95);
    backdrop-filter: blur(10px);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);

    /* Font */
    font-family: "Kanit", sans-serif;
    display: flex;
    flex-direction: column;
    gap: 4px;

    /* Animation: เปลี่ยนเป็นเลื่อนขึ้นแนวตั้ง */
    opacity: 0;
    transform: translateY(20px);
    animation: toast-in 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* ========== LIGHT THEME ========== */
body[data-theme="light"] .toast {
    background: rgba(255, 255, 255, 0.95);
    color: #1a1a1a;
    border: 1px solid #e5e5e5;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

body[data-theme="light"] .toast-message {
    color: #555;
}

/* ========== STATUS COLORS ========== */
.toast.success {
    border-left: 4px solid #22c55e;
}

.toast.success .toast-title {
    color: #22c55e;
}

.toast.error {
    border-left: 4px solid #ef4444;
}

.toast.error .toast-title {
    color: #ef4444;
}

/* แจ้งให้ทราบเฉยๆ ไม่ใช่ทั้งสำเร็จและไม่สำเร็จ เช่น ดึงรายการที่ค้างอยู่กลับมา */
.toast.info {
    border-left: 4px solid #3b82f6;
}

.toast.info .toast-title {
    color: #3b82f6;
}

/* Typography */
.toast-title {
    font-weight: 600;
    font-size: 15px;
    line-height: 1.4;
}

.toast-message {
    font-size: 14px;
    opacity: 0.9;
    line-height: 1.5;
}

/* ========== ANIMATIONS (Updated to Vertical) ========== */
@keyframes toast-in {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
        /* เริ่มจากต่ำลงมา */
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        /* เลื่อนมาที่เดิม */
    }
}

@keyframes toast-out {
    to {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
        /* หายตัวลงไปข้างล่าง */
    }
}

/* ========== RESPONSIVE (MOBILE) ========== */
@media (max-width: 480px) {
    #toast-container {
        width: 90%;
        /* มือถือให้กว้างเกือบเต็มจอ แต่ยังอยู่ตรงกลาง */
        bottom: 20px;
        /* left/transform ใช้ค่าจากข้างบนได้เลย ไม่ต้องแก้ */
    }

    .toast {
        min-width: unset;
        width: 100%;
    }
}

/* เพิ่มสไตล์สำหรับลิงก์ลืมรหัสผ่าน */
.forgot-password-link {
    text-align: right;
    margin-top: 8px;
    font-size: 14px;
}

.forgot-password-link a {
    color: var(--primary-color, #666);
    /* ใช้สีม่วงหรือสีหลักที่คุณตั้งไว้ */
    text-decoration: none;
    transition: color 0.2s ease;
}

.forgot-password-link a:hover {
    color: var(--primary-hover-color, #fff);
}

.padding-shop {
    padding: 0px 5%;
}

.padding-shop-top {
    margin-top: 12px;
}

/* ========== SHOP PAGE STYLES ========== */

/* Header Section */
.shop-header {
    margin-bottom: clamp(25px, 4vh, 35px);
}

/* ตัวครอบลายตารางพื้นหลังของ hero

   มีไว้รับ mask โดยเฉพาะ ใส่ที่ตัว <svg> ตรงๆ ไม่ได้เพราะ svg โดน skewY(12deg)
   ซึ่งทำงาน "หลัง" mask เส้นแบ่งแนวนอนบน mask เลยถูกบิดเอียงตาม 12° ไปด้วย
   บน hero กว้างๆ เท่ากับเหลื่อมขึ้นลงเป็นร้อยพิกเซล ตารางจะหายไปข้างเดียวทั้งซีก
   แทนที่จะจางที่ขอบล่าง ตัวครอบนี้ไม่ถูก skew เส้นจางจึงขนานกับขอบล่างจริง

   svg ข้างในยังมี mask ของตัวเองที่ทำให้ขอบบนดูนุ่ม อันนั้นทำงานต่อตามเดิม */
.hero-grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;

    /* จางไปหา transparent ไม่ใช่จางไปหาสีพื้น จะได้ใช้ได้ทั้งธีมมืดและสว่าง
       และไม่กลายเป็นแถบสีทับเวลาผู้ใช้ตั้งพื้นหลังเป็นรูปภาพ
       ปรับความแรงที่เลข 45% ตัวเดียว — มากขึ้น = ช่วงจางสั้นลง ตารางชัดนานขึ้น */
    mask-image: linear-gradient(to bottom, black 45%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 45%, transparent 100%);

    /* ค่าตั้งต้นของ mask-repeat คือ repeat ส่วน svg ข้างในสูง 250% ของกล่องนี้
       ถ้าไม่ปิด gradient จะปูซ้ำแล้วตารางโผล่กลับมาเป็นแถบใต้ช่วงที่จางไปแล้ว
       (overflow:hidden กันไว้ชั้นหนึ่งอยู่แล้ว อันนี้กันอีกชั้น) */
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
}

.shop-header h1 {
    font-size: clamp(1.5rem, 3vw, 1.8rem);
    font-weight: 600;
    margin-bottom: clamp(10px, 2vh, 15px);
    color: #ffffff;
    transition: color 0.3s ease;
}

.shop-header p {
    color: #888;
    font-size: clamp(0.85rem, 1.3vw, 0.95rem);
    line-height: 1.6;
    margin-bottom: clamp(18px, 3vh, 25px);
    max-width: 800px;
    transition: color 0.3s ease;
}

.header-buttons {
    display: inline-block;
    gap: clamp(8px, 1.5vw, 12px);
    align-items: center;
    flex-wrap: wrap;
}

.shop-header .btn-primary {
    background-color: #ffffff;
    color: #000000;
    border: none;
    padding: clamp(8px, 1.2vw, 12px) clamp(16px, 2vw, 2px);
    max-height: 42px;
    border-radius: 8px;
    font-size: clamp(13px, 1.2vw, 14px);
    font-weight: 400;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: "Kanit", sans-serif;
}

.shop-header .btn-primary:hover {
    background-color: #e0e0e0;
}

.btn-icon {
    background-color: transparent;
    border: 1px solid #333;
    color: #ffffff;
    width: clamp(35px, 4.5vw, 42px);
    height: clamp(35px, 4.5vw, 42px);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: clamp(14px, 1.3vw, 16px);
    font-weight: 500;
}

.btn-icon:hover {
    border-color: #555;
    background-color: #111;
}

/* --- Banner Carousel (ปรับปรุงใหม่) --- */
.banner-section {
    position: relative;
    margin-bottom: clamp(26px, 5vh, 5px);
    padding-left: 5%;
    padding-right: 5%;
    transition: all 0.3s ease;
}

.banner-section.mt-login {
    margin-top: clamp(25px, 4vh, 35px);
}

.banner-container {
    background-color: #0a0a0a;
    border: 1px solid #1f1f1f;
    border-radius: 12px;

    /* --- จุดที่แก้ 1: เอา height แบบ clamp ออก แล้วใช้ auto --- */
    height: auto;
    /* ----------------------------------------------------- */

    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    width: 100%;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.banner-slide {
    display: none;
    width: 100%;

    /* --- จุดที่แก้ 2: เปลี่ยน position และ height --- */
    position: relative;
    /* เปลี่ยนจาก absolute เป็น relative เพื่อให้ดันความสูงกล่องได้ */
    height: auto;
    /* ปล่อยให้สูงตามเนื้อหา */
    /* ------------------------------------------- */

    align-items: center;
    justify-content: center;
    font-size: clamp(1.2rem, 4vw, 2rem);
    color: #333;
    transition: color 0.3s ease;
    user-select: none;
}

/* เพิ่มคลาสสำหรับแสดงผล (ถ้าใช้ JS สลับ class) */
.banner-slide.active {
    display: block;
    /* หรือ display: flex ตามดีไซน์เดิม */
}

.banner-slide img {
    width: 100%;

    /* --- จุดที่แก้ 3: ให้รูปสูงตามสัดส่วนจริง --- */
    height: auto;
    /* -------------------------------------- */

    object-fit: contain;
    /* หรือ contain ตามต้องการ */
    display: block;
}

.banner-slide.active {
    display: flex;
}

.banner-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: #333333;
    border: none;
    color: #ffffff;
    width: clamp(36px, 4vw, 50px);
    height: clamp(36px, 4vw, 50px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
    font-size: clamp(18px, 2vw, 24px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.banner-nav:hover {
    background-color: #555555;
    transform: translateY(-50%) scale(1.1);
}

.banner-nav.prev {
    left: 10px;
}

.banner-nav.next {
    right: 10px;
}

/* ... (ส่วน Tabs, Categories เดิมใช้ได้ แต่แก้ Grid ด้านล่าง) ... */

/* Category Grid (ปรับปรุง) */
.category-grid {
    display: grid;
    /* เริ่มต้น 2 คอลัมน์ */
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(15px, 2.5vw, 24px);
}

/* ลบการประกาศซ้ำที่นี่ เนื่องจากมีอยู่ด้านล่างแล้ว */



/* ========== RESPONSIVE & MOBILE FIXES (UPDATED) ========== */

/* Mobile (ต่ำกว่า 768px) */
@media (max-width: 767px) {
    .banner-section {
        /* ลด padding ด้านข้างให้เท่ากับ padding-shop ปกติ (5%) */
        padding-left: 5%;
        padding-right: 5%;
    }

    /* ซ่อนปุ่มลูกศรตามที่ขอ */
    .banner-nav {
        display: none;
    }

    /* จัด Tabs เป็นแนวตั้ง */
    .tabs {
        flex-direction: column;
    }

    .categories-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .btn-view-all {
        text-align: center;
    }
}

/* Mobile Small (ต่ำกว่า 600px) */
@media (max-width: 599px) {
    .category-grid {
        grid-template-columns: 1fr;
        /* หมวดหมู่เหลือ 1 คอลัมน์ใหญ่ๆ */
    }

    .nav-buttons-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin-bottom: 30px;
    }

    /* ปรับขนาด Banner ให้สมส่วนกับมือถือ */
    .banner-container {
        height: auto;
    }

    .banner-slide img {
        width: 100%;

        /* --- จุดที่แก้ 3: ให้รูปสูงตามสัดส่วนจริง --- */
        height: auto;
        /* -------------------------------------- */

        object-fit: contain;
        /* หรือ contain ตามต้องการ */
        display: block;
    }

    .shop-header h1 {
        font-size: 1.4rem;
    }
}


/* Tabs Section */
.tabs-section {
    margin-bottom: clamp(30px, 4vh, 40px);
}

.tabs {
    display: flex;
    gap: 2px;
    background-color: #0a0a0a;
    border: 1px solid #1f1f1f;
    border-radius: 10px;
    padding: 4px;
    margin-bottom: clamp(18px, 3vh, 25px);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.tab {
    flex: 1;
    background-color: transparent;
    border: none;
    color: #666;
    padding: clamp(10px, 1.5vw, 14px) clamp(18px, 2.5vw, 24px);
    font-size: clamp(13px, 1.2vw, 14px);
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.3s ease;
    font-family: "Kanit", sans-serif;
    font-weight: 400;
}

.tab.active {
    background-color: #ffffff;
    color: #000000;
    font-weight: 500;
}

.tab:hover:not(.active) {
    background-color: #141414;
    color: #999;
}

.tab-content {
    color: #cccccc;
    font-size: clamp(13px, 1.2vw, 14px);
    line-height: 1.7;
    transition: color 0.3s ease;
}

/* Navigation Buttons Grid */
.nav-buttons-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(15px, 2.5vw, 20px);
    margin-bottom: clamp(45px, 6vh, 60px);
}

.nav-button {
    display: block;
    text-decoration: none;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.2s ease;
    width: 100%;
    aspect-ratio: 2 / 1;
    /* Fixes height on iOS */
}

.nav-button img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 10px;
    transition: transform 0.2s ease;
}

.nav-button:hover img {
    transform: scale(1.05);
}

.nav-button.empty-btn {
    background: #eee;
    padding: 20px;
    text-align: center;
    color: #888;
}

/* Categories Section */
.categories-section {
    margin-bottom: clamp(20px, 3vh, 30px);
}

.categories-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: clamp(20px, 3vh, 30px);
    flex-wrap: wrap;
    gap: 15px;
}

.categories-header h2 {
    font-size: clamp(1.2rem, 2.5vw, 1.5rem);
    font-weight: 600;
    color: #ffffff;
    transition: color 0.3s ease;
    margin-bottom: 5px;
}

.categories-header p {
    font-size: clamp(12px, 1.2vw, 14px);
    color: #666;
    transition: color 0.3s ease;
}

.btn-view-all {
    background-color: #ffffff;
    color: #000000;
    border: none;
    padding: clamp(8px, 1.2vw, 12px) clamp(18px, 2.5vw, 26px);
    border-radius: 8px;
    font-size: clamp(13px, 1.2vw, 14px);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: "Kanit", sans-serif;
}

.btn-view-all:hover {
    background-color: #e0e0e0;
    transform: translateY(-1px);
}

/* Category Cards Grid */
.category-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(18px, 2.5vw, 24px);
}

@media (max-width: 480px) {
    .category-grid {
        grid-template-columns: 1fr;
    }
}

.category-card {
    background-color: #0a0a0a;
    border: 1px solid #1f1f1f;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
}

.category-card:hover {
    border-color: #333;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

/* กรอบรูป — ย้าย margin/มุมมนจาก img มาไว้ที่นี่ หน้าตาเท่าเดิม
   แต่ scrim กับตัวหนังสือตอน hover จะวางทับรูปได้พอดีกรอบ */
.category-media {
    position: relative;
    margin: 12px;
    border-radius: 8px;
    overflow: hidden;
}

.category-card img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
}

/* hover แบบ workme.biz — ปกติเห็นแค่รูป พอชี้เมาส์ เงาดำไล่จากซ้ายจะค่อยๆ ขึ้น
   แล้ว ชื่อ / คำอธิบาย / ดูสินค้า เลื่อนเข้ามาจากซ้ายทีละบรรทัด
   จอสัมผัสไม่มี hover เลยซ่อนไว้ทั้งชุด การ์ดบนมือถือหน้าตาเหมือนเดิมทุกอย่าง */
.category-scrim,
.category-overlay {
    display: none;
}

/* ตัวหนังสือบนรูปใช้สไตล์ชุดเดียวกับการ์ดข่าว (.bento-title / .bento-subtitle / .bento-cta)
   ขาวเสมอทั้งสองธีม เพราะอยู่บนเงาดำทับรูป ไม่ได้อยู่บนพื้นการ์ด */
.category-overlay-title {
    max-width: 100%;
    /* ขนาดเท่า .category-info h3 ด้านล่าง */
    font-size: clamp(14px, 1.5vw, 16px);
    font-weight: 600;
    line-height: 1.35;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.category-overlay-des {
    max-width: 100%;
    margin-top: 2px;
    font-size: clamp(12px, 1.1vw, 13.5px);
    line-height: 1.5;
    color: rgba(255, 255, 255, .72);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.category-overlay-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: clamp(12px, 1.1vw, 13px);
    font-weight: 500;
    color: #ffffff;
}

.category-overlay-cta i {
    font-size: 1.05em;
    transition: transform var(--ds-duration-fast, .14s) var(--ds-ease, cubic-bezier(.4, 0, .2, 1));
}

@media (hover: hover) and (pointer: fine) {
    .category-scrim {
        display: block;
        position: absolute;
        inset: 0;
        /* เฉดเดียวกับ .bento-scrim แค่ไล่จากซ้ายแทนจากล่าง เพราะตัวหนังสืออยู่ฝั่งซ้าย */
        background: linear-gradient(to right,
                rgba(0, 0, 0, .88) 0%,
                rgba(0, 0, 0, .55) 35%,
                rgba(0, 0, 0, .12) 65%,
                rgba(0, 0, 0, 0) 100%);
        opacity: 0;
        transition: opacity 0.32s ease;
        pointer-events: none;
    }

    .category-overlay {
        display: flex;
        position: absolute;
        inset: 0;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        max-width: 72%;
        padding: 0 clamp(16px, 2vw, 24px);
        pointer-events: none;
    }

    .category-overlay>* {
        opacity: 0;
        transform: translateX(-16px);
        transition:
            opacity 0.34s ease,
            transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
    }

    :is(.category-card:hover, a:focus-visible>.category-card) .category-scrim {
        opacity: 1;
    }

    :is(.category-card:hover, a:focus-visible>.category-card) .category-overlay>* {
        opacity: 1;
        transform: none;
    }

    /* ไล่จังหวะทีละบรรทัด — delay อยู่ฝั่ง :hover อย่างเดียว ตอนเอาเมาส์ออกจะหายพร้อมกัน */
    :is(.category-card:hover, a:focus-visible>.category-card) .category-overlay>:nth-child(1) {
        transition-delay: 40ms;
    }

    :is(.category-card:hover, a:focus-visible>.category-card) .category-overlay>:nth-child(2) {
        transition-delay: 150ms;
    }

    :is(.category-card:hover, a:focus-visible>.category-card) .category-overlay>:nth-child(3) {
        transition-delay: 260ms;
    }

    /* ลูกศรขยับ 3px แบบ .bento-cta — รอให้ "ดูสินค้า" เลื่อนเข้ามาครบก่อนค่อยขยับ */
    :is(.category-card:hover, a:focus-visible>.category-card) .category-overlay-cta i {
        transform: translateX(3px);
        transition-delay: .45s;
    }
}

@media (prefers-reduced-motion: reduce) {

    .category-overlay>*,
    .category-overlay-cta i {
        transform: none !important;
    }
}

.category-info {
    padding: clamp(16px, 2.5vw, 20px);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.category-text {
    flex: 1;
    min-width: 0;
}

.category-info h3 {
    font-size: clamp(14px, 1.5vw, 16px);
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 4px;
    transition: color 0.3s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 1.2em;
}

.category-info p {
    font-size: clamp(12px, 1.2vw, 13px);
    color: #666;
    margin: 0;
    transition: color 0.3s ease;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 1.5em;
}

.category-items {
    font-size: clamp(13px, 1.3vw, 14px);
    color: #888;
    transition: color 0.3s ease;
    white-space: nowrap;
    margin-left: 15px;
}

/* ========== LIGHT THEME ========== */
body[data-theme="light"] .shop-header h1 {
    color: #000000;
}

body[data-theme="light"] .shop-header p {
    color: #555;
}

body[data-theme="light"] .shop-header .btn-primary {
    background-color: #000000;
    color: #ffffff;
}

body[data-theme="light"] .shop-header .btn-primary:hover {
    background-color: #333;
}

body[data-theme="light"] .btn-icon {
    border-color: #e0e0e0;
    color: #000000;
}

body[data-theme="light"] .btn-icon:hover {
    background-color: #f5f5f5;
    border-color: #ccc;
}

body[data-theme="light"] .banner-container {
    background-color: #f5f5f5;
    border-color: #e0e0e0;
}

body[data-theme="light"] .banner-slide {
    color: #ccc;
}

body[data-theme="light"] .banner-nav {
    background-color: rgba(0, 0, 0, 0.1);
    color: #000000;
}

body[data-theme="light"] .banner-nav:hover {
    background-color: rgba(0, 0, 0, 0.2);
}

body[data-theme="light"] .tabs {
    background-color: #f5f5f5;
    border-color: #e0e0e0;
}

body[data-theme="light"] .tab {
    color: #888;
}

body[data-theme="light"] .tab.active {
    background-color: #000000;
    color: #ffffff;
}

body[data-theme="light"] .tab:hover:not(.active) {
    background-color: #e5e5e5;
    color: #666;
}

body[data-theme="light"] .tab-content {
    color: #444;
}

body[data-theme="light"] .categories-header h2 {
    color: #000000;
}

body[data-theme="light"] .categories-header p {
    color: #888;
}

body[data-theme="light"] .btn-view-all {
    background-color: #000000;
    color: #ffffff;
}

body[data-theme="light"] .btn-view-all:hover {
    background-color: #333;
}

body[data-theme="light"] .category-card {
    background-color: #ffffff;
    border-color: #e0e0e0;
}

body[data-theme="light"] .category-card:hover {
    border-color: #ccc;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

body[data-theme="light"] .category-image {
    background-color: #f5f5f5;
    color: #d0d0d0;
}

body[data-theme="light"] .category-info h3 {
    color: #000000;
}

body[data-theme="light"] .category-info p {
    color: #888;
}

body[data-theme="light"] .category-items {
    color: #666;
}

body[data-theme="light"] .category-text h3 {
    color: #000000;
}

body[data-theme="light"] .category-text p {
    color: #666;
}

body[data-theme="light"] .recent-title {
    color: #000000;
}

body[data-theme="light"] .recent-meta {
    color: #666;
}

body[data-theme="light"] .recent-price {
    color: #334155;
    /* Slate 700 - ดูพรีเมียมในโหมดสว่าง */
}

body[data-theme="light"] .recent-meta i {
    color: #94a3b8;
    /* Slate 400 */
}

/* ========== RESPONSIVE BREAKPOINTS ========== */

/* Tablet Landscape (900px - 1023px) */
@media (max-width: 1024px) {
    .nav-buttons-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }
}

/* Tablet Portrait (768px - 899px) */
@media (max-width: 769px) {
    .nav-buttons-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
}

/* Tablet Portrait (768px - 899px) */
@media (max-width: 899px) {
    .shop-header h1 {
        font-size: 1.4rem;
    }

    .banner-container {
        height: auto;
    }

    .banner-slide img {
        width: 100%;
        height: auto;
        object-fit: contain;
        /* หรือ contain ตามต้องการ */
        display: block;
    }
}



/* Mobile Landscape (640px - 767px) */
@media (max-width: 767px) {
    .tabs {
        flex-direction: column;
    }

    .category-grid {
        grid-template-columns: 1fr;
    }

    .categories-header {
        flex-direction: row;
        /* เปลี่ยนเป็นแนวนอน */
        align-items: center;
        /* จัดให้อยู่กึ่งกลางแนวตั้ง */
        justify-content: space-between;
        /* ดันข้อความไปซ้าย ปุ่มไปขวา */
        gap: 10px;
    }
}

/* Mobile Large (540px - 639px) */
@media (max-width: 639px) {
    .nav-buttons-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

.banner-container {
    height: auto;
}

/* Mobile (414px - 479px) */
@media (max-width: 479px) {

    .shop-header .btn-primary {
        flex: 1;
    }

    .banner-nav {
        width: 38px;
        height: 38px;
        font-size: 18px;
    }

    .banner-nav.prev {
        left: 12px;
    }

    .banner-nav.next {
        right: 12px;
    }
}

/* Mobile Small (375px - 413px) */
@media (max-width: 413px) {
    .banner-container {
        height: auto;
    }

    .category-image {
        height: 140px;
    }
}

/* Mobile Extra Small (360px - 374px) */
@media (max-width: 374px) {
    .shop-header h1 {
        font-size: 1.2rem;
    }

    .nav-button {
        height: auto;
    }
}

/* Mobile Tiny (320px - 359px) */
@media (max-width: 359px) {
    .banner-nav {
        width: 34px;
        height: 34px;
        font-size: 16px;
    }

    .banner-nav.prev {
        left: 8px;
    }

    .banner-nav.next {
        right: 8px;
    }
}

/* Desktop Large (หน้าจอใหญ่กว่า 1280px) */
@media (min-width: 1281px) {
    .padding-shop {
        padding: 12px 5% !important;
        /* ใช้ 5% เพื่อให้เนื้อหาไม่ชิดขอบจอเกินไปในจอ Wide Screen */
    }
}

/* Desktop Large (หน้าจอใหญ่กว่า 1280px) */
@media (min-width: 1281px) {

    nav,
    .banner-section,
    .padding-shop,
    .footer {
        padding: 12px 18% !important;
        /* ใช้ 5% เพื่อให้เนื้อหาไม่ชิดขอบจอเกินไปในจอ Wide Screen */
    }

    .banner-nav.next {
        right: 14% !important;
    }

    .banner-nav.prev {
        left: 14% !important;
    }
}

/* Container ของ Dropdown */
.profile-dropdown {
    position: relative;
    /* สำคัญ: เพื่อให้เมนูอ้างอิงตำแหน่งจากปุ่มนี้ */
}

/* ปรับแต่งปุ่มกด */
.profile-dropdown .nav-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-right: 12px;
}

.arrow-icon {
    font-size: 14px;
    transition: transform 0.3s ease;
}

/* หมุนลูกศรเมื่อเปิดเมนู */
.profile-dropdown.active .arrow-icon {
    transform: rotate(180deg);
}

/* กล่องเมนู (Dropdown Menu) */
.dropdown-menu {
    position: absolute;
    top: calc(100% + 12px);
    /* เว้นระยะห่างจากปุ่มนิดนึง */
    right: 0;
    width: 220px;
    background: rgba(18, 18, 18, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);

    /* Animation การเปิด-ปิด */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
    z-index: 1000;
}

/* เมื่อ Class 'active' ถูกเพิ่มเข้ามา */
.profile-dropdown.active .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* รายการข้างใน */
.dropdown-header {
    padding: 8px 12px;
}

.user-name {
    font-weight: 600;
    font-size: 14px;
    color: #fff;
}

.user-rank {
    font-size: 12px;
    color: #888;
}

.user-points {
    font-weight: 600;
    font-size: 14px;
    color: #888;
}

.dropdown-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 6px 0;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    color: #cccccc;
    text-decoration: none;
    font-size: 14px;
    border-radius: 8px;
    transition: background 0.2s;
}

.dropdown-item:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

/* สีแดงสำหรับปุ่ม Logout */
.dropdown-item.text-danger:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

/* รองรับ Light Theme */
body[data-theme="light"] .dropdown-menu {
    background: rgba(255, 255, 255, 0.95);
    border-color: #e5e5e5;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

body[data-theme="light"] .user-name {
    color: #000;
}

body[data-theme="light"] .dropdown-item {
    color: #555;
}

body[data-theme="light"] .dropdown-item:hover {
    background: #f0f0f0;
    color: #000;
}

body[data-theme="light"] .dropdown-divider {
    background: #e5e5e5;
}

/* ============ RESPONSIVE PROFILE DROPDOWN ============ */

/* เมื่อหน้าจอเล็กกว่า 768px (Tablet & Mobile) */
@media (max-width: 768px) {

    /* 1. ปรับปุ่มให้เป็นสี่เหลี่ยมจัตุรัส (เหมือนปุ่มไอคอนอื่นๆ) */
    .profile-dropdown .nav-btn {
        width: clamp(35px, 4.5vw, 42px);
        height: clamp(35px, 4.5vw, 42px);
        padding: 0 !important;
        /* เอา Padding ออกเพื่อให้ไอคอนอยู่กลาง */
        justify-content: center;
        /* จัดกึ่งกลางแนวนอน */
        border-radius: 50%;
        /* ความมน */
        font-size: clamp(14px, 1.5vw, 18px);
    }

    /* 2. ซ่อนชื่อ User (ใน span) */
    .profile-dropdown .profile-info span {
        display: none;
    }

    /* 3. ซ่อนลูกศรชี้ลง */
    .profile-dropdown .arrow-icon {
        display: none;
    }

    /* 4. ปรับระยะห่างของไอคอนรูปคน */
    .profile-dropdown .profile-info {
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .profile-dropdown .profile-info i {
        font-size: 18px;
        /* ปรับขนาดไอคอนให้พอดี */
        margin-right: 0;
        /* ลบ margin เดิมทิ้ง */
    }
}

.cf-turnstile {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============ AUTH TIPS & SUCCESS STATE ============ */

/* --- ส่วนคำแนะนำ (Auth Tips) - Dark Theme (Default) --- */
.auth-tips {
    margin-top: 20px;
    font-size: 13px;
    color: #888;
    text-align: center;
    background: rgba(255, 255, 255, 0.03);
    padding: 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    line-height: 1.5;
    transition: all 0.3s ease;
}

.auth-tips i {
    color: #4f46e5;
    margin-right: 5px;
    font-size: 16px;
    vertical-align: text-bottom;
}

.auth-tips b {
    color: #ccc;
    font-weight: 500;
    transition: color 0.3s ease;
}

/* --- ส่วนหน้าจอสำเร็จ (Success State) - Dark Theme (Default) --- */
.success-content {
    text-align: center;
    padding: 10px 0;
    animation: fadeIn 0.5s ease;
}

.success-icon {
    font-size: 64px;
    color: #4f46e5;
    margin-bottom: 20px;
    animation: bounceIn 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.success-email {
    display: inline-block;
    font-weight: 500;
    color: #fff;
    background: rgba(79, 70, 229, 0.1);
    border: 1px dashed rgba(79, 70, 229, 0.3);
    padding: 8px 16px;
    border-radius: 6px;
    margin: 10px 0 20px 0;
    font-family: monospace;
    font-size: 15px;
    transition: all 0.3s ease;
}

.btn-resend {
    background: none;
    border: none;
    color: #888;
    cursor: pointer;
    text-decoration: none;
    font-size: 14px;
    margin-top: 15px;
    transition: color 0.3s;
    font-family: "Kanit", sans-serif;
}

.btn-resend:hover {
    color: #fff;
    text-decoration: underline;
}

/* ============ LIGHT THEME OVERRIDES ============ */
/* Light Mode Override for Hero Buttons */
body[data-theme="light"] .hero-buttons .btn-secondary {
    background: rgba(255, 255, 255, 0.6) !important;
    color: #000000;
    border-color: rgba(0, 0, 0, 0.2);
}

body[data-theme="light"] .hero-buttons .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.8) !important;
    border-color: rgba(0, 0, 0, 0.4);
}

body[data-theme="light"] .auth-tips {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.08);
    color: #666;
}

body[data-theme="light"] .auth-tips b {
    color: #333;
}

body[data-theme="light"] .success-email {
    color: #333;
    /* เปลี่ยนตัวหนังสือเป็นสีเข้มให้อ่านง่ายบนพื้นขาว */
    background: rgba(79, 70, 229, 0.08);
    border-color: rgba(79, 70, 229, 0.4);
}

body[data-theme="light"] .btn-resend {
    color: #666;
}

body[data-theme="light"] .btn-resend:hover {
    color: #000;
}

/* ============ ANIMATIONS ============ */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bounceIn {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    60% {
        transform: scale(1.1);
        opacity: 1;
    }

    100% {
        transform: scale(1);
    }
}

/* ============ PRODUCT GRID LAYOUT ============ */
/* Product Grid - แสดง 4 คอลัมน์ */
.product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* Default 4 columns */
    gap: 20px;
    margin-top: 20px;
}

/* Wide screens / Zoom out: Prevent cards from being too large */
@media (min-width: 1400px) {
    .product-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }
}

@media (max-width: 1024px) {
    .product-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

@media (max-width: 380px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
}

.products-section {
    margin-bottom: clamp(20px, 3vh, 30px);
}

/* Product Card */
.product-card {
    position: relative;
    background-color: #0f0f0f;
    border: 1px solid #1f1f1f;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    padding: 12px;
    width: 100%;
    max-width: 320px;
    /* จำกัดความกว้างไม่ให้ใหญ่เกินไปเมื่อซูมออก */
    margin: 0 auto;
    /* จัดตำแหน่งกลางถ้ากริตเหลือพื้นที่ */
}

/* hover แบบการ์ดสินค้าของ workme.biz ปรับเป็นโทนเทาของเว็บ (ต้นแบบใช้สีหลักของร้าน)
   ขอบสว่างขึ้น พื้นยกขึ้นนิดหนึ่ง มีเส้นขอบบางๆ กับเงา — ไม่ลอย ไม่ซูมรูป
   (transform: translateY(-2px) เดิมไม่เคยทำงาน เพราะ .reveal ยึด transform ไว้ด้วย animation) */
.product-card:hover {
    border-color: #3a3a3a;
    background-color: #151515;
    box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.06);
}

body[data-theme="light"] .product-card {
    background-color: #ffffff;
    border-color: #e5e5e5;
}

body[data-theme="light"] .product-card:hover {
    border-color: #c8c8c8;
    background-color: #fafafa;
    box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.04);
}

/* Product Image Box */
.product-img-box {
    /* เป็น <a> (กดรูปไปหน้าสินค้า) จึงต้องตั้ง block เอง */
    display: block;
    width: 100%;
    padding-top: 100%;
    position: relative;
    background: #1a1a1a;
    overflow: hidden;
    border-radius: 12px;
    margin-bottom: 12px;
}

body[data-theme="light"] .product-img-box {
    background: #f5f5f5;
}

.product-img-box img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease, filter 0.3s ease;
}

/* Out of Stock - Faded Image Effect */
.product-card.out-of-stock .product-img-box img {
    opacity: 0.4;
    filter: grayscale(50%);
}

/* Product Content */
.product-content {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.product-title {
    font-size: 15px;
    font-weight: 500;
    margin: 0 0 4px 0;
    color: #ffffff;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

body[data-theme="light"] .product-title {
    color: #000000;
}

.product-subtitle {
    font-size: 13px;
    font-weight: 300;
    color: #999;
    margin-bottom: 8px;
}

body[data-theme="light"] .product-subtitle {
    color: #666;
}

/* Price and Badge Row */
.price-badge-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.price-current {
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
}

body[data-theme="light"] .price-current {
    color: #000000;
}

/* Status Badge */
.status-badge-product {
    /* --- ของเดิม (ปรับ display นิดหน่อย) --- */
    display: inline-block;
    /* แนะนำใช้ inline-block เพื่อให้จัดการความกว้างง่ายขึ้น */
    /* display: inline-flex; <--- ถ้าจะใช้ flex ต้องระวังเรื่องการตัดคำ */

    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 500;
    font-size: 11px;
    vertical-align: middle;
    /* จัดกึ่งกลางแนวดิ่งกับ text ข้างๆ */

    /* --- ส่วนที่เพิ่มเพื่อให้เป็น ... --- */
    max-width: 80px;
    /* 1. กำหนดความกว้างสูงสุด (ปรับตัวเลขตามใจชอบ) */
    white-space: nowrap;
    /* 2. ห้ามขึ้นบรรทัดใหม่ */
    overflow: hidden;
    /* 3. ซ่อนส่วนที่เกินกรอบ */
    text-overflow: ellipsis;
    /* 4. เปลี่ยนส่วนที่เกินเป็น ... */

    /* เสริม: จัดตัวหนังสือให้อยู่ตรงกลาง (กรณีสั้นกว่ากรอบ) */
    text-align: center;
}

.status-badge-product.in {
    background-color: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.status-badge-product.out {
    background-color: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

/* สินค้าเฉพาะระดับตัวแทน (โหมด lock) — เห็นได้แต่กดซื้อไม่ได้
   ใช้ --ds-warning-text เป็นสีตัวอักษร ไม่ใช่ --ds-warning
   (กติกาข้อ 4 ของ DESIGN-SYSTEM.md — สีฐานตก contrast บนธีมสว่าง) */
.status-badge-product.tier-locked {
    background-color: var(--ds-warning-subtle);
    color: var(--ds-warning-text);
}

/* ป้ายชื่อระดับที่ติดข้างราคา บอกว่าราคานี้ได้มาเพราะเป็นตัวแทนระดับไหน
   สีมาจาก agent_tiers.badge_color ที่แอดมินตั้งเอง จึงกำหนดเป็น inline style
   ตัวโครงใช้ token กลางตามปกติ */
.tier-price-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-1);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px var(--ds-space-2);
    border-radius: var(--ds-radius-pill);
    border: 1px solid currentColor;
    background: transparent;
    white-space: nowrap;
    line-height: 1.6;
}

/* การ์ดสินค้าที่ถูกล็อกตามระดับ — ทำให้ดูจางลงเหมือนสินค้าหมด
   แต่ยังอ่านชื่อกับราคาได้ เพราะตั้งใจให้เห็นเพื่อล่อให้อยากอัประดับ */
.product-card .btn-buy.disabled i {
    margin-right: var(--ds-space-1);
}

/* แสงเงาวิ่งผ่านปุ่มสั่งซื้อครั้งเดียวตอน hover การ์ด (แบบ workme.biz)
   ต้นแบบใช้แถบแสงขาวบนปุ่มสีหลัก แต่ปุ่มของเราสีขาว แสงขาวจะมองไม่เห็น
   ธีมมืดจึงใช้แถบเทาจางๆ ส่วนธีมสว่าง (ปุ่มดำ) ใช้แถบขาว
   ปุ่มสินค้าหมด/เฉพาะตัวแทน (.disabled) ไม่วิ่ง เพราะกดซื้อไม่ได้ ไม่ควรเรียกความสนใจ */
.product-card .btn-buy {
    position: relative;
    overflow: hidden;
}

.product-card .btn-buy::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 38%;
    background: linear-gradient(100deg, transparent, rgba(0, 0, 0, 0.16), transparent);
    transform: translateX(-180%) skewX(-18deg);
    pointer-events: none;
}

body[data-theme="light"] .product-card .btn-buy::after {
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
}

.product-card:hover .btn-buy:not(.disabled)::after {
    animation: btn-buy-shine 0.85s ease-out;
}

@keyframes btn-buy-shine {
    to {
        transform: translateX(360%) skewX(-18deg);
    }
}

/* design-system.css บีบ animation-duration ทั้งเว็บเหลือ .01ms ตอน reduced-motion
   แถบจะกระพริบวาบเดียว ปิดไปเลยดีกว่า */
@media (prefers-reduced-motion: reduce) {
    .product-card:hover .btn-buy:not(.disabled)::after {
        animation: none;
    }
}

/* ========== MOBILE SEARCH BUTTON ========== */
/* Already handled in line 516 with breakpoints */
.mobile-search-btn {
    display: none;
}

@media (max-width: 1180px) {
    .mobile-search-btn {
        display: flex !important;
    }
}

/* ========== CONTACT US MODAL ========== */
.contact-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0);
    transition: background .25s ease;
}

.contact-overlay.active {
    background: rgba(0, 0, 0, .55);
}

.contact-popup {
    background: #111;
    border: 1px solid #2a2a2a;
    border-radius: 16px;
    width: 480px;
    max-width: 90vw;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(.94) translateY(-8px);
    opacity: 0;
    transition: transform .28s cubic-bezier(.34, 1.56, .64, 1), opacity .22s ease;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}

.contact-popup.active {
    transform: scale(1) translateY(0);
    opacity: 1;
}

body[data-theme="light"] .contact-popup {
    background: #fff;
    border-color: #e5e7eb;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .15);
}

.contact-drag-handle {
    display: none;
}

.contact-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 14px;
    border-bottom: 1px solid #2a2a2a;
}

body[data-theme="light"] .contact-header {
    border-bottom-color: #e5e7eb;
}

.contact-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
}

body[data-theme="light"] .contact-title {
    color: #111;
}

.contact-subtitle {
    font-size: .8rem;
    color: #666;
    margin: 2px 0 0;
}

body[data-theme="light"] .contact-subtitle {
    color: #999;
}

.contact-close-btn {
    background: transparent;
    border: 1px solid #333;
    color: #888;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    transition: all .2s;
    flex-shrink: 0;
}

.contact-close-btn:hover {
    background: #222;
    color: #fff;
}

body[data-theme="light"] .contact-close-btn {
    border-color: #ddd;
    color: #555;
}

body[data-theme="light"] .contact-close-btn:hover {
    background: #f5f5f5;
    color: #111;
}

.contact-body {
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ====== Monochrome Icon Mask ====== */
.si-mask {
    display: block;
    width: 22px;
    height: 22px;
    background-color: #fff;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    transition: background-color .2s;
}

body[data-theme="light"] .si-mask {
    background-color: #222;
}

/* ====== Channel Item ====== */
.contact-channel-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    text-decoration: none;
    color: inherit;
    transition: background .2s, border-color .2s, transform .15s;
    cursor: pointer;
}

.contact-channel-item:hover {
    background: #222;
    border-color: #555;
    transform: translateY(-1px);
}

body[data-theme="light"] .contact-channel-item {
    background: #f9fafb;
    border-color: #e5e7eb;
}

body[data-theme="light"] .contact-channel-item:hover {
    background: #f0f2f5;
    border-color: #bbb;
}

.ch-icon-wrap {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: #222;
    border: 1px solid #333;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all .2s;
    color: #fff;
}

body[data-theme="light"] .ch-icon-wrap {
    background: #f3f4f6;
    border-color: #e5e7eb;
    color: #222;
}

/* Monochrome hover — no blue */
.contact-channel-item:hover .ch-icon-wrap {
    border-color: #888;
}

body[data-theme="light"] .contact-channel-item:hover .ch-icon-wrap {
    border-color: #333;
}

.contact-channel-item:hover .si-mask {
    background-color: #fff;
}

body[data-theme="light"] .contact-channel-item:hover .si-mask {
    background-color: #000;
}

.ch-info {
    flex: 1;
    min-width: 0;
}

.ch-name {
    font-weight: 600;
    font-size: .95rem;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body[data-theme="light"] .ch-name {
    color: #111;
}

.ch-url {
    font-size: .75rem;
    color: #777;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}

.ch-arrow {
    color: #555;
    font-size: 1rem;
    flex-shrink: 0;
    transition: color .2s, transform .2s;
}

.contact-channel-item:hover .ch-arrow {
    color: #aaa;
    transform: translateX(2px);
}

body[data-theme="light"] .contact-channel-item:hover .ch-arrow {
    color: #333;
}

.contact-loading,
.contact-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 32px 20px;
    color: #666;
    font-size: .875rem;
}

.contact-loading i,
.contact-empty i {
    font-size: 2rem;
    opacity: .5;
}

body[data-theme="light"] .contact-loading,
body[data-theme="light"] .contact-empty {
    color: #888;
}

/* ========== MOBILE BOTTOM SHEET ========== */
@media (max-width: 768px) {
    .contact-overlay {
        align-items: flex-end;
    }

    .contact-popup {
        width: 100%;
        max-width: 100%;
        max-height: 70vh;
        border-radius: 20px 20px 0 0;
        transform: translateY(100%);
        opacity: 1;
        transition: transform .3s cubic-bezier(.34, 1.2, .64, 1);
    }

    .contact-popup.active {
        transform: translateY(0);
    }

    .contact-drag-handle {
        display: block;
        width: 40px;
        height: 4px;
        background: #444;
        border-radius: 4px;
        margin: 10px auto 0;
    }

    body[data-theme="light"] .contact-drag-handle {
        background: #ccc;
    }
}

/* ========== WELCOME POPUP (THEME AWARE) ========== */
.welcome-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    z-index: 2000000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: all 0.2s ease;
}

.welcome-popup-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.welcome-popup-container {
    background-color: #121212;
    /* Default Dark */
    width: min(500px, 95vw);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    border: 1px solid #27272a;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    transform: scale(0.95) translateY(10px);
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    padding-bottom: 5px;
}

.welcome-popup-overlay.active .welcome-popup-container {
    transform: scale(1) translateY(0);
}

.welcome-popup-close-x {
    display: none;
}

.welcome-popup-image {
    width: 100%;
    padding: 10px 10px 0 10px;
}

/* ── Carousel wrapper ── */
.popup-carousel {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ── Viewport: clips the sliding track ── */
.popup-carousel-viewport {
    width: 100%;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.07);
    background: transparent;
}

/* ── Sliding track ── */
.popup-carousel-track {
    display: flex;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

/* ── Each slide ── */
.popup-carousel-slide {
    flex: 0 0 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}

.popup-carousel-slide img {
    width: 100%;
    height: auto;
    max-height: 65vh;
    display: block;
    object-fit: contain;
    border-radius: 9px;
    opacity: 0.5;
    transform: scale(0.96);
    transition: opacity 0.45s cubic-bezier(0.16,1,0.3,1),
                transform 0.45s cubic-bezier(0.16,1,0.3,1);
}

.popup-carousel-slide.active img {
    opacity: 1;
    transform: scale(1);
}

/* ── Controls row: ◀  dots  ▶ ── */
.popup-carousel-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 0 4px;
}

/* ── Prev / Next buttons ── */
.popup-carousel-btn {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #3f3f46;
    background: #18181b;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.15rem;
    transition: background 0.2s, border-color 0.2s, transform 0.15s;
    line-height: 1;
}

.popup-carousel-btn:hover {
    background: #ffffff;
    color: #18181b;
    border-color: #ffffff;
    transform: scale(1.1);
}

/* Light theme */
body[data-theme="light"] .popup-carousel-btn {
    background: #f4f4f5;
    border-color: #d4d4d8;
    color: #18181b;
}
body[data-theme="light"] .popup-carousel-btn:hover {
    background: #18181b;
    color: #ffffff;
    border-color: #18181b;
}

/* ── Dots ── */
.popup-carousel-dots {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    justify-content: center;
}

.popup-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #3f3f46;
    cursor: pointer;
    transition: width 0.25s ease, background 0.25s ease, border-radius 0.25s ease;
}

.popup-dot.active {
    width: 20px;
    border-radius: 999px;
    background: #ffffff;
}

body[data-theme="light"] .popup-dot {
    background: #d4d4d8;
}
body[data-theme="light"] .popup-dot.active {
    background: #18181b;
}

.welcome-popup-content {
    /* เว้นบนไว้ ไม่งั้นหัวข้อ "ยินดีต้อนรับ" จะติดขอบรูปด้านบนพอดี */
    padding: 16px 20px 16px 20px;
    text-align: left;
    font-family: "Kanit", sans-serif;
}

.welcome-popup-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 5px;
    color: #ffffff;
}

.welcome-popup-body {
    color: #a1a1aa;
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 15px;
}

.welcome-popup-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    padding: 0;
}

/* Primary Button (ปิด) */
.btn-popup-primary {
    background: #ffffff;
    /* White in Dark Mode */
    color: #000000;
    border: none;
    border-radius: 8px;
    padding: 8px 24px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    font-family: "Kanit", sans-serif;
    transition: all 0.2s ease;
}

.btn-popup-primary:hover {
    background: #e0e0e0;
    transform: translateY(-1px);
}

/* Secondary Button (ปิด 1 ชม.) */
.btn-popup-secondary {
    background: #27272a;
    /* Dark Zinc in Dark Mode */
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 8px 18px;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    font-family: "Kanit", sans-serif;
    transition: all 0.2s ease;
}

.btn-popup-secondary:hover {
    background: #3f3f46;
}

/* Light Mode Overrides */
body[data-theme="light"] .welcome-popup-container {
    background-color: #ffffff;
    border-color: #e4e4e7;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

body[data-theme="light"] .welcome-popup-image img {
    border-color: #eeeeee;
}

body[data-theme="light"] .welcome-popup-title {
    color: #18181b;
}

body[data-theme="light"] .welcome-popup-body {
    color: #71717a;
}

body[data-theme="light"] .btn-popup-primary {
    background: #000000;
    /* Black in Light Mode */
    color: #ffffff;
}

body[data-theme="light"] .btn-popup-primary:hover {
    background: #333333;
}

body[data-theme="light"] .btn-popup-secondary {
    background: #f4f4f5;
    /* Light Zinc in Light Mode */
    color: #18181b;
}

body[data-theme="light"] .btn-popup-secondary:hover {
    background: #e4e4e7;
}









/* Buy Button */
.btn-buy {
    background: #ffffff;
    color: #000000;
    text-decoration: none;
    padding: 10px 16px;
    border-radius: 12px;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.2s;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    font-family: "Kanit", sans-serif;
    width: 100%;
    text-align: center;
    margin-bottom: 8px;
}

.btn-buy:hover {
    background: #e5e5e5;
}

body[data-theme="light"] .btn-buy {
    background: #000000;
    color: #ffffff;
}

body[data-theme="light"] .btn-buy:hover {
    background: #1a1a1a;
}

.btn-buy.disabled {
    background: #1a1a1a;
    color: #666;
    cursor: not-allowed;
}

body[data-theme="light"] .btn-buy.disabled {
    background: #f5f5f5;
    color: #9ca3af;
}

.stock-count {
    color: #888;
    font-size: 12px;
    text-align: center;
}

body[data-theme="light"] .stock-count {
    color: #666;
}

/* Responsive - 2 คอลัมน์บนมือถือ */
@media (max-width: 1024px) {
    .product-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .product-card {
        padding: 10px;
    }

    .product-title {
        font-size: 13px;
    }

    .price-current {
        font-size: 16px;
    }
}

/* ============ RIBBON BESTSELLER EFFECT ============ */

/* 1. ตัว Ribbon หลัก (กรอบที่ใช้ตัด) */
.ribbon-bestseller {
    position: absolute;
    top: -1px;
    right: -1px;
    overflow: hidden;
    width: 80px;
    height: 80px;
    z-index: 5;
    /* ต้องอยู่เหนือรูปภาพและป้ายอื่นๆ */
}

/* 2. เนื้อหาของ Ribbon (ข้อความ "ขายดี") */
.ribbon-bestseller::before {
    content: "Best Seller";
    position: absolute;
    top: 20px;
    right: -32px;
    width: 120px;
    padding: 2px 0;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    background-color: #ef4444;
    /* สีแดง */
    box-shadow: 0 5px 10px rgba(0, 0, 0, .1);

    /* หมุนให้เป็นแนวทแยง (45 องศา) */
    transform: rotate(45deg);
}

/* ============ SEARCH MODAL (Universal Responsive) ============ */

body {
    --sm-bg: #09090b;
    --sm-text: #fafafa;
    --sm-text-muted: #a1a1aa;
    --sm-border: #27272a;
    --sm-item-hover: #27272a;
    --sm-overlay: rgba(0, 0, 0, 0.8);
    --sm-radius: 12px;
}

body[data-theme="light"] {
    --sm-bg: #ffffff;
    --sm-text: #09090b;
    --sm-text-muted: #71717a;
    --sm-border: #e4e4e7;
    --sm-item-hover: #f4f4f5;
    --sm-overlay: rgba(0, 0, 0, 0.4);
}

/* --- Overlay ---
   ตัวนี้เป็น <dialog> จริงๆ เปิดด้วย showModal() มันจึงไปอยู่ใน top layer ของเบราว์เซอร์
   ได้ focus trap / ปิดด้วย ESC / พื้นหลัง inert มาให้ฟรี ไม่ต้องเขียน JS เอง

   อนิเมชั่นเข้า-ออกคุมด้วย CSS ล้วน:
   - @starting-style           = สถานะ "ก่อนเฟรมแรก" ให้ transition มีจุดตั้งต้น
   - transition-behavior: allow-discrete = ทำให้ display/overlay ที่ปกติกระโดดทันที
                                           รอจนอนิเมชั่นจบก่อน ตอนปิดเลยไม่หายวับ
   ของเดิมใช้ [style*="display: flex"] + setTimeout ซึ่งตอนปิดไม่มีอนิเมชั่นเลย */
.search-modal-overlay {
    /* ล้างค่า default ของ <dialog> ที่ UA ใส่มาให้ (border, padding, margin:auto, max-width) */
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    border: none;
    overflow: hidden;
    color: inherit;

    background: var(--sm-overlay);
    z-index: 9999;

    justify-content: center;
    /* Default: จัดกึ่งกลางค่อนบน (สำหรับ PC/Tablet) */
    align-items: flex-start;
    padding: 10vh 16px 16px;

    display: none;
    opacity: 0;

    /* กันเหนียว: ถ้าด้วยเหตุใดก็ตาม transition ของ display ค้าง (แท็บถูก throttle,
       เบราว์เซอร์แปลกๆ) กล่องจะเหลือเป็นแผ่นใสคลุมเต็มจอที่กินคลิกทั้งหน้า
       บรรทัดนี้ทำให้ต่อให้ค้างจริงก็คลิกทะลุผ่านไปได้ */
    pointer-events: none;

    /* ขยับแค่ opacity = งานของ compositor ล้วน ไม่ไป trigger layout/paint ใหม่ */
    transition:
        opacity .14s ease-out,
        display .18s allow-discrete,
        overlay .18s allow-discrete;
}

.search-modal-overlay[open] {
    display: flex;
    opacity: 1;
    pointer-events: auto;

    /* blur เต็มจอแพงมากถ้าให้วิ่งพร้อม opacity เพราะ GPU ต้อง re-composite ทั้งหน้าทุกเฟรม
       เลยตั้ง duration 0s + delay .16s ให้มันมาติดเอาตอนเฟดจบแล้ว (ตาแยกไม่ออก แต่เฟรมนิ่งขึ้นเยอะ) */
    backdrop-filter: blur(3px);
    transition:
        opacity .14s ease-out,
        backdrop-filter 0s .16s,
        display .18s allow-discrete,
        overlay .18s allow-discrete;
}

@starting-style {
    .search-modal-overlay[open] {
        opacity: 0;
    }
}

/* ตัว dialog คลุมเต็มจอและมีสีพื้นของตัวเองอยู่แล้ว
   ถ้าไม่เคลียร์ ::backdrop จะมืดซ้อนกันสองชั้น */
.search-modal-overlay::backdrop {
    background: transparent;
}

/* --- Modal Content --- */
.search-modal-content {
    background: var(--sm-bg);
    width: 100%;

    /* Responsive Width Strategy */
    max-width: 850px;
    /* จอคอม: กว้างสุดไม่เกินนี้ */

    border-radius: var(--sm-radius);
    border: 1px solid var(--sm-border);
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    display: flex;
    flex-direction: column;

    /* สถานะ "ปิด" — ตอนกดปิดจะวิ่งกลับมาที่ค่าชุดนี้ */
    transform: translateY(-8px) scale(.97);
    opacity: 0;
    transition:
        transform .14s ease-in,
        opacity .12s ease-in;
}

.search-modal-overlay[open] .search-modal-content {
    transform: none;
    opacity: 1;

    /* ease-out-expo: ออกตัวเร็วแล้วค่อยๆ หน่วงลง = ความรู้สึก "ลื่น"
       และเข้า (.2s) ช้ากว่าออก (.14s) ตามหลัก เข้าให้ทันเห็น ออกอย่าขวางทาง */
    transition:
        transform .2s cubic-bezier(.16, 1, .3, 1),
        opacity .14s ease-out;

    /* ประกาศเฉพาะตอนเปิด พอปิดแล้ว selector ไม่ match เบราว์เซอร์คืน layer ให้เอง */
    will-change: transform, opacity;
}

@starting-style {
    .search-modal-overlay[open] .search-modal-content {
        transform: translateY(-8px) scale(.97);
        opacity: 0;
    }
}

/* ล็อกสกอลล์พื้นหลัง — scrollbar-gutter ชดเชยที่ว่างของแถบเลื่อนที่หายไป
   ไม่งั้นทั้งหน้าจะกระตุกเลื่อนไปทางขวา 1 ครั้งตอนเปิด modal */
html.sm-lock {
    overflow: hidden;
    scrollbar-gutter: stable;
}

/* --- Header --- */
.search-header {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid var(--sm-border);
    flex-shrink: 0;
    /* ห้ามหด Header เด็ดขาด */
}

.search-icon-large {
    font-size: 20px;
    color: var(--sm-text-muted);
    margin-right: 12px;
}

.search-header input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--sm-text);
    font-size: 16px;
    /* 16px ป้องกัน iOS Zoom */
    outline: none;
    height: 36px;
    min-width: 0;
}

.close-search {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sm-item-hover);
    border: none;
    color: var(--sm-text-muted);
    border-radius: 6px;
    padding: 6px 10px;
    cursor: pointer;
    margin-left: 10px;
    font-size: 13px;
    font-weight: 500;
}

.close-search i {
    display: none;
}

.close-search::after {
    content: "ESC";
}

/* --- Body --- */
.search-body {
    /* Responsive Height Strategy */
    max-height: 60vh;
    /* PC: สูงไม่เกิน 60% ของจอ */

    /* ล็อกความสูงขั้นต่ำไว้ ไม่ให้กล่องยืด-หดตามจำนวนผลลัพธ์ทุกครั้งที่พิมพ์
       การกระตุกแบบนี้คือสิ่งที่ตารู้สึกได้ชัดที่สุด ชัดกว่าอนิเมชั่นตอนเปิดอีก */
    min-height: min(260px, 40vh);

    overflow-y: auto;
    padding: 8px;
    -webkit-overflow-scrolling: touch;

    /* กันไม่ให้การ re-render ในนี้ลาม layout ออกไปคิดใหม่ทั้งหน้า */
    contain: layout paint;
}

/* --- Items --- */
.search-item {
    display: flex;
    align-items: center;
    padding: 10px;
    margin-bottom: 4px;
    text-decoration: none;
    color: var(--sm-text);
    border-radius: 8px;
    transition: background 0.05s;

    /* ลิสต์ "สินค้าทั้งหมด" ยาวได้หลายสิบรายการ อันที่ยังไม่เลื่อนไปถึงให้เบราว์เซอร์
       ข้ามการ layout/paint ไปเลย ส่วน auto ใน contain-intrinsic-size คือให้จำขนาดจริง
       ที่เคยวาดไว้ เวลาสกอลล์ย้อนกลับมาแถบเลื่อนจะได้ไม่กระตุก */
    content-visibility: auto;
    contain-intrinsic-size: auto 86px;
}

.search-item:hover {
    background: var(--sm-item-hover);
}

.search-item .s-img img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 6px;
    margin-right: 12px;
    background: #333;
    border: 1px solid var(--sm-border);
    flex-shrink: 0;
}

.search-item .s-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.search-item .s-name {
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-item .s-price {
    font-size: 13px;
    font-weight: 600;
    color: var(--sm-text);
    background: var(--sm-item-hover);
    padding: 4px 10px;
    border-radius: 99px;
    white-space: nowrap;
    border: 1px solid var(--sm-border);
    width: fit-content;
    flex-shrink: 0;
}

.search-placeholder {
    text-align: center;
    padding: 40px 20px;
    color: var(--sm-text-muted);
}


/* =========================================
   RESPONSIVE BREAKPOINTS (หัวใจสำคัญ)
   ========================================= */

/* 1. Tablet & Laptop ขนาดกลาง (จอ < 1024px) */
@media (max-width: 1024px) {
    .search-modal-content {
        max-width: 90%;
        /* ลดความกว้างลงหน่อย */
    }
}

/* ...โค้ดส่วนบนเหมือนเดิม... */

/* ============ แก้ไขส่วน Mobile (ให้เป็นกล่องลอย ไม่ติดขอบ) ============ */
@media (max-width: 640px) {
    .search-modal-overlay {
        /* 1. จัดตำแหน่งใหม่ */
        align-items: flex-start;
        /* ให้เริ่มจากด้านบน (ไม่กองข้างล่างแล้ว) */
        padding: 15px;
        /* เว้นระยะขอบซ้าย-ขวา-ล่าง ไม่ให้ติดจอ */
        padding-top: 80px;
        /* เว้นระยะจากด้านบน (หลบ Navbar) */
        background: rgba(0, 0, 0, 0.7);
        /* พื้นหลังมืดลงหน่อยให้อ่านง่าย — มืดพอแล้วเลยไม่ต้องพึ่ง blur */
    }

    /* มือถือตัดทิ้งเลย backdrop-filter คือตัวกินเฟรมอันดับหนึ่งบนเครื่องกลางๆ */
    .search-modal-overlay[open] {
        backdrop-filter: none;
    }

    .search-modal-content {
        width: 100%;
        max-width: 100%;

        /* 2. ปรับรูปร่างกล่อง */
        border-radius: 12px;
        /* ให้มนทุกมุม (ไม่ตัดด้านล่างแล้ว) */
        border: 1px solid var(--sm-border);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
        /* เงาชัดๆ ให้ดูลอย */

        /* 3. ความสูง */
        height: auto;
        max-height: 70vh;
        /* สูงไม่เกิน 70% ของจอ */
    }

    /* 4. Animation — ใช้ชุดเดียวกับ Desktop (ดูบล็อก .search-modal-content ด้านบน)
       ที่นี่แค่ย่อระยะเด้งลงหน่อยเพราะกล่องเล็กกว่า ต้องแก้ทั้งสองที่ให้ตรงกัน
       คือสถานะปิด (.search-modal-content) กับสถานะตั้งต้นตอนเปิด (@starting-style) */
    .search-modal-content {
        transform: translateY(-6px) scale(.96);
    }

    @starting-style {
        .search-modal-overlay[open] .search-modal-content {
            transform: translateY(-6px) scale(.96);
        }
    }

    /* จัด Header ในมือถือ */
    .search-header {
        padding: 12px 15px;
    }

    .search-header input {
        font-size: 16px;
        /* กัน iOS ซูม */
    }

    /* ปุ่มปิด (กากบาท) */
    .close-search {
        background: transparent;
        border: none;
        padding: 0 5px;
        font-size: 22px;
        width: auto;
        height: auto;
    }

    .close-search::after {
        content: none;
    }

    /* เอาคำว่า ESC ออก */
    .close-search i {
        display: block;
    }

    /* โชว์ไอคอนกากบาท */

    /* พื้นที่แสดงผลลัพธ์ */
    .search-body {
        max-height: 60vh;
        min-height: 150px;
    }
}

/* 3. Small Mobile (จอเล็กมาก < 380px) */
@media (max-width: 380px) {
    .search-item .s-name {
        font-size: 14px;
    }

    .search-item .s-price {
        font-size: 12px;
        padding: 2px 8px;
    }

    .search-item .s-img img {
        width: 40px;
        height: 40px;
    }
}

/* หัวข้อหมวดหมู่ใน Modal (เช่น สินค้าทั้งหมด - 10 ชิ้น) */
.search-section-title {
    padding: 10px 12px 6px;
    /* ระยะห่าง */
    font-size: 13px;
    font-weight: 500;
    color: var(--sm-text-muted);
    /* สีเทาจางๆ ตามธีม */
    border-bottom: 1px dashed var(--sm-border);
    /* เส้นประคั่นบางๆ ด้านล่าง */
    margin-bottom: 8px;
    /* ดันเนื้อหาข้างล่างออกไปนิดหน่อย */
}

/* ============ อนิเมชั่นผลลัพธ์ในลิสต์ ============
   JS จะห่อผลลัพธ์ทุกครั้งด้วย .search-fade (element ใหม่เสมอ)
   อนิเมชั่นเลยเริ่มรอบใหม่ได้เองโดยไม่ต้องใช้ทริค offsetWidth บังคับ reflow */

.search-fade {
    animation: sm-fade-in .12s ease-out both;
}

/* .is-stagger ใส่เฉพาะตอนเปิด modal ครั้งแรกเท่านั้น
   ถ้าปล่อยให้ stagger ทุกครั้งที่พิมพ์ = ต้องรอ 8 ตัวไล่กันจบทุกคีย์ ตาลายกว่าเดิม */
.search-fade.is-stagger .search-item:nth-of-type(-n+8) {
    animation: sm-rise .18s cubic-bezier(.16, 1, .3, 1) both;
}

/* ไล่ทีละ 22ms แค่ 8 ตัวแรก ที่เหลือโผล่เลย เพราะยังไงก็อยู่นอกจอ
   ถ้าไล่ทั้ง 60 ตัวคือสร้าง animation 60 ชุดพร้อมกันโดยไม่มีใครเห็น */
.search-fade.is-stagger .search-item:nth-of-type(1) { animation-delay: 0ms; }
.search-fade.is-stagger .search-item:nth-of-type(2) { animation-delay: 22ms; }
.search-fade.is-stagger .search-item:nth-of-type(3) { animation-delay: 44ms; }
.search-fade.is-stagger .search-item:nth-of-type(4) { animation-delay: 66ms; }
.search-fade.is-stagger .search-item:nth-of-type(5) { animation-delay: 88ms; }
.search-fade.is-stagger .search-item:nth-of-type(6) { animation-delay: 110ms; }
.search-fade.is-stagger .search-item:nth-of-type(7) { animation-delay: 132ms; }
.search-fade.is-stagger .search-item:nth-of-type(8) { animation-delay: 154ms; }

@keyframes sm-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes sm-rise {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* --- Skeleton (โชว์เฉพาะตอนโหลดครั้งแรกที่ยังไม่มีอะไรในลิสต์) ---
   ถ้ามีผลลัพธ์เก่าอยู่แล้วจะคาไว้จนของใหม่มา (stale-while-revalidate)
   ดีกว่าล้างเป็นจอเปล่าแล้วค่อยเติม เพราะแบบนั้นกล่องจะยุบแล้วเด้ง */
.search-skeleton-row {
    display: flex;
    align-items: center;
    padding: 10px;
    margin-bottom: 4px;
}

.search-skeleton-row::before {
    content: '';
    width: 64px;
    height: 64px;
    border-radius: 6px;
    margin-right: 12px;
    flex-shrink: 0;
    background: var(--sm-item-hover);
}

.search-skeleton-row::after {
    content: '';
    height: 14px;
    width: min(45%, 260px);
    border-radius: 99px;
    background: var(--sm-item-hover);
}

/* วิ่ง opacity อย่างเดียว ไม่ใช่ background-position เพราะอันนั้น repaint ทุกเฟรม */
.search-skeleton-row::before,
.search-skeleton-row::after {
    animation: sm-pulse 1.1s ease-in-out infinite;
}

.search-skeleton-row:nth-child(2)::before,
.search-skeleton-row:nth-child(2)::after { animation-delay: .12s; }

.search-skeleton-row:nth-child(3)::before,
.search-skeleton-row:nth-child(3)::after { animation-delay: .24s; }

@keyframes sm-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .45; }
}

/* --- เคารพคนที่ตั้งเครื่องว่าไม่เอาอนิเมชั่น --- */
@media (prefers-reduced-motion: reduce) {

    .search-modal-overlay,
    .search-modal-overlay[open],
    .search-modal-content,
    .search-modal-overlay[open] .search-modal-content {
        transition-duration: .01ms;
    }

    .search-modal-content,
    .search-modal-overlay[open] .search-modal-content {
        transform: none;
    }

    /* ต้องเขียน selector ให้ specificity เท่าของเดิมเป๊ะ ไม่งั้น :nth-of-type ชนะแล้วรีเซ็ตไม่ติด */
    .search-fade,
    .search-fade.is-stagger .search-item:nth-of-type(-n+8),
    .search-skeleton-row::before,
    .search-skeleton-row::after {
        animation: none;
    }
}

/* ============ ANNOUNCEMENT BAR WITH TAB (shadcn UI Style) ============ */

/* Container หลัก */
.announcement-bar {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: #0a0a0a;
    border: 1px solid #1f1f1f;
    border-radius: 10px;
    margin-bottom: clamp(18px, 3vh, 25px);
    transition: background-color 0.3s ease, border-color 0.3s ease;
    display: flex;
    align-items: center;
    min-height: 50px;
}

/* ปุ่ม "ประกาศ" */
.announcement-tab {
    position: relative;
    z-index: 2;
    background: #ffffff;
    color: #000000;
    border: none;
    padding: 10px 24px;
    font-size: clamp(13px, 1.2vw, 14px);
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    margin: 8px;
    transition: all 0.3s ease;
    font-family: "Kanit", sans-serif;
}

.announcement-tab:hover {
    background: #e5e5e5;
}

/* Container ของข้อความที่เลื่อน */
.announcement-scroll-wrapper {
    flex: 1;
    height: 100%;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* Fade Effect ซ้าย-ขวา (ข้างในกล่อง) */
.announcement-scroll-wrapper::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 40px;
    background: linear-gradient(to right, #0a0a0a 0%, transparent 100%);
    z-index: 10;
    pointer-events: none;
}

.announcement-scroll-wrapper::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 40px;
    background: linear-gradient(to left, #0a0a0a 0%, transparent 100%);
    z-index: 10;
    pointer-events: none;
}

/* Track ที่เลื่อน */
.announcement-track {
    display: flex;
    width: fit-content;
    animation: scroll-announcement 30s linear infinite;
    height: 100%;
}

/* Item ข้างใน (ซ้ำ 2 ครั้งเพื่อให้ loop ไม่มีช่องว่าง) */
.announcement-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 20px;
    white-space: nowrap;
    color: #cccccc;
    font-size: clamp(13px, 1.2vw, 14px);
    transition: color 0.3s ease;
}

.announcement-item i {
    color: #22c55e;
    font-size: clamp(16px, 1.4vw, 18px);
}

.announcement-item .divider {
    color: #444;
    margin: 0 8px;
}

/* Animation */
@keyframes scroll-announcement {
    0% {
        transform: translateX(0);
    }

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

/* หยุดเมื่อ Hover */
.announcement-track:hover {
    animation-play-state: paused;
}

/* ========== LIGHT THEME ========== */
body[data-theme="light"] .announcement-bar {
    background-color: #f5f5f5;
    border-color: #e0e0e0;
}

body[data-theme="light"] .announcement-tab {
    background: #000000;
    color: #ffffff;
}

body[data-theme="light"] .announcement-tab:hover {
    background: #1a1a1a;
}

/* Fade Out สำหรับ Light Mode (ข้างในกล่อง) */
body[data-theme="light"] .announcement-scroll-wrapper::before {
    background: linear-gradient(to right, #f5f5f5 0%, transparent 100%);
}

body[data-theme="light"] .announcement-scroll-wrapper::after {
    background: linear-gradient(to left, #f5f5f5 0%, transparent 100%);
}

body[data-theme="light"] .announcement-item {
    color: #444;
}

body[data-theme="light"] .announcement-item .divider {
    color: #ccc;
}

/* ========== RESPONSIVE ========== */

/* Tablet (≤ 768px) */
@media (max-width: 768px) {
    .announcement-bar {
        min-height: 45px;
    }

    .announcement-tab {
        padding: 8px 18px;
        font-size: 12px;
    }

    .announcement-item {
        padding: 0 16px;
        font-size: 12px;
        gap: 8px;
    }

    .announcement-item i {
        font-size: 14px;
    }
}

/* Mobile (≤ 480px) */
@media (max-width: 480px) {
    .announcement-bar {
        border-radius: 8px;
        min-height: 42px;
    }

    .announcement-tab {
        padding: 6px 14px;
        font-size: 11px;
        margin: 6px;
    }

    .announcement-item {
        padding: 0 14px;
        font-size: 11px;
        gap: 6px;
    }

    .announcement-item i {
        font-size: 13px;
    }

    .announcement-item .divider {
        margin: 0 4px;
    }

    /* เร่งความเร็วใน Mobile */
    .announcement-track {
        animation-duration: 20s;
    }
}

/* Extra Small Mobile (≤ 360px) */
@media (max-width: 360px) {
    .announcement-bar {
        min-height: 40px;
    }

    .announcement-tab {
        padding: 5px 12px;
        font-size: 10px;
    }

    .announcement-item {
        padding: 0 12px;
        font-size: 10px;
    }
}

/* --- Category Page Header Styling --- */
.category-page-header {
    margin-bottom: 2rem;
    padding-top: 10px;
}

/* Breadcrumb (แถบนำทาง) */
.breadcrumb-nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    /* ป้องกันตกขอบในจอมือถือเล็กมากๆ */
    gap: 8px;
    color: var(--gray-text);
    /* ใช้ตัวแปรสีเทาของธีม */
    font-size: 0.95rem;
    margin-bottom: 1rem;
    font-weight: 400;
}

.breadcrumb-nav a {
    text-decoration: none;
    color: var(--gray-text);
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Hover แล้วเปลี่ยนเป็นสีหลักของเว็บ */
.breadcrumb-nav a:hover {
    color: var(--main);
}

.breadcrumb-separator {
    font-size: 0.8rem;
    opacity: 0.7;
}

/* Subtitle (Select Category) */
.page-subtitle {
    color: #888;
    font-size: clamp(0.85rem, 1.3vw, 0.95rem);
    font-weight: 300;
    margin-bottom: 0.25rem;
    text-transform: capitalize;
    letter-spacing: 0.5px;
    transition: color 0.3s ease;
}

/* Title (หัวข้อใหญ่) */
.page-title {
    font-size: clamp(1.5rem, 3vw, 1.8rem);
    font-weight: 400;
    color: #ffffff;
    transition: color 0.3s ease;
    color: var(--text-color);
    /* สำคัญ! จะเปลี่ยนเป็นขาว/ดำ ตามธีมอัตโนมัติ */
    margin: 0;
    line-height: 1.2;
}

/* --- Responsive: มือถือ --- */
@media (max-width: 768px) {
    .category-page-header {
        margin-bottom: 1.5rem;
    }

    .breadcrumb-nav {
        font-size: 0.85rem;
    }
}

/* =========================================
   Category View Page Styling
   ========================================= */

/* Banner รูปหมวดหมู่ */
.category-banner-wrapper {
    width: 100%;
    margin-bottom: 30px;
    border-radius: 15px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.category-banner-img {
    width: 100%;
    height: auto;
    max-height: 350px;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

/* ============ CATEGORY PAGE (shadcn UI Style) ============ */

/* ========== Breadcrumb Navigation ========== */
.category-page-header {
    margin-bottom: clamp(20px, 3vh, 30px);
}

.breadcrumb-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: clamp(13px, 1.2vw, 14px);
    color: #888;
}

.breadcrumb-nav a {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #888;
    text-decoration: none;
    transition: color 0.2s;
}

.breadcrumb-nav a:hover {
    color: #ffffff;
}

.breadcrumb-nav span {
    color: #ffffff;
    font-weight: 500;
}

.breadcrumb-separator {
    font-size: 14px;
    opacity: 0.5;
}

body[data-theme="light"] .breadcrumb-nav a {
    color: #666;
}

body[data-theme="light"] .breadcrumb-nav a:hover {
    color: #000;
}

body[data-theme="light"] .breadcrumb-nav span {
    color: #000;
}

/* ========== Category Banner ========== */
.category-banner-wrapper {
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: clamp(25px, 4vh, 35px);
    background: #1a1a1a;
    border: 1px solid #262626;
    transition: all 0.3s ease;
}

.category-banner-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

body[data-theme="light"] .category-banner-wrapper {
    background: #f5f5f5;
    border-color: #e5e5e5;
}

/* ========== Category Header with Filter ========== */
.category-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: clamp(12px, 2vw, 20px);
    margin-bottom: clamp(25px, 4vh, 35px);
}

.category-title-text {
    margin: 0;
    font-size: clamp(1.3rem, 2.5vw, 1.6rem);
    font-weight: 600;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: color 0.3s ease;
}

.category-title-text i {
    font-size: clamp(1.5rem, 3vw, 1.8rem);
}

body[data-theme="light"] .category-title-text {
    color: #000000;
}

/* ========== Shadcn Dropdown Filter ========== */
.shadcn-dropdown {
    position: relative;
    width: clamp(180px, 20vw, 220px);
    font-family: 'Kanit', sans-serif;
}

/* Trigger Button */
.shadcn-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: clamp(38px, 4.5vw, 44px);
    padding: 0 clamp(10px, 1.2vw, 14px);
    font-size: clamp(12px, 1.2vw, 14px);
    font-weight: 500;
    line-height: 1.25rem;

    background-color: #0f0f0f;
    border: 1px solid #262626;
    color: #ffffff;

    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.shadcn-trigger:hover {
    background-color: #1a1a1a;
    border-color: #333;
}

.shadcn-trigger.active {
    border-color: #444;
    box-shadow: 0 0 0 1px #0f0f0f, 0 0 0 3px rgba(255, 255, 255, 0.1);
}

/* Dropdown Content */
.shadcn-content {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 100%;
    min-width: 220px;
    z-index: 50;

    background-color: #0f0f0f;
    border: 1px solid #262626;
    color: #ffffff;

    border-radius: 8px;
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.5);

    opacity: 0;
    visibility: hidden;
    transform: translateY(-5px) scale(0.98);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);

    padding: 6px;
}

.shadcn-content.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* Dropdown Items */
.shadcn-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: clamp(8px, 1vw, 10px) clamp(10px, 1.2vw, 12px);
    font-size: clamp(12px, 1.2vw, 14px);
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.15s;
    color: #cccccc;
}

.shadcn-item:hover {
    background-color: #1a1a1a;
    color: #ffffff;
}

.shadcn-item.selected {
    background-color: #1a1a1a;
    font-weight: 600;
    color: #ffffff;
}

.shadcn-item i {
    margin-right: 10px;
    font-size: clamp(14px, 1.3vw, 16px);
    color: #666;
    transition: color 0.15s;
}

.shadcn-item:hover i,
.shadcn-item.selected i {
    color: #22c55e;
}

/* ========== LIGHT THEME ========== */
body[data-theme="light"] .shadcn-trigger {
    background-color: #ffffff;
    border-color: #e5e5e5;
    color: #000000;
}

body[data-theme="light"] .shadcn-trigger:hover {
    background-color: #f9f9f9;
    border-color: #d0d0d0;
}

body[data-theme="light"] .shadcn-trigger.active {
    border-color: #999;
    box-shadow: 0 0 0 1px #ffffff, 0 0 0 3px rgba(0, 0, 0, 0.1);
}

body[data-theme="light"] .shadcn-content {
    background-color: #ffffff;
    border-color: #e5e5e5;
    color: #000000;
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.15);
}

body[data-theme="light"] .shadcn-item {
    color: #444;
}

body[data-theme="light"] .shadcn-item:hover {
    background-color: #f5f5f5;
    color: #000000;
}

body[data-theme="light"] .shadcn-item.selected {
    background-color: #f5f5f5;
    color: #000000;
}

body[data-theme="light"] .shadcn-item i {
    color: #999;
}

body[data-theme="light"] .shadcn-item:hover i,
body[data-theme="light"] .shadcn-item.selected i {
    color: #22c55e;
}

/* ========== Empty State ========== */
.empty-state-box {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(60px, 10vh, 100px) 20px;
    text-align: center;
}

.empty-state-icon {
    font-size: clamp(3rem, 8vw, 5rem);
    color: #333;
    margin-bottom: clamp(15px, 3vh, 25px);
    transition: color 0.3s ease;
}

.empty-state-text {
    font-size: clamp(1.2rem, 2.5vw, 1.5rem);
    font-weight: 600;
    color: #ffffff;
    margin-bottom: clamp(8px, 1.5vh, 12px);
    transition: color 0.3s ease;
}

.empty-state-subtext {
    font-size: clamp(0.9rem, 1.5vw, 1rem);
    color: #888;
    max-width: 400px;
    line-height: 1.6;
    transition: color 0.3s ease;
}

body[data-theme="light"] .empty-state-icon {
    color: #d0d0d0;
}

body[data-theme="light"] .empty-state-text {
    color: #000000;
}

body[data-theme="light"] .empty-state-subtext {
    color: #666;
}

/* ========== RESPONSIVE ========== */

/* Tablet (≤ 768px) */
@media (max-width: 768px) {
    .category-header-flex {
        flex-direction: column;
        align-items: flex-start;
    }

    .shadcn-dropdown {
        width: 100%;
        max-width: 100%;
    }

    .shadcn-content {
        left: 0;
        right: 0;
        width: 100%;
    }
}

/* Mobile (≤ 480px) */
@media (max-width: 480px) {
    .breadcrumb-nav {
        font-size: 11px;
        gap: 6px;
    }

    .breadcrumb-nav a {
        gap: 4px;
    }

    .category-banner-wrapper {
        border-radius: 12px;
    }

    .category-title-text {
        font-size: 1.1rem;
    }

    .shadcn-trigger {
        height: 40px;
        padding: 0 12px;
        font-size: 12px;
    }

    .shadcn-item {
        padding: 8px 10px;
        font-size: 12px;
    }

    .empty-state-box {
        padding: 40px 20px;
    }
}

/* Extra Small (≤ 360px) */
@media (max-width: 360px) {
    .breadcrumb-nav {
        font-size: 10px;
    }

    .category-title-text {
        font-size: 1rem;
        gap: 6px;
    }

    .shadcn-trigger {
        font-size: 11px;
    }

    .shadcn-item {
        font-size: 11px;
    }
}

/* ============ STATISTICS CARDS (shadcn UI - Professional Style) ============ */

/* ============ STATISTICS CARDS (shadcn UI - Professional Style) ============ */

/* Container หลัก */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(12px, 2vw, 20px);
    margin-bottom: clamp(10px, 2vh, 30px);
}

/* Card แต่ละใบ — สไตล์ shadcn: พื้นทึบ ขอบบาง มุมมน ไม่มีสีเน้น
   สีทั้งหมดมาจากตัวแปรธีมของเว็บ (--bg-card / --border-color / --text-main / --text-sub)
   จึงสลับธีมได้เองโดยไม่ต้องมีกฎ light แยกสำหรับสี — เหลือแค่เงาที่ต้องแยก */
.stat-card {
    background: var(--bg-card, #0a0a0a);
    border: 1px solid var(--border-color, #1f1f1f);
    border-radius: 12px;
    padding: clamp(16px, 1.8vw, 20px);
    display: flex;
    align-items: center;
    gap: clamp(12px, 1.4vw, 16px);
    position: relative;
    overflow: hidden;
    transition: border-color .2s ease, transform .2s ease, background-color .3s ease;
}

.stat-card:hover {
    border-color: var(--border-item, #2a2a2a);
    transform: translateY(-2px);
}

/* ไอคอนย้ายมาอยู่ซ้ายด้วย order: -1 จะได้ไม่ต้องสลับลำดับใน PHP
   กล่องพื้นทึบ + ขอบบาง ชุดเดียวกับ .sec-icon ของหัวข้อ section ให้เป็นภาษาเดียวกันทั้งหน้า */
.stat-icon-large {
    order: -1;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ds-radius-md, 8px);
    font-size: 18px;
    line-height: 1;
    color: var(--text-main, #ffffff);
    background: var(--bg-item, #141414);
    border: 1px solid var(--border-item, #2a2a2a);
    transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}

/* ไอคอนลายน้ำมุมขวาล่าง — ใช้ไอคอนตัวเดียวกับกล่องซ้าย (PHP พ่นซ้ำให้)
   จางมากจนเป็นแค่พื้นผิว ไม่แย่งสายตาจากตัวเลข
   .stat-card มี position:relative + overflow:hidden อยู่แล้ว จึงถูกตัดขอบให้เอง */
.stat-watermark {
    position: absolute;
    right: -6px;
    bottom: -10px;
    /* ~70% ของความสูงการ์ด ให้โผล่เป็นมุมไม่ใช่เต็มใบ */
    font-size: 64px;
    line-height: 1;
    color: var(--text-main, #ffffff);
    opacity: .05;
    pointer-events: none;
    z-index: 0;
}

/* เนื้อหากับกล่องไอคอนต้องอยู่เหนือลายน้ำ */
.stat-content,
.stat-icon-large {
    position: relative;
    z-index: 1;
}

.stat-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.stat-label {
    font-size: clamp(11px, 1vw, 12.5px);
    color: var(--text-sub, #aaa);
    font-weight: 500;
    letter-spacing: .01em;
    line-height: 1.3;
    transition: color .3s ease;
}

.stat-value {
    font-size: clamp(1.4rem, 2.4vw, 1.85rem);
    font-weight: 700;
    color: var(--text-main, #ffffff);
    line-height: 1.1;
    letter-spacing: -0.02em;
    transition: color .3s ease;
}

.stat-unit {
    font-size: clamp(11px, 1vw, 12.5px);
    color: var(--text-sub, #aaa);
    font-weight: 500;
    margin-left: 5px;
    transition: color .3s ease;
}

/* ธีมสว่าง: ลายน้ำสีเข้มบนพื้นขาวหนักตากว่าขาวบนดำ ลดความทึบลงอีก
   ส่วนสีอื่นมาจากตัวแปรหมดแล้ว และเงา hover ถูกตัดออกตามคำขอ */
body[data-theme="light"] .stat-watermark {
    opacity: .035;
}

/* ========== RESPONSIVE ========== */

/* Desktop Large (> 1280px) */
@media (min-width: 1281px) {
    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Laptop/Desktop (1024px - 1280px) */
@media (max-width: 1280px) {
    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Tablet (769px - 1023px) */
@media (max-width: 1023px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

/* Tablet Portrait (481px - 768px) */
@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .stat-card {
        padding: 18px;
    }
}

/* Mobile (≤ 480px) - Magazine Style */
@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    /* คงเลย์เอาต์ไอคอนซ้าย + เนื้อหาขวาไว้ แค่ย่อลง
       (เดิมสลับเป็น display:block แล้วลอยไอคอนเป็นลายน้ำ ซึ่งขัดกับดีไซน์ใหม่) */
    .stat-card {
        padding: 14px;
        gap: 10px;
    }

    .stat-icon-large {
        width: 34px;
        height: 34px;
        font-size: 15px;
        border-radius: 7px;
    }

    .stat-label {
        font-size: 10.5px;
    }

    .stat-value {
        font-size: 1.25rem;
    }

    .stat-unit {
        font-size: 10.5px;
    }

    .stat-watermark {
        font-size: 46px;
        right: -4px;
        bottom: -8px;
    }
}

/* Extra Small (≤ 360px) */
@media (max-width: 360px) {
    .stats-grid {
        gap: 8px;
    }

    .stat-card {
        padding: 14px;
    }

    .stat-icon-large {
        width: 30px;
        height: 30px;
        font-size: 14px;
    }

    .stat-value {
        font-size: 1.15rem;
    }

    .stat-label {
        font-size: 10px;
    }
}

/* --- CSS Variables for Theme Support --- */
body {
    /* Dark Mode (Default) */
    --bg-card: #0a0a0a;
    --bg-item: #141414;
    --border-color: #1f1f1f;
    --border-item: #2a2a2a;
    --text-main: #ffffff;
    --text-sub: #aaa;
    --main: #3b82f6;
}

/* Light Mode */
body[data-theme="light"],
[data-theme="light"] {
    --bg-card: #ffffff;
    --bg-item: #f8f9fa;
    --border-color: #e0e0e0;
    --border-item: #d0d0d0;
    --text-main: #1a1a1a;
    --text-sub: #666;
    --main: #2563eb;
}

/* --- Main Wrapper Style (กรอบใหญ่) --- */
.recent-orders-wrapper {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    position: relative;
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Light Mode - ปรับเงา */
body[data-theme="light"] .recent-orders-wrapper,
[data-theme="light"] .recent-orders-wrapper {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

/* หัวข้อ */
.recent-header {
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--text-main);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 5px;
    transition: color 0.3s ease;
}

.recent-header i {
    color: var(--main);
    transition: color 0.3s ease;
}

/* --- Marquee Container --- */
.marquee-container {
    width: 100%;
    overflow: hidden;
    /* Mask จางๆ หัวท้าย - ปรับตาม Theme */
    mask-image: linear-gradient(to right, transparent, black 2%, black 98%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 2%, black 98%, transparent);
}

.marquee-track {
    display: flex;
    gap: 15px;
    width: max-content;
    animation: scrollLeft 60s linear infinite;
}

/* หยุดเมื่อเอาเมาส์ชี้ถูกควบคุมด้วย JavaScript ในหน้าที่เรียกใช้เพื่อทำให้ค่อยๆ ชะลอ */

/* --- Individual Card (การ์ดเล็กข้างใน) --- */
.recent-card {
    background: var(--bg-item);
    border: 1px solid var(--border-item);
    border-radius: 12px;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 280px;
    max-width: 300px;
    transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

/* Light Mode Card Shadow */
body[data-theme="light"] .recent-card,
[data-theme="light"] .recent-card {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Hover Effect */
.recent-card:hover {
    /* ให้เหมือน .category-card:hover — ขอบเทากลางๆ กับเงาดำ ไม่ใช้สีเน้น
       เงาย่อขนาดลงจาก 0 8px 20px ของการ์ดหมวดหมู่ เพราะการ์ดนี้เล็กกว่ามาก */
    border-color: #333;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

body[data-theme="light"] .recent-card:hover,
[data-theme="light"] .recent-card:hover {
    /* กฎเดิมตั้งแต่เงาอย่างเดียว ขอบเลยตกทอดสีน้ำเงินมาจากกฎธีมมืด ต้องกำหนดตรงนี้ด้วย */
    border-color: #ccc;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* การ์ดที่กดเข้าหน้าสินค้าได้เป็น <a> — ล้างสีลิงก์กับขีดเส้นใต้ ให้หน้าตาเท่ากับการ์ด <div> เดิม */
a.recent-card {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.recent-img {
    width: 55px;
    height: 55px;
    flex-shrink: 0;
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.recent-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.recent-info {
    flex: 1;
    overflow: hidden;
}

.recent-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 3px;
    transition: color 0.3s ease;
}

.recent-price {
    font-size: 0.9rem;
    color: var(--main);
    font-weight: 600;
    margin-bottom: 3px;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}

.recent-meta {
    font-size: 0.75rem;
    color: var(--text-sub);
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.3s ease;
}

.recent-meta i {
    font-size: 0.8rem;
}

/* Animation */
@keyframes scrollLeft {
    0% {
        transform: translateX(0);
    }

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

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
    .recent-orders-wrapper {
        padding: 15px;
        border-radius: 12px;
    }

    .recent-header {
        font-size: 1rem;
        margin-bottom: 15px;
    }

    .recent-card {
        min-width: 250px;
        padding: 10px;
    }

    .marquee-track {
        animation-duration: 45s;
    }
}

@media (max-width: 480px) {
    .recent-orders-wrapper {
        padding: 12px;
    }

    .recent-header {
        font-size: 0.95rem;
    }

    .recent-card {
        min-width: 220px;
        padding: 8px;
        gap: 10px;
    }

    .recent-img {
        width: 50px;
        height: 50px;
    }

    .recent-title {
        font-size: 0.85rem;
    }

    .recent-price {
        font-size: 0.85rem;
    }

    .recent-meta {
        font-size: 0.7rem;
    }

    .marquee-track {
        animation-duration: 35s;
        gap: 12px;
    }
}

@media (max-width: 360px) {
    .recent-card {
        min-width: 200px;
    }

    .recent-img {
        width: 45px;
        height: 45px;
    }
}

/* ========================================= */
/* PRODUCT DETAIL PAGE (Modified)            */
/* ========================================= */

/* --- CSS Variables for Theme --- */
/* Dark Mode (Default) */
body {
    --product-bg: #09090b;
    --product-card-bg: #09090b;
    --product-border: #27272a;
    --product-text: #fafafa;
    --product-text-muted: #a1a1aa;
    --product-input-bg: #18181b;
    --product-hover: #27272a;
    --product-accent: #fafafa;
    --product-accent-text: #09090b;
}

/* Light Mode */
body[data-theme="light"] {
    --product-bg: #ffffff;
    --product-card-bg: #ffffff;
    --product-border: #e5e5e7;
    --product-text: #09090b;
    --product-text-muted: #71717a;
    --product-input-bg: #f4f4f5;
    --product-hover: #f4f4f5;
    --product-accent: #18181b;
    --product-accent-text: #ffffff;
}

.product-detail-wrapper {
    padding: 40px 0;
    min-height: 80vh;
    background-color: var(--product-bg);
}

/* 404 Not Found */
.product-not-found {
    text-align: center;
    padding: 100px 20px;
    color: var(--product-text);
}

.product-not-found i {
    font-size: 4rem;
    color: var(--product-text-muted);
}

.btn-back {
    margin-top: 20px;
    display: inline-block;
    padding: 12px 24px;
    background: var(--product-accent);
    color: var(--product-bg);
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    transition: opacity 0.2s;
}

.btn-back:hover {
    opacity: 0.9;
}

/* Main Grid Layout */
.product-main-grid {
    display: grid;
    grid-template-columns: 35% 1fr;
    /* เปลี่ยนจาก 450px เป็น 35% เพื่อความยืดหยุ่น */
    gap: 40px;
    align-items: start;
}

/* --- Sticky wrapper สำหรับคอลัมน์ซ้าย (รูป + ข้อมูลสินค้า) ---
   ห่อ .product-gallery-card กับ .product-facts ไว้ด้วยกัน
   จอกว้าง (≥993px): ใช้ position: sticky ให้คอลัมน์ซ้ายติดตามเวลาเลื่อนหน้า
   จอแคบ (≤992px): กริดเหลือคอลัมน์เดียว ไม่ต้อง sticky */
.product-left-col {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

@media (min-width: 993px) {
    .product-left-col {
        position: sticky;
        top: 80px; /* navbar 60px + 20px ระยะห่าง */
        align-self: start;
        max-height: calc(100vh - 100px);
        overflow-y: auto;
        /* ซ่อน scrollbar ให้ดูเรียบร้อย — ข้างในจะ scroll ได้ถ้าเนื้อหาสูงเกินจอ */
        scrollbar-width: none; /* Firefox */
    }
    .product-left-col::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }
}

.product-facts {
    width: 100%;
    /* กว้างเท่าการ์ดรูปด้านบน */
    max-width: 450px;
}

.product-facts-head {
    margin-bottom: 14px;
}

.product-facts-head h2 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--product-text);
}

.product-facts-list {
    margin: 0;
    background: var(--product-card-bg);
    border: 1px solid var(--product-border);
    border-radius: 12px;
    overflow: hidden;
}

.product-facts-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 44px;
    padding: 10px 16px;
}

/* เส้นคั่นแบบต้นแบบ — เข้มที่ขอบสองข้าง จางหายตรงกลาง (โทนเดียวกับ .sec-rule) */
.product-facts-row+.product-facts-row {
    border-top: 1px solid transparent;
    border-image: linear-gradient(to right, var(--product-border), transparent 50%, var(--product-border)) 1;
}

.product-facts-row dt {
    font-size: 13px;
    color: var(--product-text-muted);
    white-space: nowrap;
}

.product-facts-row dd {
    min-width: 0;
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--product-text);
    text-align: right;
    overflow-wrap: anywhere;
}

/* ลิงก์หมวดหมู่ — เส้นประจางๆ พอให้รู้ว่ากดได้ ไม่ใช้สีเน้น */
.product-facts-row dd a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dashed var(--product-text-muted);
}

.product-facts-row dd a:hover {
    border-bottom-style: solid;
}

@media (max-width: 992px) {
    .product-facts {
        max-width: none;
    }
}

/* --- Left: Gallery Card --- */
.product-gallery-card {
    background: var(--product-card-bg);
    border: 1px solid var(--product-border);
    border-radius: 12px;
    padding: 24px;
    /* sticky ถูกย้ายไปอยู่ที่ .product-left-col แล้ว ไม่ต้องใส่ที่ตัวการ์ดเอง */
    transition: all 0.3s ease;
    width: 100%;
    /* ให้เต็มพื้นที่คอลัมน์ */
    max-width: 450px;
    /* แต่ไม่เกิน 450px */
}

.main-image-frame {
    width: 100%;
    aspect-ratio: 1/1;
    background: var(--product-input-bg);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    margin-bottom: 16px;
    border: 1px solid var(--product-border);
}

.main-image-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: zoom-in;
    /* เพิ่ม cursor แว่นขยาย */
}

/* Badge on Image */
.badge-stock {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    backdrop-filter: blur(8px);
    z-index: 2;
}

.in-stock {
    background: rgba(255, 255, 255, 0.9);
    color: #18181b;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .in-stock {
    background: rgba(39, 39, 42, 0.9);
    color: #fafafa;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.out-stock {
    background: rgba(239, 68, 68, 0.9);
    color: #fff;
}

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

.thumb-item {
    aspect-ratio: 1/1;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s;
    background: var(--product-input-bg);
    position: relative;
}

.thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.6;
    transition: 0.2s;
}

.thumb-item:hover {
    border-color: var(--product-border);
}

.thumb-item:hover img {
    opacity: 1;
}

.thumb-item.active {
    border-color: var(--product-text);
}

.thumb-item.active img {
    opacity: 1;
}

/* --- Right: Info Card --- */
.product-info-card {
    background: var(--product-card-bg);
    border: 1px solid var(--product-border);
    border-radius: 12px;
    padding: 32px;
    color: var(--product-text);
    transition: all 0.3s ease;
}

.info-header {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--product-border);
}

.product-title-text {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
    color: var(--product-text);
    letter-spacing: -0.02em;
}

/* Description Section */
.info-section {
    margin-bottom: 24px;
}

.info-section h3 {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--product-text);
    letter-spacing: -0.01em;
}

.info-section h3 i {
    color: var(--product-text-muted);
    font-size: 1rem;
}

.desc-content {
    color: var(--product-text-muted);
    font-size: 0.95rem;
    line-height: 1.7;
}

.divider-line {
    height: 1px;
    background: var(--product-border);
    margin: 24px 0;
}

/* Price & Quantity Section */
.price-quantity-section {
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    margin-bottom: 24px;
}

.price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.price-label {
    color: var(--product-text-muted);
    font-size: 0.875rem;
    font-weight: 500;
}

.price-value {
    color: var(--product-text);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.quantity-row {
    margin-bottom: 8px;
}

/* Qty Control */
.qty-control {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: transparent;
    border: 1px solid var(--product-border);
    border-radius: 8px;
    overflow: hidden;
    width: 100%;
    height: 46px;
}

.qty-control button {
    width: 52px;
    height: 100%;
    background: transparent;
    border: none;
    color: var(--product-text-muted);
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qty-control button:hover {
    background: var(--product-hover);
    color: var(--product-text);
}

.qty-control input {
    flex: 1;
    width: auto;
    height: 100%;
    text-align: center;
    background: transparent;
    border: none;
    border-left: 1px solid var(--product-border);
    border-right: 1px solid var(--product-border);
    color: var(--product-text);
    font-weight: 500;
    font-size: 0.95rem;
}

.qty-control input:focus {
    outline: none;
    box-shadow: none;
}


.stock-info {
    color: var(--product-text-muted);
    font-size: 0.8rem;
    margin-top: 8px;
    margin-bottom: 20px;
    text-align: left;
}

.stock-count {
    color: var(--product-text);
    font-weight: 600;
}

.total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 16px;
    border-top: 1px solid var(--product-border);
    color: var(--product-text-muted);
    font-size: 0.875rem;
    font-weight: 500;
}

.total-row span {
    color: var(--product-text);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* [EDITED] Buy Button: จัดกึ่งกลาง สมส่วน */
.buy-button-wrapper {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    /* ซ้อนกันแนวตั้ง — หน้านี้มีทั้งปุ่มสั่งซื้อและปุ่มหยิบใส่ตะกร้า
       ถ้าเรียงแนวนอนปุ่มที่กว้าง 100% สองอันจะดันกันจนล้นจอ */
    gap: 10px;
    align-items: stretch;
}

/* ปุ่มรอง (หยิบใส่ตะกร้า) — โครงเดียวกับ .btn-buy-now แต่เป็นแบบขอบโปร่ง */
.btn-buy-now.btn-buy-outline {
    background: transparent;
    color: var(--product-text);
    border: 1px solid var(--product-border);
}

.btn-buy-now.btn-buy-outline:hover:not(:disabled) {
    background: var(--product-hover);
}

.btn-buy-now.btn-buy-outline:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-buy-now {
    width: 100%;
    /* ไม่เต็มจอ */
    min-width: 200px;
    /* กว้างขั้นต่ำ */
    padding: 14px 40px;
    background: var(--product-accent);
    border: none;
    border-radius: 50px;
    /* ปุ่มมน */
    color: var(--product-accent-text);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    letter-spacing: -0.01em;
}

[data-theme="dark"] .btn-buy-now:hover:not(.disabled) {
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
}

.btn-buy-now.disabled {
    background: var(--product-input-bg);
    color: var(--product-text-muted);
    cursor: not-allowed;
    opacity: 0.6;
}

/* Breadcrumb adjustments */
.category-page-header {
    margin-bottom: 32px;
}

.breadcrumb-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.875rem;
    color: var(--product-text-muted);
}

.breadcrumb-nav a {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--product-text-muted);
    text-decoration: none;
    transition: color 0.2s;
}

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

.breadcrumb-nav span {
    color: var(--product-text);
    font-weight: 500;
}

.breadcrumb-separator {
    font-size: 14px;
    opacity: 0.5;
}

/* [ADDED] Lightbox Styles */
.lightbox-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(5px);
}

.lightbox-content {
    margin: auto;
    display: block;
    max-width: 90%;
    max-height: 90vh;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    animation: zoomIn 0.3s;
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    z-index: 10000;
    transition: 0.3s;
}

.lightbox-close:hover {
    color: #fff;
}

@keyframes zoomIn {
    from {
        transform: translate(-50%, -50%) scale(0.9);
        opacity: 0;
    }

    to {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

/* Responsive */
@media (max-width: 992px) {
    .product-main-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

@media (max-width: 768px) {
    .product-main-grid {
        gap: 24px;
    }

    .product-gallery-card,
    .product-info-card {
        padding: 20px;
    }

    .product-title-text {
        font-size: 1.5rem;
    }

    .price-value,
    .total-row span {
        font-size: 1.25rem;
    }
}

@media (max-width: 480px) {
    .product-main-grid {
        gap: 20px;
    }

    .product-gallery-card,
    .product-info-card {
        padding: 16px;
    }

    .product-title-text {
        font-size: 1.25rem;
    }

    .thumbnail-list {
        gap: 8px;
    }

    .price-quantity-section {
        padding: 16px;
    }

    .btn-buy-now {
        min-width: 100%;
        /* มือถือให้เต็มจอ */
    }

    .warranty-option {
        padding: 12px !important;
    }

    .warranty-option label {
        gap: 10px !important;
    }

    .warranty-option .warranty-inner {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 4px !important;
    }

    .warranty-option .warranty-title {
        font-size: 0.8rem !important;
    }

    .warranty-option .warranty-price {
        font-size: 0.8rem !important;
    }
}

/* ========================================== */
/* THEME VARIABLES (ตั้งค่าสีสำหรับ Modal)    */
/* ========================================== */
body {
    /* --- Dark Mode (Default) --- */
    --modal-overlay: rgba(0, 0, 0, 0.7);
    --modal-bg-card: #09090b;
    --modal-bg-inner: #18181b;
    --modal-border: #27272a;
    --modal-text-main: #ffffff;
    --modal-text-sub: #a1a1aa;
    --modal-shadow: rgba(0, 0, 0, 0.5);

    /* 🔥 สีเขียวที่คุณต้องการ */
    --theme-color-primary: #0E7935;
    /* เขียวเข้ม (ปุ่ม) */
    --theme-color-glow: #00FA5B;
    /* เขียวสว่าง (ราคา/แสง) */
}

body[data-theme="light"] {
    /* --- Light Mode --- */
    --modal-overlay: rgba(0, 0, 0, 0.4);
    --modal-bg-card: #ffffff;
    --modal-bg-inner: #f4f4f5;
    --modal-border: #e4e4e7;
    --modal-text-main: #18181b;
    --modal-text-sub: #71717a;
    --modal-shadow: rgba(0, 0, 0, 0.1);
}

/* ========================================== */
/* Buy Modal Styles (Updated)                 */
/* ========================================== */
.buy-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--modal-overlay);
    backdrop-filter: blur(5px);
    z-index: 2000001;
    /* อยู่บนสุด เหนือ Navbar (1000) และ Announcement (2000000) */
    display: none;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.buy-modal-overlay.active {
    display: flex;
    opacity: 1;
}

.buy-modal-card {
    background: var(--modal-bg-card);
    /* ใช้ตัวแปร */
    border: 1px solid var(--modal-border);
    /* ใช้ตัวแปร */
    width: 90%;
    max-width: 450px;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 10px 40px var(--modal-shadow);
    /* ใช้ตัวแปร */
    transform: translateY(20px) scale(0.95);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    color: var(--modal-text-main);
    /* เพิ่มสีตัวอักษรหลัก */
}

.buy-modal-overlay.active .buy-modal-card {
    transform: translateY(0) scale(1);
}

/* Header */
.buy-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--modal-border);
    /* ใช้ตัวแปร */
    padding-bottom: 15px;
}

.buy-modal-header h3 {
    margin: 0;
    font-size: 1.2rem;
    color: var(--modal-text-main);
    /* ใช้ตัวแปร */
    display: flex;
    align-items: center;
    gap: 10px;
}

.close-modal-btn {
    background: transparent;
    border: none;
    color: var(--modal-text-sub);
    /* ใช้ตัวแปร */
    font-size: 1.5rem;
    cursor: pointer;
    transition: color 0.2s;
}

.close-modal-btn:hover {
    color: var(--modal-text-main);
    /* ใช้ตัวแปร */
}

/* Body */
.product-summary {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.product-summary img {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--modal-border);
    /* ใช้ตัวแปร */
}

.product-details h4 {
    margin: 0 0 5px 0;
    color: var(--modal-text-main);
    /* ใช้ตัวแปร */
    font-size: 1rem;
}

.product-details .modal-des {
    margin: 0;
    font-size: 0.85rem;
    color: var(--modal-text-sub);
    /* ใช้ตัวแปร */
}

/* Price Box */
.price-summary-box {
    background: var(--modal-bg-inner);
    /* ใช้ตัวแปร */
    border-radius: 12px;
    padding: 15px;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 0.9rem;
    color: var(--modal-text-sub);
    /* ใช้ตัวแปร */
}

.divider {
    height: 1px;
    background: var(--modal-border);
    /* ใช้ตัวแปร */
    margin: 10px 0;
}

.summary-row.total {
    margin-bottom: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--modal-text-main);
    /* ใช้ตัวแปร */
}

.glow-text {
    text-shadow: 0 0 10px rgba(59, 130, 246, 0.3);
}

/* Footer & Buttons */
.buy-modal-footer {
    display: flex;
    gap: 10px;
    margin-top: 25px;
}

.btn-cancel {
    flex: 1;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid var(--modal-border);
    /* ใช้ตัวแปร */
    background: transparent;
    color: var(--modal-text-sub);
    /* ใช้ตัวแปร */
    cursor: pointer;
    transition: 0.2s;
}

.btn-cancel:hover {
    background: var(--modal-border);
    /* ใช้ตัวแปร */
    color: var(--modal-text-main);
    /* ใช้ตัวแปร */
}

.btn-confirm-buy {
    flex: 2;
    padding: 12px;
    border-radius: 8px;
    border: none;

    /* 🔥 Gradient ไล่เฉดเล็กน้อยเพื่อให้ดูมีมิติ */
    background: linear-gradient(135deg, #16a34a 0%, var(--theme-color-primary) 100%);
    /* หรือถ้าอยากได้สีล้วนๆ ให้ใช้บรรทัดล่างนี้แทนครับ */
    /* background: var(--theme-color-primary); */

    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;

    /* เงาสีเขียว */
    box-shadow: 0 4px 15px rgba(14, 121, 53, 0.4);
}

.btn-confirm-buy:hover {
    filter: brightness(1.15);
    /* สว่างขึ้นตอนชี้ */
    box-shadow: 0 6px 20px rgba(0, 250, 91, 0.3);
    /* เงาสว่างขึ้น */
}

.btn-confirm-buy:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

/* --- Shadcn UI Theme (Manual CSS) --- */
body {
    /* --- Dark Mode (Default) --- */
    --sc-bg: #09090b;
    --sc-card: #09090b;
    --sc-border: #27272a;
    --sc-primary: #3b82f6;
    --sc-text-main: #fafafa;
    --sc-text-sub: #a1a1aa;
    --sc-hover: #27272a;
    --sc-layer: rgba(255, 255, 255, 0.03);
    --sc-radius: 0.5rem;

    /* เพิ่ม: Gradient แบบที่คุณต้องการ (ปรับ Opacity ลงนิดหน่อยเพื่อให้เหมาะกับพื้นหลัง) */
    --sc-card-gradient: linear-gradient(to bottom,
            rgba(255, 255, 255, 0.08) 0%,
            /* ลดจาก 0.165 เป็น 0.08 เพื่อไม่ให้พื้นหลังแย่งซีนข้อความ */
            rgba(255, 255, 255, 0.01) 50%,
            rgba(255, 255, 255, 0.0) 100%);
}

/* --- Light Mode Override --- */
body[data-theme="light"] {
    --sc-bg: #ffffff;
    --sc-card: #ffffff;
    --sc-border: #e4e4e7;
    --sc-primary: #2563eb;
    --sc-text-main: #09090b;
    --sc-text-sub: #71717a;
    --sc-hover: #f4f4f5;
    --sc-layer: rgba(0, 0, 0, 0.04);

    /* Light Mode ไม่ต้องมี Gradient ขาวทับขาว หรือใส่เป็นเงาจางๆ แทน */
    --sc-card-gradient: linear-gradient(to bottom, #ffffff 0%, #f8fafc 100%);
}

.shadcn-container {
    margin-bottom: clamp(20px, 3vh, 30px);
}

.shadcn-card {
    /* 1. สีพื้นหลังหลัก (Base) */
    background-color: var(--sc-card);

    /* 2. สี Gradient ซ้อนทับ (Effect) */
    background-image: var(--sc-card-gradient);

    border: 1px solid var(--sc-border);
    border-radius: 12px;
    width: 100%;
    max-width: 600px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    margin: 2rem auto;
    transition: background-color 0.3s, border-color 0.3s;

    /* เพิ่ม: เพื่อให้มั่นใจว่า Gradient จะซ้อนอยู่บนสีพื้นหลัง */
    background-blend-mode: overlay;
    /* หรือ normal ถ้าอยากให้เห็นสีชัดๆ */
}

/* Header */
.shadcn-header {
    padding: 24px;
    border-bottom: 1px solid var(--sc-border);
    background: var(--sc-layer);
    /* แก้ไข: ใช้ตัวแปรแทน rgba fix */
}

.shadcn-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--sc-text-main);
    display: flex;
    align-items: center;
    gap: 10px;
}

.shadcn-desc {
    margin: 5px 0 0;
    font-size: 0.875rem;
    color: var(--sc-text-sub);
}

.shadcn-body {
    padding: 24px;
}

/* Form Sections */
.form-section {
    margin-bottom: 24px;
}

.section-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--sc-text-sub);
    text-transform: uppercase;
    margin-bottom: 12px;
    letter-spacing: 0.5px;
}

/* Token Grid */
.token-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.token-card {
    border: 1px solid var(--sc-border);
    background: var(--sc-layer);
    /* แก้ไข: ใช้ตัวแปร */
    border-radius: var(--sc-radius);
    padding: 15px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}

.token-card:hover {
    background: var(--sc-hover);
    border-color: var(--sc-text-sub);
}

.token-card.active {
    border-color: var(--sc-primary);
    background: rgba(59, 130, 246, 0.1);
    /* สีฟ้าจางๆ ใช้ได้ทั้ง 2 ธีม */
    box-shadow: 0 0 0 1px var(--sc-primary);
}

.token-amount {
    font-weight: 600;
    color: var(--sc-text-main);
}

.token-price {
    font-size: 0.8rem;
    color: var(--sc-text-sub);
    margin-top: 4px;
}

.token-card.active .token-price {
    color: var(--sc-primary);
    /* ปรับใช้สี Primary แทน hardcode */
}

/* Price Summary */
.price-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--sc-layer);
    /* แก้ไข: ใช้ตัวแปร */
    padding: 16px;
    border-radius: var(--sc-radius);
    border: 1px solid var(--sc-border);
    margin-bottom: 24px;
    color: var(--sc-text-main);
}

.total-price {
    font-size: 1.5rem;
    font-weight: 700;
}

.total-price small {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--sc-text-sub);
}

/* Tabs */
.tab-container {
    display: flex;
    background: var(--sc-layer);
    /* แก้ไข: ใช้ตัวแปร */
    padding: 4px;
    border-radius: var(--sc-radius);
    border: 1px solid var(--sc-border);
    margin-bottom: 20px;
}

.tab-btn {
    flex: 1;
    background: transparent;
    border: none;
    padding: 8px;
    color: var(--sc-text-sub);
    cursor: pointer;
    border-radius: 4px;
    font-weight: 500;
    transition: 0.2s;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
}

.tab-btn:focus,
.tab-btn:focus-visible {
    outline: none;
    box-shadow: none;
}

.tab-btn:active {
    opacity: 0.7;
    transition: none;
}

.tab-btn.active {
    background: var(--sc-bg);
    /* ใช้สีพื้นหลังหลักเพื่อให้ปุ่มดูจมหรือลอยตามธีม */
    color: var(--sc-text-main);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Bank List */
.bank-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.bank-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius);
    background: var(--sc-layer);
    /* แก้ไข: ใช้ตัวแปร */
    transition: 0.2s;
}

.bank-item:hover {
    border-color: var(--sc-text-sub);
}

.bank-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bank-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    background: var(--sc-bg);
    border: 1px solid var(--sc-border);
}

.bank-name {
    font-size: 0.9rem;
    color: var(--sc-text-main);
    font-weight: 500;
}

.bank-acc {
    font-size: 0.8rem;
    color: var(--sc-text-sub);
    font-family: monospace;
}

.btn-copy {
    background: var(--sc-hover);
    border: 1px solid var(--sc-border);
    /* เพิ่มขอบหน่อยเพื่อให้ชัดขึ้นใน Light mode */
    color: var(--sc-text-sub);
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-copy:hover {
    color: var(--sc-text-main);
    background: var(--sc-border);
}

/* File Upload */
.upload-wrapper {
    position: relative;
    height: 100px;
    margin-bottom: 20px;
}

.upload-wrapper input[type="file"] {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.upload-box {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px dashed var(--sc-border);
    border-radius: var(--sc-radius);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: 0.2s;
    background: var(--sc-layer);
    /* แก้ไข: ใช้ตัวแปร */
}

.upload-wrapper:hover .upload-box {
    background: var(--sc-hover);
    border-color: var(--sc-text-sub);
}

.upload-box.has-file {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.1);
}

.upload-text {
    font-size: 0.9rem;
    color: var(--sc-text-main);
    margin-top: 8px;
}

.upload-hint {
    font-size: 0.75rem;
    color: var(--sc-text-sub);
}

/* Envelope & Input */
.envelope-area {
    text-align: center;
    padding: 20px 0;
}

.envelope-icon {
    font-size: 3rem;
    margin-bottom: 15px;
    opacity: 0.8;
    color: var(--sc-text-main);
    /* เพิ่มสี */
}

.input-group {
    position: relative;
    margin-bottom: 10px;
}

.input-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--sc-text-sub);
}

.shadcn-input {
    width: 100%;
    padding: 12px 12px 12px 40px;
    background: var(--sc-bg);
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius);
    color: var(--sc-text-main);
    outline: none;
    transition: 0.2s;
    font-family: inherit;
}

.shadcn-input:focus {
    border-color: var(--sc-primary);
    box-shadow: 0 0 0 1px var(--sc-primary);
}

.input-hint {
    font-size: 0.8rem;
    color: var(--sc-text-sub);
}

/* Submit Button */
.btn-submit {
    width: 100%;
    padding: 12px;
    background: var(--sc-text-main);
    /* สลับสี: ดำ(ในLight) ขาว(ในDark) */
    color: var(--sc-bg);
    /* สลับสี: ขาว(ในLight) ดำ(ในDark) */
    border: none;
    border-radius: var(--sc-radius);
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: 0.2s;
}

.btn-submit:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* ============ PRICE DISPLAY (ส่วนที่แก้ไข) ============ */

.price-current {
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

body[data-theme="light"] .price-current {
    color: #000000;
}

/* ราคาแบบมีส่วนลด - แสดงในบรรทัดเดียวกัน */
.price-with-discount {
    display: flex;
    align-items: baseline;
    gap: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ราคาเดิม - ขีดฆ่า */
.price-old-strikethrough {
    font-size: 14px;
    font-weight: 400;
    color: #888;
    text-decoration: line-through;
    opacity: 0.7;
    flex-shrink: 0;
}

body[data-theme="light"] .price-old-strikethrough {
    color: #999;
}

/* ราคาที่ลดแล้ว - เด่นชัด */
.price-discounted {
    font-size: 14px;
    font-weight: 700;
    color: #ef4444;
    /* สีแดงสด */
    overflow: hidden;
    text-overflow: ellipsis;
}

body[data-theme="light"] .price-discounted {
    color: #dc2626;
    /* สีแดงเข้มขึ้นนิดสำหรับ light mode */
}

/* ราคาปกติ (ไม่มีส่วนลด) */
.price-normal {
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
}

body[data-theme="light"] .price-normal {
    color: #000000;
}

/* Price and Badge Row */
.price-badge-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

/* Status Badge */
.status-badge-product {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 500;
    font-size: 11px;
}

.status-badge-product.in {
    background-color: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.status-badge-product.out {
    background-color: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

/* =========================================
   REVEAL / ENTRANCE ANIMATION SYSTEM
   ========================================= */

@keyframes revealUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes revealFade {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* อนิเมชั่นขาเข้า — วิ่งเองจาก CSS ล้วน ไม่พึ่ง JS
 *
 * ของเดิมตั้ง .reveal { opacity: 0 } ไว้ แล้วรอ script.js มาเติมคลาส .active ให้
 * ซึ่ง script.js อยู่ท้าย <body> แปลว่าต้องรอ parse HTML ทั้งหน้าจบก่อนถึงจะโหลด
 * ผลคือ "เข้าเว็บมาแล้วเจอจอเปล่า" จนกว่า JS จะรันเสร็จ (หน้า shop มี .reveal 28 จุด)
 *
 * animation-fill-mode: both ทำหน้าที่แทน .active ได้ทั้งหมด — ตัว element จะยึด
 * ค่าที่ 0% ของ keyframes (opacity 0) ตั้งแต่ก่อนเริ่ม แล้ววิ่งไป 100% เอง
 * อนิเมชั่นเริ่มทันทีที่ CSS พร้อม ซึ่งเกิดก่อนหน้าถูกวาดครั้งแรกอยู่แล้ว
 *
 * ไม่ใส่ will-change เพราะเบราว์เซอร์ promote layer ให้เองตอน animation วิ่งอยู่แล้ว
 * ถ้าประกาศค้างไว้ = จอง layer ของ 28 element ทิ้งไว้ตลอดอายุหน้า */
.reveal {
    animation: revealUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: var(--reveal-delay, 0ms);
}

/* Fade-only variant */
.reveal-fade {
    animation: revealFade 0.6s ease both;
    animation-delay: var(--reveal-delay, 0ms);
}

/* หน่วงไล่ทีละใบในกริด — เดิม JS เป็นคนไล่ใส่ให้ทุกใบ (i * 80ms)
 * ซึ่งกริดสินค้า 40 ใบ = ใบสุดท้ายรอ 3.2 วินาทีกว่าจะโผล่
 * ตรงนี้เลยหยุดไล่ที่ใบที่ 8 ใบถัดจากนั้นขึ้นพร้อมกัน (ยังไงก็อยู่นอกจอ) */
:is(.product-grid, .category-grid, .stats-grid, .nav-buttons-grid)>.reveal:nth-child(2) { --reveal-delay: 80ms; }
:is(.product-grid, .category-grid, .stats-grid, .nav-buttons-grid)>.reveal:nth-child(3) { --reveal-delay: 160ms; }
:is(.product-grid, .category-grid, .stats-grid, .nav-buttons-grid)>.reveal:nth-child(4) { --reveal-delay: 240ms; }
:is(.product-grid, .category-grid, .stats-grid, .nav-buttons-grid)>.reveal:nth-child(5) { --reveal-delay: 320ms; }
:is(.product-grid, .category-grid, .stats-grid, .nav-buttons-grid)>.reveal:nth-child(6) { --reveal-delay: 400ms; }
:is(.product-grid, .category-grid, .stats-grid, .nav-buttons-grid)>.reveal:nth-child(7) { --reveal-delay: 480ms; }
:is(.product-grid, .category-grid, .stats-grid, .nav-buttons-grid)>.reveal:nth-child(8) { --reveal-delay: 560ms; }

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {

    .reveal,
    .reveal-fade {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
}

/* Custom link for Robinz */
.robinz-link {
    font-weight: 500;
    font-size: 1em;
    margin: 0 4px;
    color: #c4c4c4;
    /* Subtle slate-blue/grey for dark mode */
    transition: color 0.3s ease;
}

body[data-theme="light"] .robinz-link {
    color: #475569;
    /* Subtle slate-dark for light mode */
}

.robinz-link:hover {
    color: #ffffff;
}

body[data-theme="light"] .robinz-link:hover {
    color: #000000;
}

/* ========== MOBILE SIDEBAR ========== */
.mobile-menu-btn {
    display: none;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: inherit;
    font-size: 20px;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.mobile-menu-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

@media (max-width: 1180px) {
    .mobile-menu-btn {
        display: flex !important;
    }
}

.mobile-sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    backdrop-filter: blur(2px);
}

.mobile-sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
}

.mobile-sidebar {
    position: fixed;
    top: 0;
    left: -280px;
    width: 250px;
    height: 100%;
    background-color: rgba(10, 10, 10, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    z-index: 10001;
    transition: left 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    box-shadow: 10px 0 30px rgba(0, 0, 0, 0.5);
    overflow-y: auto;
}

.mobile-sidebar.active {
    left: 0;
}

.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.sidebar-brand h2 {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0;
    background: linear-gradient(to right, #ffffff, #888888);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.close-sidebar-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    flex-shrink: 0;
    margin-left: 12px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.close-sidebar-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: rotate(90deg);
}

.sidebar-content {
    padding: 20px 0;
    display: flex;
    flex-direction: column;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    border-left: 3px solid transparent;
}

.sidebar-link i {
    font-size: 18px;
    width: 20px;
    text-align: center;
    opacity: 0.8;
    transition: all 0.3s ease;
}

.sidebar-link:hover {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0%, transparent 100%);
    color: #fff;
    border-left: 3px solid #fff;
    padding-left: 28px;
}

.sidebar-link:hover i {
    opacity: 1;
    transform: scale(1.1);
}

.sidebar-divider {
    display: flex;
    align-items: center;
    margin: 20px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 1px;
}

.sidebar-divider::before,
.sidebar-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}

.sidebar-divider span {
    padding: 0 12px;
}

.sidebar-auth-links {
    display: flex;
    flex-direction: column;
    padding: 0 20px;
    gap: 10px;
}

.sidebar-auth-links .sidebar-link {
    padding: 12px;
    justify-content: center;
    border-radius: 12px;
    border: none;
}

.sidebar-auth-links .sidebar-link:hover {
    padding-left: 12px;
    border-left: none;
}

.sidebar-auth-links .auth-link:first-child {
    background: #ffffff;
    color: #000000;
    font-weight: 600;
}

.sidebar-auth-links .auth-link:first-child:hover {
    background: #e0e0e0;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
}

.sidebar-auth-links .auth-link:first-child i {
    opacity: 1;
}

.sidebar-auth-links .auth-link:last-child {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.sidebar-auth-links .auth-link:last-child:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.sidebar-link.text-danger {
    color: #ef4444;
}

.sidebar-link.text-danger:hover {
    background: linear-gradient(90deg, rgba(239, 68, 68, 0.1) 0%, transparent 100%);
    color: #f87171;
    border-left: 3px solid #ef4444;
}

/* Light Mode Overrides for Mobile Sidebar */
body[data-theme="light"] .mobile-sidebar {
    background-color: rgba(255, 255, 255, 0.85);
    border-right: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 10px 0 30px rgba(0, 0, 0, 0.05);
}

body[data-theme="light"] .mobile-menu-btn {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.08);
}

body[data-theme="light"] .mobile-menu-btn:hover {
    background: rgba(0, 0, 0, 0.08);
}

body[data-theme="light"] .sidebar-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

body[data-theme="light"] .sidebar-brand h2 {
    background: linear-gradient(to right, #000000, #666666);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

body[data-theme="light"] .close-sidebar-btn {
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: #333;
}

body[data-theme="light"] .close-sidebar-btn:hover {
    background: rgba(0, 0, 0, 0.08);
}

body[data-theme="light"] .sidebar-link {
    color: rgba(0, 0, 0, 0.7);
}

body[data-theme="light"] .sidebar-link:hover {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.03) 0%, transparent 100%);
    color: #000;
    border-left: 3px solid #000;
}

body[data-theme="light"] .sidebar-divider {
    color: rgba(0, 0, 0, 0.4);
}

body[data-theme="light"] .sidebar-divider::before,
body[data-theme="light"] .sidebar-divider::after {
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1), transparent);
}

body[data-theme="light"] .sidebar-auth-links .auth-link:first-child {
    background: #000000;
    color: #ffffff;
}

body[data-theme="light"] .sidebar-auth-links .auth-link:first-child:hover {
    background: #333333;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

body[data-theme="light"] .sidebar-auth-links .auth-link:last-child {
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.15);
    color: #000000;
}

body[data-theme="light"] .sidebar-auth-links .auth-link:last-child:hover {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.3);
}


/* =========================================================================
   HERO — LANDING (VELVET SWEEP)
   ใช้เฉพาะหน้า / (pages/simple.php) เท่านั้น

   ทุกสีในบล็อกนี้อ่านจากโทเคน 4 ตัวที่ประกาศบน .hero-landing:
     --hero-bg    สีพื้น
     --hero-fx    สีลาย/ตัวหนังสือ (เป็น "r, g, b" ดิบ เพื่อเอาไปใส่ rgba() ได้)
     --hero-scrim สีม่านใต้ข้อความ
     --hero-btn-* สีปุ่ม
   สลับธีมทีเดียวที่บล็อก [data-theme="light"] ข้างล่าง แล้วทั้งหน้าเปลี่ยนตาม
   ไม่มีสีฮาร์ดโค้ดกระจายอยู่ตามกฎย่อย

   สโคปไว้ใต้ .hero-landing ทั้งหมด กฎ .hero / .status-badge / .btn-* เดิม
   จึงไม่ถูกแตะ และหน้า shop / products ยังหน้าตาเหมือนเดิม
   ========================================================================= */

/* แสงขาวกลางจอของทั้งเว็บ (body::before) จะตีกับพื้นหลัง WebGL — ปิดเฉพาะหน้านี้
   ส่วน body::after (ลายจุด) ปล่อยไว้ เพราะ .hero-landing ทาสีทึบทับอยู่แล้ว
   ลายจุดจึงหายแค่ในกรอบ hero และยังเห็นตามปกติในส่วนที่เหลือของหน้า */
body.page-landing::before {
    display: none;
}

.hero-landing {
    /* ---- ธีมมืด (ค่าเริ่มต้น) ---- */
    --hero-bg: #000000;
    --hero-fx: 255, 255, 255;
    --hero-scrim: 0, 0, 0;

    --hero-btn-bg: #ffffff;
    --hero-btn-ink: #000000;
    --hero-btn-bg-hover: #e2e2e2;

    position: relative;
    /* สร้าง stacking context เอง เพื่อกัก z-index ติดลบของพื้นหลังไว้ในกรอบ hero */
    isolation: isolate;
    overflow: hidden;
    /* พื้นทึบย้ายไปที่ ::before ซึ่งถูก mask ให้จางลงล่าง — ดูคอมเมนต์ตรงนั้น */
    background: transparent;

    /* ดึงขึ้นไปใต้ navbar (fixed, สูง 60px) ให้พื้นหลังลอดหลังแถบเมนู
       แล้วชดเชยด้วย padding-top — ตำแหน่งเนื้อหาจึงไม่ขยับ */
    margin-top: -60px;
    padding-top: calc(60px + clamp(32px, 6vh, 72px));
    padding-bottom: clamp(32px, 6vh, 72px);
    /* เต็มจอพอดี — หน้านี้เป็น splash เดี่ยว ไม่มีเนื้อหาต่อท้ายให้เลื่อนดู
       (ลบ marquee ออกแล้ว) จึงควรจบในหนึ่งหน้าจอ ไม่ให้เหลือหางว่างๆ

       svh กันปัญหาคลาสสิกของมือถือ: 100vh นับรวมแถบที่อยู่ที่ยุบได้ด้วย
       ทำให้เนื้อหาล้นจอตอนแถบยังไม่ยุบ เบราว์เซอร์ที่ไม่รู้จัก svh จะใช้ vh แทน */
    min-height: 100vh;
    min-height: 100svh;

    transition: background-color .3s ease;
}

/* พื้นทึบของ hero — จางหายลงล่างด้วย mask ชุดเดียวกับ .hero-silk
   ต้องแยกมาไว้ชั้นนี้ เพราะถ้าใส่ไว้บน .hero-landing เองจะ mask ไม่ได้
   (จะไปบังคับให้ตัวหนังสือกับปุ่มจางตามไปด้วย) */
.hero-landing::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -3;
    pointer-events: none;
    background: var(--hero-bg);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
}

/* ม่านใต้ข้อความ + ขอบฟุ้ง
   ชั้นแรกคือม่านกลางจอ ให้ตัวหนังสืออ่านออกเวลาริบบิ้นพาดผ่านพอดี
   สองชั้นหลังไล่สีกลับไปหาสีพื้น ไม่ให้พื้นหลังโดน overflow ตัดเป็นเส้นคม */
.hero-landing::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(66% 60% at 50% 46%, rgba(var(--hero-scrim), .46) 0%, rgba(var(--hero-scrim), 0) 78%),
        radial-gradient(125% 85% at 50% 32%, transparent 38%, var(--hero-bg) 100%),
        linear-gradient(to bottom, transparent 58%, var(--hero-bg) 100%);
    /* ชั้นนี้ก็เติมสีพื้นทึบที่ขอบล่างเหมือนกัน ถ้าไม่ mask ตามจะได้เส้นตัดกลับมา */
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
}

/* ---------- ผืนผ้าใบ WebGL (silk waves) ---------- */
.hero-silk {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
    opacity: 0;
    transition: opacity .6s ease;
    /* ละลายขอบล่าง ไม่ให้พื้นหลังโดน overflow:hidden ตัดเป็นเส้นคม
       ส่วนที่เหลือด้านล่างจะเป็นพื้นเพจปกติ ไว้ให้ marquee ยืน */
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
}

/* JS ติดคลาสนี้ให้หลังคอมไพล์ shader ผ่าน — เฟดเข้าแทนที่จะกระตุกโผล่ */
.hero-silk.is-ready {
    opacity: 1;
}

/* มี WebGL แล้วก็ไม่ต้องใช้ fallback CSS ซ้อนอีก
   ใช้คลาสบน section แทน :has()/~ เพราะ .hero-aurora อยู่ "ก่อน" canvas ในดอม
   ตัวเลือกแบบพี่น้องจึงมองไม่เห็นมัน */
.hero-landing.silk-on .hero-aurora {
    opacity: 0;
}

/* ---------- fallback CSS ล้วน (ไม่มี WebGL / reduced-motion) ---------- */
/* เลียนริบบิ้นโค้งด้วยวงรีเอียงสองชั้น ไม่มีริ้วไหม แต่ได้บรรยากาศใกล้กัน */
.hero-aurora {
    position: absolute;
    inset: -25% -15%;
    z-index: -1;
    pointer-events: none;
    filter: blur(70px);
    transition: opacity .6s ease;
    background:
        radial-gradient(60% 45% at 22% 30%, rgba(var(--hero-fx), .14) 0%, rgba(var(--hero-fx), 0) 70%),
        radial-gradient(55% 40% at 82% 66%, rgba(var(--hero-fx), .11) 0%, rgba(var(--hero-fx), 0) 70%);
    animation: hero-aurora-drift 26s ease-in-out infinite alternate;
}

.hero-aurora::before,
.hero-aurora::after {
    content: '';
    position: absolute;
    inset: 0;
}

.hero-aurora::before {
    background: radial-gradient(ellipse 60% 50% at 50% 50%,
            rgba(var(--hero-fx), .30) 0%,
            rgba(var(--hero-fx), .17) 38%,
            rgba(var(--hero-fx), .07) 62%,
            transparent 78%);
    transform: rotate(-18deg) translate3d(-8%, -4%, 0) scale(1.40, .26);
    animation: hero-ribbon-a 28s ease-in-out infinite alternate;
}

.hero-aurora::after {
    background: radial-gradient(ellipse 60% 50% at 50% 50%,
            rgba(var(--hero-fx), .20) 0%,
            rgba(var(--hero-fx), .10) 45%,
            transparent 72%);
    transform: rotate(-12deg) translate3d(8%, 8%, 0) scale(1.20, .14);
    animation: hero-ribbon-b 21s ease-in-out infinite alternate;
}

/* keyframes ต้องเขียน transform เต็มชุด เพราะค่าที่ animate จะทับ transform เดิมทั้งก้อน */
@keyframes hero-aurora-drift {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-3%, 2%, 0);
    }
}

@keyframes hero-ribbon-a {
    from {
        transform: rotate(-18deg) translate3d(-8%, -4%, 0) scale(1.40, .26);
    }

    to {
        transform: rotate(-11deg) translate3d(2%, 2%, 0) scale(1.52, .32);
    }
}

@keyframes hero-ribbon-b {
    from {
        transform: rotate(-12deg) translate3d(8%, 8%, 0) scale(1.20, .14);
    }

    to {
        transform: rotate(-19deg) translate3d(-2%, 3%, 0) scale(1.34, .19);
    }
}

/* ---------- เนื้อหา ---------- */
.hero-landing .hero-content {
    max-width: 880px;
}

.hero-landing .status-badge {
    /* .status-badge เดิมไม่ได้ประกาศ padding/margin ไว้เลย ป้ายจึงรัดตัวหนังสือ */
    padding: 7px 16px 7px 13px;
    margin-bottom: clamp(20px, 3vh, 30px);
    border-radius: var(--ds-radius-pill, 9999px);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    background: rgba(var(--hero-fx), .07);
    border: 1px solid rgba(var(--hero-fx), .20);
    color: rgba(var(--hero-fx), .82);
    backdrop-filter: blur(8px);
}

.hero-landing .status-dot {
    background: rgba(var(--hero-fx), .85);
}

body[data-theme] .hero-landing .hero-title {
    font-size: clamp(2.5rem, 11vw, 6.5rem);
    /* 1.15 ไม่ใช่ 1.05 — ชื่อร้านภาษาไทยมีสระบน/วรรณยุกต์
       ถ้าบีบกว่านี้ background-clip จะตัดหัวตัวอักษร */
    line-height: 1.15;
    letter-spacing: -0.02em;
    /* ไม่มีผลกับภาษาไทย แต่ทำให้ชื่อร้านภาษาอังกฤษได้ลุคตามแบบ */
    text-transform: uppercase;
    margin-bottom: clamp(14px, 2.2vh, 22px);
    background: linear-gradient(180deg,
            rgba(var(--hero-fx), 1) 0%,
            rgba(var(--hero-fx), 1) 45%,
            rgba(var(--hero-fx), .62) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* เติม body[data-theme] เพื่อชนะกฎเดิม body[data-theme="light"] .hero-description
   ที่ specificity สูงกว่า .hero-landing .hero-description — ไม่งั้นโหมดสว่าง
   จะหลุดไปใช้สีฮาร์ดโค้ดของกฎเก่าแทนโทเคน */
body[data-theme] .hero-landing .hero-description {
    color: rgba(var(--hero-fx), .64);
    margin-bottom: clamp(24px, 3.5vh, 36px);
    max-width: 560px;
    /* ตัดเหลือ 2 บรรทัดใน hero — ข้อความเต็มยังอยู่ในดอมและใน meta description
       ครบถ้วน จึงไม่กระทบ SEO แค่ไม่ให้ย่อหน้ายาวมากลืนพื้นที่ hero */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---------- ช่องค้นหา (เปิด modal เดิมของ navbar) ---------- */
.hero-search {
    display: flex;
    align-items: center;
    gap: 12px;
    width: min(520px, 100%);
    margin: 0 auto clamp(24px, 3.8vh, 36px);
    padding: 8px 8px 8px 18px;
    border-radius: var(--ds-radius-pill, 9999px);
    background: rgba(var(--hero-fx), .05);
    border: 1px solid rgba(var(--hero-fx), .14);
    backdrop-filter: blur(12px);
    color: rgba(var(--hero-fx), .62);
    font-family: "Kanit", sans-serif;
    font-size: clamp(13px, 1.2vw, 15px);
    text-align: left;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.hero-search:hover {
    background: rgba(var(--hero-fx), .09);
    border-color: rgba(var(--hero-fx), .34);
    transform: translateY(-1px);
}

.hero-search i {
    font-size: 1.15em;
    color: rgba(var(--hero-fx), .52);
}

.hero-search-placeholder {
    flex: 1;
}

/* ชิป "ค้นหา" ใช้สีปุ่มชุดเดียวกับ CTA — ขาวบนมืด / ดำบนสว่าง */
.hero-search-go {
    padding: 8px 18px;
    border-radius: var(--ds-radius-pill, 9999px);
    background: var(--hero-btn-bg);
    color: var(--hero-btn-ink);
    font-weight: 600;
    white-space: nowrap;
    transition: background .2s ease;
}

.hero-search:hover .hero-search-go {
    background: var(--hero-btn-bg-hover);
}

/* ---------- ปุ่ม (ขาว-ดำ สลับตามธีม) ---------- */
.hero-landing .hero-buttons .btn-primary,
.hero-landing .hero-buttons .btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    border-radius: var(--ds-radius-pill, 9999px);
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}

/* CTA หลัก — ทึบ ตัดกับพื้นเต็มที่ */
body[data-theme] .hero-landing .hero-cta {
    background: var(--hero-btn-bg);
    color: var(--hero-btn-ink);
    font-weight: 600;
    box-shadow: 0 10px 30px rgba(var(--hero-scrim), .35);
}

body[data-theme] .hero-landing .hero-cta:hover {
    background: var(--hero-btn-bg-hover);
    box-shadow: 0 14px 38px rgba(var(--hero-scrim), .45);
    transform: translateY(-2px);
}

.hero-cta-arrow {
    transition: transform .2s ease;
}

.hero-landing .hero-cta:hover .hero-cta-arrow {
    transform: translateX(4px);
}

/* ปุ่มรอง — โปร่ง มีแต่เส้นขอบ
   .hero-buttons .btn-secondary เดิมใส่ !important ไว้ จึงต้องทับด้วย !important เช่นกัน */
body[data-theme] .hero-landing .hero-buttons .btn-secondary {
    background: rgba(var(--hero-fx), .05) !important;
    border: 1px solid rgba(var(--hero-fx), .22);
    color: rgba(var(--hero-fx), .92);
    backdrop-filter: blur(10px);
}

body[data-theme] .hero-landing .hero-buttons .btn-secondary:hover {
    background: rgba(var(--hero-fx), .11) !important;
    border-color: rgba(var(--hero-fx), .42);
    transform: translateY(-2px);
}

/* ---------- โหมดสว่าง ---------- */
/* สลับแค่โทเคน กฎข้างบนไม่ต้องเขียนซ้ำ */
body[data-theme="light"] .hero-landing {
    --hero-bg: #ffffff;
    --hero-fx: 10, 10, 10;
    --hero-scrim: 255, 255, 255;

    --hero-btn-bg: #0a0a0a;
    --hero-btn-ink: #ffffff;
    --hero-btn-bg-hover: #2b2b2b;
}

/* เงาปุ่มบนพื้นขาวต้องเป็นเงาดำ ไม่ใช่เงาขาว (scrim ฝั่งสว่างเป็นสีขาว) */
body[data-theme="light"] .hero-landing .hero-cta {
    box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}

body[data-theme="light"] .hero-landing .hero-cta:hover {
    box-shadow: 0 14px 38px rgba(0, 0, 0, .26);
}

body[data-theme="light"] .hero-search {
    background: #ffffff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
}

body[data-theme="light"] .hero-landing .hero-buttons .btn-secondary {
    background: rgba(255, 255, 255, .8) !important;
    color: rgba(var(--hero-fx), .92);
}

body[data-theme="light"] .hero-landing .hero-buttons .btn-secondary:hover {
    background: #ffffff !important;
}

body[data-theme="light"] .hero-aurora {
    opacity: .45;
    filter: blur(90px);
}

/* ---------- Responsive ---------- */
@media (max-width: 899px) {
    .hero-landing {
        /* เดิมเป็น auto ตอนที่ยังมี marquee ต่อท้าย — ตอนนี้หน้านี้มีแค่ hero
           จึงต้องเต็มจอเหมือนเดสก์ท็อป ไม่งั้นจะเหลือพื้นที่ว่างใต้ปุ่ม */
        min-height: 100vh;
        min-height: 100svh;
        padding-top: calc(60px + clamp(28px, 5vh, 56px));
        padding-bottom: clamp(28px, 5vh, 56px);
    }

    .hero-aurora {
        filter: blur(45px);
    }
}

@media (max-width: 767px) {
    .hero-search {
        width: 100%;
        padding-left: 15px;
    }

    .hero-search-go {
        display: none;
    }

    /* เดิมปุ่มยืดเต็มความกว้างซ้อนกันสองแถว ดูหนักและกินพื้นที่
       เปลี่ยนเป็นเรียงแนวนอนพอดีเนื้อหา ให้ CTA เด่นขึ้นแบบ model2 */
    .hero-landing .hero-buttons {
        flex-direction: row;
        justify-content: center;
    }

    .hero-landing .hero-buttons .btn-primary,
    .hero-landing .hero-buttons .btn-secondary {
        width: auto;
        flex: 0 1 auto;
        justify-content: center;
    }
}

@media (max-width: 479px) {
    .hero-landing .hero-title {
        font-size: clamp(2rem, 11vw, 2.6rem);
    }

    /* ประหยัดแบตบนมือถือ */
    .hero-aurora,
    .hero-aurora::before,
    .hero-aurora::after {
        animation: none;
    }
}


/* =========================================================================
   BANNER GLARE — ลำแสงกวาดผ่านแบนเนอร์
   ทำแบบเดียวกับ GlareHover ของ Magic UI แต่วนเองอัตโนมัติ ไม่ต้องเอาเมาส์ไปวาง
   (ต้นฉบับเป็น React component ซึ่งโปรเจกต์นี้ใช้ไม่ได้ — อันนี้เป็น CSS ล้วน)

   วางบน .banner-container เพราะมันมี overflow:hidden + border-radius + position:relative
   อยู่แล้ว ลำแสงจึงถูกตัดตามมุมโค้งพอดีโดยไม่ต้องเพิ่ม element ใหม่
   ========================================================================= */

.banner-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 45%;
    height: 100%;
    z-index: 2;
    /* ห้ามบังการกด/ปัดนิ้ว — bannerContainer มี touch handler สำหรับสไลด์อยู่ */
    pointer-events: none;
    background: linear-gradient(100deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, .10) 35%,
            rgba(255, 255, 255, .30) 50%,
            rgba(255, 255, 255, .10) 65%,
            rgba(255, 255, 255, 0) 100%);
    /* เอียงเล็กน้อยให้ลำแสงดูเป็นแนวทแยงแบบแสงสะท้อนจริง */
    transform: translateX(-140%) skewX(-18deg);
    animation: banner-glare 5.5s linear infinite;
}

/* กวาดรวดเดียวตั้งแต่ 0% แล้วค้างนอกจอจนครบรอบ = จังหวะพักก่อนกวาดรอบใหม่
   จุดเริ่ม -140% กับจุดจบ 300% อยู่นอกกรอบทั้งคู่ ตอน keyframe วนกลับจึงไม่เห็นการกระโดด

   ห้ามใช้ ease-in-out กับอนิเมชั่นนี้: ช่วงออกตัวที่ค่อยๆ เร่งไปตรงกับจังหวะที่
   ลำแสงเพิ่งโผล่พ้นขอบพอดี เลยดูเหมือนมันค้างแป๊บนึงก่อนค่อยพุ่ง
   ใช้ linear ความเร็วคงที่ตลอดการกวาดแทน */
@keyframes banner-glare {
    0% {
        transform: translateX(-140%) skewX(-18deg);
    }

    20%,
    100% {
        transform: translateX(300%) skewX(-18deg);
    }
}

/* โหมดสว่าง: แบนเนอร์มักเป็นภาพสีอ่อนกว่า ลดความแรงลงหน่อยไม่ให้ฟุ้งเกิน */
body[data-theme="light"] .banner-container::after {
    background: linear-gradient(100deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, .08) 35%,
            rgba(255, 255, 255, .22) 50%,
            rgba(255, 255, 255, .08) 65%,
            rgba(255, 255, 255, 0) 100%);
}

/* design-system.css บีบ animation-duration ทั้งเว็บเหลือ .01ms ตอน reduced-motion
   ซึ่งจะทำให้ลำแสงกระพริบแล้วค้าง — ปิดไปเลยดีกว่า */
@media (prefers-reduced-motion: reduce) {
    .banner-container::after {
        animation: none;
        opacity: 0;
    }
}


/* =========================================================================
   BEST SELLER GLARE — ลำแสงกวาดผ่านการ์ดสินค้าขายดี
   ใช้ @keyframes banner-glare ตัวเดียวกับแบนเนอร์ จังหวะจึงเหมือนกันเป๊ะ

   เกาะบน .product-card[data-bestseller="1"] ซึ่ง products.php / categories-view.php
   ใส่ให้อยู่แล้ว การ์ดมี position:relative + overflow:hidden + radius 16px อยู่แล้ว
   ลำแสงจึงถูกตัดตามมุมโค้งเองโดยไม่ต้องเพิ่ม element ใหม่

   หมายเหตุ: การ์ดใน 3D marquee หน้าแรกไม่มี data-bestseller จึงไม่โดนกฎนี้
   ========================================================================= */

.product-card[data-bestseller="1"]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 45%;
    height: 100%;
    /* ต่ำกว่า .ribbon-bestseller (z-index:5) เพื่อให้ป้ายมุมยังคมชัด ไม่โดนแสงกลบ */
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(100deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, .10) 35%,
            rgba(255, 255, 255, .30) 50%,
            rgba(255, 255, 255, .10) 65%,
            rgba(255, 255, 255, 0) 100%);
    transform: translateX(-140%) skewX(-18deg);
    animation: banner-glare 5.5s linear infinite;
}

/* เนื้อหาต้องอยู่เหนือลำแสง (z-index 3) ไม่งั้นตอนแสงกวาดผ่าน
   ตัวหนังสือจะโดนฟอกจนอ่านยากชั่วขณะ — เหลือให้แสงเล่นกับรูปสินค้าพอ */
.product-card[data-bestseller="1"] .product-content {
    position: relative;
    z-index: 4;
}

/* โหมดสว่าง: การ์ดพื้นขาว ลำแสงขาวจะกลืนหาย เลยเพิ่มความเข้มขึ้น
   ทำได้เพราะเนื้อหาถูกยกไป z-index 4 แล้ว แสงจึงเล่นแค่กับรูปสินค้า ไม่แตะตัวหนังสือ */
body[data-theme="light"] .product-card[data-bestseller="1"]::after {
    background: linear-gradient(100deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, .18) 35%,
            rgba(255, 255, 255, .48) 50%,
            rgba(255, 255, 255, .18) 65%,
            rgba(255, 255, 255, 0) 100%);
}

/* design-system.css บีบ animation-duration ทั้งเว็บเหลือ .01ms ตอน reduced-motion
   ซึ่งจะทำให้ลำแสงกระพริบแล้วค้าง — ปิดไปเลยดีกว่า */
@media (prefers-reduced-motion: reduce) {
    .product-card[data-bestseller="1"]::after {
        animation: none;
        opacity: 0;
    }
}


/* =========================================================================
   STAT COUNT-UP — รองรับอนิเมชั่นนับเลขใน script.js
   ========================================================================= */

.stats-grid .stat-value {
    /* ความกว้างตัวเลขคงที่ ไม่งั้นตอนนับขึ้นหลักจะเปลี่ยน แล้วการ์ด reflow ทุกเฟรม */
    font-variant-numeric: tabular-nums;
}

/* span นี้ JS สร้างครอบเฉพาะตัวเลขตอน init เพื่อให้ blur ไม่โดนหน่วย (คน/รายการ/ชิ้น) */
.stats-grid .stat-num {
    display: inline-block;
}


/* =========================================================================
   SECTION HEADER — ไอคอน + เส้นคั่น
   ใช้กับ .categories-header ทุกอันใน shop.php และ product.php

   สไตล์อิงจาก shadcn UI docs: กล่องไอคอนพื้นทึบ + ขอบบาง + มุมมน 8px
   ตัวไอคอนขาว/ดำตามธีม ไม่ใช้สีเน้น เส้นคั่นเป็นเส้นแบนสีเดียวแบบ Separator

   สีดึงจากตัวแปรของเว็บล้วน (--bg-item / --border-item / --text-main / --border-color)
   ซึ่งประกาศไว้แล้วใน styles.css จึงสลับธีมตามเองโดยไม่ต้องเขียนกฎ light แยก
   ========================================================================= */

.sec-title {
    display: flex;
    align-items: center;
    gap: clamp(10px, 1.2vw, 14px);
    /* กันไม่ให้ชื่อยาวๆ ไปเบียดเส้นจนหาย */
    flex-shrink: 0;
}

.sec-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: var(--ds-radius-md, 8px);
    font-size: 16px;
    line-height: 1;
    /* ขาว/ดำตามธีม ไม่ใช้สีเน้น */
    color: var(--text-main, #ffffff);
    /* พื้นทึบ ไม่โปร่งแสง — เทียบเท่า bg-muted ของ shadcn */
    background: var(--bg-item, #141414);
    border: 1px solid var(--border-item, #2a2a2a);
    transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}

/* เส้นคั่นกินพื้นที่ว่างระหว่างหัวข้อกับปุ่ม "ดูเพิ่มเติม"
   ไล่จากสีขอบที่เข้มกว่า (--border-item) ไปหาสีขอบปกติ แล้วจางหายทางขวา
   โทนขาวดำล้วน ไม่มีสีเน้น — ทั้งสองธีมไล่ไปทางเดียวกัน
   (มืด #2a2a2a → #1f1f1f, สว่าง #d0d0d0 → #e0e0e0 คือเข้มไปอ่อนเหมือนกัน) */
.sec-rule {
    flex: 1 1 auto;
    min-width: 20px;
    height: 1px;
    align-self: center;
    background: linear-gradient(to right,
            var(--border-item, #2a2a2a) 0%,
            var(--border-color, #1f1f1f) 55%,
            transparent 100%);
}

/* .categories-header เดิมเป็น flex-wrap: wrap — พอจอแคบแล้วห่อบรรทัด
   เส้นจะไปลอยเดี่ยวๆ ดูเป็นขีดแปลกๆ ซ่อนไปเลยดีกว่า */
@media (max-width: 600px) {
    .sec-rule {
        display: none;
    }
}

/* =========================================================================
   SEARCH MODAL — ช่องพิมพ์: ย้ายสัญญาณโฟกัสออกจากตัว input

   .search-header input ตั้ง border:none ไว้ (ตั้งใจ) ช่องนี้จึงไม่มีกรอบของตัวเอง
   พอชั้น accessibility ใน design-system.css ยิง outline 2px ทับตอนโฟกัส
   วงขาวเลยลอยเป็น "กล่องซ้อนกล่อง" กลางหัวโมดัล ดูเป็นสิ่งแปลกปลอม
   ยิ่ง :focus-visible ทำงานกับช่องพิมพ์ตอนคลิกเมาส์ด้วย (ตามสเปก) จึงเด้งแทบทุกครั้ง

   ไม่มีสัญญาณโฟกัสแบบมองเห็นบนช่องนี้แล้วตามที่ผู้ใช้ขอ
   ที่ยังพอรับได้เพราะ:
   - ช่องพิมพ์มี caret กะพริบเป็นสัญญาณโฟกัสในตัวอยู่แล้ว
   - ปุ่มปิด (.close-search) ยังมีวงโฟกัสจาก design-system.css ตามปกติ
   - โมดัลเปิดมาพร้อมโฟกัสที่ช่องนี้เป็นค่าเริ่มต้นอยู่แล้ว
   ========================================================================= */

#searchInput:focus,
#searchInput:focus-visible {
    outline: none !important;
}


/* =========================================================================
   NEWS BENTO — โปรโมชั่นและข่าวสาร

   Bento grid คือ grid ที่การ์ดกินพื้นที่ไม่เท่ากัน ใบเด่นใหญ่ ใบรองเล็ก
   ต้นแบบมาจาก BentoGrid ของ MagicUI ซึ่งเป็น React + Tailwind
   เว็บนี้ไม่มีทั้งสองอย่าง จึงยกเฉพาะ "แนวคิด" มาเขียนเป็น CSS ล้วน:
   การ์ดกินหลายช่อง, ภาพซูมตอน hover, ปุ่มอ่านต่อโผล่ขึ้นมาจากด้านล่าง

   ขนาดการ์ดคำนวณจากฝั่ง PHP (News::bentoSizes) แล้วส่งมาเป็นคลาส .bento-*
   ที่นี่ทำหน้าที่แค่แปลงคลาสเป็นจำนวนช่องที่กิน

   สีทั้งหมดใช้ตัวแปรของเว็บล้วน (--bg-card / --bg-item / --border-color /
   --border-item / --text-main / --text-sub) ซึ่งประกาศบน body ไว้แล้ว
   จึงสลับ light/dark ตามธีมเองโดยไม่ต้องเขียนกฎ [data-theme="light"] ซ้ำ
   ถ้าเผลอใส่ค่าสีดิบตรงไหน ธีมสว่างจะพังเฉพาะจุดนั้นทันที
   ========================================================================= */

.news-section {
    margin-bottom: clamp(20px, 3vh, 30px);
}

.news-bento-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(150px, auto);

    /* dense ให้ grid ย้อนกลับไปอุดช่องว่างที่การ์ดใหญ่ทิ้งไว้
       จำเป็นในโหมด "กำหนดเอง" ที่แอดมินเลือกขนาดได้อิสระจนไม่ลงตัว
       (โหมดอัตโนมัติคำนวณให้ปูเต็มแถวอยู่แล้วตั้งแต่ฝั่ง PHP) */
    grid-auto-flow: dense;

    gap: clamp(14px, 1.6vw, 20px);
}

.bento-full {
    grid-column: span 4;
    grid-row: span 1;
}

.bento-lg {
    grid-column: span 2;
    grid-row: span 2;
}

.bento-wide {
    grid-column: span 2;
    grid-row: span 1;
}

.bento-tall {
    grid-column: span 1;
    grid-row: span 2;
}

.bento-sm {
    grid-column: span 1;
    grid-row: span 1;
}


/* ---- ตัวการ์ด ----
   เป็นได้ทั้ง <a>, <button> และ <div> แล้วแต่ประเภทลิงก์ที่แอดมินตั้ง
   จึงต้องรีเซ็ตค่าเริ่มต้นของ button/a ทิ้งให้หมด ไม่งั้นสามแบบจะหน้าตาไม่เหมือนกัน */
.bento-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    min-height: 150px;

    padding: 0;
    margin: 0;
    text-align: start;
    font-family: inherit;
    text-decoration: none;
    color: inherit;

    background-color: var(--bg-card, #0a0a0a);
    border: 1px solid var(--border-color, #1f1f1f);
    border-radius: var(--ds-radius-lg, 12px);

    cursor: pointer;
    transition:
        transform var(--ds-duration-fast, .14s) var(--ds-ease, cubic-bezier(.4, 0, .2, 1)),
        border-color .3s ease,
        background-color .3s ease;
}

.bento-card.is-static {
    cursor: default;
}

.bento-card:hover {
    transform: translateY(-2px);
    border-color: var(--border-item, #2a2a2a);
}

.bento-card.is-static:hover {
    transform: none;
    border-color: var(--border-color, #1f1f1f);
}


/* ---- รูปพื้นหลัง ----
   วางเป็นชั้นล่างสุดเต็มการ์ด ไม่ใช่ <img> ในสายข้อความ
   เพราะการ์ดแต่ละใบสัดส่วนไม่เท่ากัน (2x2, 2x1, 1x1) ถ้าให้รูปดันความสูง
   grid จะเสียรูปทันที object-fit: cover จึงเหมาะกว่า */
.bento-media {
    position: absolute;
    inset: 0;
    background-color: var(--bg-item, #141414);
}

.bento-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .45s var(--ds-ease, cubic-bezier(.4, 0, .2, 1));
}

.bento-card:not(.is-static):hover .bento-media img {
    transform: scale(1.04);
}

/* ไม่มีรูป หรือรูปโหลดไม่ขึ้น (onerror ถอด <img> ทิ้งแล้วติดคลาสนี้)
   ใส่ลายทแยงจางๆ ไว้ ดีกว่าปล่อยเป็นกล่องเปล่า */
.bento-media.is-empty,
.bento-media:empty {
    background-image: repeating-linear-gradient(45deg,
            transparent 0 10px,
            var(--border-color, #1f1f1f) 10px 11px);
}


/* ---- ฉากบังตัวหนังสือ ----
   ตัวหนังสือทับรูปโดยตรงจะอ่านไม่ออกถ้ารูปสว่าง
   ไล่เฉดดำจากล่างขึ้นบนคงที่ทั้งสองธีม เพราะตัวหนังสือบนการ์ดเป็นสีขาวเสมอ
   (นี่คือข้อยกเว้นเดียวที่ตั้งใจไม่ผูกกับตัวแปรธีม — มันคือเงาทับรูป ไม่ใช่พื้นหลัง UI) */
.bento-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
            rgba(0, 0, 0, .88) 0%,
            rgba(0, 0, 0, .55) 35%,
            rgba(0, 0, 0, .12) 65%,
            rgba(0, 0, 0, 0) 100%);
    transition: opacity var(--ds-duration-fast, .14s) var(--ds-ease, cubic-bezier(.4, 0, .2, 1));
}

.bento-card:not(.is-static):hover .bento-scrim {
    opacity: .95;
}


/* ---- เนื้อหาบนการ์ด ---- */
.bento-body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: clamp(14px, 1.6vw, 20px);
    width: 100%;
}

.bento-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 2px;
}

/* ป้ายอยู่บนรูป ไม่ใช่บนพื้นการ์ด จึงต้องมีพื้นของตัวเองที่ทึบพอ
   ทับ .ds-badge เฉพาะในบริบทนี้ ไม่ไปแตะ .ds-badge ที่อื่นในเว็บ */
.bento-tags .ds-badge {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.bento-pin {
    padding-inline: .5em;
}

.bento-title {
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    font-weight: 600;
    line-height: 1.35;
    color: #ffffff;
    margin: 0;

    /* หัวข้อยาวๆ ต้องไม่ดันการ์ดจนสูงกว่าที่ grid จองไว้ */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bento-lg .bento-title,
.bento-full .bento-title {
    font-size: clamp(1.15rem, 2vw, 1.5rem);
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

.bento-subtitle {
    font-size: clamp(12px, 1.1vw, 13.5px);
    line-height: 1.5;
    color: rgba(255, 255, 255, .72);
    margin: 0;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* การ์ดเล็กมีที่ไม่พอสำหรับทั้งหัวข้อและบรรทัดรอง ตัดบรรทัดรองทิ้ง */
.bento-sm .bento-subtitle {
    display: none;
}


/* ---- ปุ่มอ่านต่อ ----
   ต้นแบบ MagicUI ซ่อนปุ่มไว้แล้วเลื่อนขึ้นมาตอน hover
   ทำแบบนั้นได้เฉพาะจอที่มีเมาส์จริง — บนมือถือไม่มี hover ปุ่มจะไม่มีวันโผล่
   จึงใช้ @media (hover: hover) คุม ส่วนจอสัมผัสให้แสดงค้างไว้เลย */
.bento-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: clamp(12px, 1.1vw, 13px);
    font-weight: 500;
    color: #ffffff;
}

.bento-cta i {
    font-size: 1.05em;
    transition: transform var(--ds-duration-fast, .14s) var(--ds-ease, cubic-bezier(.4, 0, .2, 1));
}

.bento-card:hover .bento-cta i {
    transform: translateX(3px);
}

@media (hover: hover) and (pointer: fine) {
    .bento-cta {
        opacity: 0;
        transform: translateY(8px);
        transition:
            opacity var(--ds-duration-fast, .14s) var(--ds-ease, cubic-bezier(.4, 0, .2, 1)),
            transform var(--ds-duration-fast, .14s) var(--ds-ease, cubic-bezier(.4, 0, .2, 1));
    }

    .bento-card:hover .bento-cta,
    .bento-card:focus-visible .bento-cta {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ---- จอแคบ ----
   ลดจำนวนคอลัมน์เป็นขั้น แล้วยุบขนาดการ์ดตามให้ไม่มีใบไหนล้นออกนอก track
   ที่ 480px ทุกใบเท่ากันหมด เพราะบนมือถือ bento ที่การ์ดสูงไม่เท่ากัน
   อ่านยากกว่ารายการเรียงธรรมดา */
@media (max-width: 1024px) {
    .news-bento-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .bento-full {
        grid-column: span 3;
    }

    .bento-tall {
        grid-row: span 1;
    }
}

@media (max-width: 768px) {
    .news-bento-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: minmax(140px, auto);
    }

    .bento-full,
    .bento-lg,
    .bento-wide {
        grid-column: span 2;
    }

    .bento-lg {
        grid-row: span 2;
    }
}

@media (max-width: 480px) {
    .news-bento-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: minmax(170px, auto);
    }

    .bento-full,
    .bento-lg,
    .bento-wide,
    .bento-tall,
    .bento-sm {
        grid-column: span 1;
        grid-row: span 1;
    }

    .bento-sm .bento-subtitle {
        display: -webkit-box;
    }
}


/* ---- โมดัลข่าว ----
   ใช้เมื่อแอดมินตั้งประเภทลิงก์เป็น "เปิด Modal" — อ่านเนื้อหาได้โดยไม่ต้องเปลี่ยนหน้า */
.news-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--ds-z-modal, 200);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(16px, 4vw, 40px);

    background: rgba(0, 0, 0, .72);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);

    opacity: 0;
    transition: opacity .2s var(--ds-ease, cubic-bezier(.4, 0, .2, 1));
}

/* จำเป็นจริงๆ: display: flex ด้านบนชนะค่า display: none ที่เบราว์เซอร์ให้มากับ [hidden]
   ถ้าไม่มีบรรทัดนี้ ฉากหลังโมดัลจะลอยคลุมทั้งจอตลอดเวลา (โปร่งใสจนมองไม่เห็น
   แต่ยังรับคลิกอยู่) แล้วทั้งหน้าเว็บจะกดอะไรไม่ได้เลยเมื่อมีการ์ดชนิด Modal อยู่ */
.news-modal-overlay[hidden] {
    display: none;
}

.news-modal-overlay.is-open {
    opacity: 1;
}

.news-modal {
    position: relative;
    width: min(680px, 100%);
    max-height: 88vh;
    overflow-y: auto;

    background-color: var(--bg-card, #0a0a0a);
    border: 1px solid var(--border-color, #1f1f1f);
    border-radius: var(--ds-radius-lg, 12px);
    box-shadow: var(--ds-shadow-xl, 0 20px 50px rgba(0, 0, 0, .4));

    transform: translateY(10px) scale(.985);
    transition: transform .2s var(--ds-ease, cubic-bezier(.4, 0, .2, 1));
}

.news-modal-overlay.is-open .news-modal {
    transform: translateY(0) scale(1);
}

.news-modal-close {
    position: absolute;
    top: 12px;
    inset-inline-end: 12px;
    z-index: 2;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;

    font-size: 18px;
    color: var(--text-main, #fff);
    background-color: var(--bg-item, #141414);
    border: 1px solid var(--border-item, #2a2a2a);
    border-radius: var(--ds-radius-md, 8px);
    cursor: pointer;

    transition: background-color var(--ds-duration-fast, .14s) var(--ds-ease, cubic-bezier(.4, 0, .2, 1));
}

.news-modal-close:hover {
    background-color: var(--border-item, #2a2a2a);
}

.news-modal-media img {
    width: 100%;
    max-height: 320px;
    object-fit: cover;
    display: block;
    border-radius: var(--ds-radius-lg, 12px) var(--ds-radius-lg, 12px) 0 0;
}

.news-modal-body {
    padding: clamp(18px, 3vw, 28px);
}

.news-modal-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.news-modal-date,
.news-article-date,
.news-article-views {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    color: var(--text-sub, #aaa);
}

.news-modal-title {
    font-size: clamp(1.15rem, 2.2vw, 1.5rem);
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-main, #fff);
    margin: 0 0 6px;
}

.news-modal-subtitle {
    font-size: clamp(13px, 1.2vw, 14px);
    color: var(--text-sub, #aaa);
    margin: 0 0 14px;
}

.news-modal-content {
    font-size: clamp(13.5px, 1.2vw, 15px);
    line-height: 1.85;
    color: var(--text-sub, #aaa);
    word-break: break-word;
}


/* ---- หน้ารายละเอียดข่าว (/news/<slug>) ---- */
.news-article {
    background-color: var(--bg-card, #0a0a0a);
    border: 1px solid var(--border-color, #1f1f1f);
    border-radius: var(--ds-radius-lg, 12px);
    overflow: hidden;
    margin-bottom: clamp(20px, 3vh, 30px);
}

.news-article-hero img {
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    display: block;
}

.news-article-body {
    padding: clamp(20px, 3.5vw, 36px);
}

.news-article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.news-article-title {
    font-size: clamp(1.35rem, 3vw, 2rem);
    font-weight: 600;
    line-height: 1.35;
    color: var(--text-main, #fff);
    margin: 0 0 8px;
}

.news-article-subtitle {
    font-size: clamp(14px, 1.4vw, 16px);
    color: var(--text-sub, #aaa);
    margin: 0 0 20px;
}

.news-article-content {
    font-size: clamp(14px, 1.3vw, 15.5px);
    line-height: 1.9;
    color: var(--text-sub, #aaa);
    word-break: break-word;
    margin-bottom: 20px;
}


/* ---- ยังไม่มีข่าว ---- */
.news-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: clamp(40px, 8vh, 70px) 20px;

    color: var(--text-sub, #aaa);
    background-color: var(--bg-card, #0a0a0a);
    border: 1px solid var(--border-color, #1f1f1f);
    border-radius: var(--ds-radius-lg, 12px);
}

.news-empty i {
    font-size: 2.6rem;
    opacity: .55;
}

.news-empty p {
    margin: 0;
    font-size: clamp(13px, 1.2vw, 14.5px);
}


/* ---- ลดการเคลื่อนไหว ----
   ผู้ใช้ที่ตั้งค่านี้ไว้มักเป็นเพราะเวียนหัวกับภาพเคลื่อนไหว
   ตัดทุกอย่างที่ขยับ เหลือแค่การเปลี่ยนสี ซึ่งไม่ทำให้เวียนหัว */
@media (prefers-reduced-motion: reduce) {

    .bento-card,
    .bento-media img,
    .bento-cta,
    .bento-cta i,
    .news-modal,
    .news-modal-overlay {
        transition: none !important;
    }

    .bento-card:hover,
    .bento-card:hover .bento-media img,
    .bento-card:hover .bento-cta i {
        transform: none !important;
    }

    .news-modal {
        transform: none !important;
    }

    @media (hover: hover) and (pointer: fine) {
        .bento-cta {
            opacity: 1;
            transform: none;
        }
    }
}


/* =========================================================================
   NEWS BENTO — งานจอเล็ก/จอใหญ่เพิ่มเติม

   ของเดิมไม่ล้นแนวนอนอยู่แล้วทุกความกว้าง (วัดตั้งแต่ 320 ถึง 1920)
   ที่แก้ตรงนี้คือเรื่องสัดส่วนกับการจัดวางที่ยังไม่ลงตัว:

   1. หัวข้อ section ที่จอ ~320px ปุ่ม "ดูเพิ่มเติม" ตกไปอยู่บรรทัดล่าง
      ชิดซ้าย ดูเหมือนปุ่มหลงมามากกว่าเป็นส่วนหนึ่งของหัวข้อ
      (หัวข้อนี้ยาวกว่า section อื่นในหน้า เลยเป็นอันเดียวที่ห่อบรรทัด)
   2. การ์ดใบใหญ่ยังใช้ขนาดตัวอักษรของ "ใบใหญ่" ตอนอยู่บนมือถือ
      ทั้งที่ตอนนั้นทุกใบกว้างเท่ากันหมดแล้ว หัวข้อเลยดูโตเกินการ์ด
   3. จอกว้างมาก (1600px+) คอลัมน์กว้างขึ้นแต่ความสูงแถวคงที่ 150px
      การ์ดใบเล็กเลยกลายเป็นแถบแบนยาว
   ========================================================================= */

/* ---- 3. ความสูงแถวขยับตามความกว้างจอ ----
   ต้องครอบด้วย min-width: 769px ไม่ใช่เขียนลอยๆ เพราะบล็อกนี้อยู่ท้ายไฟล์
   selector เดียวกันแต่มาทีหลัง จะไปทับค่าที่ @media จอเล็กตั้งไว้ (170px/140px)
   ทั้งที่ตั้งใจให้จอเล็กใช้ค่าของมันเอง */
@media (min-width: 769px) {
    .news-bento-grid {
        grid-auto-rows: minmax(clamp(150px, 12vw, 200px), auto);
    }
}


/* ---- 1. หัวข้อ section บนจอแคบ ----
   บังคับให้หัวข้อกับปุ่มอยู่บรรทัดเดียวกัน แล้วให้ "หัวข้อ" เป็นฝ่ายยอมหด
   ส่วนปุ่มย่อขนาดลงแทนที่จะตกบรรทัด — ผลคือหน้าตาเหมือน section อื่นในหน้า

   ต้องใส่ min-width: 0 ทั้งสองชั้น เพราะ flex item มีค่าเริ่มต้นเป็น auto
   ซึ่งแปลว่า "ห้ามหดเล็กกว่าเนื้อหา" ตัวหัวข้อจึงดันปุ่มตกบรรทัดอยู่ดี */
@media (max-width: 600px) {
    .news-sec-header {
        flex-wrap: nowrap;
        gap: 10px;
    }

    .news-sec-header .sec-title {
        flex: 1 1 auto;
        min-width: 0;
        gap: 10px;
    }

    .news-sec-header .sec-title > div {
        min-width: 0;
    }

    .news-sec-header .sec-title h2 {
        font-size: clamp(0.95rem, 3.8vw, 1.2rem);
        line-height: 1.3;
        margin-bottom: 2px;
    }

    .news-sec-header .btn-view-all {
        flex-shrink: 0;
        padding: 8px 13px;
        font-size: 12.5px;
    }
}

/* จอเล็กมาก พื้นที่ไม่พอให้ทั้งสองอย่างจริงๆ
   ตัดบรรทัดภาษาอังกฤษกับย่อกล่องไอคอน ซึ่งเป็นส่วนตกแต่ง ไม่ใช่ข้อมูล */
@media (max-width: 400px) {
    .news-sec-header .sec-title p {
        display: none;
    }

    .news-sec-header .sec-icon {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    .news-sec-header .btn-view-all {
        padding: 7px 11px;
        font-size: 12px;
    }
}


/* ---- 2. ขนาดตัวอักษรบนการ์ดตอนจอแคบ ----
   ที่ 480px ลงมาทุกการ์ดยุบเหลือคอลัมน์เดียวกว้างเท่ากันหมด
   คลาส .bento-lg / .bento-full ยังติดอยู่แต่ไม่ได้ใหญ่กว่าใครแล้ว
   ถ้าปล่อยให้ใช้ขนาดตัวอักษรของใบใหญ่ต่อ หัวข้อจะกินพื้นที่การ์ดเกือบหมด */
@media (max-width: 480px) {
    .bento-lg .bento-title,
    .bento-full .bento-title {
        font-size: clamp(1rem, 4.2vw, 1.15rem);
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    .bento-body {
        gap: 5px;
    }
}

/* ต่ำกว่านี้พื้นที่แนวนอนเหลือน้อยมาก ลดระยะขอบในการ์ดลงอีกขั้น
   เพื่อให้ตัวหนังสือได้ความกว้างคืนมา */
@media (max-width: 360px) {
    .bento-body {
        padding: 12px;
    }

    .bento-title {
        font-size: clamp(0.95rem, 4.4vw, 1.05rem);
    }

    .bento-subtitle {
        font-size: 11.5px;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }
}


/* ---- หน้ารายละเอียดข่าวบนจอแคบ ----
   รูปหัวเรื่องสูง 420px บนมือถือกินพื้นที่เกินครึ่งจอก่อนเห็นตัวหนังสือ
   ลดลงตามความกว้างจอแทนการตรึงค่าเดียว */
@media (max-width: 600px) {
    .news-article-hero img {
        max-height: clamp(160px, 45vw, 260px);
    }
}