/* ═══════════════════════════════════════════
   HM LOGISTICS v2 — Premium Design System
   Font: Lexend (display + body) + Space Mono (số)
═══════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap');


*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  /* Brand greens */
  --g950:#050F09;
  --g900:#0A1F12;
  --g800:#102B18;
  --g700:#163A22;
  --g600:#1D5230;
  --g500:#246B3D;
  --g400:#2D8A4E;
  --g300:#3DAA62;
  --g200:#72CC8C;
  --g100:#B8EACC;
  --g50:#E8F7EE;

  /* Accent gold */
  --gold:#F0C060;
  --gold2:#F5D280;
  --gold3:#FBE9B0;

  /* Neutrals */
  --ink:#0D1512;
  --slate:#1C2B22;
  --mist:#F4F9F5;
  --white:#FFFFFF;
  --gray1:#EEF4F0;
  --gray2:#D4E2D8;
  --gray3:#8EA89A;
  --gray4:#5A7066;
  --border:rgba(36,107,61,.18);
  --border-light:rgba(36,107,61,.08);

  /* Typography */
  --display:'Lexend',sans-serif;
  --sans:'Lexend',sans-serif;

  /* Spacing */
  --r-sm:8px;
  --r-md:12px;
  --r-lg:18px;
  --r-xl:24px;
  --r-2xl:32px;

  /* Shadows */
  --shadow-sm:0 1px 4px rgba(10,31,18,.08);
  --shadow-md:0 4px 20px rgba(10,31,18,.12);
  --shadow-lg:0 12px 48px rgba(10,31,18,.18);
  --shadow-glow:0 0 40px rgba(45,138,78,.25);
}

html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--mist);color:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:hidden}

/* ── HEADER ─────────────────────────────── */
header{position:sticky;top:0;z-index:100;background:rgba(244,249,245,.92);backdrop-filter:blur(16px);border-bottom:1px solid var(--border-light);transition:all .3s}
header.scrolled{background:rgba(244,249,245,.98);box-shadow:var(--shadow-sm)}
.hdr{max-width:1200px;margin:0 auto;padding:0 24px;height:64px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo-mark{width:36px;height:36px;flex-shrink:0}
.logo-text{font-family:var(--sans);font-size:18px;font-weight:800;color:var(--g700);letter-spacing:-.02em}
.logo-text span{color:var(--g400)}
nav{display:flex;align-items:center;gap:4px}
nav a{font-size:13px;font-weight:500;color:var(--gray4);padding:6px 14px;border-radius:20px;cursor:pointer;text-decoration:none;transition:all .2s;border:none;background:none}
nav a:hover{color:var(--g600);background:var(--g50)}
nav a.nav-cta{background:var(--g500);color:var(--white);font-weight:600;padding:7px 18px}
nav a.nav-cta:hover{background:var(--g400)}

/* ── SECTION NAV ─────────────────────────── */
.snav{background:var(--white);border-bottom:1px solid var(--border-light);position:sticky;top:64px;z-index:90;overflow-x:auto;scrollbar-width:none}
.snav::-webkit-scrollbar{display:none}
.snav-in{max-width:1200px;margin:0 auto;padding:0 24px;display:flex;gap:0}
.snav-a{font-size:13px;font-weight:500;color:var(--gray4);padding:13px 18px;cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;transition:all .2s;text-decoration:none}
.snav-a:hover{color:var(--g500);background:var(--g50)}
.snav-a.active{color:var(--g600);border-bottom-color:var(--g500);font-weight:600}

/* ── SECTIONS ───────────────────────────── */
section{min-height:calc(100vh - 113px)}
.sec-wrap{max-width:1200px;margin:0 auto;padding:64px 24px}
.sec-label{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--g400);margin-bottom:12px}
.sec-h1{font-family:var(--sans);font-size:clamp(32px,5vw,56px);font-weight:800;line-height:1.1;letter-spacing:-.03em;color:var(--ink);margin-bottom:16px}
.sec-h1 em{font-style:normal;color:var(--g500)}
.sec-h2{font-family:var(--sans);font-size:clamp(24px,3.5vw,40px);font-weight:800;line-height:1.15;letter-spacing:-.025em;color:var(--ink);margin-bottom:16px}
.sec-h2 em{font-style:normal;color:var(--g500)}
.sec-p{font-size:16px;color:var(--gray4);line-height:1.75;max-width:640px;margin-bottom:40px}

