/*!
 * Quynhdat Theme - Main Stylesheet
 * Brand: Xăng Dầu Quỳnh Đạt
 */

/* ================= Reset & Base ================= */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    font-family:'Be Vietnam Pro','Segoe UI',Roboto,Arial,sans-serif;
    font-size:16px;
    line-height:1.65;
    color:#333;
    background:#fff;
    -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:#e30613;text-decoration:none;transition:.25s}
a:hover{color:#b3050f}
h1,h2,h3,h4,h5,h6{font-family:inherit;font-weight:700;line-height:1.25;color:#0c2340;margin:0 0 .6em}
h1{font-size:2.25rem}
h2{font-size:1.85rem}
h3{font-size:1.45rem}
h4{font-size:1.15rem}
p{margin:0 0 1em}
ul,ol{padding-left:1.25em;margin:0 0 1em}
.container{max-width:1240px;margin:0 auto;padding:0 20px}
.section{padding:80px 0}
.section-title{text-align:center;margin-bottom:50px}
.section-title .kicker{display:inline-block;color:#e30613;font-weight:700;text-transform:uppercase;letter-spacing:2px;font-size:.85rem;margin-bottom:10px}
.section-title h2{font-size:2.2rem;margin:0 0 12px}
.section-title p{color:#666;max-width:720px;margin:0 auto}
.btn{
    display:inline-flex;align-items:center;gap:8px;
    padding:14px 28px;font-weight:600;border-radius:50px;
    background:#e30613;color:#fff;border:2px solid #e30613;cursor:pointer;
    transition:.3s;
}
.btn:hover{background:#b3050f;color:#fff}
.btn-outline{background:transparent;color:#e30613}
.btn-outline:hover{background:#e30613;color:#fff}
.btn-white{background:#fff;color:#e30613;border-color:#fff}
.btn-white:hover{background:#f2f2f2;color:#b3050f}

/* ================= Top bar ================= */
.top-bar{background:#0c2340;color:#d7deea;font-size:.85rem}
.top-bar-inner{max-width:1240px;margin:0 auto;padding:9px 20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
.top-bar-left span,.top-bar-right span{margin-right:18px;display:inline-flex;align-items:center;gap:6px}
.top-bar-right a{color:#d7deea;margin-left:8px}
.top-bar-right a:hover{color:#fff}
.top-bar i{color:#e30613}

/* ================= Header ================= */
.site-header{background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.05);position:sticky;top:0;z-index:100;transition:.3s}
.site-header.is-scrolled{box-shadow:0 4px 15px rgba(0,0,0,.1)}
.header-inner{max-width:1240px;margin:0 auto;padding:8px 20px;display:flex;align-items:center;gap:24px}
.site-logo{display:flex;align-items:center}
.site-logo img{max-height:60px;width:auto}
.site-logo-text{font-size:1.6rem;font-weight:800;color:#e30613;line-height:1}
.site-logo-text span{display:block;color:#0c2340;font-size:.85rem;letter-spacing:2px;margin-top:3px}

.header-search{flex:1;max-width:300px}
.header-search form{display:flex;border:2px solid #f0f0f0;border-radius:50px;overflow:hidden;background:#f7f8fa}
.header-search input{flex:1;border:0;background:transparent;padding:8px 16px;font:inherit;outline:none}
.header-search button{border:0;background:#e30613;color:#fff;padding:0 18px;cursor:pointer}

.main-nav ul{display:flex;list-style:none;padding:0;margin:0;gap:6px}
.main-nav li{position:relative}
.main-nav a{display:block;padding:10px 14px;color:#0c2340;font-weight:600;border-radius:6px}
.main-nav a:hover,.main-nav .current-menu-item > a{color:#e30613;background:#fff3f3}
.main-nav .sub-menu{position:absolute;top:100%;left:0;min-width:220px;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.1);list-style:none;padding:8px 0;margin:0;border-radius:8px;display:none;flex-direction:column;gap:0;z-index:200}
.main-nav li:hover > .sub-menu{display:flex}
.main-nav .sub-menu a{padding:8px 16px;border-radius:0}

.header-cta{display:flex;align-items:center;gap:10px;background:#e30613;color:#fff;padding:10px 16px;border-radius:8px}
.header-cta:hover{background:#b3050f;color:#fff}
.header-cta i{font-size:1.3rem}
.header-cta small{display:block;font-size:.7rem;opacity:.9}
.header-cta strong{font-size:1rem;line-height:1.1}

.mobile-toggle{display:none;background:transparent;border:0;font-size:1.6rem;color:#0c2340;cursor:pointer;padding:8px;margin-left:auto;line-height:1}

/* ================= Hero ================= */
.hero-slider{position:relative;overflow:hidden;height:560px}
.hero-slide{position:absolute;inset:0;display:flex;align-items:center;opacity:0;transition:opacity .8s ease;color:#fff}
.hero-slide.active,.hero-slide.is-active{opacity:1;z-index:1}
.hero-slide > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero-slide::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,35,64,.82),rgba(12,35,64,.25));z-index:1}
.hero-dots button.active{background:#e30613;width:30px;border-radius:6px}
.hero-content{position:relative;z-index:2;max-width:1240px;width:100%;margin:0 auto;padding:0 20px}
.hero-content .kicker{display:inline-block;background:rgba(227,6,19,.95);color:#fff;padding:6px 16px;border-radius:50px;font-weight:700;letter-spacing:2px;text-transform:uppercase;font-size:.75rem;margin-bottom:16px}
.hero-content h1{color:#fff;font-size:3rem;font-weight:800;max-width:680px;margin-bottom:16px;text-shadow:0 2px 20px rgba(0,0,0,.35)}
.hero-content p{color:#f0f0f0;font-size:1.1rem;max-width:600px;margin-bottom:24px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}

.hero-nav{position:absolute;z-index:3;bottom:30px;right:30px;display:flex;gap:10px}
.hero-nav button{width:46px;height:46px;border-radius:50%;border:2px solid rgba(255,255,255,.6);background:rgba(255,255,255,.15);color:#fff;cursor:pointer;transition:.3s;font-size:1.1rem}
.hero-nav button:hover{background:#e30613;border-color:#e30613}
.hero-dots{position:absolute;z-index:3;bottom:40px;left:50%;transform:translateX(-50%);display:flex;gap:10px}
.hero-dots button{width:12px;height:12px;border-radius:50%;border:0;background:rgba(255,255,255,.5);cursor:pointer;transition:.3s}
.hero-dots button.is-active{background:#e30613;width:30px;border-radius:6px}

/* ================= Section wrappers (homepage) ================= */
.section-wrap{max-width:1240px;margin:0 auto;padding:72px 20px}
.section-header{text-align:center;margin-bottom:40px;position:relative}
.section-header .section-kicker{display:inline-block;color:#e30613;font-weight:700;text-transform:uppercase;letter-spacing:2px;font-size:.8rem;margin-bottom:8px}
.section-header h2{font-size:2rem;margin:0}
.section-header .section-more{position:absolute;right:0;top:50%;transform:translateY(-50%);color:#e30613;font-weight:600;display:inline-flex;align-items:center;gap:6px;font-size:.9rem}
.section-header .section-more:hover{gap:12px}

/* ================= Price Table ================= */
.price-section{background:linear-gradient(180deg,#f7f8fa 0%,#eef2f7 100%);padding:72px 0}
.price-section-inner{max-width:1240px;margin:0 auto;padding:0 20px}
.price-header{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:20px;margin-bottom:24px}
.price-title-wrap{display:inline-flex;align-items:center;gap:14px;min-width:0;flex:0 1 auto;max-width:100%}
.price-title-logo{display:inline-block!important;width:auto!important;height:calc((1.85rem * 1.25) + 6px + (1.05rem * 1.25))!important;max-width:92px;object-fit:contain;flex:0 0 auto;margin:0!important}
.price-header h2{display:block;flex:0 1 auto;margin:0;font-size:1.85rem;line-height:1.25}
.price-header h2 span{color:#e30613;display:block;font-size:1.05rem;font-weight:600;text-transform:uppercase;letter-spacing:2px;margin-top:6px}
.price-controls{display:flex;gap:10px;align-items:center}
.price-select-wrap{display:flex;align-items:center;gap:10px;background:#fff;border-radius:50px;padding:6px 10px 6px 18px;box-shadow:0 4px 15px rgba(0,0,0,.06)}
.price-select-wrap > span{font-weight:600;color:#0c2340;font-size:.9rem;display:inline-flex;align-items:center;gap:6px}
.price-select-wrap > span i{color:#e30613}
.price-select-wrap select{border:0;font:inherit;background:transparent;padding:8px 4px;cursor:pointer;color:#e30613;font-weight:700;outline:none}

.price-table-wrap{background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 12px 35px rgba(12,35,64,.08);border:1px solid #eef0f3}
.price-card-head{background:linear-gradient(135deg,#e30613,#b3050f);color:#fff;padding:18px 24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
.price-card-head h3{color:#fff;margin:0;font-size:1.05rem;display:inline-flex;align-items:center;gap:10px}
.price-card-head h3 i{opacity:.9}
.price-card-head .price-date{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.18);padding:6px 14px;border-radius:50px;font-weight:600;font-size:.85rem}

.price-table-scroll{overflow-x:auto}
.price-table{width:100%;border-collapse:collapse;min-width:640px}
.price-table th{background:#fafbfc;color:#0c2340;font-weight:700;padding:14px 20px;text-align:left;font-size:.82rem;text-transform:uppercase;letter-spacing:.5px;border-bottom:2px solid #eef0f3;white-space:nowrap}
.price-table th small{display:block;font-weight:500;font-size:.72rem;color:#8a8f98;text-transform:none;letter-spacing:0;margin-top:2px}
.price-table td{padding:16px 20px;border-bottom:1px solid #f1f3f6;vertical-align:middle;font-size:.95rem}
.price-table tbody tr:last-child td{border-bottom:0}
.price-table tbody tr:hover{background:#fafbfc}
.price-table .col-new,.price-table .td-new{text-align:right}
.price-table .col-old,.price-table .td-old{text-align:right}
.price-table .col-adj,.price-table .td-adjust{text-align:right}
.price-table .td-product{font-weight:600;color:#0c2340;white-space:nowrap}
.price-table .td-product .prod-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:10px;vertical-align:middle}
.price-table .td-product .prod-dot-up{background:#dc2626}
.price-table .td-product .prod-dot-down{background:#16a34a}
.price-table .td-product .prod-dot-flat{background:#9ca3af}
.price-table .td-new{font-weight:800;color:#e30613;font-size:1.1rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.price-table .td-old{color:#6b7280;text-decoration:line-through;font-variant-numeric:tabular-nums;white-space:nowrap}
.price-table .td-adjust{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.price-table .td-adjust.up{color:#dc2626}
.price-table .td-adjust.down{color:#16a34a}
.price-table .td-adjust.flat{color:#9ca3af}
.price-table .td-adjust .adj-arrow{margin-right:4px;font-size:.8rem}

.price-note{margin:0;padding:14px 24px;background:#fafbfc;color:#6b7280;font-size:.85rem;border-top:1px solid #f1f3f6;display:flex;align-items:center;gap:8px}
.price-note i{color:#e30613}
.price-empty{padding:60px 20px;text-align:center;color:#6b7280}

/* ================= About ================= */
.about-section{padding:72px 0;background:#fff}
.about-grid{max-width:1240px;margin:0 auto;padding:0 20px;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.about-image{position:relative}
.about-image img{width:100%;border-radius:16px;box-shadow:0 20px 50px rgba(0,0,0,.12);display:block}
.about-image .float-card{position:absolute;left:-20px;bottom:-20px;background:#fff;border-radius:14px;box-shadow:0 18px 40px rgba(0,0,0,.12);padding:18px 22px;display:flex;align-items:center;gap:14px;border-left:4px solid #e30613}
.about-image .float-card i{font-size:1.8rem;color:#e30613}
.about-image .float-card strong{display:block;font-size:1.5rem;color:#0c2340;line-height:1}
.about-image .float-card span{display:block;font-size:.82rem;color:#6b7280;margin-top:4px}
.about-content .kicker{display:inline-block;color:#e30613;font-weight:700;letter-spacing:2px;text-transform:uppercase;font-size:.82rem;margin-bottom:10px;background:#fff3f3;padding:6px 14px;border-radius:50px}
.about-content h2{font-size:1.95rem;margin:0 0 16px;color:#0c2340;line-height:1.3}
.about-content .lead{color:#555;line-height:1.75;margin-bottom:18px;font-size:1.02rem}
.about-content .lead p{margin:0 0 10px}
.about-features{list-style:none;padding:0;margin:0 0 24px}
.about-features li{display:flex;gap:12px;align-items:flex-start;padding:10px 0;color:#444;line-height:1.6}
.about-features li i{color:#16a34a;font-size:1.15rem;flex-shrink:0;margin-top:2px}
.about-features li strong{color:#0c2340}
.about-btn{display:inline-flex;align-items:center;gap:8px;margin-top:8px;background:#e30613;color:#fff;padding:13px 28px;border-radius:50px;font-weight:600;transition:.25s;border:0}
.about-btn:hover{background:#b3050f;color:#fff;gap:14px}

/* About — Stats section */
.stats-section{padding:60px 0;background:linear-gradient(135deg,#0c2340,#1a3a6b);color:#fff}
.stats-section .container{max-width:1240px;margin:0 auto;padding:0 20px}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;text-align:center}
.stat-item{padding:18px 10px}
.stat-item .num{font-size:3rem;font-weight:800;color:#fff;line-height:1;font-variant-numeric:tabular-nums}
.stat-item .num small{font-size:1.6rem;color:#e30613;font-weight:800;margin-left:2px}
.stat-item .lbl{display:block;margin-top:8px;color:#d7deea;font-weight:500;font-size:.95rem;letter-spacing:.5px}

/* About — Mission / Vision / Values */
.adv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.adv-item{background:#fff;border-radius:16px;padding:34px 28px;box-shadow:0 6px 25px rgba(0,0,0,.06);text-align:center;transition:.3s;border-top:4px solid #e30613}
.adv-item:hover{transform:translateY(-6px);box-shadow:0 18px 45px rgba(0,0,0,.12)}
.adv-item .icon{width:64px;height:64px;display:grid;place-items:center;margin:0 auto 20px;background:linear-gradient(135deg,#0b5fa8,#083d6b);color:#fff;border-radius:16px;font-size:1.55rem;box-shadow:0 10px 24px rgba(11,95,168,.22);transition:transform .3s}
.adv-item:hover .icon{transform:scale(1.08) rotate(-4deg)}
.adv-item h3{margin:0 0 10px;font-size:1.2rem;color:#0c2340}
.adv-item p{color:#666;margin:0;line-height:1.65;font-size:.95rem}

/* ================= Store stats ================= */
.store-stats{background:linear-gradient(135deg,#0c2340,#1a3a6b);padding:60px 0;color:#fff}
.store-stats-inner{max-width:1240px;margin:0 auto;padding:0 20px;display:grid;grid-template-columns:repeat(3,1fr) auto;gap:30px;align-items:center}
.store-stat{text-align:center}
.store-stat-number{font-size:2.8rem;font-weight:800;color:#fff;line-height:1}
.store-stat-label{display:block;margin-top:6px;color:#d7deea;font-weight:500;font-size:.9rem;letter-spacing:.5px}
.store-map-link{display:inline-flex;align-items:center;gap:8px;background:#e30613;color:#fff;padding:14px 24px;border-radius:50px;font-weight:600;white-space:nowrap;transition:.25s}
.store-map-link:hover{background:#fff;color:#e30613}

/* ================= Fields of operation ================= */
.fields-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.field-card{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 5px 25px rgba(0,0,0,.06);transition:.3s;display:flex;flex-direction:column}
.field-card:hover{transform:translateY(-6px);box-shadow:0 15px 40px rgba(0,0,0,.12)}
.field-card > img{width:100%;height:220px;object-fit:cover;object-position:center;display:block;flex-shrink:0}
.field-card-body{padding:26px;flex:1}
.field-card-body h3{margin:0 0 10px;font-size:1.15rem;color:#e30613;letter-spacing:1px}
.field-card-body p{color:#555;margin:0;line-height:1.65;font-size:.95rem}

/* ================= Advantages ================= */
.advantages-section{padding:0;background:linear-gradient(180deg,#f7f8fa 0%,#eef1f5 100%)}
.advantages-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.advantage-item{position:relative;padding:32px 28px 28px;border-radius:18px;background:#fff;box-shadow:0 4px 20px rgba(0,0,0,.06);transition:.35s;overflow:hidden;border:1.5px solid transparent}
.advantage-item:hover{transform:translateY(-6px);box-shadow:0 16px 45px rgba(0,0,0,.12);border-color:currentColor}
.advantage-item:nth-child(1){color:#e30613}
.advantage-item:nth-child(2){color:#0b5fa8}
.advantage-item:nth-child(3){color:#1f8f4d}
.adv-number{position:absolute;top:-4px;left:16px;font-size:5.5rem;font-weight:900;line-height:1;color:inherit;opacity:.1;font-family:Be Vietnam Pro,sans-serif;pointer-events:none;letter-spacing:-3px}
.adv-icon{position:absolute;top:20px;right:20px;width:48px;height:48px;display:grid;place-items:center;place-content:center;border-radius:12px;font-size:1.2rem;box-shadow:0 6px 18px rgba(0,0,0,.16);color:#fff}
.advantage-item:nth-child(1) .adv-icon{background:#e30613}
.advantage-item:nth-child(2) .adv-icon{background:#0b5fa8}
.advantage-item:nth-child(3) .adv-icon{background:#1f8f4d}
.adv-body{position:relative;z-index:1;padding-top:52px}
.adv-body h3{margin:0 0 10px;font-size:1.1rem;color:#1a1a2e;font-weight:700;letter-spacing:0;text-transform:none}
.adv-body p{color:#555;margin:0;font-size:.9rem;line-height:1.65}

/* ================= News (home) ================= */
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.news-card{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 5px 20px rgba(0,0,0,.06);transition:.3s;display:flex;flex-direction:column}
.news-card:hover{transform:translateY(-6px);box-shadow:0 15px 40px rgba(0,0,0,.12)}
.news-card a{display:flex;flex-direction:column;color:inherit;height:100%}
.news-card img{width:100%;height:200px;object-fit:cover;display:block}
.news-card-body{padding:22px;flex:1;display:flex;flex-direction:column}
.news-date{font-size:.8rem;color:#888;margin-bottom:8px}
.news-date i{color:#e30613;margin-right:4px}
.news-card h3{margin:0 0 10px;font-size:1.05rem;line-height:1.4;color:#0c2340}
.news-card:hover h3{color:#e30613}
.news-card p{color:#666;font-size:.9rem;margin:0;flex:1}

/* ================= Partners ================= */
.partners-section{padding:0;background:#fff;border-top:1px solid #eef0f3}
.partners-section .section-wrap{padding-top:46px;padding-bottom:46px}
.partners-section .section-header{margin-bottom:24px}
.partners-row{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;align-items:center}
.partner-item{height:96px;padding:12px 16px;text-align:center;background:#fff;border:1px solid #eef0f3;border-radius:14px;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(12,35,64,.04);transition:.25s}
.partner-item img{width:100%;max-width:168px;max-height:66px;height:auto;object-fit:contain;display:block;filter:grayscale(.08);transition:.25s}
.partner-item:hover{transform:translateY(-2px);border-color:#ffd6d9;box-shadow:0 10px 26px rgba(12,35,64,.08)}
.partner-item:hover img{filter:none}
.partner-placeholder{padding:22px 10px;color:#555;font-weight:700;background:#f7f8fa;border-radius:12px;transition:.3s;border:1px solid #eef0f3}
.partner-item:hover .partner-placeholder{background:#e30613;color:#fff;border-color:#e30613}

/* ================= CTA ================= */
.cta-section{padding:64px 0;background:linear-gradient(135deg,#e30613,#b3050f);color:#fff;text-align:center}
.cta-section .container{max-width:1240px;margin:0 auto;padding:0 20px}
.cta-section h2{color:#fff;margin:0 0 10px;font-size:1.85rem}
.cta-section > .container > p{color:#ffe6e8;margin:0 auto 22px;max-width:680px}
.cta-inner{max-width:1240px;margin:0 auto;padding:0 20px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:24px}
.cta-text h3{color:#fff;margin:0 0 6px;font-size:1.6rem}
.cta-text p{margin:0;color:#ffe6e8}
.cta-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.cta-btn{display:inline-flex;align-items:center;gap:8px;padding:14px 24px;border-radius:50px;font-weight:700;transition:.25s}
.cta-btn.primary{background:#fff;color:#e30613}
.cta-btn.primary:hover{background:#0c2340;color:#fff}
.cta-btn.secondary{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.8)}
.cta-btn.secondary:hover{background:#fff;color:#e30613;border-color:#fff}

/* ================= Hero caption (front-page) ================= */
.hero-slide.active{opacity:1;z-index:1}
.hero-caption{position:relative;z-index:2;max-width:1240px;width:100%;margin:0 auto;padding:0 20px;color:#fff}
.hero-caption-inner{max-width:680px}
.hero-caption h2{color:#fff;font-size:2.8rem;font-weight:800;margin:0 0 14px;text-shadow:0 2px 20px rgba(0,0,0,.35)}
.hero-caption p{color:#f0f0f0;font-size:1.05rem;margin-bottom:22px;max-width:560px}
.hero-btn{display:inline-flex;align-items:center;gap:8px;background:#e30613;color:#fff;padding:14px 28px;border-radius:50px;font-weight:700;transition:.25s}
.hero-btn:hover{background:#fff;color:#e30613;gap:14px}
.hero-nav .hero-prev,.hero-nav .hero-next{width:46px;height:46px;border-radius:50%;border:2px solid rgba(255,255,255,.6);background:rgba(255,255,255,.15);color:#fff;cursor:pointer;transition:.3s;font-size:1.1rem}
.hero-nav .hero-prev:hover,.hero-nav .hero-next:hover{background:#e30613;border-color:#e30613}

/* ================= Inner Page Hero ================= */
.page-hero{background-size:cover;background-position:center;color:#fff;padding:80px 0;text-align:center;position:relative}
.page-hero-inner{max-width:1240px;margin:0 auto;padding:0 20px;position:relative;z-index:2}
.page-hero h1{color:#fff;font-size:2.5rem;margin:0 0 14px}
.page-hero p{color:#eee;max-width:720px;margin:0 auto 14px}
.qd-breadcrumb{display:inline-flex;align-items:center;gap:10px;font-size:.9rem;color:#ddd;background:rgba(0,0,0,.3);padding:8px 20px;border-radius:50px}
.qd-breadcrumb a{color:#fff}
.qd-breadcrumb a:hover{color:#e30613}
.qd-breadcrumb .current{color:#ffcfd3}

/* ================= Branches ================= */
.branches-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:30px}
.branch-card{background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 5px 20px rgba(0,0,0,.06);display:grid;grid-template-columns:260px 1fr;transition:.3s}
.branch-card:hover{box-shadow:0 15px 40px rgba(0,0,0,.12)}
.branch-card .img{background:#0c2340 center/cover no-repeat;min-height:200px;position:relative}
.branch-card .img .type-tag{position:absolute;top:12px;left:12px;background:#e30613;color:#fff;padding:4px 12px;border-radius:50px;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:1px}
.branch-card .body{padding:22px}
.branch-card h3{margin:0 0 12px;font-size:1.15rem}
.branch-info{list-style:none;padding:0;margin:0;font-size:.9rem}
.branch-info li{display:flex;gap:10px;align-items:flex-start;margin-bottom:8px;color:#555}
.branch-info li i{color:#e30613;margin-top:4px;width:14px}
.branch-actions{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap}
.branch-actions a{font-size:.85rem;padding:8px 16px;border-radius:50px}
.branches-filter{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:40px}
.branches-filter a{padding:10px 20px;border-radius:50px;background:#fff;color:#0c2340;font-weight:600;border:2px solid #eef0f3}
.branches-filter a.is-active,.branches-filter a:hover{background:#e30613;color:#fff;border-color:#e30613}

/* ================= Blog ================= */
.blog-layout{display:grid;grid-template-columns:1fr 320px;gap:40px}
.post-list{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.post-card{background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 4px 18px rgba(0,0,0,.06);transition:.3s;display:flex;flex-direction:column}
.post-card:hover{transform:translateY(-4px);box-shadow:0 15px 35px rgba(0,0,0,.1)}
.post-card .thumb{height:200px;background:#f0f0f0 center/cover no-repeat}
.post-card .body{padding:20px;display:flex;flex-direction:column;flex:1}
.post-card h3{font-size:1.05rem;margin:0 0 10px;line-height:1.4}
.post-card h3 a{color:#0c2340}
.post-card h3 a:hover{color:#e30613}
.post-meta{display:flex;gap:14px;font-size:.82rem;color:#888;margin-bottom:10px;flex-wrap:wrap}
.post-meta i{margin-right:4px;color:#e30613}
.post-excerpt{color:#666;font-size:.92rem;margin-bottom:12px;flex:1}

/* Single post */
.single-post{background:#fff;padding:40px;border-radius:14px;box-shadow:0 4px 18px rgba(0,0,0,.06)}
.single-post h1{font-size:2rem;margin-bottom:14px}
.single-post .featured{border-radius:12px;margin-bottom:24px;overflow:hidden}
.single-post .content p{margin-bottom:1.2em}
.single-post .content h2,.single-post .content h3{margin:1.4em 0 .6em}
.single-post .content img{border-radius:10px;margin:1em 0}
.single-post .content blockquote{border-left:4px solid #e30613;padding:12px 20px;margin:1.2em 0;background:#f7f8fa;font-style:italic;color:#555}

.qd-share{display:flex;align-items:center;gap:10px;margin:30px 0;padding:18px 0;border-top:1px solid #eee;border-bottom:1px solid #eee}
.qd-share a{width:38px;height:38px;border-radius:50%;background:#f0f2f5;color:#0c2340;display:grid;place-items:center}
.qd-share a:hover{background:#e30613;color:#fff}

.related-posts{margin-top:40px}
.related-posts h3{margin-bottom:20px}

/* Sidebar */
.blog-sidebar .widget{background:#fff;border-radius:12px;padding:24px;margin-bottom:24px;box-shadow:0 4px 18px rgba(0,0,0,.05)}
.blog-sidebar .widget-title{font-size:1.05rem;margin:0 0 14px;padding-bottom:10px;border-bottom:2px solid #e30613;display:inline-block}
.blog-sidebar ul{list-style:none;padding:0;margin:0}
.blog-sidebar li{padding:8px 0;border-bottom:1px dashed #eee}
.blog-sidebar li:last-child{border-bottom:0}
.blog-sidebar a{color:#0c2340;font-weight:500}
.blog-sidebar a:hover{color:#e30613}
.recent-post-mini{display:flex;gap:12px;margin-bottom:14px}
.recent-post-mini .thumb{width:70px;height:70px;flex-shrink:0;background:#f0f0f0 center/cover;border-radius:8px}
.recent-post-mini h4{font-size:.9rem;margin:0 0 4px;line-height:1.4}
.recent-post-mini time{font-size:.75rem;color:#888}

/* Search form */
.search-widget form{display:flex;border:2px solid #eee;border-radius:50px;overflow:hidden}
.search-widget input{flex:1;border:0;padding:10px 16px;outline:none;font:inherit}
.search-widget button{border:0;background:#e30613;color:#fff;padding:0 18px;cursor:pointer}

/* Pagination */
.qd-pagination{margin:40px 0;text-align:center}
.qd-pagination .page-numbers{display:inline-grid;place-items:center;min-width:42px;height:42px;padding:0 14px;margin:0 4px;border-radius:8px;background:#fff;color:#0c2340;font-weight:600;box-shadow:0 2px 8px rgba(0,0,0,.05)}
.qd-pagination .page-numbers.current,.qd-pagination .page-numbers:hover{background:#e30613;color:#fff}

/* Comments */
.comments-area{margin-top:40px;background:#fff;padding:30px;border-radius:12px;box-shadow:0 4px 18px rgba(0,0,0,.05)}
.comments-area h3{margin-bottom:20px}
.comment-list{list-style:none;padding:0}
.comment-list li{margin-bottom:20px;padding:18px;background:#f7f8fa;border-radius:10px}
.comment-form input,.comment-form textarea{width:100%;padding:12px 16px;border:2px solid #eef0f3;border-radius:8px;font:inherit;margin-bottom:14px;outline:none}
.comment-form input:focus,.comment-form textarea:focus{border-color:#e30613}

/* ================= Contact ================= */
.contact-layout{display:grid;grid-template-columns:1fr 1.5fr;gap:40px}
.contact-info{background:linear-gradient(135deg,#0c2340,#1a3a6b);color:#fff;padding:40px;border-radius:16px}
.contact-info h3{color:#fff;margin-bottom:20px}
.contact-info ul{list-style:none;padding:0;margin:0}
.contact-info li{display:flex;gap:14px;align-items:flex-start;margin-bottom:20px}
.contact-info li i{width:40px;height:40px;display:grid;place-items:center;background:rgba(255,255,255,.1);border-radius:50%;color:#e30613;flex-shrink:0}
.contact-info strong{display:block;margin-bottom:4px}
.contact-info span{color:#d7deea;font-size:.92rem}

.contact-form-box{background:#fff;padding:40px;border-radius:16px;box-shadow:0 4px 18px rgba(0,0,0,.06)}
.contact-form-box h3{margin-bottom:10px}
.contact-form-box .note{color:#888;margin-bottom:24px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.qd-form .field{margin-bottom:16px}
.qd-form label{display:block;font-weight:600;margin-bottom:6px;color:#0c2340;font-size:.9rem}
.qd-form input,.qd-form textarea,.qd-form select{width:100%;padding:12px 16px;border:2px solid #eef0f3;border-radius:8px;font:inherit;outline:none;transition:.2s}
.qd-form input:focus,.qd-form textarea:focus,.qd-form select:focus{border-color:#e30613}
.qd-form textarea{resize:vertical;min-height:120px}
.qd-form .msg{margin-top:14px;padding:12px 16px;border-radius:8px;font-size:.9rem;display:none}
.qd-form .msg.ok{background:#dcfce7;color:#166534;display:block}
.qd-form .msg.err{background:#fee2e2;color:#991b1b;display:block}

.map-section{margin-top:40px;border-radius:16px;overflow:hidden;box-shadow:0 5px 20px rgba(0,0,0,.08)}
.map-section iframe{width:100%;height:420px;border:0;display:block}

/* ================= Footer ================= */
.site-footer{background:#0c2340;color:#d7deea;padding:70px 0 0;position:relative}
.site-footer::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#e30613,#ff5252,#e30613)}
.footer-inner{max-width:1240px;margin:0 auto;padding:0 20px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;margin-bottom:40px}
.footer-col h4{color:#fff;font-size:1.05rem;margin:0 0 18px;position:relative;padding-bottom:10px}
.footer-col h4::after{content:"";position:absolute;bottom:0;left:0;width:40px;height:2px;background:#e30613}
.footer-col ul{list-style:none;padding:0;margin:0}
.footer-col li{padding:6px 0}
.footer-col a{color:#d7deea}
.footer-col a:hover{color:#e30613;padding-left:5px}
.footer-logo{font-size:1.35rem;font-weight:800;color:#fff;margin-bottom:16px}
.footer-logo i{color:#e30613;margin-right:8px}
.footer-brand p{color:#a1acbf;font-size:.92rem;margin-bottom:20px}
.footer-social{display:flex;gap:10px}
.footer-social a{width:38px;height:38px;display:grid;place-items:center;background:rgba(255,255,255,.08);color:#fff;border-radius:50%}
.footer-social a:hover{background:#e30613;color:#fff}
.footer-contact li{display:flex;gap:10px;align-items:flex-start}
.footer-contact li i{color:#e30613;margin-top:5px;width:14px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding:20px 0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;color:#8a93a8;font-size:.88rem}

/* Sticky contact */
.sticky-contact{position:fixed;right:20px;bottom:30px;display:flex;flex-direction:column;gap:10px;z-index:99}
.sticky-btn{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;color:#fff;box-shadow:0 6px 20px rgba(0,0,0,.2);border:0;cursor:pointer;font-size:1.1rem;transition:.25s}
.sticky-btn.phone{background:#16a34a}
.sticky-btn.phone::before{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid #16a34a;animation:ring 2s infinite}
.sticky-btn.phone{position:relative}
.sticky-btn.zalo{background:#0068ff}
.sticky-btn.back-to-top{background:#e30613;opacity:0;visibility:hidden}
.sticky-btn.back-to-top.show{opacity:1;visibility:visible}
.sticky-btn:hover{transform:scale(1.1)}
@keyframes ring{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.6)}}

/* ================= 404 ================= */
.error-404{padding:100px 0;text-align:center}
.error-404 h1{font-size:8rem;color:#e30613;margin:0}
.error-404 h2{margin-bottom:16px}
.error-404 p{color:#666;max-width:500px;margin:0 auto 24px}

/* ================= Responsive ================= */
@media (max-width:1024px){
    .header-inner{gap:12px;justify-content:space-between}
    .header-search{display:none}
    .header-cta{display:none}
    .main-nav{display:none}
    .mobile-toggle{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
    .site-logo{flex-shrink:0}
    .main-nav.is-open{display:block;position:absolute;top:100%;left:0;right:0;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.1);z-index:99}
    .main-nav.is-open ul{flex-direction:column;gap:0;padding:10px}
    .main-nav.is-open a{padding:12px 16px;border-bottom:1px solid #f0f0f0}
    .hero-content h1,.hero-caption h2{font-size:2.1rem}
    .about-grid{grid-template-columns:1fr;gap:40px}
    .stats-grid{grid-template-columns:repeat(3,1fr);gap:20px}
    .adv-grid{grid-template-columns:1fr;gap:20px}
    .fields-grid,.advantages-grid,.news-grid{grid-template-columns:repeat(2,1fr)}
    .blog-layout{grid-template-columns:1fr}
    .contact-layout{grid-template-columns:1fr}
    .branches-grid{grid-template-columns:1fr}
    .branch-card{grid-template-columns:1fr}
    .partners-row{grid-template-columns:repeat(3,1fr);gap:12px}
    .partner-item{height:88px;padding:10px 14px}
    .partner-item img{max-width:154px;max-height:58px}
    .footer-grid{grid-template-columns:1fr 1fr}
    .store-stats-inner{grid-template-columns:repeat(3,1fr);gap:20px}
    .store-map-link{grid-column:1/-1;justify-self:center}
    .section-header .section-more{position:static;transform:none;display:inline-flex;margin-top:10px}
}
@media (max-width:768px){
    .section,.section-wrap{padding:48px 20px}
    .about-section,.price-section,.cta-section{padding:48px 0}
    h1{font-size:1.8rem}
    h2{font-size:1.45rem}
    .hero-slider{height:420px}
    .hero-caption h2{font-size:1.6rem}
    .hero-caption p{font-size:.9rem}
    .hero-nav{bottom:16px;right:16px}
    .hero-dots{bottom:20px}

    .price-section-inner{padding:0 16px}
    .price-header{flex-direction:column;align-items:flex-start;gap:14px}
    .price-title-wrap{gap:10px}
    .price-title-logo{height:calc((1.45rem * 1.25) + 5px + (.9rem * 1.25))!important;max-width:70px}
    .price-header h2{font-size:1.45rem}
    .price-header h2 span{font-size:.9rem;letter-spacing:1.2px;margin-top:5px}
    .price-card-head{padding:14px 16px}
    .price-card-head h3{font-size:.95rem}
    .price-card-head .price-date{font-size:.75rem;padding:5px 12px}
    .price-note{padding:12px 16px;font-size:.8rem}

    /* Price table on mobile: keep table structure, allow horizontal scroll */
    .price-table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
    .price-table{min-width:560px}
    .price-table th,.price-table td{padding:12px 14px;font-size:.88rem}
    .price-table .td-new{font-size:1rem}
    .price-table .td-product{font-size:.92rem}
    .price-table td[data-label]::before{content:none}

    .store-stats-inner{grid-template-columns:1fr 1fr;gap:20px 16px}
    .store-stat-number{font-size:2.2rem}
    .fields-grid,.advantages-grid,.news-grid,.post-list{grid-template-columns:1fr}
    .field-card > img{height:200px}
    .partners-section .section-wrap{padding-top:40px;padding-bottom:40px}
    .partners-row{grid-template-columns:repeat(2,1fr);gap:10px}
    .partner-item{height:82px;padding:10px 12px}
    .partner-item img{max-width:142px;max-height:54px}
    .footer-grid{grid-template-columns:1fr}
    .form-row{grid-template-columns:1fr}
    .site-logo img{max-height:44px}
    .site-logo-text{font-size:1.3rem}
    .cta-inner{flex-direction:column;text-align:center}
    .cta-actions{justify-content:center}
    .single-post{padding:22px}

    /* Single blog detail mobile: stronger widening + readability */
    .is-blog-single .section{padding:20px 0 !important}
    .is-blog-single .section .container{padding:0 6px !important}
    .is-blog-single .single-post{padding:8px !important;border-radius:10px}
    .is-blog-single .single-post .content{font-size:1.08rem;line-height:1.8}
    .is-blog-single .single-post h1{font-size:1.56rem;line-height:1.4}
    .is-blog-single .single-post .content h2{font-size:1.32rem;line-height:1.45}
    .is-blog-single .single-post .content h3{font-size:1.16rem;line-height:1.45}
    .is-blog-single .single-post .content p{margin-bottom:1.15em}
    .is-blog-single .single-post .featured{margin:0 0 14px;border-radius:8px;overflow:hidden}

    /* Sticky contact mobile */
    .sticky-contact{right:14px;bottom:18px;gap:8px}
    .sticky-btn{width:46px;height:46px;font-size:1rem}

    /* About page mobile */
    .about-section{padding:48px 0}
    .about-image .float-card{left:10px;bottom:-14px;padding:14px 16px}
    .about-image .float-card i{font-size:1.4rem}
    .about-image .float-card strong{font-size:1.2rem}
    .about-content h2{font-size:1.45rem}
    .about-content .lead{font-size:.95rem}
    .stats-section{padding:42px 0}
    .stats-grid{grid-template-columns:1fr;gap:18px}
    .stat-item{padding:8px}
    .stat-item .num{font-size:2.4rem}
    .stat-item .num small{font-size:1.3rem}
    .adv-grid{grid-template-columns:1fr;gap:18px}
    .adv-item{padding:24px 20px}
    .cta-section{padding:46px 0}
    .cta-section h2{font-size:1.4rem}
}
@media (max-width:420px){
    .price-title-wrap{gap:8px}
    .price-title-logo{height:calc((1.25rem * 1.25) + 4px + (.78rem * 1.25))!important;max-width:58px}
    .price-header h2{font-size:1.25rem}
    .price-header h2 span{font-size:.78rem;letter-spacing:.8px;margin-top:4px}
    .partners-row{grid-template-columns:repeat(2,1fr)}
    .partner-item{height:76px;padding:8px 10px}
    .partner-item img{max-width:128px;max-height:50px}
    .store-stats-inner{grid-template-columns:1fr 1fr}
    .hero-caption h2{font-size:1.35rem}
}