/* นำเข้าฟอนต์ Noto Sans Thai Looped */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai+Looped:wght@300;400;500;700&display=swap');

/* 1. ให้ตัวหนังสือทั้งเว็บเป็น Noto Sans (ห้ามใส่ !important) */
body {
    font-family: 'Noto Sans Thai Looped', sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* 2. หัวข้อให้หนาชัดเจน */
h1, h2, h3, h4, h5, h6, b, strong {
    font-weight: 700;
}

/* 3. 🛑 ยันต์กันไอคอนหาย! บังคับให้ Font Awesome ทำงานถูกต้อง */
.fa, .fas, .fa-solid {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free" !important;
    font-weight: 900 !important; /* ขีดเส้นใต้เลยว่าต้อง 900 เท่านั้น ไอคอนถึงจะขึ้น! */
}

.far, .fa-regular {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free" !important;
    font-weight: 400 !important;
}

.fab, .fa-brands {
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
}

/* =========================================
   ✨ HEADER & NAVIGATION STYLES
   ========================================= */

.transparent-nav {
    position: absolute; top: 0; width: 100%; z-index: 1000;
    background: linear-gradient(180deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
    padding-bottom: 20px;
}

/* Ensure the hero section flows under the navbar properly without creating a gap, while pushing the inner text down to be visible */
.page-hero, .about-hero, .hero-section {
    padding-top: 130px !important;
}

@media (max-width: 991px) {
    .page-hero, .about-hero, .hero-section {
        padding-top: 100px !important;
    }
}
.chalao-topbar { padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,0.1); }

.brand-logo { 
    height: 60px; object-fit: contain; transition: 0.3s; 
    filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.4)); 
}
.brand-logo:hover { transform: scale(1.05); }