/* ── HERO ───────────────────────────────── */
#top-hero{position:relative;background:var(--g900);overflow:hidden;min-height:540px;display:flex;align-items:center}
#hm-map-svg{position:absolute;inset:0;width:100%;height:100%;opacity:.55}
.hero-inner{position:relative;z-index:2;max-width:1200px;margin:0 auto;padding:80px 24px;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.hero-left{}
.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(45,138,78,.2);border:1px solid rgba(45,138,78,.35);border-radius:20px;padding:5px 14px;font-size:12px;font-weight:600;color:var(--g200);letter-spacing:.06em;text-transform:uppercase;margin-bottom:20px}
.hero-eyebrow-dot{width:6px;height:6px;background:var(--g300);border-radius:50%;animation:pulse-dot 2s infinite}
@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.3)}}
.hero-h1{font-family:var(--sans);font-size:clamp(32px,4.5vw,54px);font-weight:800;line-height:1.08;letter-spacing:-.03em;color:var(--white);margin-bottom:16px}
.hero-h1 em{font-style:normal;color:var(--gold)}
.hero-sub{font-size:16px;color:rgba(255,255,255,.6);line-height:1.6;margin-bottom:28px;max-width:480px}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:40px}
.btn-primary{display:inline-flex;align-items:center;gap:8px;background:var(--g400);color:var(--white);font-family:var(--sans);font-size:14px;font-weight:600;padding:12px 24px;border-radius:var(--r-xl);text-decoration:none;cursor:pointer;border:none;transition:all .2s}
.btn-primary:hover{background:var(--g300);transform:translateY(-1px)}
.btn-secondary{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.85);font-family:var(--sans);font-size:14px;font-weight:600;padding:12px 24px;border-radius:var(--r-xl);text-decoration:none;cursor:pointer;border:1px solid rgba(255,255,255,.18);transition:all .2s}
.btn-secondary:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3)}
.hero-stats{display:flex;gap:28px;flex-wrap:wrap}
.hero-stat-num{font-family:var(--sans);font-size:26px;font-weight:800;color:var(--gold);line-height:1}
.hero-stat-lbl{font-size:11px;color:rgba(255,255,255,.45);margin-top:3px;letter-spacing:.04em}
.hero-right{display:flex;flex-direction:column;gap:10px}
/* Track box inside hero */
.hero-track-card{background:rgba(255,255,255,.07);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-xl);padding:24px;animation:fadeup .6s ease .2s both}
@keyframes fadeup{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.htc-label{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--g200);margin-bottom:14px}
.htc-inp{width:100%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:var(--r-md);padding:10px 14px;font-family:var(--sans);font-size:13px;color:var(--white);margin-bottom:10px;outline:none;transition:border .2s}
.htc-inp::placeholder{color:rgba(255,255,255,.35)}
.htc-inp:focus{border-color:var(--g300)}
.htc-btn{width:100%;background:var(--g400);border:none;border-radius:var(--r-md);padding:11px;font-family:var(--sans);font-size:13px;font-weight:600;color:var(--white);cursor:pointer;transition:all .2s}
.htc-btn:hover{background:var(--g300)}
.htc-note{font-size:11px;color:rgba(255,255,255,.35);text-align:center;margin-top:8px;line-height:1.5}
/* Routes pill list */
.hero-routes{display:flex;flex-wrap:wrap;gap:6px}
.route-pill{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:5px 12px;font-size:12px;color:rgba(255,255,255,.65);transition:all .2s;cursor:pointer}
.route-pill:hover{background:rgba(45,138,78,.25);border-color:rgba(45,138,78,.4);color:var(--g100)}
.route-pill span:first-child{font-size:14px}

