/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/

/* TNG King Tourist — V3 Chuyên nghiệp (2026-11-12) */
:root{
  --tng-navy:#0F2A5C; --tng-darknavy:#0B1F45; --tng-blue:#2F5DA8; --tng-skyblue:#4A7AB8;
  --tng-green:#2F9E4F; --tng-gold:#F2C200; --tng-red:#D8432F; --tng-ink:#16233A;
  --tng-muted:#5A6B82; --tng-bg:#F6F8FB; --tng-border:#E3E9F0;
}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;}
h1,h2,h3,h4{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;}

/* Header: logo + nav navy, CTA xanh, dải 5 màu dưới header */
.header-top{background:#0F2A5C !important;color:#fff;}
.header-top a{color:#fff;}
.header-main .nav>li>a{color:#0F2A5C;font-weight:700;}
.header-main .nav>li>a:hover{color:#2F5DA8;}
.header-logo{max-height:64px !important;width:auto !important;}
.header-wrapper::after{content:"";display:block;height:4px;background:linear-gradient(90deg,#D8432F 0 20%,#F2C200 20% 40%,#2F9E4F 40% 60%,#4A7AB8 60% 80%,#0F2A5C 80% 100%);}

/* Nút: primary xanh BLUE, nút vàng chữ navy */
.button.primary,.button.is-primary{background-color:#2F5DA8;border-color:#2F5DA8;}
.button.primary:hover,.button.is-primary:hover{background-color:#0F2A5C;border-color:#0F2A5C;}
a.button.tng-gold-btn{background-color:#F2C200 !important;border-color:#F2C200 !important;color:#0B1F45 !important;}
a.button.tng-gold-btn:hover{background-color:#d9ae00 !important;border-color:#d9ae00 !important;color:#0B1F45 !important;}
.header-button-1 .button{font-weight:700;}

/* Hero */
.tng-eyebrow{font-size:13px;font-weight:700;letter-spacing:2px;margin-bottom:10px;}
.tng-hero-h1 h1{font-size:46px;line-height:1.15;font-weight:800;margin:0 0 16px;color:#fff;}
.tng-hero-sub{font-size:17px;line-height:1.6;margin-bottom:26px;}
.tng-chips{margin-top:30px;}
.tng-chip{background:rgba(255,255,255,.14);border-radius:20px;padding:10px 16px;display:inline-block;font-size:13px;font-weight:600;text-align:center;white-space:nowrap;}
.tng-crumb{font-size:13px;margin-bottom:12px;}
.tng-price-badge{background:#D8432F;color:#fff;font-size:16px;font-weight:700;border-radius:8px;padding:12px 22px;display:inline-block;margin-top:28px;}

/* Thanh đặt xe đè lên cuối hero */
.tng-booking{margin-top:-44px;position:relative;z-index:5;}
.tng-booking-card{background:#fff;border:1px solid #E3E9F0;border-radius:12px;box-shadow:0 6px 16px rgba(4,12,28,.08);padding:20px 24px !important;}
.tng-field-label{font-size:12px;text-transform:uppercase;letter-spacing:1px;margin-bottom:2px;}
.tng-field-value{font-size:15px;font-weight:600;}

/* Trust + Stats */
.tng-trust{font-size:15px;font-weight:600;}
.tng-stat-num{font-size:36px;font-weight:800;line-height:1.1;}
.tng-stat-label{font-size:14px;margin-top:4px;}

/* Section title */
.tng-sec-title h2{font-size:30px;line-height:1.3;font-weight:800;margin:0 0 40px;}

/* Vì sao chọn */
.tng-why-icon{width:56px;height:56px;border-radius:50%;background:#0F2A5C;color:#fff;font-size:22px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;}
.tng-why-title{font-size:18px;font-weight:700;margin-top:16px;margin-bottom:6px;}
.tng-why-desc{font-size:14px;line-height:1.6;}

/* Thẻ xe / thẻ điểm đến */
.tng-card{background:#fff;border:1px solid #E3E9F0;border-radius:12px;overflow:hidden;box-shadow:0 6px 16px rgba(4,12,28,.08);}
.tng-card .col-inner{padding:0 0 20px;}
.tng-card .ux-image{margin-bottom:14px;}
.tng-card .text{padding-left:16px;padding-right:16px;}
.tng-card .button{margin-left:16px;margin-right:16px;width:calc(100% - 32px) !important;}
.tng-card-hot{border:2px solid #2F5DA8;}
.tng-card-title{font-size:18px;font-weight:700;margin-bottom:4px;}
.tng-card-models{font-size:13px;margin-bottom:8px;}
.tng-price{color:#D8432F;font-size:16px;font-weight:700;margin-bottom:14px;}
.tng-note{font-size:13px;margin-top:26px;}
.tng-dest{border-radius:12px;overflow:hidden;}
.tng-dest h3{color:#fff;font-size:18px;font-weight:700;margin:0;}
.tng-dest p{color:rgba(255,255,255,.92);font-size:13px;margin:2px 0 0;}

/* Giấy phép */
.tng-badge{border:1px solid rgba(255,255,255,.7);border-radius:28px;padding:14px 18px;font-size:15px;font-weight:700;display:inline-block;}

/* Cảm nhận */
.tng-testi{background:#fff;border:1px solid #E3E9F0;border-left:4px solid #2F5DA8;border-radius:12px;box-shadow:0 6px 16px rgba(4,12,28,.06);}
.tng-testi .col-inner{padding:24px;}
.tng-stars{color:#F2C200;font-size:16px;letter-spacing:2px;margin-bottom:12px;}
.tng-quote{font-size:15px;line-height:1.6;margin-bottom:20px;}
.tng-avatar{width:44px;height:44px;border-radius:50%;background:#0F2A5C;color:#fff;font-size:18px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;}
.tng-testi-name{font-size:15px;font-weight:700;}
.tng-testi-place{font-size:13px;}

/* Bảng giá page ngách */
.tng-price-row{background:#fff;border:1px solid #E3E9F0;border-radius:8px;padding:14px 20px;margin-bottom:12px;}
.tng-price-row.tng-price-hot{border:2px solid #2F5DA8;border-left:4px solid #2F5DA8;}
.tng-price-name{font-size:15px;font-weight:700;}
.tng-price-models{font-size:14px;}
.tng-hot-badge{color:#2F5DA8;font-size:12px;font-weight:700;}

/* Timeline + quy trình */
.tng-timeline{position:relative;}
.tng-timeline::before{content:"";position:absolute;top:39px;left:16.6%;right:16.6%;height:2px;background:#E3E9F0;z-index:0;}
.tng-step-num{width:48px;height:48px;border-radius:50%;background:#0F2A5C;color:#fff;font-size:20px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;margin-bottom:16px;position:relative;z-index:1;}
.tng-step-blue{background:#2F5DA8;}
.tng-step-green{background:#2F9E4F;}
.tng-step-red{background:#D8432F;}
.tng-step-title{font-size:17px;font-weight:700;margin-bottom:6px;}
.tng-step-desc{font-size:14px;line-height:1.6;}
.tng-inc-title{font-size:16px;font-weight:700;margin-bottom:8px;}

/* Gallery */
.tng-gal img{border-radius:12px;}

/* Footer: nền navy đậm + dải 5 màu trên cùng */
#footer::before{content:"";display:block;height:5px;background:linear-gradient(90deg,#D8432F 0 20%,#F2C200 20% 40%,#2F9E4F 40% 60%,#4A7AB8 60% 80%,#0F2A5C 80% 100%);}
#footer,.absolute-footer{background:#0B1F45;color:rgba(255,255,255,.85);}
.absolute-footer{border-top:1px solid rgba(255,255,255,.12);}
.absolute-footer a{color:#fff;}
.absolute-footer .footer-primary,.absolute-footer .footer-secondary{font-size:14px;line-height:1.8;}

/* Mobile */
@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/
.tng-hero-h1 h1{font-size:32px;}
.tng-sec-title h2{font-size:24px;margin-bottom:28px;}
.tng-booking{margin-top:0;}
.tng-booking-card{padding:16px !important;}
.tng-timeline::before{display:none;}
.tng-chip{margin-bottom:8px;}
.tng-badge{margin-bottom:10px;}
.tng-price-row{margin-bottom:14px;}
}

/* TNG layout fixes — 2026-11-13 (Flatsome 3.20.12) */
/* Fractional grid classes used by UX Builder (span="1/5", span__sm="1/2")
   do not exist in Flatsome CSS, so those columns fell back to full width
   and stacked in a single column. Define them at Flatsome breakpoints. */
@media only screen and (min-width: 850px) {
  .row > .col.large-1\/5 { flex-basis: 20%; max-width: 20%; }
}
@media only screen and (min-width: 550px) and (max-width: 849px) {
  .row > .col.medium-1\/5 { flex-basis: 20%; max-width: 20%; }
}
@media only screen and (max-width: 549px) {
  .row > .col.small-1\/2 { flex-basis: 50%; max-width: 50%; }
}
/* Sticky header: solid white background (Flatsome default is 90% white,
   so page content showed faintly through it when scrolling). */
.header-bg-color { background-color: #fff; }
.header-wrapper.stuck .header-main { box-shadow: 0 2px 12px rgba(11,31,69,.10); }