/*
Theme Name: Taxi Tải 24H
Theme URI: https://taxitai24h.vn
Author: Taxi Tải 24H
Description: Giao diện website chuyển nhà trọn gói, cho thuê xe tải, có công cụ tính giá, thư viện ảnh và biểu mẫu liên hệ.
Version: 1.3.1
Text Domain: taxitai24h
*/
:root{--bg:#fffaf5;--surface:#fff;--ink:#1b2433;--muted:#5c6679;--brand:#f26b1d;--brand-ink:#fff;--navy:#14243d;--line:#e8dfd5;color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#10151f;--surface:#18202e;--ink:#eef1f6;--muted:#a3adbf;--navy:#0b1220;--line:#2a3447;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#10151f;--surface:#18202e;--ink:#eef1f6;--muted:#a3adbf;--navy:#0b1220;--line:#2a3447;color-scheme:dark}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:calc(72px + env(safe-area-inset-top,0px))}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Be Vietnam Pro',system-ui,sans-serif;line-height:1.6}
a{color:inherit;text-decoration:none}
.wrap{max-width:1100px;margin:0 auto;padding:0 20px}
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--navy);color:#fff}
.bar{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{font-weight:800;font-size:20px}.logo b{color:var(--brand)}
nav .menu{list-style:none;margin:0;padding:0;display:flex;gap:4px}
nav li{position:relative}
nav .menu>li>a{display:block;padding:10px 14px;border-radius:8px;font:inherit;font-weight:600;font-size:15px;color:#fff;background:none;border:0;cursor:pointer}
nav .menu>li>a:hover{background:rgba(255,255,255,.1)}
.sub-menu{list-style:none;margin:0;display:none;position:absolute;top:100%;left:0;min-width:220px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:6px;box-shadow:0 10px 30px rgba(0,0,0,.2)}
.sub-menu a{display:block;padding:9px 12px;border-radius:6px;font-size:14px}.sub-menu a:hover{background:var(--bg);color:var(--brand)}
li.menu-item-has-children:hover>.sub-menu,li.menu-item-has-children:focus-within>.sub-menu{display:block}
.burger{display:none;background:none;border:0;color:#fff;font-size:26px;cursor:pointer}
@media(max-width:980px){.burger{display:block}nav{display:none;position:absolute;left:0;right:0;top:64px;background:var(--navy);padding:8px 20px 16px}nav.show{display:block}nav .menu{flex-direction:column}.sub-menu{display:block;position:static;box-shadow:none;margin:0 0 6px 10px;background:rgba(255,255,255,.06);color:#fff;border:0}.sub-menu a:hover{background:rgba(255,255,255,.1)}}
.hero{background:linear-gradient(135deg,var(--navy),#23406b);color:#fff;padding:72px 0}
.hero .wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center}
@media(max-width:820px){.hero .wrap{grid-template-columns:1fr}}
.hero .ht{color:#fff}.hero h1{font-size:clamp(28px,5vw,46px);line-height:1.2;margin:0 0 14px;font-weight:800}.hero h1 span{color:var(--brand)}
.hero p{color:#cdd6e6;margin:0 0 24px;font-size:17px}
.btn{display:inline-block;padding:13px 24px;border-radius:10px;font-weight:700;background:var(--brand);color:var(--brand-ink);border:0;font:inherit;font-weight:700;cursor:pointer}
.btn.ghost{background:transparent;border:2px solid #fff;margin-left:8px}
.truck{background:rgba(255,255,255,.08);border-radius:20px;padding:28px;text-align:center;font-size:90px}
.truck small{display:block;font-size:15px;color:#cdd6e6;margin-top:6px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:-34px;position:relative}
@media(max-width:640px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px;text-align:center}
.stat b{display:block;font-size:26px;color:var(--brand)}.stat span{font-size:13px;color:var(--muted)}
section{padding:64px 0}
h2{font-size:clamp(24px,4vw,34px);margin:0 0 8px}h2+p.lead{color:var(--muted);margin:0 0 32px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:24px}
.card .ic{font-size:34px}.card h3{margin:10px 0 6px;font-size:18px}.card p{margin:0;color:var(--muted);font-size:15px}
.card a.more{display:inline-block;margin-top:12px;color:var(--brand);font-weight:600;font-size:14px}
.about{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}
@media(max-width:820px){.about{grid-template-columns:1fr}}
.about ul{padding:0;list-style:none;margin:16px 0 0}.about li{padding:6px 0}.about li::before{content:"✓ ";color:var(--brand);font-weight:800}
.alt{background:var(--surface);border-block:1px solid var(--line)}
.tw{overflow-x:auto}
table{width:100%;border-collapse:collapse;min-width:560px;background:var(--bg);border-radius:12px;overflow:hidden}
th,td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line);font-size:15px}
th{background:var(--navy);color:#fff}td.p{font-weight:700;color:var(--brand)}
.note{font-size:13px;color:var(--muted);margin-top:12px}
.news .tag{font-size:12px;font-weight:700;color:var(--brand);text-transform:uppercase}
.news time{font-size:13px;color:var(--muted)}
.contact{display:grid;grid-template-columns:1fr 1.2fr;gap:28px}
@media(max-width:820px){.contact{grid-template-columns:1fr}}
.info p{margin:0 0 14px}
input,select,textarea{width:100%;padding:12px;margin-bottom:12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);font:inherit}
footer{background:var(--navy);color:#b9c3d6;padding:28px 0;text-align:center;font-size:14px}
.call{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));background:var(--brand);color:#fff;padding:14px 20px;border-radius:999px;font-weight:700;box-shadow:0 8px 24px rgba(0,0,0,.3);z-index:30}
[hidden]{display:none!important}
.gf{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.gf button{padding:8px 16px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-size:14px;cursor:pointer}
.gf button.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.gg{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.g{margin:0;aspect-ratio:4/3;border-radius:14px;background:linear-gradient(135deg,var(--a),var(--b));color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;overflow:hidden}
.g span{font-size:64px}.g figcaption{position:absolute;left:0;right:0;bottom:0;padding:10px 14px;background:rgba(0,0,0,.5);font-size:14px}
.lb{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:50;display:none;align-items:center;justify-content:center;padding:20px}.lb.on{display:flex}.lb .g{width:min(680px,100%);cursor:default}.lb .g span{font-size:120px}
.cal{max-width:720px}
.cc{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:12px}
.ct{background:var(--navy);color:#fff;padding:6px 12px;border-radius:8px;font-weight:700;font-size:14px;margin-bottom:12px}
.cc label.l{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:4px;text-transform:uppercase}
.r2{display:grid;grid-template-columns:1fr 1fr;gap:10px}@media(max-width:480px){.r2{grid-template-columns:1fr}}
.qr{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;padding:6px 10px;margin-bottom:8px;background:var(--bg)}
.qr .q{flex:1;font-size:14px}.qr small{display:block;color:var(--muted);font-size:12px}
.qb{width:32px;height:32px;border:1.5px solid var(--brand);background:var(--surface);color:var(--brand);border-radius:8px;font-size:18px;font-weight:700;cursor:pointer;padding:0}
.qv{display:inline-block;width:34px;text-align:center;font-weight:700}
.ck{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:10px;padding:9px 12px;margin-bottom:8px;cursor:pointer;background:var(--bg);font-size:14px}
.ck input{width:18px;height:18px;padding:0;margin:2px 0 0;accent-color:var(--brand)}.ck small{display:block;color:var(--muted);font-size:12px}
.cn{font-size:12.5px;background:rgba(242,107,29,.12);border-radius:8px;padding:9px 12px;line-height:1.5;margin-bottom:8px}
.ce{color:#e03131;background:rgba(224,49,49,.1);border-radius:8px;padding:10px;margin-bottom:10px;font-size:14px}
.btn.alt{background:var(--navy);color:#fff}
#qs{background:#fff;color:#1a1a1a;border:2px solid #14243d;border-radius:14px;overflow:hidden;margin-top:14px}
.qh{background:#14243d;color:#fff;padding:12px 16px;display:flex;justify-content:space-between;gap:8px;font-size:14px}
.qy{padding:14px 16px}.qc{text-align:center;border-bottom:1px dashed #ccc;padding-bottom:10px;margin-bottom:10px;font-size:14px}.qc b{font-size:20px;color:#14243d}
.qk{background:#fff3ea;border-left:4px solid #f26b1d;border-radius:6px;padding:8px 12px;margin-bottom:10px;font-size:14px}
.qi{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid #eee;font-size:14px}.qi small{display:block;color:#666;font-size:12px}.qi b{white-space:nowrap}
.qt{display:flex;justify-content:space-between;gap:10px;padding:8px 12px;margin-top:6px;background:#f7f7f7;border-radius:8px;font-size:13px}
.qg{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;margin-top:8px;background:#fff3ea;border:1.5px solid #f26b1d;border-radius:8px;font-weight:800}.qg b{font-size:22px;color:#e03131}
.qz{margin-top:10px;font-size:12px;color:#666;background:#fffbf0;border:1px solid #ffe5a0;border-radius:6px;padding:8px 10px;line-height:1.5}

nav .menu>li>a{color:#fff}
.admin-bar header{top:32px}
.g img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.entry{padding:48px 0}.entry h1{font-size:clamp(26px,4vw,38px);margin:0 0 16px}
.entry .content{max-width:760px}.entry .content img{max-width:100%;height:auto}
.entry .grid{margin-top:20px}.pagination{margin-top:24px}.pagination .page-numbers{padding:6px 12px;border:1px solid var(--line);border-radius:8px;margin-right:4px}
.msg-ok{background:rgba(14,124,58,.15);border-radius:10px;padding:12px 14px;margin-bottom:12px}
.news a.card{display:block}

.stat b{font-variant-numeric:tabular-nums}
.pp[hidden]{display:none}.pp .note{margin-top:12px}
.ng{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:900px){.ng{grid-template-columns:repeat(2,1fr)}}@media(max-width:480px){.ng{grid-template-columns:1fr}}
.nc{display:block;background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden}
a.nc:hover{border-color:var(--brand)}
.nt{aspect-ratio:1/1;background:linear-gradient(135deg,var(--a,#23406b),var(--b,#14243d));display:flex;align-items:center;justify-content:center;font-size:56px;color:#fff;overflow:hidden}
.nt img{width:100%;height:100%;object-fit:cover;display:block}
.nb{padding:14px}.nb h3{font-size:16px;margin:6px 0;line-height:1.4}

/* ẩn trực quan, vẫn đọc được bởi trình đọc màn hình */
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* hero */
.hero .ht{font-size:clamp(28px,5vw,46px);line-height:1.2;margin:0 0 14px;font-weight:800;color:#fff}
.hero .ht span{color:var(--brand);background:linear-gradient(90deg,#f26b1d,#ffc08a,#f26b1d);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shine 4s linear infinite}
.hero{position:relative;overflow:hidden}
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;filter:blur(70px);opacity:.35;animation:orb 14s ease-in-out infinite alternate;pointer-events:none}
.hero::before{width:380px;height:380px;background:#f26b1d;top:-140px;right:-90px}
.hero::after{width:320px;height:320px;background:#2563a8;bottom:-150px;left:-70px;animation-duration:18s}
.hero .wrap{position:relative;z-index:1}
.tk{display:inline-block;animation:drive 3.2s ease-in-out infinite}
.road{display:block;height:4px;width:80%;margin:8px auto 10px;border-radius:2px;background:repeating-linear-gradient(90deg,#fff 0 18px,transparent 18px 36px);opacity:.55;animation:road .9s linear infinite}
@keyframes shine{to{background-position:-200% 0}}
@keyframes orb{to{transform:translate(50px,36px) scale(1.18)}}
@keyframes drive{0%,100%{transform:translateX(-10px) translateY(0)}25%{transform:translateX(-4px) translateY(-3px)}50%{transform:translateX(10px) translateY(0)}75%{transform:translateX(4px) translateY(-3px)}}
@keyframes road{to{background-position:-36px 0}}
@keyframes fadeup{from{opacity:0;transform:translateY(10px)}}
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-12deg) scale(1.1)}60%{transform:rotate(10deg) scale(1.1)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(242,107,29,.6),0 8px 24px rgba(0,0,0,.3)}70%{box-shadow:0 0 0 16px rgba(242,107,29,0),0 8px 24px rgba(0,0,0,.3)}100%{box-shadow:0 0 0 0 rgba(242,107,29,0),0 8px 24px rgba(0,0,0,.3)}}
/* tương tác */
.btn{transition:transform .2s,box-shadow .2s,filter .2s}.btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(242,107,29,.35);filter:brightness(1.05)}.btn:active{transform:translateY(0)}
.card{transition:transform .25s,box-shadow .25s,border-color .25s}
.card:hover{transform:translateY(-6px);box-shadow:0 16px 32px rgba(0,0,0,.14);border-color:var(--brand)}
.card:hover .ic{display:inline-block;animation:wiggle .6s}
.stat{transition:transform .25s,box-shadow .25s}.stat:hover{transform:translateY(-4px);box-shadow:0 12px 26px rgba(0,0,0,.12)}
.g{transition:transform .3s}.g:hover{transform:scale(1.03)}.g img{transition:transform .5s}.g:hover img{transform:scale(1.08)}
.nc{transition:transform .25s,box-shadow .25s,border-color .25s}a.nc:hover{transform:translateY(-6px);box-shadow:0 16px 32px rgba(0,0,0,.14)}
.nt img{transition:transform .5s}a.nc:hover .nt img{transform:scale(1.08)}
.gf button{transition:background .2s,color .2s,transform .2s,border-color .2s}.gf button:hover{transform:translateY(-2px);border-color:var(--brand)}
.pp:not([hidden]),.g:not([hidden]){animation:fadeup .4s ease}
.call{animation:pulse 2.4s infinite;transition:transform .2s}.call:hover{transform:scale(1.06)}
header{transition:box-shadow .3s}header.sc{box-shadow:0 6px 22px rgba(0,0,0,.28)}
#pg{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--brand),#ffb37a);z-index:60;pointer-events:none}
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.rv{opacity:1!important;transform:none!important}html{scroll-behavior:auto}}

/* ===== Tối ưu đa thiết bị ===== */
html{-webkit-text-size-adjust:100%;padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
img{max-width:100%}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.tw{-webkit-overflow-scrolling:touch}
@media(max-width:980px){
nav{max-height:calc(100vh - 64px);overflow-y:auto}
.burger{min-width:44px;min-height:44px;padding:8px 10px}
nav .menu>li>a{padding:13px 14px}.sub-menu a{padding:12px}
}
@media(max-width:640px){
section{padding:44px 0}.hero{padding:44px 0}
.truck{font-size:64px;padding:20px}
.stat b{font-size:22px}.stats{gap:10px}
.btn.ghost{margin:10px 0 0}
th,td{padding:11px 12px;font-size:14px}
footer{padding-bottom:calc(28px + 70px)}
.call{padding:12px 16px;font-size:14px}
}
@media(pointer:coarse){
.qb{width:44px;height:44px;font-size:20px}.qv{width:40px}
.ck{padding:12px}.gf button{padding:10px 16px}
input,select,textarea{min-height:46px;font-size:16px}
}
@media(hover:none){
.card:hover,a.nc:hover,.stat:hover,.g:hover,.btn:hover{transform:none;box-shadow:none}
.g:hover img,a.nc:hover .nt img{transform:none}
}
@media(min-width:1400px){.wrap{max-width:1240px}}

/* ===== Logo ===== */
.logo{display:flex;align-items:center}.logo .lg{height:50px;width:auto;display:block}
.fl{margin-bottom:10px}.fl .lg{height:64px;width:auto;display:inline-block}
@media(max-width:640px){.logo .lg{height:44px}}
/* ===== Khung ảnh / video đầu trang ===== */
.hs{position:relative;aspect-ratio:4/3;border-radius:20px;overflow:hidden;background:rgba(255,255,255,.08);box-shadow:0 16px 40px rgba(0,0,0,.3)}
.hsl{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .8s}.hsl.on{opacity:1}
.hsl img{width:100%;height:100%;object-fit:cover;display:block}
.hsl figcaption{position:absolute;left:0;right:0;bottom:0;padding:28px 16px 14px;background:linear-gradient(transparent,rgba(0,0,0,.65));color:#fff;font-size:14px}
.hp,.hn{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border:0;border-radius:50%;background:rgba(0,0,0,.4);color:#fff;font-size:26px;line-height:1;cursor:pointer;z-index:2}
.hp{left:10px}.hn{right:10px}.hp:hover,.hn:hover{background:var(--brand)}
.hd{position:absolute;right:14px;bottom:12px;display:flex;gap:6px;z-index:2}.hd i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.5);transition:all .3s}.hd i.on{background:#fff;width:22px;border-radius:4px}
.hs.hl{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;text-align:center;color:#cdd6e6}.hs.hl img{width:62%;max-width:260px;height:auto}.hs.hl p{margin:10px 0 0;font-size:15px}
.hv{aspect-ratio:16/9;border-radius:20px;overflow:hidden;background:#000;box-shadow:0 16px 40px rgba(0,0,0,.3)}.hv iframe,.hv video{width:100%;height:100%;border:0;display:block}
/* ===== Công cụ tính giá ===== */
.tc .box{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:18px}
.tc .fg{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:520px){.tc .fg{grid-template-columns:1fr}}
.tc label{display:block;font-size:14px;font-weight:600;margin-bottom:5px}
.tc label small{display:block;font-weight:400;color:var(--muted);font-size:12.5px}
.tc select,.tc input{width:100%;min-height:48px;padding:0 12px;margin:0;font:inherit;font-size:16px;border:1.5px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink)}
.tc select:focus,.tc input:focus{outline:none;border-color:var(--brand)}
.tc .go{display:block;width:100%;margin-top:18px;padding:15px;border:0;border-radius:14px;background:linear-gradient(135deg,#f5a623,#f26b1d);color:#fff;font:inherit;font-size:18px;font-weight:800;cursor:pointer;box-shadow:0 6px 18px rgba(242,107,29,.35);transition:transform .15s,box-shadow .15s}
.tc .go:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(242,107,29,.45)}.tc .go:disabled{opacity:.6;cursor:wait;transform:none}
.tc .err{margin-top:12px;padding:10px 12px;border-radius:10px;background:rgba(224,49,49,.12);color:#e03131;font-size:14px}
.tc .msg{margin:10px 0 0;font-size:13px;color:var(--muted);text-align:center}
.tc #tc-qs{margin-top:18px;background:#fff;color:#1a1a1a;border:2px solid #14243d;border-radius:14px;overflow:hidden}
.tc .qh{background:#14243d;color:#fff;padding:12px 16px;display:flex;justify-content:space-between;gap:8px;font-size:14px}
.tc .qc img.ql{display:none;height:72px;width:auto;margin:0 auto 4px}
.tc .qc b{font-size:20px;color:#14243d}
.tc .again{display:block;width:100%;margin-top:10px;padding:12px;border-radius:12px;border:1.5px solid var(--brand);background:transparent;color:var(--brand);font:inherit;font-weight:700;cursor:pointer}