/* ── TRACKING RESULT ────────────────────── */
#tracking{background:var(--mist)}
.track-result-wrap{margin-top:32px}
.spin-wrap{display:flex;flex-direction:column;align-items:center;gap:12px;padding:48px 0;color:var(--gray3)}
.spinner{width:32px;height:32px;border:2px solid var(--border);border-top-color:var(--g400);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.result-card{background:var(--white);border:1px solid var(--border-light);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-sm);animation:fadeup .3s ease}
.rc-header{padding:20px 24px;background:linear-gradient(135deg,var(--g800),var(--g600));display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.rc-id{font-family:var(--sans);font-size:22px;font-weight:800;color:var(--white);letter-spacing:-.01em}
.rc-meta{font-size:12px;color:rgba(255,255,255,.55);margin-top:4px}
.badge{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border-radius:20px;font-size:12px;font-weight:600}
.badge::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.7}
.bg-green{background:#E8F7EE;color:var(--g600)}
.bg-blue{background:#E8F0FC;color:#1A56B0}
.bg-teal{background:#E0F5F1;color:#0E7A6A}
.bg-amber{background:#FEF3DC;color:#92610B}
.bg-red{background:#FDECEC;color:#B91C1C}
.bg-gray{background:var(--gray1);color:var(--gray4)}
.rc-body{padding:24px}
.fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-bottom:24px}
.fi{background:var(--mist);border-radius:var(--r-md);padding:12px 14px}
.fi-lbl{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--gray3);margin-bottom:4px}
.fi-val{font-size:13px;font-weight:500;color:var(--ink)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:24px}
.stat-mini{background:var(--white);border:1px solid var(--border-light);border-radius:var(--r-md);padding:14px 16px;text-align:center}
.stat-mini-num{font-family:var(--sans);font-size:22px;font-weight:800;color:var(--g500)}
.stat-mini-lbl{font-size:11px;color:var(--gray3);margin-top:2px;letter-spacing:.04em}
/* Timeline */
.tl{padding-top:8px}
.tl-ttl{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--gray3);margin-bottom:16px}
.tl-item{display:flex;gap:14px;margin-bottom:4px}
.tl-l{display:flex;flex-direction:column;align-items:center;width:20px;flex-shrink:0}
.dot{width:12px;height:12px;border-radius:50%;flex-shrink:0;margin-top:3px}
.dot-done{background:var(--g400)}
.dot-act{background:var(--gold);box-shadow:0 0 0 4px rgba(240,192,96,.2)}
.dot-wait{background:var(--gray2);border:2px solid var(--gray2)}
.vline{width:2px;flex:1;background:var(--gray2);margin:4px 0;min-height:20px}
.tl-r{padding-bottom:18px;flex:1}
.tl-lbl{font-size:13px;font-weight:500;color:var(--ink)}
.tl-lbl.act{color:var(--g500);font-weight:600}
.tl-lbl.wait{color:var(--gray3)}
.tl-time{font-size:12px;color:var(--gray3);margin-top:2px}
.tl-note{background:var(--g50);border-left:3px solid var(--g400);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:10px 14px;margin-top:4px}
.tl-note-lbl{font-size:11px;font-weight:600;color:var(--g500);text-transform:uppercase;letter-spacing:.06em}
.tl-note-txt{font-size:13px;color:var(--g700);margin-top:3px;font-family:monospace}
.err{display:flex;gap:14px;background:var(--white);border:1px solid #FED7D7;border-radius:var(--r-xl);padding:24px;align-items:flex-start}
.err-ico{width:36px;height:36px;background:#FEE2E2;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;color:#B91C1C;flex-shrink:0;font-size:16px}
.err-ttl{font-size:15px;font-weight:600;color:var(--ink);margin-bottom:4px}
.err-txt{font-size:13px;color:var(--gray4);line-height:1.6}

/* ── ABOUT ──────────────────────────────── */
#about{background:var(--white)}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;margin-bottom:64px}
.about-visual{position:relative}
.about-card{background:var(--g900);border-radius:var(--r-2xl);padding:32px;color:var(--white);position:relative;overflow:hidden}
.about-card::before{content:'';position:absolute;top:-40px;right:-40px;width:180px;height:180px;background:radial-gradient(circle,rgba(45,138,78,.35),transparent 70%);border-radius:50%}
.about-logo-wrap{display:flex;align-items:center;gap:14px;margin-bottom:24px}
.astat-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px}
.astat{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-lg);padding:16px}
.astat-num{font-family:var(--sans);font-size:28px;font-weight:800;color:var(--gold);line-height:1}
.astat-lbl{font-size:12px;color:rgba(255,255,255,.45);margin-top:4px}
.about-route-tag{margin-top:16px;display:inline-flex;align-items:center;gap:8px;background:rgba(45,138,78,.15);border:1px solid rgba(45,138,78,.3);border-radius:20px;padding:6px 14px;font-size:12px;color:var(--g200);font-weight:600}
/* USP list */
.about-content{}
.usp-list{list-style:none;display:flex;flex-direction:column;gap:16px;margin-top:16px}
.usp-item{display:flex;gap:14px;align-items:flex-start}
.usp-icon{width:38px;height:38px;background:var(--g50);border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.usp-title{font-size:14px;font-weight:600;color:var(--ink);margin-bottom:3px}
.usp-desc{font-size:13px;color:var(--gray4);line-height:1.6}
/* Partner logos */
.partner-strip{border-top:1px solid var(--border-light);padding-top:48px}
.partner-lbl{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gray3);margin-bottom:20px;text-align:center}
.partner-logos{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center}
.partner-logo{background:var(--gray1);border:1px solid var(--border-light);border-radius:var(--r-md);padding:10px 20px;font-size:12px;font-weight:700;color:var(--gray3);letter-spacing:.06em;transition:all .2s}
.partner-logo:hover{background:var(--g50);color:var(--g600);border-color:var(--g200)}
/* Trust badges */
.trust-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
.trust-card{background:var(--mist);border-radius:var(--r-lg);padding:20px;text-align:center;transition:all .2s}
.trust-card:hover{background:var(--g50);transform:translateY(-2px)}
.trust-icon{font-size:28px;margin-bottom:8px}
.trust-title{font-size:13px;font-weight:600;color:var(--ink);margin-bottom:4px}
.trust-desc{font-size:12px;color:var(--gray4);line-height:1.5}

/* ── SERVICES ───────────────────────────── */
#services{background:var(--mist)}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:48px}
.svc-card{background:var(--white);border:1px solid var(--border-light);border-radius:var(--r-xl);padding:24px;transition:all .25s;cursor:default;position:relative;overflow:hidden}
.svc-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--g400);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.svc-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);border-color:var(--g200)}
.svc-card:hover::after{transform:scaleX(1)}
.svc-ico{width:48px;height:48px;background:var(--g50);border-radius:var(--r-lg);display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:14px}
.svc-name{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:8px}
.svc-desc{font-size:13px;color:var(--gray4);line-height:1.65;margin-bottom:14px}
.svc-tags{display:flex;flex-wrap:wrap;gap:5px}
.svc-tag{background:var(--g50);color:var(--g600);font-size:11px;font-weight:600;padding:3px 10px;border-radius:20px}
/* Route visual */
.route-vis{background:var(--g900);border-radius:var(--r-2xl);padding:32px;text-align:center}
.route-label{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--g300);margin-bottom:20px}
.route-row{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}
.route-origin{display:flex;flex-direction:column;align-items:center;gap:4px}
.route-origin-flag{font-size:32px}
.route-origin-name{font-size:12px;font-weight:600;color:rgba(255,255,255,.7)}
.route-plus{font-size:20px;color:rgba(255,255,255,.2)}
.route-arrow-wrap{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1;min-width:80px}
.route-arrow-line{height:2px;background:linear-gradient(90deg,var(--g400),var(--gold));width:100%;border-radius:2px;position:relative}
.route-arrow-line::after{content:'▶';position:absolute;right:-8px;top:-8px;color:var(--gold);font-size:12px}
.route-modes-txt{font-size:11px;color:rgba(255,255,255,.35);font-weight:500}
.route-dests{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.route-dest{display:flex;flex-direction:column;align-items:center;gap:3px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-md);padding:10px 14px;min-width:70px;transition:all .2s}
.route-dest:hover{background:rgba(45,138,78,.2);border-color:var(--g400)}
.route-dest-flag{font-size:22px}
.route-dest-name{font-size:11px;color:rgba(255,255,255,.6);font-weight:500}

