:root{
  --blue:#1E76D6; --blue-deep:#0B4A82; --blue-mid:#1462AE; --blue-pale:#EAF4FF; --blue-pale-2:#DCEBFB;
  --accent:#FF7A33; --accent-2:#E85D1A;
  --green:#1F9D6E; --green-pale:#E7F7F0;
  --ink:#132436; --gray:#5C6B7A;
  --line:#DCE6F0;
  --white:#FFFFFF; --bg:#F5F9FD;
  --font:"Be Vietnam Pro",sans-serif; --mono:"JetBrains Mono",monospace;
  --r-sm:10px; --r-md:14px; --r-lg:20px;
}
*{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth; overflow-x:hidden; overscroll-behavior-y:none; overscroll-behavior-x:none;}
/* -webkit-tap-highlight-color:transparent bỏ hẳn vệt xám/xanh chớp khi chạm trên di động (mặc
   định của trình duyệt) - 1 trong những thứ khiến web app "cảm giác web" chứ không "cảm giác app
   native" như TikTok. overflow-x:hidden ở html chặn cuộn ngang lỡ phát sinh từ phần tử tràn lề.
   overscroll-behavior-y:none ĐẶT Ở HTML (không phải body) - đặt ở body từng làm phím mũi tên/lăn
   chuột không cuộn trang được ở Chrome (html mới là scrollingElement thật, đặt overscroll-behavior
   ở body gây lệch giữa phần tử bị chặn và phần tử đang thật sự cuộn, vô tình chặn luôn cuộn bình
   thường chứ không chỉ chặn hiệu ứng bounce ở mép). overscroll-behavior-x:none chặn thêm hiệu ứng
   đàn hồi/kéo lệch NGANG của Safari di động (đặc biệt lúc kéo tay để refresh - vuốt chéo dễ vô tình
   kéo lệch cả trang sang phải, đứng yên luôn ở trạng thái lệch sau khi tải lại xong).
   CỐ Ý KHÔNG đặt overflow-x:hidden ở body (dù trước đây có) - theo spec CSS, đặt overflow-x khác
   'visible' mà không đặt overflow-y sẽ khiến trình duyệt tự ép overflow-y thành 'auto', biến body
   thành 1 vùng cuộn RIÊNG (khác html) - vô tình phá vỡ .nav{position:sticky} (header không còn dính
   ở đầu trang mà cuộn trôi theo nội dung, xem mục 146 guideline). html đã có overflow-x:hidden là đủ
   để chặn tràn ngang cho toàn trang (html mới là scrollingElement thật), không cần lặp lại ở body. */
body{background:var(--bg); color:var(--ink); font-family:var(--font); line-height:1.5; -webkit-font-smoothing:antialiased;}
button, a, .card, .tab, .btn-solid, .btn-outline, .btn-outline-dark{touch-action:manipulation;}
.wrap{max-width:1180px; margin:0 auto; padding:0 24px;}
a{color:inherit; text-decoration:none;}
button, input, select{font-family:var(--font);}
ul{list-style:none;}
img,svg{display:block; max-width:100%;}

.view{display:none;}
.view.active{display:block; animation:fadeIn .25s ease;}
@keyframes fadeIn{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}}

