/* =========================================================
   Vietnam Travels - custom stylesheet
   Design tokens are declared in includes/head.php (critical,
   inline). This file holds everything below-the-fold plus
   component styling: hero/parallax, columns, tiles, tables,
   accordions, buttons, footer, menu.
   ========================================================= */

@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/montserrat-500.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/montserrat-600.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/montserrat-800.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:900;font-display:swap;src:url(../fonts/montserrat-900.woff2) format('woff2')}

/* ---------- Base & typography ---------- */
h1,h2,h3,h4,h5,h6{font-family:'Montserrat',Arial,sans-serif;font-weight:700;color:#1c2b28}
h1{font-weight:800}
h2{font-weight:700;font-size:1.9rem;margin-bottom:1rem}
h3{font-weight:600;font-size:1.3rem}
.lead{font-weight:500}
.text-primary{color:var(--text-primary)!important}
.fw-900{font-weight:900!important}
.fw-800{font-weight:800!important}
.section-eyebrow{text-transform:uppercase;letter-spacing:.08em;font-weight:700;font-size:.8rem;color:var(--accent-2)}

/* ---------- Icons ---------- */
.fa-solid,.fa-regular{color:var(--icon-color)}
.footer i,.parallax-cta i,.accordion-button i,.benefit-icon i{color:inherit}

/* ---------- Buttons ---------- */
.btn-primary{background-color:var(--btn-bg);border-color:var(--btn-bg);color:#ffffff;font-weight:700;padding:.7rem 1.6rem;border-radius:4px;transition:all .2s ease}
.btn-primary:hover,.btn-primary:focus{background-color:var(--accent-2);border-color:var(--accent-2);color:#000}
.btn-outline-primary{border-color:var(--accent-1);background-color:var(--accent-1);color:#fff;font-weight:700;border-radius:4px}
.btn-outline-primary:hover{background-color:var(--accent-2);border-color:var(--accent-2);color:#fff}
.btn-outline-light{border-radius:4px;font-weight:700}
.btn-lg{padding:.85rem 2rem;font-size:1.05rem}

/* ---------- Top bar / logo ---------- */
.top-bar .contact-info a{white-space:nowrap}

/* ---------- Main navigation ---------- */
.main-nav .navbar-toggler{border-color:rgba(255,255,255,.5)}
.main-nav .navbar-toggler-icon{filter:invert(1) brightness(2)}
.main-nav .nav-item{position:relative}
.main-nav .nav-link{position:relative}
.main-nav .nav-link::after{content:"";position:absolute;left:16px;right:16px;bottom:8px;height:2px;background:var(--accent-2);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.main-nav .nav-link:hover::after,.main-nav .nav-link.active::after{transform:scaleX(1)}
.main-nav .nav-link.active{color:#fff!important}
.main-nav .dropdown-toggle::after{vertical-align:.15em}
.main-nav .dropdown-menu{background:#fff;border:none;border-radius:0 0 6px 6px;box-shadow:0 12px 28px rgba(0,0,0,.18);padding:14px;margin-top:0}
.dropdown-menu-cols{min-width:280px;column-count:1}
@media(min-width:576px){.dropdown-menu-cols{min-width:520px;column-count:2;column-gap:8px}}
.dropdown-menu-cols li{break-inside:avoid}
.dropdown-menu .dropdown-item{color:var(--link-color);font-weight:500;padding:.45rem .6rem;border-radius:4px;white-space:normal}
.dropdown-menu .dropdown-item:hover,.dropdown-menu .dropdown-item:focus{background:#f2efe6;color:var(--link-hover)}
.dropdown-view-all{column-span:all;border-top:1px solid #eee;margin-top:6px;padding-top:6px}
.dropdown-view-all .dropdown-item{font-weight:700;color:var(--accent-2)}
@media(min-width:992px){
  .main-nav .navbar-nav{display:flex;flex-direction:row;justify-content:space-between;width:100%}
}

/* ---------- Generic page header (subpages) ---------- */
.page-header{background:var(--accent-1);color:#fff;padding:44px 0}
.page-header h1{color:#fff;margin-bottom:6px;font-size:1.9rem}
@media(min-width:768px){.page-header h1{font-size:2.4rem}}
.page-header p{margin-bottom:0;font-weight:500;opacity:.92;max-width:720px}

/* ---------- Breadcrumbs ---------- */
.breadcrumb-bar{background:#f5f4ef;padding:10px 0;border-bottom:1px solid #e7e5df}
.breadcrumb{font-size:.85rem;margin-bottom:0}
.breadcrumb-item+.breadcrumb-item::before{color:#999}
.breadcrumb-item.active{color:#6b6b63}

/* ---------- Hero extras (base rules are in critical CSS) ---------- */
.hero-content{width:100%}
@media(min-width:992px){.hero-content{min-width:1000px;max-width:1100px}}
.hero .btn{margin-top:8px}
.hero h1,.hero p{color:#fff}

/* ---------- Sections & background diversification ---------- */
.section{padding:64px 0}
@media(max-width:767.98px){.section{padding:44px 0}}
.section-white{background:#ffffff}
.section-muted{background:#f6f5f0}
.section-tint-green{background:#eef3f2}
.section-tint-gold{background:#faf6ea}
.section-dark{background:var(--accent-1);color:#fff}
.section-dark h2,.section-dark h3{color:#fff}

/* ---------- 2-column split sections (About/Offer/Benefits) ---------- */
.split-section .split-media img{border-radius:8px;box-shadow:0 18px 40px rgba(15,40,36,.18);width:100%}
.split-section .split-text h2{margin-bottom:18px}
.split-section .split-text p{margin-bottom:16px}

/* ---------- Benefits list ---------- */
.benefit-item{display:flex;gap:14px;margin-bottom:20px}
.benefit-item .benefit-icon{flex:0 0 46px;height:46px;width:46px;border-radius:50%;background:var(--accent-1);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.1rem}
.benefit-item h3{margin-bottom:4px;font-size:1.05rem}
.benefit-item p{margin-bottom:0;color:#4b4b46}

/* ---------- Parallax CTA ---------- */
.parallax-cta{position:relative;padding:90px 0;text-align:center;color:#fff;background-color:var(--accent-1);background-size:cover;background-position:center;background-repeat:no-repeat;background-attachment:fixed;isolation:isolate}
.parallax-cta::before{content:"";position:absolute;inset:0;background:rgba(10,25,22,.62);z-index:0}
.parallax-cta .container{position:relative;z-index:1}
@media(max-width:991.98px){.parallax-cta{background-attachment:scroll}}
.parallax-cta h2{color:#fff;font-weight:800;font-size:2.1rem;margin-bottom:14px}
.parallax-cta p{font-size:1.1rem;margin-bottom:26px;font-weight:500}

/* ---------- Tiles / Cards (tours, places, tips) ---------- */
.tile-card{background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 8px 24px rgba(20,40,36,.08);height:100%;display:flex;flex-direction:column;transition:transform .25s ease,box-shadow .25s ease;border:1px solid #edece5}
.tile-card:hover{transform:translateY(-6px);box-shadow:0 18px 34px rgba(20,40,36,.16)}
.tile-card .tile-img{aspect-ratio:4/3;overflow:hidden}
.tile-card .tile-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.tile-card:hover .tile-img img{transform:scale(1.06)}
.tile-card .tile-body{padding:20px;display:flex;flex-direction:column;flex-grow:1}
.tile-card .tile-body h3{font-size:1.1rem;margin-bottom:8px}
.tile-card .tile-body p{color:#4b4b46;font-size:.93rem;flex-grow:1}
.tile-price{font-weight:800;color:var(--accent-1);font-size:1.15rem;margin:10px 0}
.tile-price span{font-weight:500;font-size:.8rem;color:#6b6b63}
.tile-meta{font-size:.82rem;color:#6b6b63;font-weight:600;margin-bottom:8px}
.tile-meta i{margin-right:6px}

/* ---------- Card header (Bootstrap card component) ---------- */
.card-header{background:var(--card-header-bg)!important;color:#fff;font-weight:700}

/* ---------- Accordion ---------- */
.accordion-button{background:var(--accordion-bg);color:var(--accordion-text);font-weight:600;box-shadow:none}
.accordion-button:not(.collapsed){background:var(--accordion-bg);color:var(--accordion-text)}
.accordion-button::after{filter:invert(1) brightness(2)}
.accordion-button:focus{box-shadow:0 0 0 3px rgba(148,114,0,.3)}
.accordion-item{border:1px solid #e9e6da;margin-bottom:10px;border-radius:6px!important;overflow:hidden}
.accordion-body{background:#fff;color:#2c2c2c}

/* ---------- Tables ---------- */
.table-vt{width:100%;border-collapse:collapse}
.table-vt th,.table-vt td{padding:12px 14px;border:1px solid #e9e6da;vertical-align:top}
.table-vt th{background:var(--card-header-bg);color:#fff;font-weight:700;text-align:left}
.table-vt tr:nth-child(even) td{background:#f7f6f1}

/* ---------- Includes / excludes lists ---------- */
.list-check{list-style:none;padding-left:0;margin-bottom:0}
.list-check li{padding-left:28px;position:relative;margin-bottom:10px}
.list-check li::before{content:"\f00c";font-family:"Font Awesome 6 Free";font-weight:900;color:var(--accent-1);position:absolute;left:0;top:2px}
.list-cross{list-style:none;padding-left:0;margin-bottom:0}
.list-cross li{padding-left:28px;position:relative;margin-bottom:10px;color:#6b6b63}
.list-cross li::before{content:"\f00d";font-family:"Font Awesome 6 Free";font-weight:900;color:#b5482d;position:absolute;left:0;top:2px}

/* ---------- Itinerary timeline ---------- */
.itinerary-list{list-style:none;padding-left:0;margin:0;border-left:3px solid var(--accent-1)}
.itinerary-list li{padding:2px 0 22px 24px;position:relative}
.itinerary-list li::before{content:"";position:absolute;left:-9px;top:4px;width:15px;height:15px;border-radius:50%;background:var(--accent-2);border:3px solid #fff;box-shadow:0 0 0 2px var(--accent-1)}
.itinerary-list .day-label{display:block;font-weight:800;color:var(--accent-1);margin-bottom:4px}

/* ---------- Gallery ---------- */
.gallery-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(min-width:576px){.gallery-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:992px){.gallery-grid{grid-template-columns:repeat(4,1fr)}}
.gallery-item{border-radius:8px;overflow:hidden;position:relative;aspect-ratio:1/1;box-shadow:0 6px 16px rgba(20,40,36,.1)}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.gallery-item:hover img{transform:scale(1.1)}

/* ---------- Tip article ---------- */
.tip-article h2{margin-top:28px;margin-bottom:12px;font-size:1.35rem;color:var(--accent-1)}
.tip-article ul{padding-left:20px}
.tip-article li{margin-bottom:8px}

/* ---------- FAQ page image ---------- */
.page-header-image{border-radius:8px;box-shadow:0 12px 30px rgba(20,40,36,.15);width:100%;margin-bottom:8px}

/* ---------- Footer ---------- */
.footer{background:var(--footer-bg);color:var(--footer-text);padding:50px 0 0;margin-top:0!important}
.footer h2.footer-heading{color:#fff;font-size:1rem;text-transform:uppercase;letter-spacing:.05em;font-weight:700;margin-bottom:16px}
.footer p,.footer a{color:var(--footer-text)}
.footer a:hover{color:var(--accent-2)}
.footer i{color:#fff}
.footer-logo-box{background:#ffffff;display:inline-block;padding:10px 14px;border-radius:6px;margin-bottom:14px}
.footer-menu li{margin-bottom:8px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.18);margin-top:36px;padding:18px 0;text-align:center}

/* ---------- Misc ---------- */
.rounded-img{border-radius:8px}
.shadow-soft{box-shadow:0 12px 30px rgba(20,40,36,.12)}
.badge-price{display:inline-block;background:var(--accent-2);color:#000;font-weight:800;padding:8px 16px;border-radius:30px;font-size:1.05rem}
.stat-box{text-align:center;padding:20px}
.stat-box .stat-number{font-size:2.2rem;font-weight:800;color:var(--accent-1);display:block}
.stat-box .stat-label{font-weight:600;color:#4b4b46;font-size:.9rem}