/* ── CALCULATOR ─────────────────────────── */
.calc-section{background:var(--g50);border:1px solid var(--g100);border-radius:var(--r-2xl);padding:32px;margin-top:40px}
.calc-title{font-size:16px;font-weight:700;color:var(--ink);margin-bottom:6px}
.calc-sub{font-size:13px;color:var(--gray4);margin-bottom:24px}
.calc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:20px}
.calc-field label{display:block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--gray4);margin-bottom:6px}
.calc-inp{width:100%;background:var(--white);border:1px solid var(--border);border-radius:var(--r-md);padding:10px 14px;font-family:var(--sans);font-size:14px;color:var(--ink);outline:none;transition:border .2s}
.calc-inp:focus{border-color:var(--g400)}
.calc-select{width:100%;background:var(--white);border:1px solid var(--border);border-radius:var(--r-md);padding:10px 14px;font-family:var(--sans);font-size:14px;color:var(--ink);outline:none;cursor:pointer;transition:border .2s}
.calc-select:focus{border-color:var(--g400)}
.calc-result{background:var(--g900);border-radius:var(--r-lg);padding:20px 24px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.calc-result-lbl{font-size:13px;color:rgba(255,255,255,.5)}
.calc-result-price{font-family:var(--sans);font-size:28px;font-weight:800;color:var(--gold)}
.calc-result-note{font-size:11px;color:rgba(255,255,255,.35)}
.calc-btn-wrap{display:flex;gap:10px;margin-top:14px}
.btn-calc{background:var(--g400);color:var(--white);border:none;border-radius:var(--r-md);padding:10px 20px;font-family:var(--sans);font-size:13px;font-weight:600;cursor:pointer;transition:all .2s}
.btn-calc:hover{background:var(--g300)}
.btn-zalo-sm{background:transparent;color:var(--g600);border:1.5px solid var(--g300);border-radius:var(--r-md);padding:10px 20px;font-family:var(--sans);font-size:13px;font-weight:600;cursor:pointer;transition:all .2s;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.btn-zalo-sm:hover{background:var(--g50)}

/* ── PRICING ────────────────────────────── */
#pricing{background:var(--ink)}
#pricing .sec-label{color:var(--g300)}
#pricing .sec-h2{color:var(--white)}
#pricing .sec-h2 em{color:var(--gold)}
#pricing .sec-p{color:rgba(255,255,255,.5)}
.ptabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:24px}
.ptab{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:7px 16px;font-family:var(--sans);font-size:13px;font-weight:500;color:rgba(255,255,255,.5);cursor:pointer;transition:all .2s;white-space:nowrap}
.ptab:hover{background:rgba(255,255,255,.1);color:rgba(255,255,255,.85)}
.ptab.active{background:var(--g500);border-color:var(--g400);color:var(--white)}
.route-panel{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-xl);padding:28px;animation:fadeup .25s ease}
.panel-tabs{display:flex;gap:8px;margin-bottom:20px}
.mtab{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-md);padding:7px 16px;font-family:var(--sans);font-size:13px;font-weight:500;color:rgba(255,255,255,.5);cursor:pointer;transition:all .2s}
.mtab.active{background:var(--g600);border-color:var(--g500);color:var(--white)}
.price-meta{font-size:12px;color:rgba(255,255,255,.4);margin-bottom:14px;line-height:1.6;padding:10px 14px;background:rgba(255,255,255,.03);border-radius:var(--r-md);border-left:2px solid var(--g500)}
.price-tbl{width:100%;border-collapse:collapse;margin-bottom:16px;font-size:13px}
.price-tbl th{background:var(--g700);color:rgba(255,255,255,.75);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;padding:10px 14px;text-align:left;border:1px solid rgba(255,255,255,.08)}
.price-tbl td{padding:11px 14px;color:rgba(255,255,255,.65);border:1px solid rgba(255,255,255,.05);vertical-align:top;line-height:1.5}
.price-tbl tr:nth-child(even) td{background:rgba(255,255,255,.02)}
.row-green td:first-child{border-left:3px solid var(--g400);color:rgba(255,255,255,.85)}
.row-amber td:first-child{border-left:3px solid var(--gold);color:rgba(255,255,255,.85)}
.row-red td:first-child{border-left:3px solid #F87171;color:rgba(255,255,255,.85)}
.price-note{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:var(--r-md);padding:14px;margin-top:8px;font-size:12px;color:rgba(255,255,255,.4);line-height:1.7;cursor:pointer}
.price-note summary{font-weight:600;color:rgba(255,255,255,.55);cursor:pointer;margin-bottom:6px}
.price-note ul{padding-left:16px;margin-top:6px}
.price-note li{margin-bottom:4px}
.price-cta{margin-top:32px;background:linear-gradient(135deg,rgba(36,107,61,.3),rgba(45,138,78,.15));border:1px solid rgba(45,138,78,.25);border-radius:var(--r-xl);padding:28px 32px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.price-cta-left .price-cta-ttl{font-size:17px;font-weight:700;color:var(--white);margin-bottom:5px}
.price-cta-left .price-cta-sub{font-size:13px;color:rgba(255,255,255,.5)}
.btn-zalo{display:inline-flex;align-items:center;gap:8px;background:var(--g400);color:var(--white);font-family:var(--sans);font-size:14px;font-weight:600;padding:12px 22px;border-radius:var(--r-xl);text-decoration:none;transition:all .2s;white-space:nowrap}
.btn-zalo:hover{background:var(--g300)}

/* ── FAQ ────────────────────────────────── */
.faq-section{margin-top:48px}
.faq-label{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gray3);margin-bottom:20px}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.faq-item{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:var(--r-lg);overflow:hidden;transition:border-color .2s}
.faq-item:hover{border-color:rgba(255,255,255,.14)}
.faq-q{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;cursor:pointer;gap:12px}
.faq-q-text{font-size:13px;font-weight:600;color:rgba(255,255,255,.8)}
.faq-chevron{width:18px;height:18px;color:rgba(255,255,255,.3);transition:transform .2s;flex-shrink:0}
.faq-item.open .faq-chevron{transform:rotate(180deg)}
.faq-a{display:none;padding:0 18px 16px;font-size:13px;color:rgba(255,255,255,.45);line-height:1.7}
.faq-item.open .faq-a{display:block}

/* ── CONTACT ────────────────────────────── */
#contact{background:var(--white)}
.contact-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:48px;align-items:start}
.ci-list{display:flex;flex-direction:column;gap:0}
.ci-block{padding:18px 0;border-bottom:1px solid var(--border-light)}
.ci-block:last-child{border-bottom:none}
.ci-lbl{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gray3);margin-bottom:5px}
.ci-val{font-size:14px;color:var(--ink);font-weight:500;line-height:1.6}
.ci-val a{color:var(--g500);text-decoration:none}
.ci-val a:hover{text-decoration:underline}
/* Form */
.contact-form{background:var(--mist);border-radius:var(--r-2xl);padding:32px}
.form-title{font-size:18px;font-weight:700;color:var(--ink);margin-bottom:4px}
.form-sub{font-size:13px;color:var(--gray4);margin-bottom:24px}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.cf-field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.cf-field label{font-size:12px;font-weight:600;color:var(--gray4);letter-spacing:.04em}
.cf-inp{width:100%;background:var(--white);border:1.5px solid var(--border);border-radius:var(--r-md);padding:11px 14px;font-family:var(--sans);font-size:14px;color:var(--ink);outline:none;transition:border .2s}
.cf-inp:focus{border-color:var(--g400)}
.cf-select{width:100%;background:var(--white);border:1.5px solid var(--border);border-radius:var(--r-md);padding:11px 14px;font-family:var(--sans);font-size:14px;color:var(--ink);outline:none;cursor:pointer;transition:border .2s}
.cf-select:focus{border-color:var(--g400)}
.cf-textarea{width:100%;background:var(--white);border:1.5px solid var(--border);border-radius:var(--r-md);padding:11px 14px;font-family:var(--sans);font-size:14px;color:var(--ink);outline:none;resize:vertical;min-height:90px;transition:border .2s}
.cf-textarea:focus{border-color:var(--g400)}
.cf-btn{width:100%;background:var(--g500);color:var(--white);border:none;border-radius:var(--r-lg);padding:13px;font-family:var(--sans);font-size:15px;font-weight:700;cursor:pointer;transition:all .2s;margin-top:4px}
.cf-btn:hover{background:var(--g400);transform:translateY(-1px)}
.cf-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}
.cf-status{margin-top:10px;font-size:13px;text-align:center;display:none}
/* Testimonials */
.testimonial-section{margin-top:64px;padding-top:48px;border-top:1px solid var(--border-light)}
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px}
.testi-card{background:var(--mist);border-radius:var(--r-xl);padding:20px;border:1px solid var(--border-light);transition:all .2s}
.testi-card:hover{background:var(--g50);border-color:var(--g100);transform:translateY(-2px)}
.testi-quote{font-size:13px;color:var(--gray4);line-height:1.7;margin-bottom:14px;font-style:italic}
.testi-author{display:flex;align-items:center;gap:10px}
.testi-avatar{width:34px;height:34px;background:var(--g100);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--g700);flex-shrink:0}
.testi-name{font-size:13px;font-weight:600;color:var(--ink)}
.testi-role{font-size:11px;color:var(--gray3)}
.stars{color:var(--gold);font-size:13px;margin-bottom:8px}