.search-custom { border-radius: 30px; border: 1px solid #ddd; background: #fff; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
.search-custom input { border: none; background: transparent; padding: 10px 20px; font-size: 15px; color: #333; outline: none; }
.search-custom input::placeholder { color: #888; }
.search-btn { background: var(--chalao-gold); color: #fff; border: none; padding: 0 25px; transition: 0.3s; }
.search-btn:hover { background: var(--chalao-dark-red); }

.user-action-group { display: flex; align-items: center; justify-content: flex-end; gap: 20px; }
.user-action-icon { font-size: 26px; color: #fff; text-decoration: none; position: relative; transition: 0.3s; display: inline-flex; align-items: center; }
.user-action-icon:hover { color: var(--chalao-gold); transform: translateY(-2px); }

.cart-badge {
    position: absolute; top: -6px; right: -10px; background-color: var(--chalao-gold); color: var(--chalao-red);
    font-size: 12px; font-weight: 800; padding: 2px 6px; border-radius: 50px; border: 2px solid var(--chalao-red);
    min-width: 22px; text-align: center; line-height: 1; z-index: 10;
}

/* Navbar */
.category-btn { background-color: rgba(0,0,0,0.15); color: white; font-weight: 500 !important; font-size: 15px; padding: 8px 20px; transition: 0.3s; border-radius: 8px; border: none;}
.nav-link-custom { 
    color: rgba(255,255,255,0.9) !important; font-weight: 500 !important; font-size: 16px; text-decoration: none; 
    transition: all 0.3s; padding: 10px 18px; cursor: pointer; text-transform: uppercase; letter-spacing: 1px;
    position: relative;
}
.nav-link-custom::after {
    content: ''; position: absolute; width: 0; height: 2.5px;
    bottom: -2px; left: 50%; background-color: var(--chalao-gold);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform: translateX(-50%); border-radius: 2px;
}
.nav-link-custom:hover::after { width: 80%; }
.nav-link-custom:hover { color: var(--chalao-gold) !important; text-shadow: 0 0 12px rgba(212,175,55,0.5); }

/* User icons animation */
.user-action-icon {
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); display: inline-flex; align-items: center;
}
.user-action-icon:hover {
    transform: translateY(-4px) scale(1.1); color: var(--chalao-gold) !important;
    text-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.dropdown-menu { 
    background-color: rgba(255,255,255,0.95) !important; backdrop-filter: blur(10px); 
    border-radius: 15px; border: none !important; box-shadow: 0 15px 35px rgba(0,0,0,0.15); 
}
.dropdown-item { color: var(--chalao-dark-red) !important; font-weight: 500; padding: 12px 20px; transition: 0.3s; position: relative; overflow: hidden; }
.dropdown-item:hover { background-color: #fdfaf0 !important; color: var(--chalao-red) !important; padding-left: 28px; }
.dropdown-item:hover::before { content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 4px; background-color: var(--chalao-gold); }

/* Mega Menu */
.mega-menu { width: 650px !important; max-width: 95vw; padding: 25px; margin-top: 10px; }
.mega-menu-title { color: #888 !important; font-size: 16px; font-weight: 700; margin-bottom: 15px; }
.category-list-item { display: block; padding: 10px 0; color: #333 !important; text-decoration: none; transition: 0.2s; font-size: 15px; font-weight: 500 !important; }
.category-list-item:hover { color: var(--chalao-red) !important; padding-left: 8px; }

@media (min-width: 992px) { 
    .dropdown-menu {
        display: block; opacity: 0; visibility: hidden; transform: translateY(20px); transition: all 0.3s ease;
    }
    .dropdown-hover:hover > .dropdown-menu { 
        opacity: 1; visibility: visible; transform: translateY(0); margin-top: 10px; 
    } 
}
@media (max-width: 991px) { 
    .navbar-collapse { 
        background: rgba(0,0,0,0.1); 
        border-radius: 15px; 
        padding: 15px; 
        margin-top: 15px; 
        max-height: 75vh; 
        overflow-y: auto; 
    } 
    .mega-menu { width: 100% !important; padding: 15px; }
}

/* RED HEADER BACKGROUND */
.header-red-bg {
    background: linear-gradient(135deg, #A6192E 0%, #4A0008 100%);
    padding-top: 0;
    padding-bottom: 0;
    z-index: 1050;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
    border-bottom: 4px solid #B8860B; /* Dark Gold */
    transition: all 0.4s ease;
}

.hero-red-header {
    background: linear-gradient(180deg, #A6192E 0%, #8c1325 100%); 
    border-radius: 0 0 50px 50px; 
    padding-bottom: 20px; 
    margin-bottom: 30px; 
    box-shadow: 0 10px 25px rgba(166, 25, 46, 0.2); 
}

.page-title-area { text-align: center; color: white; padding-top: 30px; padding-bottom: 20px;}
.page-title-area h1 { font-weight: 700 !important; text-shadow: 0 2px 4px rgba(0,0,0,0.3); color: #fff !important; }

/* -------------------------------------
   ✨ HERO SECTION (Moved from index.php)
-------------------------------------- */
.hero-section {
    background: #ffffff url('hero_premium.jpg') no-repeat center bottom;
    background-size: 100% auto; 
    position: relative;
    padding: 50px 15px 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 90vh; 
    overflow: hidden;
}
@media (min-width: 1400px) {
    .hero-section { background-size: contain; } 
}
.hero-content-box {
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(255,255,255,0.7);
    border-radius: 40px;
    padding: 40px 60px 45px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
    transform: translateY(-10px);
    display: inline-block;
}
.hero-title {
    font-size: 3.8rem;
    font-weight: 800;
    color: var(--chalao-dark-red);
    margin-bottom: 5px;
    line-height: 1.2;
    text-shadow: 0 2px 5px rgba(255,255,255,0.8);
    z-index: 2;
}
.hero-subtitle {
    font-size: 2.3rem;
    font-weight: 800;
    color: var(--chalao-dark-red);
    margin-bottom: 15px;
    line-height: 1.2;
    text-shadow: 0 2px 5px rgba(255,255,255,0.8);
    z-index: 2;
}
.hero-text-small {
    color: #444;
    font-size: 1.15rem;
    font-weight: 500;
    line-height: 1.5;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
    z-index: 2;
}
.btn-glow {
    background: #F8DA5D;
    color: #5C3A21 !important;
    padding: 12px 35px;
    font-size: 1.2rem;
    font-weight: 700;
    border-radius: 50px;
    text-decoration: none;
    box-shadow: 0 5px 15px rgba(248,218,93,0.4);
    transition: all 0.3s ease;
    display: inline-block;
    border: none;
    z-index: 2;
}
.btn-glow:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 10px 25px rgba(248,218,93,0.6);
}
@media (max-width: 767px) {
    .hero-title { font-size: 2.2rem; }
    .hero-subtitle { font-size: 1rem; padding: 0 20px; }
}

/* --- Feature Card Animation for Story Section --- */
.feature-card-anim {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.feature-card-anim::before {
    content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(212,175,55,0.2) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-25deg);
    transition: all 0.6s ease;
}
.feature-card-anim:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 15px 30px rgba(166,25,46,0.15) !important;
    border-color: var(--chalao-gold) !important;
}
.feature-card-anim:hover::before {
    left: 200%;
}
.feature-card-anim i {
    transition: all 0.3s ease;
}
.feature-card-anim:hover i {
    animation: bounceIcon 0.6s cubic-bezier(0.28, 0.84, 0.42, 1) infinite alternate;
    color: var(--chalao-red) !important;
}

@keyframes bounceIcon {
    0% { transform: translateY(0) scale(1.1); }
    100% { transform: translateY(-4px) scale(1.1); }
}

/* --- TikTok Review Cards --- */
.tiktok-wrapper {
    transition: all 0.4s ease;
    border: 2px solid transparent;
}
.tiktok-wrapper:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.2) !important;
    border-color: #ff0050; /* TikTok Red */
}
.tiktok-wrapper img {
    transition: all 0.5s ease;
}
.tiktok-wrapper:hover img {
    opacity: 0.9 !important;
    transform: scale(1.05);
}
.tiktok-play-icon {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.tiktok-wrapper:hover .tiktok-play-icon {
    transform: translate(-50%, -50%) scale(1.2) !important;
    color: #00f2fe !important; /* TikTok Blue */
}

/* --- Review Card Animations --- */
.review-card-fixed {
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
    cursor: pointer;
}
.review-card-fixed:hover {
    transform: translateY(-8px) scale(1.03);
    box-shadow: 0 15px 35px rgba(0,0,0,0.2) !important;
    border-color: #A6192E !important; /* Chalao Red border on hover */
}

/* --- Social Channel Cards --- */
.social-channel-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
}
.social-channel-card:hover img {
    opacity: 1 !important;
    transform: scale(1.1);
    transition: 0.3s ease;
}
.social-channel-card img {
    transition: 0.3s ease;
}
.social-channel-card:hover i {
    transform: scale(1.1);
    transition: 0.3s ease;
}
.social-channel-card i {
    transition: 0.3s ease;
}