/* ===================================================================
   Theme: Tư vấn khai báo hải quan — đơn giản, chuyên nghiệp, tối ưu B2B
   =================================================================== */

:root{
  --navy: #0f2a4a;
  --navy-2: #143a63;
  --blue: #1a5fb4;
  --blue-light: #eaf2fc;
  --gold: #c8952b;
  --ink: #1c2733;
  --ink-soft: #52616f;
  --line: #e3e8ee;
  --bg: #f7f9fb;
  --white: #ffffff;
  --radius: 10px;
  --shadow: 0 2px 10px rgba(15,42,74,0.06);
  --shadow-lg: 0 12px 32px rgba(15,42,74,0.12);
  --maxw: 1120px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
}
img{max-width:100%;display:block;}
a{color:var(--blue);text-decoration:none;}
a:hover{text-decoration:underline;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px;}

/* ---------- Header ---------- */
.site-header{
  background:var(--navy);
  color:#fff;
  position:sticky; top:0; z-index:50;
  box-shadow:0 1px 0 rgba(255,255,255,0.06);
}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;min-height:64px;padding-top:8px;padding-bottom:8px;flex-wrap:wrap;gap:10px 0;}
#minh-chung,#lo-hang-thuc-te{scroll-margin-top:96px;}
.brand{color:#fff;font-weight:800;font-size:18px;letter-spacing:.2px;display:flex;align-items:center;gap:8px;}
.brand:hover{text-decoration:none;opacity:.9;}
.brand .dot{width:8px;height:8px;border-radius:50%;background:var(--gold);display:inline-block;flex:none;}
.brand-text{display:flex;flex-direction:column;line-height:1.25;}
.brand-name{font-size:18px;font-weight:800;}
.brand-tagline{font-size:11px;font-weight:600;color:#a9c2df;letter-spacing:.15px;}
.nav{display:flex;gap:22px;align-items:center;}
.nav a{color:#cfe0f5;font-size:14.5px;font-weight:600;}
.nav a:hover{color:#fff;text-decoration:none;}
.nav .cta-small{
  background:var(--gold);color:#241a05;padding:9px 16px;border-radius:8px;font-weight:700;
}
.nav .cta-small:hover{background:#dba63c;text-decoration:none;}

/* Banner đội xe đầu kéo container — đầu trang chủ */
.fleet-banner{position:relative;line-height:0;}
.fleet-banner img{width:100%;display:block;max-height:420px;object-fit:cover;}
.fleet-banner-caption{
  position:absolute;left:0;right:0;bottom:0;background:linear-gradient(0deg,rgba(15,42,74,.92) 0%,rgba(15,42,74,0) 100%);
  color:#fff;font-size:20px;font-weight:800;text-align:center;padding:34px 16px 16px;line-height:1.3;
}
@media (max-width:640px){.fleet-banner-caption{font-size:15px;padding:22px 10px 10px;}.fleet-banner img{max-height:260px;}}

/* ---------- Hero ---------- */
.hero{
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-2) 55%,#1a4d82 100%);
  color:#fff;padding:64px 0 56px;
}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;}
.eyebrow{
  display:inline-block;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);
  color:#dfeaf9;font-size:12.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  padding:6px 12px;border-radius:999px;margin-bottom:16px;
}
.hero h1{font-size:36px;line-height:1.25;margin:0 0 16px;font-weight:800;}
.hero p.lead{font-size:16.5px;color:#d7e4f4;margin:0 0 26px;max-width:52ch;}
.hero-stats{display:flex;gap:28px;margin-top:8px;flex-wrap:wrap;}
.hero-stats .stat b{display:block;font-size:24px;color:#fff;}
.hero-stats .stat span{font-size:13px;color:#b9cde6;}
.btn{
  display:inline-flex;align-items:center;gap:8px;background:var(--gold);color:#241a05;
  padding:13px 22px;border-radius:8px;font-weight:700;font-size:15px;border:none;cursor:pointer;
}
.btn:hover{background:#dba63c;text-decoration:none;}
.btn-outline{
  background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.55);
}
.btn-outline:hover{background:rgba(255,255,255,.08);text-decoration:none;}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;}

/* CTA riêng cho các nút "Chat Zalo" mang thương hiệu Zalo (nền xanh + icon) */
.zalo-cta{background:#0068FF !important;color:#fff !important;position:relative;overflow:hidden;z-index:0;}
.zalo-cta:hover{background:#0055d1 !important;}
.nav .zalo-cta{color:#fff !important;}
.zalo-cta::before{
  content:"💬";position:absolute;right:-6px;bottom:-14px;font-size:46px;line-height:1;
  opacity:.22;transform:rotate(-12deg);z-index:-1;pointer-events:none;
}

.hero-card{
  background:#fff;color:var(--ink);border-radius:var(--radius);box-shadow:var(--shadow-lg);
  padding:18px;
}
.hero-card .tag{
  display:inline-block;background:var(--blue-light);color:var(--blue);font-size:11.5px;font-weight:700;
  padding:4px 9px;border-radius:6px;margin-bottom:10px;letter-spacing:.3px;
}
.hero-card img{border-radius:6px;border:1px solid var(--line);}
.hero-card .cap{font-size:12.5px;color:var(--ink-soft);margin-top:10px;}

/* ---------- Sections ---------- */
section{padding:56px 0;}
.section-head{max-width:640px;margin:0 auto 34px;text-align:center;}
.section-head h2{font-size:26px;margin:0 0 10px;font-weight:800;color:var(--navy);}
.section-head p{color:var(--ink-soft);font-size:15px;margin:0;}
.section-alt{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}

/* proof / evidence gallery */
.proof-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
.proof-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
}
.proof-card .imgwrap{background:#fbfcfd;padding:14px;border-bottom:1px solid var(--line);overflow-x:auto;}
.proof-card .imgwrap img{border-radius:6px;}
.proof-card .meta{padding:14px 16px;}
.proof-card .meta .hs{font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:700;color:var(--blue);font-size:13px;}
.proof-card .meta h3{font-size:15.5px;margin:6px 0 4px;color:var(--ink);}
.proof-card .meta p{font-size:13.5px;color:var(--ink-soft);margin:0;}
.mini-proof-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:14px;}
.mini-proof-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);}
.mini-proof-card .imgwrap{background:#fbfcfd;padding:6px;border-bottom:1px solid var(--line);overflow:hidden;}
.mini-proof-card .imgwrap img{width:100%;height:auto;border-radius:4px;display:block;}
.mini-proof-caption{padding:8px 10px;font-size:12px;color:var(--ink);line-height:1.4;}
.mini-proof-caption .hs-chip{
  display:inline-block;margin-top:4px;font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:11px;font-weight:700;color:var(--blue);background:var(--blue-light);padding:2px 7px;border-radius:6px;
}
@media (max-width:860px){.mini-proof-grid{grid-template-columns:repeat(2,1fr);}}

.badge-real{
  display:inline-flex;align-items:center;gap:6px;background:#eaf7ee;color:#1f7a3c;
  font-size:11.5px;font-weight:700;padding:4px 9px;border-radius:6px;
}
.badge-real .dot{width:6px;height:6px;border-radius:50%;background:#2fa84f;}

/* how it works */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);}
.step .num{
  width:32px;height:32px;border-radius:8px;background:var(--blue-light);color:var(--blue);
  display:flex;align-items:center;justify-content:center;font-weight:800;margin-bottom:12px;
}
.step h3{font-size:16px;margin:0 0 6px;}
.step p{font-size:14px;color:var(--ink-soft);margin:0;}

/* articles / blog */
.article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.article-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;height:100%;
}
.article-card .hs-chip{
  align-self:flex-start;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;font-weight:700;
  color:var(--blue);background:var(--blue-light);padding:3px 8px;border-radius:6px;margin-bottom:10px;
}
.article-card h3{font-size:16px;margin:0 0 8px;line-height:1.4;}
.article-card p{font-size:13.8px;color:var(--ink-soft);margin:0 0 14px;flex:1;}
.article-card a.readmore{font-size:13.5px;font-weight:700;}

/* search / directory */
.search-box{display:flex;gap:10px;max-width:560px;margin:0 auto 8px;}
.search-box input{
  flex:1;padding:13px 16px;border-radius:8px;border:1.5px solid var(--line);font-size:15px;
}
.search-box input:focus{outline:none;border-color:var(--blue);}
.search-hint{text-align:center;font-size:13px;color:var(--ink-soft);margin-bottom:26px;}
.hs-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
.hs-table th{background:var(--blue-light);color:var(--navy);text-align:left;font-size:12.5px;padding:12px 14px;}
.hs-table td{padding:12px 14px;border-top:1px solid var(--line);font-size:14px;}
.hs-table td.hs{font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:700;color:var(--blue);white-space:nowrap;}
.pagination{display:flex;justify-content:center;gap:8px;margin-top:24px;flex-wrap:wrap;}
.pagination a,.pagination span{
  padding:8px 13px;border-radius:6px;border:1px solid var(--line);background:#fff;font-size:13.5px;color:var(--ink);
}
.pagination a:hover{border-color:var(--blue);text-decoration:none;}
.pagination .active{background:var(--blue);color:#fff;border-color:var(--blue);}

/* CTA band */
.cta-band{
  background:linear-gradient(135deg,var(--navy) 0%,#1a4d82 100%);color:#fff;text-align:center;padding:56px 0;
}
.cta-band h2{font-size:26px;margin:0 0 10px;}
.cta-band p{color:#d7e4f4;margin:0 0 24px;font-size:15.5px;}
.cta-band .btn-row{justify-content:center;}
.contact-inline{margin-top:18px;font-size:14px;color:#cfe0f5;}
.contact-inline b{color:#fff;}

/* spotlight card — thẻ to, nổi bật nhất, luôn ở vị trí đầu trang */
.spotlight-card{
  background:linear-gradient(135deg,#eab958 0%,var(--gold) 55%,#a97824 100%);
  border-radius:14px;padding:28px 30px;margin:20px 0;
  box-shadow:0 14px 34px rgba(200,149,43,0.35);
}
.spotlight-card .spotlight-eyebrow{
  display:inline-block;background:#1c1300;color:#ffd77a;font-size:11.5px;font-weight:800;
  letter-spacing:0.5px;text-transform:uppercase;padding:5px 11px;border-radius:6px;margin-bottom:14px;
}
.spotlight-card h2{font-size:24px;margin:0 0 10px;color:#1c1300;line-height:1.35;}
.spotlight-card p{font-size:15px;color:#3a2a05;margin:0 0 20px;max-width:720px;}
.spotlight-card .btn{background:#1c1300;color:#fff;font-weight:800;font-size:15px;padding:13px 26px;}
.spotlight-card .btn:hover{opacity:0.88;text-decoration:none;}

/* slogan strip (tất cả các trang) */
.stats-strip{background:var(--navy);padding:14px 0;border-top:1px solid rgba(255,255,255,0.08);}
.stats-strip .wrap{display:flex;gap:32px;flex-wrap:wrap;justify-content:center;}
.stats-strip .stat{text-align:center;}
.stats-strip .stat b{display:block;font-size:22px;color:#fff;line-height:1.2;}
.stats-strip .stat span{font-size:12.5px;color:#b9cde6;}
.slogan-strip{background:var(--navy-2);padding:9px 0;}
.slogan-strip .wrap{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;text-align:center;}
.slogan-strip span{font-size:13.5px;color:#dbe8f7;}
.slogan-strip b{color:#fff;}

/* slogan banner (trang chủ) */
.slogan-banner{background:linear-gradient(90deg,#dda43a 0%,var(--gold) 100%);padding:12px 0;}
.slogan-banner .wrap{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;text-align:center;}
.slogan-banner .slogan-icon{font-size:19px;line-height:1;}
.slogan-banner .slogan-text{font-size:14.5px;color:#2a1d02;}
.slogan-banner .slogan-text b{color:#1c1300;}
.slogan-banner .slogan-cta{
  background:#1c1300;color:#fff;padding:7px 16px;border-radius:20px;font-weight:700;font-size:13px;white-space:nowrap;
}
.slogan-banner .slogan-cta:hover{opacity:0.88;text-decoration:none;}

/* detail page (HS code) */
.detail-hero{background:#fff;border-bottom:1px solid var(--line);padding:32px 0;}
.detail-hero-grid{display:grid;grid-template-columns:1fr minmax(320px,460px);gap:28px;align-items:start;}
.detail-hero-img{position:sticky;top:20px;}
.detail-hero-img img{width:100%;border-radius:var(--radius);display:block;object-fit:cover;aspect-ratio:1524/704;}
.detail-hero-img .cap{font-size:12.5px;color:var(--ink-soft);text-align:center;margin-top:6px;line-height:1.35;}
@media (max-width:960px){.detail-hero-grid{grid-template-columns:1fr;}.detail-hero-img{position:static;order:-1;max-width:460px;margin:0 auto 16px;}}

/* Banner đội xe đầu kéo — bản LỚN chèn gần cuối các trang không có sẵn
   chỗ trống trong hero (list/thông tin chung) */
.bottom-fleet-promo{max-width:820px;margin:36px auto 0;padding:0 20px;}
.bottom-fleet-promo .fleet-banner{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg);}
.bottom-fleet-promo .fleet-banner img{max-height:360px;}
.breadcrumb{font-size:13px;color:var(--ink-soft);margin-bottom:14px;}
.breadcrumb a{color:var(--ink-soft);}
.detail-hs{
  display:inline-block;font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:800;font-size:14px;
  color:var(--blue);background:var(--blue-light);padding:6px 12px;border-radius:8px;margin-bottom:12px;
}
.detail-hero h1{font-size:26px;margin:0 0 14px;color:var(--navy);line-height:1.4;}
.detail-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px;}
.detail-tags span{background:var(--bg);border:1px solid var(--line);font-size:12.5px;color:var(--ink-soft);padding:5px 10px;border-radius:6px;}

.detail-body{display:grid;grid-template-columns:1fr 320px;gap:36px;padding:40px 0;align-items:start;}
.detail-main .block{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;margin-bottom:20px;box-shadow:var(--shadow);}
.detail-main .block h2{font-size:17px;margin:0 0 12px;color:var(--navy);}
.detail-main .block p{font-size:14.5px;color:var(--ink);margin:0 0 10px;}
details.faq-item{border-bottom:1px solid var(--line);padding:12px 0;}
details.faq-item summary{cursor:pointer;font-weight:700;font-size:14.5px;list-style:none;color:var(--navy);}
details.faq-item summary::-webkit-details-marker{display:none;}
details.faq-item summary::before{content:"›";display:inline-block;margin-right:8px;transition:transform .15s;color:var(--blue);}
details.faq-item[open] summary::before{transform:rotate(90deg);}
details.faq-item p{margin:8px 0 0 20px;font-size:14px;color:var(--ink);}

.evidence-img{overflow-x:auto;border:1px solid var(--line);border-radius:8px;padding:10px;background:#fbfcfd;}
.evidence-note{font-size:12.5px;color:var(--ink-soft);margin-top:8px;}

/* Thẻ "dữ liệu thực tế" dựng bằng HTML/CSS thay cho ảnh PNG tự vẽ trước
   đây — cùng bố cục (header navy, lưới trường dữ liệu, thanh che redacted,
   viền vàng đáy) nhưng là CHỮ THẬT (Google đọc được, không tốn dung lượng
   ảnh) thay vì ảnh raster. Dùng cho hero trang chủ. */
.evidence-card{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.04);}
.evidence-card-head{background:var(--navy);color:#fff;font-weight:700;font-size:13px;letter-spacing:.02em;padding:12px 16px;}
.evidence-card-body{padding:14px 16px;border-bottom:4px solid var(--gold);}
.evidence-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px 14px;}
.evidence-card-grid .ek{display:block;font-size:11.5px;font-weight:700;color:var(--ink-soft);}
.evidence-card-grid .ev{display:block;font-size:14px;color:var(--ink);margin-top:2px;}
.evidence-card-desc{font-size:13px;color:var(--ink);margin-top:12px;padding-top:10px;border-top:1px solid var(--line);}
.evidence-card-redacted{margin-top:10px;padding:8px 10px;background:#1e1e1e;color:#dcdcdc;font-size:11.5px;text-align:center;border-radius:4px;}
.spec-table{width:100%;border-collapse:collapse;}
.spec-table td{padding:9px 0;border-bottom:1px dashed var(--line);font-size:14px;}
.spec-table td:first-child{color:var(--ink-soft);width:38%;}
.spec-table td:last-child{font-weight:600;}

.notice-box{
  background:#fdf6e8;border:1px solid #f0dfb0;border-left:5px solid var(--gold);
  border-radius:var(--radius);padding:22px 24px;margin-bottom:20px;
}
.notice-box .notice-slogan{font-size:18px;font-weight:800;color:var(--navy);margin:0 0 8px;line-height:1.4;}
.notice-box .notice-sub{font-size:13.5px;color:var(--ink-soft);margin:0 0 16px;}
.notice-box .notice-legal{font-size:11.5px;color:var(--ink-soft);margin:14px 0 0;}
.notice-box b{color:var(--navy);}

.side-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);margin-bottom:18px;}
.side-card h3{font-size:15.5px;margin:0 0 10px;color:var(--navy);}
.side-card p{font-size:13.5px;color:var(--ink-soft);margin:0 0 14px;}
.side-cta .btn{width:100%;justify-content:center;margin-bottom:8px;}
.side-cta .btn-outline{color:var(--ink);border-color:var(--line);}

/* nút nổi CTA nhóm Zalo chứng khoán */
.floating-stock{position:fixed;right:16px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:10px;background:#0a7d33;color:#fff;padding:14px 18px;border-radius:34px;box-shadow:0 4px 14px rgba(0,0,0,.25);z-index:50;font-size:14.5px;font-weight:700;line-height:1.3;text-decoration:none;max-width:220px;overflow:hidden;}
.floating-stock:hover{background:#086b2b;text-decoration:none;color:#fff;}
.floating-stock .fs-icon{font-size:26px;flex-shrink:0;}
.floating-stock::before{
  content:"💬";position:absolute;right:-8px;bottom:-16px;font-size:50px;line-height:1;
  opacity:.20;transform:rotate(-12deg);z-index:0;pointer-events:none;
}
.floating-stock .fs-icon,.floating-stock>span:not(.fs-icon){position:relative;z-index:1;}

/* toast thông báo đã copy tin nhắn Zalo */
.zalo-toast{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);
  background:#1c1300;color:#fff;padding:12px 20px;border-radius:10px;font-size:13.5px;font-weight:600;
  box-shadow:0 10px 28px rgba(0,0,0,0.25);opacity:0;transition:opacity .25s,transform .25s;z-index:999;max-width:90vw;text-align:center;
}
.zalo-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* footer */
.site-footer{background:var(--navy);color:#b9cde6;padding:36px 0;font-size:13.5px;}
.site-footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;}
.site-footer a{color:#dfeaf9;}
.site-footer .foot-brand{color:#fff;font-weight:700;margin-bottom:4px;}

/* utils */
.text-center{text-align:center;}
.mt-0{margin-top:0;}

@media (max-width: 860px){
  .hero .wrap{grid-template-columns:1fr;}
  .proof-grid, .steps, .article-grid{grid-template-columns:1fr;}
  .detail-body{grid-template-columns:1fr;}
  .nav{display:none;}
  .hero h1{font-size:28px;}
}