/* ── FOOTER ─────────────────────────────── */
footer{background:var(--g950);border-top:1px solid rgba(255,255,255,.06)}
.ftr{max-width:1200px;margin:0 auto;padding:48px 24px 32px;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px}
.ftr-brand .logo-text{color:rgba(255,255,255,.9)}
.ftr-desc{font-size:13px;color:rgba(255,255,255,.35);line-height:1.7;margin-top:12px;max-width:220px}
.ftr-ttl{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.3);margin-bottom:14px}
.ftr-col a{display:block;font-size:13px;color:rgba(255,255,255,.45);margin-bottom:10px;cursor:pointer;text-decoration:none;transition:color .2s}
.ftr-col a:hover{color:var(--g300)}
.ftr-copy{max-width:1200px;margin:0 auto;padding:20px 24px;border-top:1px solid rgba(255,255,255,.05);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ftr-copy-txt{font-size:12px;color:rgba(255,255,255,.25)}
.ftr-copy-links{display:flex;gap:16px}
.ftr-copy-links a{font-size:12px;color:rgba(255,255,255,.25);text-decoration:none;transition:color .2s}
.ftr-copy-links a:hover{color:rgba(255,255,255,.5)}

/* ── STICKY ZALO ────────────────────────── */
.sticky-cta{position:fixed;bottom:24px;right:24px;z-index:200;display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.sticky-zalo{display:flex;align-items:center;gap:10px;background:var(--g500);color:var(--white);font-family:var(--sans);font-size:13px;font-weight:600;padding:12px 18px;border-radius:28px;text-decoration:none;box-shadow:0 4px 20px rgba(45,138,78,.4);transition:all .2s;white-space:nowrap}
.sticky-zalo:hover{background:var(--g400);transform:translateY(-2px);box-shadow:0 6px 28px rgba(45,138,78,.5)}
.sticky-zalo-icon{width:22px;height:22px;background:rgba(255,255,255,.2);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px}

/* ── RESPONSIVE ─────────────────────────── */
@media(max-width:900px){
  .hero-inner{grid-template-columns:1fr}
  .hero-right{display:none}
  .about-grid{grid-template-columns:1fr}
  .svc-grid{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr}
  .ftr{grid-template-columns:1fr 1fr}
  .faq-grid{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .testi-grid{grid-template-columns:1fr}
  .trust-row{grid-template-columns:1fr}
  .calc-grid{grid-template-columns:1fr}
}
@media(max-width:600px){
  .svc-grid{grid-template-columns:1fr}
  .hero-ctas{flex-direction:column}
  nav a:not(.nav-cta){display:none}
  .snav-a{padding:13px 12px;font-size:12px}
  .ftr{grid-template-columns:1fr}
  .cf-row{grid-template-columns:1fr}
  .price-cta{flex-direction:column;text-align:center}
}

/* ── HERO CHIPS (thay route pills) ──────── */
.hero-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.hero-chip{background:rgba(45,138,78,.15);border:1px solid rgba(45,138,78,.3);border-radius:20px;padding:6px 14px;font-size:12px;font-weight:500;color:var(--g200)}

/* ── ABOUT v2 ────────────────────────────── */
.about-banner{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;margin-bottom:48px}
.about-tags{display:flex;flex-wrap:wrap;gap:6px}
.about-tag{background:rgba(45,138,78,.15);border:1px solid rgba(45,138,78,.3);border-radius:20px;padding:4px 12px;font-size:12px;color:var(--g200)}
.about-usp-section{margin-bottom:48px}
.commit-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.commit-card{background:var(--mist);border:1px solid var(--border-light);border-radius:var(--r-lg);padding:16px}
.commit-icon{font-size:20px;margin-bottom:8px}
.commit-title{font-size:13px;font-weight:600;color:var(--ink);margin-bottom:4px}
.commit-desc{font-size:12px;color:var(--gray4);line-height:1.55}
.about-audience{background:var(--g50);border-radius:var(--r-2xl);padding:32px;margin-bottom:48px}
.audience-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:0}
.audience-card{background:var(--white);border-radius:var(--r-lg);padding:18px;border:1px solid var(--border-light);transition:all .2s}
.audience-card:hover{border-color:var(--g200);transform:translateY(-2px)}
.audience-icon{font-size:24px;margin-bottom:10px}
.audience-title{font-size:13px;font-weight:600;color:var(--ink);margin-bottom:6px}
.audience-desc{font-size:12px;color:var(--gray4);line-height:1.6}

/* ── SERVICES v2 ─────────────────────────── */
.svc-featured{border:1.5px solid var(--g200) !important;background:var(--g50) !important}
.svc-featured .svc-ico{background:var(--g100)}
.svc-featured .svc-name{color:var(--g700)}

/* ── PRICING v2 — Bay/Biển/Bộ tabs ─────── */
.pm-subtitle{font-size:13px;color:rgba(255,255,255,.5);margin-bottom:16px;padding:10px 14px;background:rgba(255,255,255,.03);border-radius:var(--r-md);border-left:2px solid var(--g400)}
.price-subtabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.pstab{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-md);padding:6px 14px;font-family:var(--sans);font-size:13px;font-weight:500;color:rgba(255,255,255,.5);cursor:pointer;transition:all .2s}
.pstab:hover{background:rgba(255,255,255,.12);color:rgba(255,255,255,.8)}
.pstab.active{background:var(--g600);border-color:var(--g500);color:var(--white)}
.price-panel{animation:fadeup .2s ease}
.pricing-mode{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-xl);padding:28px;animation:fadeup .25s ease}