.nav{position:sticky; top:0; z-index:80; background:var(--blue-deep); box-shadow:0 2px 12px rgba(11,74,130,0.18);}
.nav .wrap{display:flex; align-items:center; gap:14px; height:68px;}
.logo{display:flex; align-items:center; gap:8px; font-size:20px; letter-spacing:-0.01em; flex-shrink:0; cursor:pointer; color:#fff; white-space:nowrap;}
.logo .mark{width:32px; height:32px; display:block;}
/* Chữ hiệu 2 trọng lượng - "Healing" nhẹ/mờ hơn, "Car" đậm/trắng hẳn - khoảng cách icon-chữ dùng
   luôn gap:8px của .logo (không thêm margin riêng) để không lệch với các bản xem trước đã duyệt. */
.logo-healing{font-weight:500; opacity:0.75;}
.logo-car{font-weight:800;}

.nav-center{flex:1; display:flex; align-items:center; justify-content:flex-start; gap:10px; min-width:0; margin-left:20px;}
.tabs-primary{display:flex; gap:10px; flex-shrink:0;}
.tab{
  font-size:14.5px; font-weight:700; color:rgba(255,255,255,0.85); padding:9px 16px; border-radius:100px;
  white-space:nowrap; border:none; background:none; transition:background .15s,color .15s; cursor:pointer;
}
.tab:hover{background:rgba(255,255,255,0.14); color:#fff;}
.tab.active{background:#fff; color:var(--blue-deep);}
.tab-hot{background:var(--accent); color:#fff; animation:tabHotPulse 2.2s ease-in-out infinite;}
.tab-hot:hover{background:var(--accent-2); color:#fff;}
.tab-hot.active{background:#fff; color:var(--accent-2); animation:none;}
@keyframes tabHotPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,122,51,0.5);} 50%{box-shadow:0 0 0 7px rgba(255,122,51,0);}}

.dropdown{position:relative; flex-shrink:0;}
.dropdown-toggle{
  display:flex; align-items:center; gap:5px; font-size:14.5px; font-weight:700; color:rgba(255,255,255,0.85);
  padding:9px 16px; border-radius:100px; border:none; background:none; cursor:pointer; white-space:nowrap;
  transition:background .15s, color .15s;
}
.dropdown-toggle:hover{background:rgba(255,255,255,0.14); color:#fff;}
.dropdown-toggle .caret{font-size:10px; opacity:0.7;}
.dropdown.open .dropdown-toggle{background:rgba(255,255,255,0.14); color:#fff;}
.dropdown-menu{
  display:none; position:absolute; top:calc(100% + 10px); left:0; background:#fff; border:1px solid var(--line);
  border-radius:14px; box-shadow:0 20px 40px -16px rgba(11,74,130,0.28); padding:8px; min-width:220px; z-index:90;
  max-height:calc(100vh - 90px); overflow-y:auto;
}
.dropdown.open .dropdown-menu{display:block;}
.dropdown-menu .tab{display:block; width:100%; text-align:left; border-radius:9px; background:none; color:var(--ink); font-weight:600; padding:10px 12px; font-size:14.5px;}
.dropdown-menu .tab:hover{background:var(--blue-pale); color:var(--blue-deep);}
.dropdown-menu .tab.active{background:var(--blue-pale); color:var(--blue-deep); font-weight:800;}

.lang-dropdown{margin-left:2px;}
.lang-toggle{border:1.5px solid #fff; color:#fff; padding:8.5px 14px;}
.lang-toggle:hover{background:rgba(255,255,255,0.14); color:#fff;}
.lang-menu{right:0; left:auto; min-width:160px;}
.lang-menu button{
  display:block; width:100%; text-align:left; border:none; background:none; cursor:pointer;
  font-size:14.5px; font-weight:600; color:var(--ink); padding:9px 12px; border-radius:9px;
}
.lang-menu button:hover{background:var(--blue-pale); color:var(--blue-deep);}

.user-dropdown{margin-left:2px;}
.user-avatar-btn{
  width:34px; height:34px; border-radius:100px; border:1.5px solid #fff; background:rgba(255,255,255,0.12);
  color:#fff; font-weight:800; font-size:14px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; padding:0; flex-shrink:0;
}
.user-avatar-btn:hover{background:rgba(255,255,255,0.22);}
.user-menu{right:0; left:auto; min-width:190px;}
.user-menu-name{font-size:13px; font-weight:700; color:var(--ink); padding:8px 12px 10px; border-bottom:1px solid var(--line); margin-bottom:6px; word-break:break-word;}
.user-menu button{
  display:block; width:100%; text-align:left; border:none; background:none; cursor:pointer;
  font-size:14.5px; font-weight:600; color:var(--ink); padding:9px 12px; border-radius:9px;
}
.user-menu button:hover{background:var(--blue-pale); color:var(--blue-deep);}

.lang-toast{
  position:fixed; top:80px; left:50%; transform:translateX(-50%) translateY(-8px); z-index:150;
  background:var(--ink); color:#fff; font-size:13px; font-weight:600; padding:10px 18px; border-radius:100px;
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; box-shadow:0 12px 24px -8px rgba(0,0,0,0.3);
}
.lang-toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

.nav-actions{display:flex; align-items:center; gap:14px; flex-shrink:0;}
.nav-right{display:flex; align-items:center; gap:10px; flex-shrink:0;}
.btn-outline{border:1.5px solid #fff; color:#fff; font-weight:700; font-size:14.5px; padding:8.5px 14px; border-radius:100px; background:none; cursor:pointer; white-space:nowrap;}
.btn-outline:hover{background:rgba(255,255,255,0.14);}
.btn-solid{background:var(--accent); color:#fff; font-weight:700; font-size:14.5px; padding:9px 16px; border-radius:100px; border:none; cursor:pointer; white-space:nowrap;}
.btn-solid:hover{background:var(--accent-2);}
/* Nút hamburger (☰) thay cho ô <select> cũ - chỉ hiện ở màn hình hẹp (xem media query bên dưới),
   gọn 1 icon vuông thay vì 1 khối chữ dài "Trang chủ"/"Xe tự lái"..., không còn chiếm chỗ của
   khu vực chọn ngôn ngữ bên cạnh. */
.nav-hamburger{display:none;}
.hamburger-toggle{font-size:26px; line-height:1; padding:8px 14px;}
.nav-hamburger .dropdown-menu{max-height:70vh; overflow-y:auto; min-width:230px;}

/* Trước đây .nav-hamburger chỉ hiện ở max-width:620/480px trong khi .btn-outline (Đăng nhập/Đăng
   ký thành viên/Đăng ký xe - bản desktop) đã ẩn từ 900px - tạo ra 1 khoảng TRỐNG 620-900px không
   gì hiển thị cả. Khoảng này RẤT hay gặp thật khi xoay ngang điện thoại (iPhone ngang thường
   ~700-930px tuỳ máy) - đúng lỗi "xoay ngang mất luôn nút 3 gạch" người dùng báo. Gộp chung 3
   breakpoint (.nav-hamburger, .tabs-primary, #moreDropdown) về ĐÚNG 900px, khớp breakpoint
   .btn-outline đã có, để không còn khoảng trống nào giữa "chế độ desktop" và "chế độ di động". */
@media (max-width:900px){ .nav-right .btn-outline{display:none;} .tabs-primary{display:none;} #moreDropdown{display:none;} .nav-hamburger{display:block;} }
@media (max-width:760px){ .nav .wrap{gap:8px;} .tab{padding:8px 10px; font-size:13px;} .dropdown-toggle{padding:8px 10px; font-size:13px;} .lang-code-txt{display:none;} .lang-toggle{padding:8px 9px;} }
/* .hamburger-toggle cũng mang class .dropdown-toggle (dùng chung với nút chọn ngôn ngữ) nên bị
   rule mobile phía trên (font-size:13px) đè mất kích thước 26px đã đặt ở trên - khiến icon 3 gạch
   thu nhỏ hẳn lại trên điện thoại dù trên desktop vẫn to bình thường. Ghi đè lại riêng cho đúng
   phần tử này NGAY SAU rule chung, to hơn cả bản gốc + thêm padding ngang để nhìn "dài" hơn 1 chút. */
@media (max-width:760px){ .hamburger-toggle{font-size:32px; padding:8px 16px;} }
@media (max-width:620px){ .btn-solid{padding:9px 12px; font-size:12px;} }
/* Chỉ định phạm vi RÕ vào .nav-right - trước đây bare ".btn-solid{display:none}" vô tình ẩn LUÔN
   mọi nút khác dùng chung class "btn-solid" ở bất kỳ đâu trên trang (vd nút "Đăng ký ngay" ở
   trang chủ) chỉ vì trùng tên class, dù không liên quan gì tới thanh nav - đúng lỗi "biến mất
   không lý do" người dùng báo. */
@media (max-width:400px){ .nav-right .btn-solid{display:none;} }

.floating-contact{position:fixed; left:20px; bottom:24px; display:flex; flex-direction:column; gap:12px; z-index:120;}
.fab{
  width:52px; height:52px; border-radius:100px; display:flex; align-items:center; justify-content:center;
  font-size:22px; color:#fff; box-shadow:0 10px 24px -6px rgba(0,0,0,0.35); transition:transform .15s; text-decoration:none;
}
.fab:hover{transform:scale(1.08);}
.fab.messenger{background:linear-gradient(135deg,#00B2FF,#006AFF);}
@media (max-width:560px){ .fab{width:46px; height:46px; font-size:19px;} .floating-contact{left:14px; bottom:16px; gap:10px;} }

section{padding:52px 0;}
.kicker{font-family:var(--mono); font-size:12px; letter-spacing:0.07em; text-transform:uppercase; color:var(--accent); font-weight:700; margin-bottom:8px;}
h2.h2{font-size:clamp(22px,2.8vw,30px); font-weight:900; letter-spacing:-0.015em;}
.sec-head{display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:26px; flex-wrap:wrap;}
.see-all{font-size:13.5px; font-weight:700; color:var(--blue-deep); border-bottom:2px solid var(--accent); padding-bottom:2px; white-space:nowrap; cursor:pointer; background:none; border-left:none; border-right:none; border-top:none;}

.hero{background:linear-gradient(160deg, var(--blue-deep), var(--blue-mid) 70%); padding:44px 0 0; position:relative; overflow:hidden;}
.hero::after{content:""; position:absolute; inset:0; background:radial-gradient(circle at 88% 10%, rgba(255,255,255,0.10), transparent 45%); pointer-events:none;}
.hero-inner{padding-bottom:52px; position:relative;}
.hero .eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:0.06em; text-transform:uppercase; font-weight:600; color:#BFE0FF; display:inline-flex; align-items:flex-start; gap:7px; margin-bottom:16px;}
.hero .eyebrow::before{content:"●"; font-size:7px; color:var(--accent); margin-top:6px;}
.hero h1{color:#fff; font-size:clamp(28px,4vw,42px); font-weight:900; letter-spacing:-0.02em; line-height:1.14; max-width:620px;}
.hero h1 em{font-style:normal; color:#BFE0FF;}
.hero p{color:rgba(255,255,255,0.78); font-size:15.5px; margin-top:14px; max-width:520px;}

.search-widget{margin-top:30px; background:var(--white); border-radius:var(--r-lg); box-shadow:0 24px 48px -18px rgba(11,74,130,0.5); padding:8px; display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr auto; gap:2px;}
.sw-field{padding:12px 16px; border-radius:12px; transition:background .15s; cursor:pointer;}
.sw-field:hover{background:var(--blue-pale);}
.sw-field.field-invalid{background:#FDEAEA;}
.sw-field.field-invalid .sw-label{color:#C0392B;}
.sw-label{font-size:11px; text-transform:uppercase; letter-spacing:0.04em; color:var(--gray); font-weight:700; font-family:var(--mono);}
.sw-value{font-size:14.5px; font-weight:700; margin-top:4px; color:var(--ink);}
.sw-value.muted{font-weight:500; color:#9AA7B4;}
.sw-select, .sw-input{font-size:14.5px; font-weight:700; margin-top:4px; color:var(--ink); border:none; background:transparent; width:100%; padding:0; font-family:inherit; cursor:pointer;}
.sw-input[type="text"]{cursor:text; font-weight:600;}
.sw-input:focus, .sw-select:focus{outline:none;}
.sw-input::placeholder{color:#9AA7B4; font-weight:500;}
.sw-datetime{display:flex; gap:6px; margin-top:4px;}
.sw-datetime .sw-input{font-size:13px; cursor:pointer;}
.sw-btn{background:var(--accent); color:#fff; border:none; border-radius:12px; font-weight:800; font-size:14.5px; padding:0 26px; display:flex; align-items:center; gap:8px;}
@media (max-width:920px){ .search-widget{grid-template-columns:1fr 1fr;} .sw-btn{grid-column:1/-1; justify-content:center; padding:14px;} }
@media (max-width:600px){ .search-widget{grid-template-columns:1fr;} .sw-btn{grid-column:auto;} }

.toggle-row{display:flex; gap:10px; margin-top:18px; flex-wrap:wrap;}
.toggle-pill{font-size:13px; font-weight:700; padding:8px 16px; border-radius:100px; border:1.5px solid rgba(255,255,255,0.3); color:rgba(255,255,255,0.85); background:none; cursor:pointer;}
.toggle-pill.active{background:#fff; border-color:#fff; color:var(--blue-deep);}

.trust-strip{background:var(--white); padding:24px 0 0;}
.trust-strip .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:18px; border-top:1px solid var(--line); padding:20px 24px;}
.trust-item{display:flex; align-items:baseline; gap:8px; font-size:13.5px; color:var(--gray);}
.trust-item b{font-family:var(--mono); font-size:19px; color:var(--blue-deep); font-weight:700;}

.cat-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:14px;}
@media (max-width:920px){ .cat-grid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:560px){ .cat-grid{grid-template-columns:repeat(2,1fr);} }
.cat-tile{background:var(--white); border:1px solid var(--line); border-radius:var(--r-md); padding:18px 14px; text-align:center; transition:transform .15s, border-color .15s; cursor:pointer;}
.cat-tile:hover{transform:translateY(-3px); border-color:var(--blue);}
.cat-ico{width:44px; height:44px; border-radius:12px; margin:0 auto 10px; display:flex; align-items:center; justify-content:center; font-size:20px; color:#fff;}
.cat-tile .cn{font-size:13px; font-weight:700; line-height:1.3;}
.cat-tile .cc{font-size:11.5px; color:var(--gray); margin-top:2px;}

.listing-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
@media (max-width:980px){ .listing-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .listing-grid{grid-template-columns:1fr;} }
.card{background:var(--white); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; transition:box-shadow .18s, transform .18s;}
.card:hover{box-shadow:0 16px 32px -14px rgba(11,74,130,0.22); transform:translateY(-2px);}
.card-thumb{height:132px; position:relative; display:flex; align-items:center; justify-content:center; font-size:36px; cursor:pointer;}
.card-thumb.has-photo{background:var(--bg);}
.card-thumb img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.card-badge{position:absolute; top:10px; left:10px; background:rgba(11,74,130,0.85); color:#fff; font-size:10.5px; font-weight:700; padding:4px 9px; border-radius:100px; font-family:var(--mono); z-index:1;}
.card-video-badge{position:absolute; bottom:10px; left:10px; background:rgba(255,122,51,0.92); color:#fff; font-size:10.5px; font-weight:700; padding:4px 9px; border-radius:100px; z-index:1;}
.card-fav{position:absolute; top:10px; right:10px; width:28px; height:28px; border-radius:100px; background:rgba(255,255,255,0.85); display:flex; align-items:center; justify-content:center; font-size:13px; z-index:1;}
.card-body{padding:14px 16px 16px;}
.card-title{font-size:14.5px; font-weight:800; line-height:1.3;}
.card-meta{font-size:12.5px; color:var(--gray); margin-top:4px;}
.card-rating{display:flex; align-items:center; gap:6px; margin-top:9px; font-size:12.5px;}
.stars{color:var(--accent); font-weight:700;}
.card-price-row{display:flex; justify-content:space-between; align-items:baseline; margin-top:11px; padding-top:11px; border-top:1px dashed var(--line);}
.card-price{font-family:var(--mono); font-size:16px; font-weight:700; color:var(--blue-deep);}
.card-price span{font-size:11px; font-weight:400; color:var(--gray);}
.card-discount-badge{display:inline-block; background:var(--accent); color:#fff; font-size:10.5px; font-weight:800; font-family:var(--font); padding:2px 7px; border-radius:100px; margin-right:6px; vertical-align:middle;}
.card-price-original{font-size:12px; font-weight:500; color:var(--gray); text-decoration:line-through; margin-right:6px; font-family:var(--font);}
.card-cta{width:100%; margin-top:12px; background:var(--blue); color:#fff; border:none; border-radius:9px; padding:9px; font-weight:700; font-size:13px; cursor:pointer;}
.card-cta:hover{background:var(--blue-deep);}

.why{background:var(--blue-pale); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.why-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden; margin-top:26px;}
.why-card{background:var(--white); padding:22px 20px;}
.why-card .wt{font-size:14px; font-weight:800; margin-bottom:6px; color:var(--blue-deep);}
.why-card .wd{font-size:12.5px; color:var(--gray); line-height:1.55;}
@media (max-width:820px){ .why-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .why-grid{grid-template-columns:1fr;} }

.partner-box{background:var(--blue-deep); border-radius:24px; padding:40px; position:relative; overflow:hidden; display:grid; grid-template-columns:1.2fr 1fr; gap:32px; align-items:center;}
/* Con trực tiếp của CSS Grid mặc định min-width:auto - không tự co nhỏ hơn độ rộng chữ dài nhất,
   khiến tiêu đề/mô tả bị TRÀN RA NGOÀI thay vì xuống dòng (đặc biệt rõ trên Safari di động thật,
   dù Chrome DevTools giả lập không luôn lộ ra). min-width:0 cho phép chữ co & xuống dòng đúng. */
.partner-box > div{min-width:0;}
.partner-box::before{content:""; position:absolute; inset:0; background:radial-gradient(circle at 85% 20%, rgba(255,122,51,0.16), transparent 45%); pointer-events:none;}
.partner-box h3{color:#fff; font-size:clamp(20px,3vw,26px); font-weight:900; letter-spacing:-0.01em; line-height:1.2;}
.partner-box p{color:rgba(255,255,255,0.72); font-size:14px; margin-top:10px; max-width:420px;}
.partner-stats{display:flex; flex-wrap:wrap; gap:24px; margin-top:20px;}
.partner-stats div b{display:block; font-family:var(--mono); color:#BFE0FF; font-size:19px;}
.partner-stats div span{font-size:11px; color:rgba(255,255,255,0.55);}
.partner-actions{margin-top:22px; display:flex; flex-wrap:wrap; gap:12px;}
/* .btn-outline-dark mặc định white-space:nowrap (hợp lý cho hầu hết chỗ dùng - nhãn ngắn) nhưng
   nút thứ 2 ở đây ("Không có xe? Đăng tour/dịch vụ kiếm thêm →") là câu DÀI - nowrap ép nó thành
   1 dòng rất rộng, tràn ra ngoài màn hình hẹp và bị overflow-x:hidden ở body cắt mất hẳn (đúng lỗi
   "biến mất" người dùng báo). Cho phép xuống dòng + xếp CHỒNG ĐỦ RỘNG 100% ở màn hình hẹp để 2 nút
   cân đối bằng nhau thay vì 1 ngắn 1 dài lệch nhau. */
.partner-actions .btn-solid, .partner-actions .btn-outline-dark{white-space:normal; text-align:center;}
@media (max-width:640px){ .partner-actions{flex-direction:column;} .partner-actions .btn-solid, .partner-actions .btn-outline-dark{width:100%;} }
.partner-card{background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.18); border-radius:16px; padding:20px;}
.partner-card .pl{font-family:var(--mono); font-size:11px; color:rgba(255,255,255,0.5); text-transform:uppercase;}
.partner-card .pv{color:#fff; font-size:14.5px; font-weight:700; margin:9px 0 12px; line-height:1.5;}
.partner-card ul{font-size:12.5px; color:rgba(255,255,255,0.75); line-height:2.05;}
.partner-card ul li::before{content:"✓ "; color:#7FE0B8; font-weight:800;}
@media (max-width:820px){ .partner-box{grid-template-columns:1fr;} }

footer{background:var(--blue-deep); color:rgba(255,255,255,0.65); padding:44px 0 22px; margin-top:8px;}
.foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:30px; padding-bottom:26px; border-bottom:1px solid rgba(255,255,255,0.14);}
@media (max-width:760px){ .foot-grid{grid-template-columns:1fr 1fr;} }
.foot-grid h5{color:#fff; font-size:13px; margin-bottom:12px; font-weight:800; text-transform:uppercase; letter-spacing:0.03em;}
.foot-grid ul{font-size:13px; line-height:2.2;}
.foot-grid ul a{color:rgba(255,255,255,0.65); text-decoration:none; cursor:pointer;}
.foot-grid ul a:hover{color:#fff; text-decoration:underline;}
.foot-bottom{display:flex; justify-content:space-between; padding-top:18px; font-size:12px; flex-wrap:wrap; gap:8px;}
.disclaimer{font-size:11.5px; color:rgba(255,255,255,0.4); max-width:680px; margin-top:12px; line-height:1.6;}

.page-head{background:var(--blue-pale); border-bottom:1px solid var(--line); padding:28px 0;}
.breadcrumb{font-size:12.5px; color:var(--gray); margin-bottom:8px;}
.breadcrumb b{color:var(--blue-deep);}
.page-head h1{font-size:clamp(22px,3vw,30px); font-weight:900; letter-spacing:-0.015em;}
.page-head p{color:var(--gray); font-size:14px; margin-top:6px;}

.listing-layout{display:grid; grid-template-columns:250px 1fr; gap:26px; padding:32px 0 60px;}
@media (max-width:860px){ .listing-layout{grid-template-columns:1fr;} }

.filters{background:var(--white); border:1px solid var(--line); border-radius:var(--r-md); padding:20px; align-self:start; position:sticky; top:82px;}
/* Ở màn hình hẹp, .listing-layout chuyển sang 1 cột (bộ lọc xếp TRÊN kết quả thay vì bên cạnh) -
   nếu vẫn giữ position:sticky, bộ lọc sẽ dính lại gần đầu màn hình và ĐÈ CHỒNG lên danh sách xe/
   tour cuộn phía dưới khi lướt (đã xác nhận qua ảnh chụp thật trên iPhone). Trả về vị trí tĩnh
   bình thường ở cùng breakpoint mà .listing-layout gộp cột. */
@media (max-width:860px){ .filters{position:static; top:auto;} }
.filters h4{font-size:13px; font-weight:800; margin-bottom:14px; text-transform:uppercase; letter-spacing:0.03em; color:var(--blue-deep);}
.f-group{margin-bottom:20px;}
.f-group .fl{font-size:12.5px; font-weight:700; margin-bottom:9px; color:var(--ink);}
.f-opt{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--gray); padding:5px 0; cursor:pointer;}
.f-opt input{accent-color:var(--blue);}
.f-range{display:flex; justify-content:space-between; font-size:11.5px; color:var(--gray); font-family:var(--mono); margin-top:6px;}
.f-slider{width:100%; accent-color:var(--blue);}
.f-reset{font-size:12.5px; font-weight:700; color:var(--accent); background:none; border:none; cursor:pointer;}

.results-bar{display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; flex-wrap:wrap; gap:10px;}
.results-count{font-size:14px; font-weight:700; color:var(--ink);}
.sort-select{border:1px solid var(--line); border-radius:9px; padding:9px 12px; font-size:13px; font-weight:600; color:var(--ink); background:var(--white);}

.listing-col{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
@media (max-width:1000px){ .listing-col{grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){ .listing-col{grid-template-columns:1fr;} }

.driver-row{display:flex; align-items:center; gap:8px; margin-top:9px; padding-top:9px; border-top:1px dashed var(--line);}
.driver-avatar{width:26px; height:26px; border-radius:100px; background:var(--blue); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:11px; flex-shrink:0;}
.driver-name{font-size:12px; font-weight:700;}
.driver-lang{font-size:10.5px; color:var(--gray);}

.flow-hero{background:var(--blue-pale); padding:30px 0; border-bottom:1px solid var(--line);}
.flow-hero .wrap h1{font-size:clamp(20px,2.6vw,26px); font-weight:900;}
.flow-hero .wrap p{font-size:13.5px; color:var(--gray); margin-top:6px;}

.flow-shell{max-width:760px; margin:0 auto; padding:40px 24px 80px;}
.progress{display:flex; align-items:flex-start; margin-bottom:38px;}
.prog-step{display:flex; flex-direction:column; align-items:center; gap:8px; flex:1; position:relative;}
.prog-dot{
  width:32px; height:32px; border-radius:100px; background:var(--white); border:2px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; color:var(--gray); z-index:2;
}
.prog-dot.current{border-color:var(--blue); color:var(--blue); background:var(--blue-pale);}
.prog-dot.done{border-color:var(--green); background:var(--green); color:#fff;}
.prog-label{font-size:11px; font-weight:700; color:var(--gray); text-align:center; max-width:90px;}
.prog-step:not(:last-child)::after{
  content:""; position:absolute; top:15px; left:calc(50% + 22px); width:calc(100% - 44px); height:2px; background:var(--line); z-index:1;
}
.prog-step.line-done:not(:last-child)::after{background:var(--green);}
@media (max-width:520px){
  .flow-shell{padding:28px 12px 60px;}
  .progress{margin-bottom:26px;}
  .prog-step{gap:6px;}
  .prog-dot{width:24px; height:24px; font-size:11px;}
  .prog-step:not(:last-child)::after{top:11px; left:calc(50% + 16px); width:calc(100% - 32px);}
  .prog-label{font-size:9.5px; max-width:100%; padding:0 2px;}
}

.step{display:none;}
.step.active{display:block; animation:fadeIn .25s ease;}
.step-card{background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); padding:32px;}
.step-title{font-size:19px; font-weight:900; margin-bottom:6px;}
.step-sub{font-size:13.5px; color:var(--gray); margin-bottom:26px;}

.field{margin-bottom:18px;}
.field label{display:block; font-size:12.5px; font-weight:700; margin-bottom:7px; color:var(--ink);}
.field input, .field select, .field textarea{
  width:100%; border:1.5px solid var(--line); border-radius:10px; padding:11px 13px; font-size:14px; color:var(--ink); background:var(--bg);
}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--blue); background:var(--white);}
.field label .req-star{color:#C0392B; margin-left:2px;}
.field.field-invalid input, .field.field-invalid select, .field.field-invalid textarea{border-color:#C0392B; background:#FDF4F4;}
.field.field-invalid label::after{content:"Bạn cần điền đầy đủ mục này."; display:block; color:#C0392B; font-weight:600; font-size:11.5px; margin-top:4px;}
.field.field-format-invalid input, .field.field-format-invalid select, .field.field-format-invalid textarea{border-color:#C0392B; background:#FDF4F4;}
.field.field-format-invalid label::after{content:"Định dạng không hợp lệ, vui lòng kiểm tra lại."; display:block; color:#C0392B; font-weight:600; font-size:11.5px; margin-top:4px;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
@media (max-width:520px){ .field-row{grid-template-columns:1fr;} }

.choice-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:20px;}
@media (max-width:560px){ .choice-grid{grid-template-columns:1fr;} }
.choice-card{border:1.5px solid var(--line); border-radius:12px; padding:16px; text-align:center; cursor:pointer; transition:border-color .15s, background .15s;}
.choice-card:hover{border-color:var(--blue);}
.choice-card.selected{border-color:var(--blue); background:var(--blue-pale);}
.choice-card .ci{font-size:22px; margin-bottom:8px;}
.choice-card .ct{font-size:13px; font-weight:700;}

.upload-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:10px;}
@media (max-width:520px){ .upload-grid{grid-template-columns:1fr;} }
.upload-box{border:1.5px dashed var(--line); border-radius:12px; padding:22px 16px; text-align:center; cursor:pointer; transition:border-color .15s, background .15s; position:relative;}
.upload-box:hover{border-color:var(--blue); background:var(--blue-pale);}
.upload-box input[type=file]{position:absolute; inset:0; opacity:0; cursor:pointer;}
.upload-box .ui{font-size:22px; margin-bottom:8px; color:var(--blue);}
.upload-box .ut{font-size:12.5px; font-weight:700;}
.upload-box .us{font-size:11px; color:var(--gray); margin-top:3px;}
.upload-box.has-file{border-color:var(--green); border-style:solid; background:var(--green-pale);}
.upload-box .upload-preview img{max-width:64px; max-height:64px; border-radius:8px; object-fit:cover; margin:0 auto 6px; display:block;}
.upload-box .upload-filename{font-size:11px; color:var(--green); font-weight:700; margin-top:6px; word-break:break-all;}

.tier-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
@media (max-width:860px){ .tier-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:480px){ .tier-grid{grid-template-columns:1fr;} }
.tier-card[data-value="diamond"]{border-color:#8E7CC3; background:linear-gradient(160deg,#F3EEFB,#fff);}
.tier-card[data-value="diamond"].selected{border-color:#8E7CC3;}
.promo-banner{background:linear-gradient(120deg,var(--accent),var(--accent-2)); border-radius:16px; padding:18px 22px; margin-bottom:20px; color:#fff;}
.promo-banner .pt{font-weight:800; font-size:14.5px; margin-bottom:4px;}
.promo-banner .ps{font-size:12.5px; opacity:0.92; line-height:1.5;}
.tier-card{border:1.5px solid var(--line); border-radius:14px; padding:20px 18px; cursor:pointer; position:relative; transition:border-color .15s, transform .15s;}
.tier-card:hover{transform:translateY(-2px);}
.tier-card.selected{border-color:var(--blue); background:var(--blue-pale);}
.tier-card .tag{position:absolute; top:-10px; left:16px; background:var(--accent); color:#fff; font-size:10px; font-weight:800; padding:3px 9px; border-radius:100px;}
.tier-card h4{font-size:14.5px; font-weight:800;}
.tier-card .price{font-family:var(--mono); font-size:19px; font-weight:700; color:var(--blue-deep); margin:8px 0 12px;}
.tier-card .price span{font-size:11px; font-weight:400; color:var(--gray);}
.tier-card ul{font-size:12px; color:var(--gray); line-height:1.9;}
.tier-card ul li::before{content:"✓ ";}

.summary-box{background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:18px 20px; margin-top:6px;}
.summary-row{display:flex; justify-content:space-between; font-size:13.5px; padding:7px 0; color:var(--gray);}
.summary-row.total{border-top:1px solid var(--line); margin-top:6px; padding-top:12px; font-weight:800; color:var(--ink); font-size:15px;}
.summary-row b{color:var(--ink); font-weight:700;}
.summary-note{font-size:11.5px; color:var(--gray); margin-top:10px; line-height:1.6; background:var(--blue-pale); padding:10px 12px; border-radius:8px;}

.deposit-info-box{background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:16px 18px; margin-top:14px;}
.deposit-info-row{display:flex; align-items:center; gap:10px; font-size:13.5px; padding:6px 0; color:var(--gray);}
.deposit-info-row b{color:var(--ink); font-weight:800; font-size:14.5px;}
.deposit-copy-btn{font-size:11.5px; font-weight:700; color:var(--blue); background:none; border:1px solid var(--blue); border-radius:100px; padding:3px 10px; cursor:pointer;}
.deposit-copy-btn:hover{background:var(--blue); color:#fff;}
.deposit-info-note{font-size:11.5px; color:var(--gray); margin-top:8px; line-height:1.6; background:var(--blue-pale); padding:10px 12px; border-radius:8px;}

.pay-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:8px;}
@media (max-width:560px){ .pay-grid{grid-template-columns:1fr;} }

.step-actions{display:flex; justify-content:space-between; margin-top:28px;}
.btn-next{background:var(--blue); color:#fff; border:none; padding:13px 28px; border-radius:10px; font-weight:800; font-size:14px; cursor:pointer;}
.btn-next:hover{background:var(--blue-deep);}
.btn-next:disabled{opacity:0.6; cursor:not-allowed;}
.btn-back{background:none; border:none; color:var(--gray); font-weight:700; font-size:14px; cursor:pointer; padding:13px 10px;}
.btn-danger{background:#fff; color:#C0392B; border:1.5px solid #C0392B; font-weight:700; font-size:13px; padding:9px 16px; border-radius:10px; cursor:pointer; white-space:nowrap;}
.btn-danger:hover{background:#C0392B; color:#fff;}
.btn-outline-dark{background:#fff; color:var(--blue); border:1.5px solid var(--blue); font-weight:700; font-size:13px; padding:9px 16px; border-radius:10px; cursor:pointer; white-space:nowrap;}
.btn-outline-dark:hover{background:var(--blue); color:#fff;}

.form-error{background:#FDEAEA; color:#C0392B; font-size:12.5px; font-weight:600; padding:10px 14px; border-radius:9px; margin-bottom:16px; display:none;}
.form-error.show{display:block;}

.success-box{text-align:center; padding:20px 10px;}
.success-icon{width:64px; height:64px; border-radius:100px; background:var(--green-pale); color:var(--green); display:flex; align-items:center; justify-content:center; font-size:30px; margin:0 auto 20px;}
.success-box h3{font-size:21px; font-weight:900; margin-bottom:8px;}
.success-box p{color:var(--gray); font-size:14px; max-width:420px; margin:0 auto;}
.booking-code{font-family:var(--mono); background:var(--blue-pale); color:var(--blue-deep); display:inline-block; padding:9px 18px; border-radius:9px; font-weight:700; margin:18px 0; letter-spacing:0.05em;}

.video-shelf{background:var(--blue-deep); padding:48px 0;}
.video-shelf .kicker{color:#BFE0FF;}
.video-shelf h2.h2{color:#fff;}
.video-shelf .vsub{color:rgba(255,255,255,0.62); font-size:14px; max-width:520px; margin-top:8px;}
.video-shelf.on-light{background:var(--white); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:32px 0;}
.video-shelf.on-light .kicker{color:var(--accent);}
.video-shelf.on-light h2.h2{color:var(--ink);}
.video-shelf.on-light .vsub{color:var(--gray);}
.video-row{display:flex; gap:14px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding:6px 2px 10px; margin-top:22px; scrollbar-width:thin;}
.video-card{flex:0 0 160px; aspect-ratio:9/16; border-radius:16px; position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; padding:14px 12px; border:1px solid rgba(255,255,255,0.14); cursor:pointer; transition:transform .15s;}
.video-card:hover{transform:translateY(-4px);}
.video-card::before{content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 38%, rgba(2,17,29,0.8) 100%);}
.video-card .vtxt{position:relative; z-index:1; color:#fff;}
.video-card .vtag{font-size:10px; font-family:var(--mono); background:var(--accent); color:#fff; font-weight:800; padding:3px 8px; border-radius:100px; display:inline-block; margin-bottom:8px;}
.video-card .vtitle{font-size:12.5px; font-weight:700; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.video-card .vplay{position:absolute; top:12px; right:12px; width:28px; height:28px; border-radius:100px; z-index:1; background:rgba(255,255,255,0.22); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; color:#fff; font-size:11px;}
.video-card .vdur{position:absolute; bottom:12px; left:12px; z-index:1; font-family:var(--mono); font-size:10px; color:rgba(255,255,255,0.75);}

.video-modal{position:fixed; inset:0; background:rgba(7,26,42,0.78); display:none; align-items:center; justify-content:center; z-index:300; padding:20px;}
.video-modal.active{display:flex;}
.video-modal-inner{background:#fff; border-radius:18px; padding:18px; max-width:340px; width:100%; position:relative;}
.video-modal-close{position:absolute; top:-14px; right:-14px; width:32px; height:32px; border-radius:100px; background:#fff; border:1px solid var(--line); font-size:14px; cursor:pointer; box-shadow:0 6px 16px rgba(0,0,0,0.15);}
.video-modal-player{aspect-ratio:9/16; border-radius:12px; background:linear-gradient(160deg,var(--blue-deep),var(--blue)); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;}
.vm-play{width:56px; height:56px; border-radius:100px; background:rgba(255,255,255,0.18); display:flex; align-items:center; justify-content:center; font-size:22px; color:#fff;}
.vm-caption{color:#fff; font-size:13px; font-weight:700; text-align:center; padding:0 20px;}
.video-modal-note{font-size:11.5px; color:var(--gray); text-align:center; margin-top:12px; line-height:1.5;}

.vd-modal-inner{background:#fff; border-radius:18px; padding:18px; max-width:560px; width:100%; position:relative; max-height:88vh; overflow-y:auto;}
.vd-main{width:100%; aspect-ratio:16/10; border-radius:12px; overflow:hidden; background:var(--bg); display:flex; align-items:center; justify-content:center;}
.vd-main img{width:100%; height:100%; object-fit:cover; transition:opacity .25s ease;}
.vd-noimg{font-size:48px;}
.vd-thumbs{display:flex; gap:8px; margin-top:10px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:4px;}
.vd-thumb{width:64px; height:64px; object-fit:cover; border-radius:8px; cursor:pointer; opacity:0.6; border:2px solid transparent; flex-shrink:0;}
.vd-thumb.active{opacity:1; border-color:var(--blue);}
.vd-video{width:100%; border-radius:12px; margin-top:14px; background:#000; max-height:360px;}
.vd-body{margin-top:16px;}
.vd-body h3{font-size:18px; font-weight:900;}
.vd-meta{font-size:13px; color:var(--gray); margin-top:4px;}
.vd-desc{font-size:13.5px; color:var(--ink); margin-top:10px; line-height:1.6;}
.vd-body .btn-next{margin-top:16px; width:100%;}

.safety-hero{background:linear-gradient(160deg,var(--blue-deep),var(--blue-mid) 75%); padding:44px 0; position:relative; overflow:hidden;}
.safety-hero::after{content:""; position:absolute; inset:0; background:radial-gradient(circle at 90% 15%, rgba(127,224,184,0.14), transparent 45%);}
.safety-hero .wrap{position:relative;}
.safety-hero .eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:0.06em; text-transform:uppercase; font-weight:600; color:#7FE0B8; display:inline-flex; align-items:center; gap:7px; margin-bottom:14px;}
.safety-hero .eyebrow::before{content:"🛡"; font-size:12px;}
.safety-hero h1{color:#fff; font-size:clamp(24px,3.4vw,34px); font-weight:900; letter-spacing:-0.015em; max-width:640px; line-height:1.2;}
.safety-hero p{color:rgba(255,255,255,0.78); font-size:15px; margin-top:12px; max-width:560px;}

.safety-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:8px;}
@media (max-width:900px){ .safety-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .safety-grid{grid-template-columns:1fr;} }
.safety-card{background:var(--white); border:1px solid var(--line); border-radius:var(--r-md); padding:22px 20px;}
.safety-card .si{width:40px; height:40px; border-radius:11px; background:var(--blue-pale); color:var(--blue-deep); display:flex; align-items:center; justify-content:center; font-size:18px; margin-bottom:14px;}
.safety-card h4{font-size:14.5px; font-weight:800; margin-bottom:7px;}
.safety-card p{font-size:12.5px; color:var(--gray); line-height:1.55;}

.track-mock{background:var(--blue-deep); border-radius:20px; padding:28px; display:grid; grid-template-columns:1fr 300px; gap:28px; align-items:center; margin-top:44px;}
@media (max-width:820px){ .track-mock{grid-template-columns:1fr;} }
.track-mock h3{color:#fff; font-size:20px; font-weight:900; margin-bottom:10px;}
.track-mock p{color:rgba(255,255,255,0.68); font-size:13.5px; line-height:1.6; max-width:400px;}
.track-list{margin-top:18px;}
.track-list li{color:rgba(255,255,255,0.85); font-size:13px; padding:7px 0; display:flex; gap:9px;}
.track-list li::before{content:"✓"; color:#7FE0B8; font-weight:800;}
.phone-mock{background:#fff; border-radius:24px; padding:14px; box-shadow:0 30px 60px -20px rgba(0,0,0,0.5);}
.phone-map{height:180px; border-radius:14px; background:linear-gradient(135deg,#DCEBFB,#EAF4FF); position:relative; overflow:hidden; margin-bottom:12px;}
.phone-map svg{position:absolute; inset:0;}
.phone-eta{display:flex; justify-content:space-between; align-items:center; padding:0 2px 10px;}
.phone-eta b{font-family:var(--mono); color:var(--blue-deep); font-size:15px;}
.phone-eta span{font-size:11px; color:var(--gray);}
.phone-driver{display:flex; align-items:center; gap:10px; background:var(--bg); border-radius:12px; padding:10px 12px; margin-bottom:10px;}
.phone-driver .pd-av{width:32px; height:32px; border-radius:100px; background:var(--blue); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px;}
.phone-driver .pd-name{font-size:12.5px; font-weight:800;}
.phone-driver .pd-plate{font-size:11px; color:var(--gray); font-family:var(--mono);}
.phone-btn-row{display:flex; gap:8px;}
.phone-btn{flex:1; text-align:center; padding:10px; border-radius:10px; font-size:11.5px; font-weight:800; border:none;}
.phone-btn.share{background:var(--blue-pale); color:var(--blue-deep);}
.phone-btn.sos{background:#FDEAEA; color:#C0392B;}

.safety-note{background:var(--green-pale); border:1px solid rgba(31,157,110,0.25); border-radius:14px; padding:18px 20px; margin-top:32px; font-size:13px; color:#1B6B4D; line-height:1.65;}
.safety-note b{color:#0F4A34;}

.aff-hero{background:linear-gradient(160deg,var(--blue-deep),var(--blue-mid) 75%); padding:44px 0; position:relative; overflow:hidden;}
.aff-hero::after{content:""; position:absolute; inset:0; background:radial-gradient(circle at 88% 15%, rgba(255,122,51,0.16), transparent 45%);}
.aff-hero .wrap{position:relative;}
.aff-hero .eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:0.06em; text-transform:uppercase; font-weight:600; color:#BFE0FF; display:inline-flex; align-items:flex-start; gap:7px; margin-bottom:14px;}
.aff-hero .eyebrow::before{content:"●"; font-size:7px; color:var(--accent); margin-top:6px;}
.aff-hero h1{color:#fff; font-size:clamp(24px,3.4vw,34px); font-weight:900; letter-spacing:-0.015em; max-width:640px; line-height:1.2;}
.aff-hero p{color:rgba(255,255,255,0.78); font-size:15px; margin-top:12px; max-width:560px;}

.aff-audience-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:8px;}
@media (max-width:1080px){ .aff-audience-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .aff-audience-grid{grid-template-columns:1fr;} }
.guide-list-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:16px;}
@media (max-width:900px){ .guide-list-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .guide-list-grid{grid-template-columns:1fr;} }
.hdv-card{background:var(--white); border:1px solid var(--line); border-radius:var(--r-md); padding:18px;}
.hdv-card .gc-top{display:flex; justify-content:space-between; align-items:baseline; gap:8px;}
.hdv-card .gc-name{font-size:15px; font-weight:800;}
.hdv-card .gc-gender{font-size:14px; color:var(--gray); font-weight:600;}
.hdv-card .gc-stars{color:var(--accent); font-size:14px; margin-top:6px;}
.hdv-card .gc-stars .gc-count{color:var(--gray); font-size:12px; margin-left:4px;}
.hdv-card .gc-meta{font-size:12.5px; color:var(--gray); margin-top:8px; line-height:1.7;}
.hdv-card .gc-phone{font-size:13px; font-weight:700; color:var(--blue-deep); margin-top:8px;}
.hdv-card .gc-rate-btn{margin-top:12px; width:100%; border-color:var(--blue); color:var(--blue-deep);}
.hdv-card .gc-rate-btn:hover{background:var(--blue); color:#fff;}
.aff-card{background:var(--white); border:1px solid var(--line); border-radius:var(--r-md); padding:24px 22px;}
.aff-card .at{font-family:var(--mono); font-size:11px; text-transform:uppercase; color:var(--accent); font-weight:700; letter-spacing:0.03em;}
.aff-card h4{font-size:16px; font-weight:800; margin:9px 0 10px;}
.aff-card .rate{font-family:var(--mono); font-size:26px; font-weight:700; color:var(--blue-deep);}
.aff-card .rate span{font-size:12px; font-weight:500; color:var(--gray);}
.aff-card p{font-size:12.5px; color:var(--gray); line-height:1.55; margin-top:8px;}
.aff-card .ex{margin-top:14px; background:var(--bg); border-radius:10px; padding:11px 13px; font-size:12px; color:var(--ink);}

.aff-dash{background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); padding:30px; margin-top:44px; display:grid; grid-template-columns:1fr 1fr; gap:30px;}
@media (max-width:820px){ .aff-dash{grid-template-columns:1fr;} }
.aff-dash h3{font-size:17px; font-weight:900; margin-bottom:16px;}
.ref-code-box{display:flex; gap:10px; margin-bottom:20px;}
.ref-code{flex:1; font-family:var(--mono); font-size:15px; font-weight:700; color:var(--blue-deep); background:var(--blue-pale); border:1.5px dashed var(--blue); border-radius:10px; padding:12px 16px; letter-spacing:0.03em;}
.ref-copy{background:var(--blue); color:#fff; border:none; border-radius:10px; padding:0 18px; font-weight:700; font-size:13px; cursor:pointer;}
.ref-stats{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.ref-stat{background:var(--bg); border-radius:12px; padding:16px;}
.ref-stat b{display:block; font-family:var(--mono); font-size:21px; color:var(--blue-deep);}
.ref-stat span{font-size:11.5px; color:var(--gray);}
.ref-list{list-style:none;}
.ref-list li{display:flex; justify-content:space-between; padding:11px 0; border-top:1px solid var(--line); font-size:13px;}
.ref-list li:first-child{border-top:none;}
.ref-list .rname{font-weight:700;}
.ref-list .ramt{font-family:var(--mono); color:var(--green); font-weight:700;}
.ref-withdraw{width:100%; margin-top:16px; background:var(--accent); color:#fff; border:none; border-radius:10px; padding:12px; font-weight:800; font-size:13.5px; cursor:pointer;}
.ref-withdraw:disabled{opacity:0.5; cursor:not-allowed;}

.member-gate{
  background:var(--white); border:1.5px dashed var(--blue); border-radius:var(--r-lg); padding:38px 30px;
  text-align:center; max-width:560px; margin:0 auto 36px;
}
.member-gate .mg-icon{width:52px; height:52px; border-radius:100px; background:var(--blue-pale); color:var(--blue-deep); font-size:24px; display:flex; align-items:center; justify-content:center; margin:0 auto 16px;}
.member-gate h3{font-size:17px; font-weight:900; margin-bottom:8px;}
.member-gate p{font-size:13.5px; color:var(--gray); line-height:1.6; max-width:440px; margin:0 auto;}
.mg-actions{display:flex; flex-direction:column; align-items:center; gap:10px; margin-top:22px;}
.mg-demo-login{background:none; border:none; color:var(--blue-deep); font-weight:700; font-size:12.5px; text-decoration:underline; cursor:pointer;}

.tier-progress-box{background:var(--white); border:1px solid var(--line); border-radius:var(--r-md); padding:22px 24px; margin-top:20px;}
.tier-progress-box h3{font-size:15px; font-weight:900; margin-bottom:4px;}
.tier-progress-sub{font-size:12.5px; color:var(--gray); margin-bottom:16px; line-height:1.55;}
.tier-progress-current{display:flex; align-items:center; gap:10px; margin-bottom:10px; flex-wrap:wrap;}
.tier-badge{background:var(--blue-pale); color:var(--blue-deep); font-weight:800; font-size:12.5px; padding:5px 14px; border-radius:100px;}
.tier-progress-current span:last-child{font-size:12.5px; color:var(--gray); font-weight:600;}
.tier-progress-bar{height:8px; background:var(--bg); border-radius:100px; overflow:hidden; margin-bottom:8px;}
.tier-progress-fill{height:100%; background:linear-gradient(90deg,var(--blue),var(--accent)); border-radius:100px; transition:width .3s;}
.tier-progress-note{font-size:12px; color:var(--gray); margin-bottom:16px;}
.tier-table{display:grid; gap:6px; border-top:1px dashed var(--line); padding-top:14px;}
.tier-row{display:flex; justify-content:space-between; font-size:13px; padding:6px 10px; border-radius:8px; background:var(--bg);}
.tier-row span:first-child{font-weight:700;}
.tier-row span:last-child{font-weight:800; color:var(--blue-deep);}
.tier-row.reached{background:var(--blue-pale);}

.tax-box{background:var(--white); border:1px solid var(--line); border-radius:var(--r-md); padding:22px 24px; margin-top:20px;}
.tax-box h3{font-size:15px; font-weight:900; margin-bottom:4px;}
.tax-box .tax-sub{font-size:12.5px; color:var(--gray); margin-bottom:18px; line-height:1.55;}
.tax-field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:end;}
@media (max-width:640px){ .tax-field-row{grid-template-columns:1fr;} }
.tax-check{display:flex; align-items:flex-start; gap:9px; margin-top:14px; font-size:12.5px; color:var(--ink); background:var(--bg); padding:12px 14px; border-radius:10px; line-height:1.55;}
.payout-subfields{margin:4px 0 14px;}
.lang-check-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:4px 14px; margin-top:8px; margin-bottom:20px;}
@media (max-width:560px){ .lang-check-grid{grid-template-columns:repeat(2,1fr);} }
.tax-check input{margin-top:2px; accent-color:var(--blue);}
.tax-breakdown{margin-top:16px; border-top:1px dashed var(--line); padding-top:14px;}
.tax-row{display:flex; justify-content:space-between; font-size:13px; padding:5px 0; color:var(--gray);}
.tax-row b{color:var(--ink);}
.tax-row.net{border-top:1px solid var(--line); margin-top:6px; padding-top:10px; font-size:14.5px; font-weight:800; color:var(--ink);}
.tax-row.net b{color:var(--blue-deep);}
.tax-pill{display:inline-block; font-family:var(--mono); font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:100px; margin-left:6px;}
.tax-pill.on{background:#FDEAEA; color:#C0392B;}
.tax-pill.off{background:var(--green-pale); color:#1B6B4D;}

.stars-input{display:flex; gap:6px; justify-content:center; margin:14px 0 6px;}
.stars-input .si-star{font-size:30px; cursor:pointer; color:#DCE6F0; transition:color .12s, transform .12s;}
.stars-input .si-star:hover{transform:scale(1.12);}
.stars-input .si-star.on{color:var(--accent);}
.rating-label{text-align:center; font-size:12.5px; color:var(--gray); min-height:18px;}
.review-box{background:var(--white); border:1px solid var(--line); border-radius:var(--r-md); padding:24px; margin-top:22px; text-align:center;}
.review-box h4{font-size:15px; font-weight:800; margin-bottom:4px;}
.review-box .rb-sub{font-size:12.5px; color:var(--gray);}
.review-box textarea{width:100%; margin-top:14px; border:1.5px solid var(--line); border-radius:10px; padding:11px 13px; font-size:13.5px; font-family:var(--font); resize:vertical;}
.review-submit{margin-top:12px; background:var(--blue); color:#fff; border:none; border-radius:10px; padding:11px 24px; font-weight:800; font-size:13.5px; cursor:pointer;}
.review-thanks{display:none; text-align:center; padding:10px;}
.review-thanks.show{display:block;}
.review-thanks .ti{font-size:30px; margin-bottom:8px;}

.processing-overlay{position:fixed; inset:0; background:rgba(11,36,54,0.55); display:none; align-items:center; justify-content:center; z-index:400;}
.processing-overlay.active{display:flex;}
.processing-box{background:#fff; border-radius:16px; padding:32px 40px; text-align:center; box-shadow:0 30px 60px -20px rgba(0,0,0,0.4);}
.spinner{width:36px; height:36px; border:3.5px solid var(--blue-pale); border-top-color:var(--blue); border-radius:100px; margin:0 auto 14px; animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.processing-box p{font-size:13.5px; font-weight:700; color:var(--ink);}

.wd-modal, .auth-modal{position:fixed; inset:0; background:rgba(11,36,54,0.65); display:none; align-items:center; justify-content:center; z-index:350; padding:20px;}
.wd-modal.active, .auth-modal.active{display:flex;}
.wd-inner, .auth-inner{background:#fff; border-radius:18px; padding:26px; max-width:400px; width:100%; position:relative;}
.wd-close, .auth-close{position:absolute; top:14px; right:16px; background:none; border:none; font-size:16px; cursor:pointer; color:var(--gray);}
.wd-title{font-size:16.5px; font-weight:900; margin-bottom:16px;}
.wd-step{display:none;}
.wd-step.active{display:block;}

.vm-tabs{display:flex; gap:6px; border-bottom:1px solid var(--line); margin-bottom:18px; padding-bottom:0;}
.vm-tab{flex:1; background:none; border:none; padding:10px 8px; font-size:12.5px; font-weight:700; color:var(--gray); cursor:pointer; border-bottom:2px solid transparent; white-space:nowrap;}
.vm-tab:hover{color:var(--blue-deep);}
.vm-tab.active{color:var(--blue-deep); border-bottom-color:var(--blue);}
.vm-section{display:none;}
.vm-section.active{display:block; animation:fadeIn .2s ease;}

.chat-shell{display:grid; grid-template-columns:270px 1fr; gap:0; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--white); height:560px;}
@media (max-width:760px){ .chat-shell{grid-template-columns:1fr; height:auto;} .chat-list{max-height:220px;} }
.chat-list-col{display:flex; flex-direction:column; height:100%; padding:10px; background:var(--bg); border-right:1px solid var(--line); min-height:0;}
.chat-list{flex:1; overflow-y:auto; background:var(--bg); margin:-10px -10px -10px; border-right:none;}
.chat-item{display:flex; gap:11px; padding:14px 16px; cursor:pointer; border-bottom:1px solid var(--line); align-items:center;}
.chat-item:hover{background:var(--blue-pale);}
.chat-item.active{background:var(--blue-pale); border-left:3px solid var(--blue);}
.chat-av{width:38px; height:38px; border-radius:100px; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:14px; flex-shrink:0;}
.chat-item-body{flex:1; min-width:0;}
.chat-item-name{font-size:13.5px; font-weight:800;}
.chat-item-role{font-family:var(--mono); font-size:9.5px; text-transform:uppercase; color:var(--gray); font-weight:600;}
.chat-item-msg{font-size:11.5px; color:var(--gray); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px;}

.chat-main{display:flex; flex-direction:column; height:100%;}
.chat-header{display:flex; align-items:center; gap:11px; padding:14px 18px; border-bottom:1px solid var(--line);}
.chat-header .chn{font-size:14px; font-weight:800;}
.chat-header .chr{font-size:11px; color:var(--gray);}
.chat-body{flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:10px;}
.msg{max-width:72%; padding:10px 14px; border-radius:14px; font-size:13px; line-height:1.5;}
.msg.in{align-self:flex-start; background:var(--bg); border-bottom-left-radius:4px;}
.msg.out{align-self:flex-end; background:var(--blue); color:#fff; border-bottom-right-radius:4px;}
.msg-time{font-size:9.5px; color:var(--gray); margin-top:4px;}
.msg.out .msg-time{color:rgba(255,255,255,0.65);}
.msg-sender{font-size:10.5px; font-weight:700; color:var(--blue-deep); margin-bottom:3px;}
.chat-contact-item{padding:10px 12px; border:1px solid var(--line); border-radius:8px; margin-bottom:8px; cursor:pointer; transition:background 0.15s;}
.chat-contact-item:hover{background:var(--bg);}
.chat-contact-name{font-weight:700; font-size:13.5px;}
.chat-contact-role{font-size:11px; color:var(--gray); margin-top:2px;}
.chat-input-row{display:flex; gap:10px; padding:14px 16px; border-top:1px solid var(--line);}
.chat-input-row input{flex:1; border:1.5px solid var(--line); border-radius:100px; padding:11px 16px; font-size:13.5px;}
.chat-input-row input:focus{outline:none; border-color:var(--blue);}
.chat-send{background:var(--blue); color:#fff; border:none; width:42px; height:42px; border-radius:100px; font-size:15px; cursor:pointer; flex-shrink:0;}
.chat-login-note{padding:40px 20px; text-align:center; color:var(--gray);}
.text-gray{color:var(--gray);}
.chat-member-count-btn{background:var(--bg); border:1px solid var(--line); border-radius:100px; padding:6px 12px; font-size:12.5px; font-weight:700; color:var(--blue-deep); cursor:pointer; white-space:nowrap;}
.chat-member-count-btn:hover{border-color:var(--blue);}
.mention{color:var(--blue-deep); font-weight:700; background:rgba(30,111,224,0.12); border-radius:4px; padding:0 3px;}
.msg.out .mention{color:#fff; background:rgba(255,255,255,0.25);}
.mention-me{background:#ffe28a; color:#5c4200 !important;}
.chat-mention-dropdown{position:absolute; left:16px; right:60px; bottom:calc(100% + 6px); background:var(--white); border:1px solid var(--line); border-radius:10px; box-shadow:0 8px 24px rgba(11,36,54,0.15); max-height:220px; overflow-y:auto; z-index:20;}
.chat-mention-item{padding:9px 14px; font-size:13px; cursor:pointer;}
.chat-mention-item.active, .chat-mention-item:hover{background:var(--bg);}
.chat-icon-btn{background:none; border:none; font-size:20px; cursor:pointer; flex-shrink:0; width:36px; height:42px; line-height:42px; text-align:center; border-radius:8px;}
.chat-icon-btn:hover{background:var(--bg);}
.chat-emoji-picker{position:absolute; left:16px; bottom:calc(100% + 6px); background:var(--white); border:1px solid var(--line); border-radius:10px; box-shadow:0 8px 24px rgba(11,36,54,0.15); padding:8px; display:grid; grid-template-columns:repeat(8,1fr); gap:2px; max-width:280px; z-index:20;}
.chat-emoji-picker span{font-size:19px; text-align:center; cursor:pointer; padding:4px; border-radius:6px; line-height:1.4;}
.chat-emoji-picker span:hover{background:var(--bg);}
.msg-attachment-img{display:block; max-width:220px; max-height:220px; border-radius:10px; margin-bottom:6px; object-fit:cover;}
.msg-attachment-file{display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,0.15); border-radius:8px; padding:8px 10px; margin-bottom:6px; font-size:12.5px; font-weight:700; text-decoration:none; color:inherit;}
.msg.in .msg-attachment-file{background:var(--white); border:1px solid var(--line);}
.msg-reactions{display:flex; align-items:center; gap:4px; margin-top:4px; flex-wrap:wrap;}
.reaction-chip{background:var(--white); border:1px solid var(--line); border-radius:100px; padding:1px 7px; font-size:11.5px; cursor:pointer; color:var(--ink);}
.reaction-chip.mine{border-color:var(--blue); background:rgba(30,111,224,0.1);}
.msg-react-add{background:none; border:none; font-size:12px; cursor:pointer; opacity:0.6; padding:1px 4px;}
.msg-react-add:hover{opacity:1;}
.reaction-picker{display:flex; gap:6px; background:var(--white); border:1px solid var(--line); border-radius:100px; padding:5px 10px; margin-top:4px; width:fit-content; box-shadow:0 4px 14px rgba(11,36,54,0.12);}
.reaction-picker span{font-size:17px; cursor:pointer;}
.reaction-picker span:hover{transform:scale(1.2);}

/* Cuộn NGANG thay vì xuống dòng - ở màn hình hẹp, mỗi nhãn (vd "Du thuyền sông Hàn") đủ dài để
   không có 2 chip nào vừa chung 1 hàng, xuống dòng từng chip 1 nhìn như danh sách dọc xấu xí thay
   vì dải chip. Cuộn ngang là cách mọi app đặt đồ ăn/dịch vụ (Foody, Grab...) đều dùng cho đúng
   tình huống này. */
.svc-filters{display:flex; gap:10px; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; margin:26px 0 30px; padding-bottom:2px;}
.svc-filters::-webkit-scrollbar{display:none;}
.svc-pill{flex-shrink:0; font-size:13.5px; font-weight:700; padding:9px 18px; border-radius:100px; border:1.5px solid var(--line); color:var(--gray); background:var(--white); cursor:pointer; transition:.15s;}
.svc-pill:hover{border-color:var(--blue);}
.svc-pill.active{background:var(--blue); border-color:var(--blue); color:#fff;}
.svc-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
@media (max-width:980px){ .svc-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .svc-grid{grid-template-columns:1fr;} }
.svc-card{background:var(--white); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; transition:box-shadow .18s, transform .18s;}
.svc-card:hover{box-shadow:0 16px 32px -14px rgba(11,74,130,0.22); transform:translateY(-2px);}
.svc-thumb{height:120px; display:flex; align-items:center; justify-content:center; font-size:34px; position:relative;}
.svc-cat-badge{position:absolute; top:10px; left:10px; background:rgba(11,74,130,0.85); color:#fff; font-size:10px; font-weight:700; padding:4px 9px; border-radius:100px; font-family:var(--mono);}
.tourhot-head{background:linear-gradient(160deg, var(--accent-2), var(--accent) 130%);}
.tourhot-head h1, .tourhot-head p, .tourhot-head .breadcrumb, .tourhot-head .breadcrumb b{color:#fff;}
.tour-thumb{background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff; height:120px; display:flex; align-items:center; justify-content:center; font-size:34px; position:relative; overflow:hidden;}
.tour-thumb.has-video{background:#000;}
.tour-thumb-video{width:100%; height:100%; object-fit:contain;}
.tour-hot-badge{position:absolute; top:10px; left:10px; background:#fff; color:var(--accent-2); font-size:10px; font-weight:800; padding:4px 9px; border-radius:100px; font-family:var(--mono); letter-spacing:0.03em; z-index:2;}
.tour-cta{background:var(--blue); color:#fff;}
.tour-cta:hover{background:var(--blue-deep);}
.tour-vtype-tag{display:inline-block; background:var(--bg); color:var(--gray); font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:100px; margin-right:6px;}
.tour-booked-badge{display:inline-block; background:#E8F7EE; color:#1E8E4A; font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:100px;}
.tour-includes-title{font-size:12.5px; font-weight:700; color:var(--gray); margin:12px 0 6px;}
.tour-includes-list{margin:0 0 4px; padding-left:20px; font-size:13.5px; color:var(--ink); line-height:1.7;}
.tour-book-btn{width:100%; margin-top:14px;}
.svc-body{padding:14px 16px 16px;}
.svc-title{font-size:14px; font-weight:800; line-height:1.3;}
.svc-desc{font-size:12px; color:var(--gray); margin-top:5px; line-height:1.5; min-height:32px;}
.svc-rating{font-size:12px; margin-top:8px;}
.svc-price-row{display:flex; justify-content:space-between; align-items:baseline; margin-top:10px; padding-top:10px; border-top:1px dashed var(--line);}
.svc-price{font-family:var(--mono); font-size:15px; font-weight:700; color:var(--blue-deep);}
.svc-price span{font-size:10.5px; font-weight:400; color:var(--gray);}
.svc-cta{width:100%; margin-top:11px; background:var(--blue); color:#fff; border:none; border-radius:9px; padding:9px; font-weight:700; font-size:12.5px; cursor:pointer;}
.svc-cta:hover{background:var(--blue-deep);}
.svc-detail-rating{font-size:13.5px; color:var(--gray); margin-bottom:6px;}
.svc-detail-rating .stars{color:var(--accent);}
.svc-detail-price{font-family:var(--mono); font-size:20px; font-weight:800; color:var(--blue-deep); margin-bottom:14px;}
.svc-detail-price span{font-size:12px; font-weight:400; color:var(--gray);}
.svc-detail-row{font-size:13.5px; color:var(--ink); margin-bottom:9px; line-height:1.5;}
.svc-detail-row a{color:var(--blue); font-weight:700;}
.svc-detail-rate-btn{width:100%; margin-top:12px; border-color:var(--blue); color:var(--blue-deep);}
.svc-detail-rate-btn:hover{background:var(--blue); color:#fff;}
.vm-upload-btn{border-color:var(--blue); color:var(--blue-deep);}
.vm-upload-btn:hover{background:var(--blue); color:#fff;}
.vm-upload-btn:disabled{opacity:0.6; cursor:not-allowed;}

.guide-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
@media (max-width:980px){ .guide-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .guide-grid{grid-template-columns:1fr;} }
.guide-card{background:var(--white); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; transition:box-shadow .18s, transform .18s;}
.guide-card:hover{box-shadow:0 16px 32px -14px rgba(11,74,130,0.22); transform:translateY(-2px);}
.guide-thumb{height:140px; position:relative; overflow:hidden;}
.guide-thumb img{width:100%; height:100%; object-fit:cover;}
.guide-thumb.no-img{display:flex; align-items:center; justify-content:center; font-size:36px;}
.guide-tag{position:absolute; top:10px; left:10px; background:rgba(11,74,130,0.85); color:#fff; font-size:10px; font-weight:700; padding:4px 9px; border-radius:100px; font-family:var(--mono);}
.guide-body{padding:14px 16px 16px;}
.guide-body h4{font-size:14px; font-weight:800; line-height:1.3;}
.guide-body p{font-size:12px; color:var(--gray); margin-top:6px; line-height:1.5; min-height:48px;}

/* Cẩm nang du lịch - bố cục dạng blog (2 cột: nội dung + sidebar) */
.blog-layout{display:grid; grid-template-columns:1fr 300px; gap:32px; align-items:start;}
@media (max-width:900px){ .blog-layout{grid-template-columns:1fr;} }
.blog-featured{background:var(--white); border:1px solid var(--line); border-radius:var(--r-md); padding:22px; margin-bottom:22px;}
.blog-featured-title{font-size:18px; font-weight:800; line-height:1.35; margin-bottom:16px;}
.blog-featured-row{display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:center;}
@media (max-width:640px){ .blog-featured-row{grid-template-columns:1fr;} }
.blog-featured-img{aspect-ratio:8/5; border-radius:12px; overflow:hidden;}
.blog-featured-img img{width:100%; height:100%; object-fit:cover;}
.blog-featured-img.no-img{display:flex; align-items:center; justify-content:center; font-size:44px;}
.blog-featured-body p{font-size:13.5px; color:var(--gray); line-height:1.65;}
.blog-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px;}
@media (max-width:640px){ .blog-grid{grid-template-columns:1fr;} }
.blog-readmore{display:inline-block; margin-top:6px; color:var(--blue); font-weight:700; font-size:12.5px; cursor:pointer;}
.blog-readmore:hover{text-decoration:underline;}
.blog-detail-body{margin-top:20px;}
.blog-detail-body p{font-size:14px; color:var(--ink); line-height:1.75; margin-bottom:14px;}
.blog-back-btn{margin-top:18px; border-color:var(--blue); color:var(--blue-deep);}
.blog-back-btn:hover{background:var(--blue); color:#fff;}
.blog-sidebar{display:flex; flex-direction:column; gap:22px;}
.blog-side-box{background:var(--white); border:1px solid var(--line); border-radius:var(--r-md); padding:18px;}
.blog-side-box h3{font-size:14px; font-weight:800; margin-bottom:14px;}
.blog-search{display:flex; border:1.5px solid var(--line); border-radius:9px; overflow:hidden;}
.blog-search input{flex:1; border:none; padding:9px 11px; font-size:12.5px; outline:none;}
.blog-search button{border:none; background:var(--bg); padding:0 14px; cursor:pointer; font-size:14px;}
.blog-side-list{display:flex; flex-direction:column; gap:12px;}
.blog-side-item{display:flex; align-items:center; gap:10px;}
.blog-side-thumb{width:52px; height:52px; border-radius:8px; overflow:hidden; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:20px;}
.blog-side-thumb img{width:100%; height:100%; object-fit:cover;}
.blog-side-item span{font-size:12.5px; font-weight:600; line-height:1.4;}

.fee-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
@media (max-width:900px){ .fee-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .fee-grid{grid-template-columns:1fr;} }
.fee-card{background:var(--white); border:1px solid var(--line); border-radius:var(--r-md); padding:20px;}
.fee-amount{font-family:var(--mono); font-size:26px; font-weight:800; color:var(--blue-deep);}
.fee-title{font-size:13.5px; font-weight:800; margin-top:8px;}
.fee-card p{font-size:12.5px; color:var(--gray); margin-top:6px; line-height:1.5;}
.fee-note{font-size:12.5px; color:var(--gray); margin-top:22px; text-align:center;}

.hoptac-toggle-btn{font-size:13.5px; font-weight:700; padding:9px 18px; border-radius:100px; border:1.5px solid var(--line); color:var(--gray); background:var(--white); cursor:pointer; white-space:nowrap; transition:.15s;}
.hoptac-toggle-btn:hover{border-color:var(--blue);}
.hoptac-toggle-btn.active{background:var(--blue); border-color:var(--blue); color:#fff;}

.combo-banner{background:linear-gradient(120deg,var(--blue-deep),var(--blue-mid)); border-radius:18px; padding:26px 28px; display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:34px; flex-wrap:wrap;}
.combo-banner .ct{color:#fff; font-size:16px; font-weight:800; max-width:460px; line-height:1.4;}
.combo-banner .ct b{color:#BFE0FF;}
.combo-banner button{background:var(--accent); color:#fff; border:none; padding:12px 24px; border-radius:100px; font-weight:800; font-size:13.5px; cursor:pointer; white-space:nowrap;}

.skeleton-card{background:var(--white); border:1px solid var(--line); border-radius:var(--r-md); height:220px; position:relative; overflow:hidden;}
.skeleton-card::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent, rgba(11,74,130,0.06), transparent); animation:shimmer 1.3s infinite;}
@keyframes shimmer{from{transform:translateX(-100%);} to{transform:translateX(100%);}}
.empty-state{grid-column:1/-1; text-align:center; padding:40px 20px; color:var(--gray); font-size:13.5px;}

.analytics-bar-chart{display:flex; align-items:flex-end; gap:6px; height:170px; padding-top:10px; overflow-x:auto; -webkit-overflow-scrolling:touch;}
.analytics-bar-col{display:flex; flex-direction:column; align-items:center; justify-content:flex-end; flex:1; min-width:28px; height:100%;}
.analytics-bar{width:100%; max-width:36px; background:var(--blue); border-radius:6px 6px 0 0; min-height:2px;}
.analytics-bar-label{font-size:10.5px; color:var(--gray); margin-top:6px; white-space:nowrap;}
.analytics-bar-value{font-size:10.5px; font-weight:700; margin-bottom:4px;}