:root{
    --primary:#FBBF24;
    --primary-hover:#D97706;
    --bg-dark:#2D2A24;
}

body{
    font-family:'Montserrat',sans-serif;
    padding-top:80px;
}

.font-display{font-family:'Playfair Display',serif}

/* ===== NAV ===== */
.navbar{backdrop-filter:blur(10px)}
.nav-link{font-weight:500}
.nav-link:hover{color:var(--primary)!important}

.search-box{
    background:#f1f1f1;border-radius:50px;padding:6px 12px
}
.search-box input{border:none;background:transparent;outline:none;font-size:14px}

.icon-btn{
    background:#f1f1f1;border-radius:50%;
    width:40px;height:40px;
    display:flex;align-items:center;justify-content:center;
    position:relative
}
.icon-dot{
    position:absolute;top:6px;right:6px;
    width:8px;height:8px;background:#dc3545;border-radius:50%
}

/* ===== DARK MODE HEADER ===== */
.dark .navbar{
    background:#2D2A24 !important;
    border-bottom:1px solid #374151;
}

.dark .navbar-brand span{
    color:#ffffff;
}

.dark .nav-link{
    color:#e5e7eb !important;
}

.dark .nav-link:hover{
    color:var(--primary) !important;
}

.dark .search-box{
    background:#374151;
}

.dark .search-box input{
    color:#ffffff;
}

.dark .search-box input::placeholder{
    color:#9ca3af;
}

.dark .icon-btn{
    background:#374151;
}

.dark .icon-btn span{
    color:#FBBF24;
}

.dark .navbar-toggler{
    border-color:#6b7280;
}

.dark .navbar-toggler-icon{
    filter:invert(1);
}

/* ===== SECTIONS ===== */
.section-core{padding:4rem 0}
.section-title span{
    color:var(--primary);letter-spacing:2px;
    font-weight:700;font-size:13px
}
.section-title h1,
.section-title h2{
    font-weight:800;
}