/* ── RESPONSIVE additions ────────────────── */
@media(max-width:900px){
  .about-banner{grid-template-columns:1fr}
  .audience-grid{grid-template-columns:1fr 1fr}
  .commit-grid{grid-template-columns:1fr}
}
@media(max-width:600px){
  .audience-grid{grid-template-columns:1fr}
  .hero-chips{gap:6px}
  .hero-chip{font-size:11px;padding:5px 10px}
}

/* ── LANGUAGE SWITCHER ──────────────────────── */
.lang-switcher{display:flex;align-items:center;gap:4px;margin-left:8px;background:var(--g50);border:1px solid var(--g200);border-radius:20px;padding:3px 8px}
.lang-btn{background:none;border:none;font-family:var(--sans);font-size:12px;font-weight:600;color:var(--gray4);cursor:pointer;padding:2px 6px;border-radius:12px;transition:all .2s}
.lang-btn.active{background:var(--g500);color:var(--white)}
.lang-btn:hover:not(.active){color:var(--g600)}
.lang-sep{color:var(--gray2);font-size:11px}

/* ── HERO CHIPS — 2x2 grid ──────────────────── */
.hero-chips{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:20px;max-width:420px}
.hero-chip{background:rgba(45,138,78,.15);border:1px solid rgba(45,138,78,.3);border-radius:var(--r-md);padding:8px 14px;font-size:12px;font-weight:500;color:var(--g200);display:flex;align-items:center;gap:6px}
.hero-chip-special{grid-column:1/-1;background:rgba(240,192,96,.12);border-color:rgba(240,192,96,.3);color:var(--gold2)}