.card-feature{
    background:#fff;border:1px solid #e5e7eb;
    border-radius:1rem;padding:2rem;
    transition:.3s;height:100%
}
.card-feature:hover{
    transform:translateY(-6px);
    box-shadow:0 20px 40px rgba(0,0,0,.08);
    border-color:var(--primary)
}
.icon-circle{
    width:64px;height:64px;border-radius:50%;
    background:rgba(251,191,36,.15);
    color:var(--primary);
    display:flex;align-items:center;justify-content:center;
    margin:0 auto 1.5rem;transition:.3s
}
.card-feature:hover .icon-circle{
    background:var(--primary);color:#fff
}
.text-muted-light{color:#6b7280}

/* ===== DARK MODE ===== */
.dark body{background:#1f1d18;color:#e5e7eb}
.dark .card-feature{background:#2D2A24;border-color:#374151}
.dark .text-muted-light{color:#9ca3af}

/* ===== FOOTER ===== */
.footer{
    background:#fff;border-top:1px solid #e5e7eb;
    padding:4rem 0 2rem
}
.footer.dark{background:#1F1D18;border-color:#1F1D18}
.footer p,.footer a{color:#6b7280;font-size:14px;text-decoration:none}
.footer.dark p,.footer.dark a{color:#9ca3af}
.footer a:hover{color:var(--primary)}
.footer-title{font-weight:700;margin-bottom:1rem}
.footer.dark .footer-title{color:#fff}
.newsletter-input{background:#f3f4f6;border:none}
.footer.dark .newsletter-input{background:#374151;color:#fff}
.newsletter-btn{
    background:var(--primary);color:#fff;font-weight:700;border:none
}
.newsletter-btn:hover{background:var(--primary-hover)}
.footer-bottom{
    border-top:1px solid #e5e7eb;
    padding-top:2rem;margin-top:2rem
}
.footer.dark .footer-bottom{border-color:#374151}

/*=====================Home=======================================*/

/* ===== HERO HEADER ===== */
.hero{
    position:relative;
    overflow:hidden;
}

.hero-badge{
    display:inline-block;
    padding:.5rem 1.25rem;
    border-radius:999px;
    background:rgba(251,191,36,.2);
    color:#92400e;
    font-weight:600;
    font-size:.875rem;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.dark .hero-badge{color:#fde68a;}

.hero-title{
    font-family:'Playfair Display',serif;
    font-weight:700;
    font-size:clamp(2.8rem,6vw,4.5rem);
    line-height:1.1;
    color:#111827;
}

.dark .hero-title{color:#fff;}

.hero-gradient{
    background:linear-gradient(90deg,#FBBF24,#fb923c);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.hero-desc{
    font-size:1.125rem;
    color:#4b5563;
}

.dark .hero-desc{color:#d1d5db;}

.hero-btn-primary{
    background:#FBBF24;
    color:#fff;
    font-weight:700;
    padding:1rem 2rem;
    border-radius:999px;
    box-shadow:0 10px 30px rgba(251,191,36,.3);
    transition:.3s;
}

.hero-btn-primary:hover{
    background:#D97706;
    transform:translateY(-2px);
}

.hero-btn-outline{
    background:#fff;
    border:2px solid #e5e7eb;
    color:#1f2937;
    font-weight:600;
    padding:1rem 2rem;
    border-radius:999px;
    transition:.3s;
}

.dark .hero-btn-outline{
    background:#2D2A24;
    color:#fff;
    border-color:#4b5563;
}

.hero-btn-outline:hover{
    border-color:#FBBF24;
    transform:translateY(-2px);
}

.hero-check{
    font-size:.9rem;
    color:#6b7280;
}

.dark .hero-check{color:#9ca3af;}

/* ===== FLOAT ===== */
@keyframes float{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-10px)}
}
.float{animation:float 4s ease-in-out infinite}
.float-delay{animation:float 5s ease-in-out infinite 1s}

/* ===== IMAGE CARDS ===== */
.hero-glow{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:500px;
    height:500px;
    background:rgba(251,191,36,.4);
    border-radius:50%;
    filter:blur(80px);
    z-index:-1;
}

.dark .hero-glow{background:rgba(113,63,18,.4);}

/* ===== 3 REASONS SECTION ===== */
.section-reasons{
    padding:6rem 0;
    background:#ffffff;
}

.dark .section-reasons{
    background:#1F1D18;
}

.section-reasons h2{
    font-family:'Playfair Display',serif;
    font-weight:700;
    letter-spacing:.15em;
}

.reason-item{
    text-align:center;
}

.reason-icon{
    font-size:3.5rem;
    margin-bottom:1rem;
}

.reason-title{
    font-weight:700;
    font-size:1.1rem;
    margin-bottom:.75rem;
    color:#111827;
}

.dark .reason-title{
    color:#f9fafb;
}

.reason-desc{
    font-size:.875rem;
    line-height:1.6;
    color:#4b5563;
    max-width:260px;
    margin:0 auto;
}

.dark .reason-desc{
    color:#9ca3af;
}

/* ===== NUTRITION SECTION ===== */
.section-nutrition{
    padding:4rem 0;
}

.dark .section-nutrition{
    background:#1f1d18;
}

.nutrition-wrapper{
    background:#ffffff;
    border:1px solid #e5e7eb;
    border-radius:1.5rem;
    padding:2rem;
    box-shadow:0 20px 40px rgba(0,0,0,.08);
}

.dark .nutrition-wrapper{
    background:#1f2937;
    border-color:#374151;
}

.nutrition-title{
    font-family:'Playfair Display',serif;
    font-weight:700;
    font-size:1.875rem;
    color:#111827;
}

.dark .nutrition-title{
    color:#ffffff;
}

.nutrition-item{
    display:flex;
    gap:1rem;
}

.nutrition-icon{
    width:48px;
    height:48px;
    border-radius:50%;
    background:rgba(251,191,36,.15);
    color:#FBBF24;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}

.nutrition-item h4{
    font-weight:700;
    font-size:1.1rem;
    color:#1f2937;
    margin-bottom:.25rem;
}

.dark .nutrition-item h4{
    color:#ffffff;
}

.nutrition-item p{
    font-size:.875rem;
    color:#4b5563;
    margin-bottom:0;
}

.dark .nutrition-item p{
    color:#d1d5db;
}

/* ===== NUTRITION FACTS CARD ===== */
.nutrition-facts{
    background:#ffffff;
    border:2px solid #111827;
    padding:1.5rem;
    margin:auto;
    box-shadow:0 10px 20px rgba(0,0,0,.15);
    transform:rotate(1deg);
    transition:.3s;
}

.nutrition-facts:hover{
    transform:rotate(0deg);
}

.dark .nutrition-facts{
    background:#e5e7eb;
    border-color:#111827;
}

/* ===== COMBO SECTION ===== */
.section-combo{
    padding:5rem 0;
}

.section-combo h2{
    font-family:'Playfair Display',serif;
    font-weight:700;
}

.combo-card{
    background:#ffffff;
    border:1px solid #e5e7eb;
    border-radius:1rem;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    transition:.3s;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.combo-card:hover{
    transform:translateY(-4px);
    box-shadow:0 25px 50px rgba(0,0,0,.15);
}

.dark .combo-card{
    background:#2D2A24;
    border-color:#374151;
}

.combo-media{
    position:relative;
    height:260px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.combo-media::after{
    content:'';
    position:absolute;
    inset:0;
    opacity:.08;
    background:url('https://www.transparenttextures.com/patterns/cubes.png');
}

.combo-media img{
    width:190px;
    height:190px;
    object-fit:cover;
    z-index:1;
    border-radius:.75rem;
    box-shadow:0 10px 20px rgba(0,0,0,.25);
}

.combo-badge{
    position:absolute;
    top:1rem;
    left:1rem;
    background:#FBBF24;
    color:#fff;
    font-size:.75rem;
    font-weight:700;
    padding:.25rem .75rem;
    border-radius:999px;
    z-index:2;
}

.combo-body{
    padding:1.5rem;
    display:flex;
    flex-direction:column;
    flex:1;
}

.combo-title{
    font-family:'Playfair Display',serif;
    font-weight:700;
    font-size:1.5rem;
    color:#111827;
}

.dark .combo-title{
    color:#ffffff;
}

.combo-sub{
    font-size:.875rem;
    color:#6b7280;
}

.dark .combo-sub{
    color:#9ca3af;
}

.combo-list{
    font-size:.875rem;
    color:#4b5563;
    margin:1rem 0;
    flex:1;
}

.dark .combo-list{
    color:#d1d5db;
}

.combo-list li{
    display:flex;
    align-items:center;
    gap:.5rem;
    margin-bottom:.5rem;
}

.combo-dot{
    width:6px;
    height:6px;
    border-radius:50%;
    background:#22c55e;
}

.combo-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-top:auto;
}

.combo-price{
    font-size:1.5rem;
    font-weight:700;
    color:#FBBF24;
}

.combo-btn{
    padding:.6rem 1.25rem;
    font-size:.875rem;
    font-weight:600;
    border-radius:.5rem;
    border:none;
    transition:.3s;
}

.combo-btn-dark{
    background:#111827;
    color:#ffffff;
}

.combo-btn-dark:hover{
    background:#1f2937;
}

.combo-btn-primary{
    background:#FBBF24;
    color:#ffffff;
    box-shadow:0 10px 20px rgba(251,191,36,.35);
}

.combo-btn-primary:hover{
    background:#D97706;
}

/* highlight middle card */
.combo-featured{
    transform:translateY(-12px);
    position:relative;
}

.combo-featured::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:4px;
    background:linear-gradient(90deg,#FBBF24,#fb923c);
}
/* ===== FEATURE ICON SECTION ===== */
.section-features{
    padding:4rem 0;
    background:#ffffff;
    transition:.3s;
}

.dark .section-features{
    background:#1F1D18;
}

.feature-item{
    padding:1.5rem;
    border-radius:1.25rem;
    text-align:center;
    transition:.3s;
}

.feature-item:hover{
    background:#f9fafb;
}

.dark .feature-item:hover{
    background:#374151;
}

.feature-icon{
    width:64px;
    height:64px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 1rem;
    font-size:2rem;
    transition:.3s;
}

.feature-item:hover .feature-icon{
    transform:scale(1.1);
}

.feature-title{
    font-weight:700;
    font-size:1.1rem;
    margin-bottom:.5rem;
    color:#111827;
}

.dark .feature-title{
    color:#ffffff;
}

.feature-desc{
    font-size:.875rem;
    color:#4b5563;
}

.dark .feature-desc{
    color:#d1d5db;
}

/*========================Tin-tuc=====================================*/

/* Typography */
 .fw-black{
     font-weight:900;
 }

.text-main{
    color:var(--text-main);
}

/* Search input */
.search-input{
    height:44px;
    border-radius:.5rem;
    background:#fff;
}

.dark .search-input{
    background:#332b20;
    border-color:#555;
    color:#fff;
}

.search-input:focus{
    border-color:var(--primary);
    box-shadow:0 0 0 .2rem rgba(238,157,43,.25);
}

/* ===== BLOG GRID ===== */
.post-card{
    transition:.3s;
}

.post-thumb{
    overflow:hidden;
    border-radius:.75rem;
    background:#f3f4f6;
}

.bg-cover{
    width:100%;
    height:100%;
    background-size:cover;
    background-position:center;
    transition:.3s;
}

.post-thumb:hover .bg-cover{
    opacity:.9;
}

.post-title a{
    color:var(--text-main);
    text-decoration:none;
    transition:.3s;
}

.post-title a:hover{
    color:var(--primary);
}

.post-excerpt{
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

/* Dot */
.dot{
    width:4px;
    height:4px;
    background:#d1d5db;
    border-radius:50%;
}

/* Pagination */
.page-btn{
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:.5rem;
    text-decoration:none;
    color:var(--text-main);
    transition:.3s;
}

.page-btn:hover{
    background:#e5e7eb;
}

.page-btn.active{
    background:var(--primary);
    color:#fff;
    font-weight:700;
}

/* Dark mode */
.dark .post-thumb{background:#1f2937}
.dark .post-title a{color:#fff}
.dark .post-excerpt{color:#9ca3af}
.dark .page-btn:hover{background:#1f2937}