/* ── TRACKING SECTION — search box nổi bật ──── */
.track-search-box{background:var(--white);border-radius:var(--r-2xl);box-shadow:var(--shadow-md);padding:36px 40px;margin-bottom:32px;border:1px solid var(--border-light)}
.track-search-label{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--g400);margin-bottom:10px}
.track-search-h{font-size:clamp(22px,3vw,32px);font-weight:800;letter-spacing:-.02em;color:var(--ink);margin-bottom:8px;line-height:1.2}
.track-search-h em{font-style:normal;color:var(--g500)}
.track-search-p{font-size:14px;color:var(--gray4);margin-bottom:20px}
.track-search-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.track-search-inp{flex:1;min-width:150px;background:var(--mist);border:1.5px solid var(--border);border-radius:var(--r-md);padding:12px 16px;font-family:var(--sans);font-size:14px;color:var(--ink);outline:none;transition:border .2s}
.track-search-inp:focus{border-color:var(--g400);background:var(--white)}
.track-search-inp-wide{flex:2;min-width:200px}
.track-search-btn{background:var(--g500);color:var(--white);border:none;border-radius:var(--r-md);padding:12px 28px;font-family:var(--sans);font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;white-space:nowrap}
.track-search-btn:hover{background:var(--g400)}
.track-search-note{font-size:12px;color:var(--gray3)}

/* ── SCROLL TO RESULT ─────────────────────────  */
.track-result-wrap{scroll-margin-top:130px}

/* ── RESPONSIVE ───────────────────────────────── */
@media(max-width:600px){
  .track-search-box{padding:24px 20px}
  .track-search-row{flex-direction:column}
  .track-search-inp,.track-search-inp-wide,.track-search-btn{width:100%;flex:none}
  .hero-chips{grid-template-columns:1fr}
  .hero-chip-special{grid-column:auto}
  .lang-switcher{margin-left:4px}
}

/* ── PARTNER LOGO WITH IMAGES ───────────── */
.partner-logo-img{display:flex;align-items:center;gap:8px;padding:8px 16px}
.partner-logo-img img{width:24px;height:24px;object-fit:contain;border-radius:4px}
.partner-logo-img span{font-size:11px;font-weight:700;letter-spacing:.04em}

/* ── COMMIT GRID 3 items ────────────────── */
.commit-grid-3{grid-template-columns:1fr !important}
@media(min-width:600px){.commit-grid-3{grid-template-columns:1fr 1fr 1fr !important}}