/* XGG P37 / FIX07 • yellow route-based hero + VF3-style cards */
#danh-muc-van-tai.tm37-hub {
  --tm37-ink: var(--xgp38-h-09284B,#09284b);
  background: linear-gradient(180deg, #fff 0%, var(--xgp38-h-F7FBFF,#f7fbff) 100%);
  color: var(--tm37-ink);
  padding: 30px 0 40px;
  border: 0;
  font-family: inherit;
}
#danh-muc-van-tai.tm37-hub *,
#danh-muc-van-tai.tm37-hub *::before,
#danh-muc-van-tai.tm37-hub *::after { box-sizing: border-box; }
#danh-muc-van-tai .tm37-shell { box-sizing: border-box; width: min(1280px, calc(100% - var(--tm-p05-gutter, 40px))); max-width: 1280px; min-width: 0; margin-inline: auto; }
#danh-muc-van-tai .tm37-heading { margin: 0 0 20px; padding: 0 3px; }
#danh-muc-van-tai .tm37-kicker { display:block; width:55px; height:5px; background:linear-gradient(90deg,var(--xgp38-h-0A7CDF,#0a7cdf),#15cbb6); border-radius:99px; margin-bottom:9px; }
#danh-muc-van-tai .tm37-heading h2 { font-size: clamp(27px,2.7vw,37px); font-weight:900; line-height:1.18; letter-spacing:-.037em; color:var(--xgp38-h-082B4B,#082b4b); margin:0 0 7px; }
#danh-muc-van-tai .tm37-heading p { color:var(--xgp38-h-58718E,#58718e); font-size:15px; line-height:1.5; margin:0; }

/* Hero: yellow background, no car image, route panel 2x4 */
#danh-muc-van-tai .tm37-hero {
  position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(340px, 1fr);
  gap: 18px; min-height: 264px; border-radius: 22px; border: 1px solid var(--xgp38-y-E4B32D,#e4b32d);
  background: linear-gradient(135deg,var(--xgp38-y-FFD95F,#ffd95f) 0%, var(--xgp38-y-FFC947,#ffc947) 42%, var(--xgp38-y-F6BA28,#f6ba28) 100%);
  box-shadow: 0 12px 26px rgba(var(--xgp38-yr-9E7610,158,118,16),.16);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, filter .28s ease;
}
#danh-muc-van-tai .tm37-hero::before { content:""; position:absolute; inset:0; pointer-events:none; z-index:0; background:radial-gradient(ellipse at 11% 110%,rgba(var(--xgp38-yr-C48D0A,196,141,10),.16),transparent 52%); }
#danh-muc-van-tai .tm37-hero::after { content:""; position:absolute; inset:0 37% 0 0; z-index:0; pointer-events:none; background:linear-gradient(95deg,rgba(255,255,255,.14),transparent 82%); }
#danh-muc-van-tai .tm37-hero-ring { position:absolute; top:-132px; right:29%; height:440px; width:440px; border:1px solid rgba(255,255,255,.24); border-radius:50%; pointer-events:none; z-index:0; box-shadow:0 0 0 58px rgba(255,255,255,.07),0 0 0 117px rgba(255,255,255,.05); }
#danh-muc-van-tai .tm37-hero-copy { position:relative; z-index:1; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; min-width:0; padding:28px 20px 28px 34px; }
#danh-muc-van-tai .tm37-hero-label { display:inline-flex; gap:7px; align-items:center; border:1px solid rgba(var(--xgp38-r-0F3C62,15,60,98),.14); background:rgba(255,255,255,.24); border-radius:30px; padding:5px 14px; font-weight:800; font-size:12px; letter-spacing:.015em; color:var(--xgp38-h-15385D,#15385d); box-shadow:inset 0 1px rgba(255,255,255,.16); }
#danh-muc-van-tai .tm37-hero-label > span { color:var(--xgp38-y-D49300,#d49300); font-size:17px; line-height:1; }
#danh-muc-van-tai .tm37-hero-title { display:block; max-width:100%; font-size:clamp(30px,3.4vw,47px); font-weight:900; line-height:1.13; letter-spacing:-.035em; color:var(--xgp38-h-12375B,#12375b); margin:13px 0 9px; text-wrap:balance; }
#danh-muc-van-tai .tm37-hero-desc { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; max-width:680px; color:var(--xgp38-h-274B70,#274b70); font-size:clamp(14px,1.35vw,17px); line-height:1.46; font-weight:560; }
#danh-muc-van-tai .tm37-hero-bottom { display:flex; align-items:center; gap:25px; flex-wrap:wrap; margin-top:16px; }
#danh-muc-van-tai .tm37-hero-cta { display:inline-flex; align-items:center; justify-content:center; gap:12px; flex:0 0 auto; text-decoration:none!important; background:var(--xgp38-h-0F4F9C,#0f4f9c); border-radius:12px; color:#fff; font-size:13.5px; font-weight:900; padding:13px 18px; box-shadow:0 8px 16px rgba(var(--xgp38-r-002E75,0,46,117),.18); transition:transform .25s,filter .25s, background .25s ease; }
#danh-muc-van-tai .tm37-hero-cta svg { width:19px; height:19px; }
#danh-muc-van-tai .tm37-hero-features { display:flex; align-items:center; flex-wrap:wrap; gap:17px; color:var(--xgp38-h-1F4A75,#1f4a75); font-size:11.5px; font-weight:780; }
#danh-muc-van-tai .tm37-hero-features > span { display:inline-flex; align-items:center; gap:6px; }
#danh-muc-van-tai .tm37-hero-features b { width:28px; height:28px; display:grid; place-items:center; background:rgba(255,255,255,.35); border-radius:50%; font-size:15px; color:var(--xgp38-h-0F4F9C,#0f4f9c); font-weight:900; }

#danh-muc-van-tai .tm37-hero-routes {
  position: relative; z-index: 1; display:flex; flex-direction:column; justify-content:center; align-self:stretch;
  margin: 14px 14px 14px 0; padding: 18px 18px 16px; border-radius: 18px;
  background: rgba(255,255,255,.22); color: var(--xgp38-h-16395D,#16395d);
  border:1px solid rgba(var(--xgp38-r-14395D,20,57,93),.10);
  box-shadow: inset 0 1px rgba(255,255,255,.44), 0 10px 20px rgba(121,84,5,.08);
  backdrop-filter: blur(4px);
}
#danh-muc-van-tai .tm37-hero-routes-head { margin-bottom: 12px; }
#danh-muc-van-tai .tm37-hero-routes-kicker { display:block; font-size:10px; line-height:1.35; font-weight:900; letter-spacing:.05em; text-transform:uppercase; color:#8a5c00; }
#danh-muc-van-tai .tm37-hero-routes-title { display:block; margin-top:4px; font-size:22px; line-height:1.2; font-weight:900; color:var(--xgp38-h-15385D,#15385d); }
#danh-muc-van-tai .tm37-hero-route-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 12px; }
#danh-muc-van-tai .tm37-hero-route {
  display:flex; align-items:center; min-height:42px; padding:10px 13px; border-radius:12px;
  background: rgba(255,255,255,.42); border:1px solid rgba(136,96,7,.16); color:var(--xgp38-h-16395D,#16395d)!important; text-decoration:none!important;
  font-size:13px; line-height:1.3; font-weight:800; transition:transform .2s ease, background .2s ease, box-shadow .2s ease, border-color .2s ease;
}
#danh-muc-van-tai .tm37-hero-route:hover { transform: translateY(-2px); background: rgba(255,255,255,.68); border-color:rgba(136,96,7,.24); box-shadow: 0 6px 12px rgba(108,78,14,.14); }
#danh-muc-van-tai .tm37-hero:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 36px rgba(var(--xgp38-yr-9E7610,158,118,16),.22);
  border-color: var(--xgp38-y-D7A421,#d7a421);
  filter: saturate(1.03);
}
#danh-muc-van-tai .tm37-hero:hover .tm37-hero-cta { transform: translateX(3px); filter: brightness(1.05); background:var(--xgp38-h-0B4487,#0b4487); }
#danh-muc-van-tai .tm37-hero:hover .tm37-hero-routes { box-shadow: inset 0 1px rgba(255,255,255,.5), 0 14px 24px rgba(121,84,5,.12); }

/* VF3-style cards */
#danh-muc-van-tai .tmvf-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; margin-top:16px; align-items:stretch; }
#danh-muc-van-tai .tmvf-card {
  display:flex; flex-direction:column; align-items:flex-start; gap:14px; position:relative; min-width:0; min-height:258px; padding:20px 18px 18px;
  overflow:hidden; border:1px solid var(--xgp38-h-2374AB,#2374ab); border-radius:18px; background:var(--xgp38-h-2A7CB8,#2a7cb8); color:#fff; text-decoration:none!important;
  box-shadow:0 8px 20px rgba(var(--xgp38-r-0A3C64,10,60,100),.10); transition:transform .2s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease,color .2s ease;
}
#danh-muc-van-tai .tmvf-icon { display:grid; place-items:center; flex:0 0 61px; width:61px; height:61px; border-radius:18px; background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.27); color:inherit; }
#danh-muc-van-tai .tmvf-icon svg { display:block; width:32px; height:32px; stroke:currentColor; fill:none; flex:none; }
#danh-muc-van-tai .tmvf-body { display:flex; flex:1; flex-direction:column; align-items:flex-start; min-width:0; width:100%; }
#danh-muc-van-tai .tmvf-tag { display:block; font-size:10px; line-height:1.35; font-weight:800; letter-spacing:.045em; text-transform:uppercase; color:inherit; opacity:.95; }
#danh-muc-van-tai .tmvf-title { display:block; margin:7px 0 9px; font-size:18px; line-height:1.3; letter-spacing:-.025em; font-weight:900; color:inherit; overflow-wrap:anywhere; }
#danh-muc-van-tai .tmvf-desc { display:block; font-size:12.8px; line-height:1.5; color:inherit; font-weight:510; opacity:.97; flex:1; }
#danh-muc-van-tai .tmvf-action { display:inline-flex; align-items:center; justify-content:flex-start; gap:8px; min-height:38px; margin-top:17px; padding:9px 10px; border:1px solid rgba(255,255,255,.23); border-radius:12px; background:rgba(255,255,255,.12); font-size:11.7px; line-height:1.3; font-weight:830; color:inherit; }
#danh-muc-van-tai .tmvf-action svg { display:block; width:15px; height:15px; flex:none; stroke:currentColor; fill:none; transition:transform .2s ease; }
#danh-muc-van-tai .tmvf-card:hover, #danh-muc-van-tai .tmvf-card:focus-visible { transform:translateY(-3px); background:var(--xgp38-y-FFC947,#ffc947); border-color:var(--xgp38-y-E5A919,#e5a919); color:var(--xgp38-h-14385B,#14385b); box-shadow:0 15px 28px rgba(58,70,77,.15); }
#danh-muc-van-tai .tmvf-card:hover .tmvf-action, #danh-muc-van-tai .tmvf-card:focus-visible .tmvf-action { background:rgba(100,77,20,.08); border-color:rgba(100,77,20,.17); }
#danh-muc-van-tai .tmvf-card:hover .tmvf-icon, #danh-muc-van-tai .tmvf-card:focus-visible .tmvf-icon { background:rgba(255,255,255,.24); border-color:rgba(90,66,14,.16); }
#danh-muc-van-tai .tmvf-card:hover .tmvf-action svg { transform:translateX(3px); }
#danh-muc-van-tai .tmvf-card:focus-visible, #danh-muc-van-tai .tm37-hero-route:focus-visible, #danh-muc-van-tai .tm37-hero-cta:focus-visible { outline:3px solid var(--xgp38-h-0D85DF,#0d85df); outline-offset:3px; }

@media (max-width: 1120px) {
  #danh-muc-van-tai .tm37-hero { grid-template-columns:minmax(0,1.08fr) minmax(310px,1fr); }
  #danh-muc-van-tai .tmvf-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
}
@media (max-width: 830px) {
  #danh-muc-van-tai .tm37-hero { grid-template-columns: 1fr; gap: 8px; }
  #danh-muc-van-tai .tm37-hero-copy { padding:24px 24px 8px; }
  #danh-muc-van-tai .tm37-hero-routes { margin:0 24px 24px; }
  #danh-muc-van-tai .tm37-hero-features { gap:8px; }
  #danh-muc-van-tai .tmvf-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width: 620px) {
  #danh-muc-van-tai.tm37-hub { padding:23px 0 31px; }
  #danh-muc-van-tai .tm37-shell { width:min(1280px,calc(100% - var(--tm-p05-gutter,24px))); }
  #danh-muc-van-tai .tm37-heading { margin-bottom:14px; }
  #danh-muc-van-tai .tm37-heading h2 { font-size:25px; }
  #danh-muc-van-tai .tm37-heading p { font-size:13px; line-height:1.45; }
  #danh-muc-van-tai .tm37-hero { min-height:auto; border-radius:17px; }
  #danh-muc-van-tai .tm37-hero-copy { width:100%; min-height:auto; padding:18px 16px 6px; justify-content:flex-start; }
  #danh-muc-van-tai .tm37-hero-label { font-size:10px; padding:4px 9px; }
  #danh-muc-van-tai .tm37-hero-title { font-size:27px; line-height:1.16; margin:10px 0 6px; max-width:95%; }
  #danh-muc-van-tai .tm37-hero-desc { font-size:12.8px; line-height:1.38; max-width:95%; -webkit-line-clamp:2; }
  #danh-muc-van-tai .tm37-hero-bottom { margin-top:10px; gap:12px; }
  #danh-muc-van-tai .tm37-hero-cta { font-size:12px; padding:10px 13px; }
  #danh-muc-van-tai .tm37-hero-cta svg { width:15px; height:15px; }
  #danh-muc-van-tai .tm37-hero-features { display:none; }
  #danh-muc-van-tai .tm37-hero-ring { right:-160px; top:38%; width:290px; height:290px; }
  #danh-muc-van-tai .tm37-hero-routes { margin:0 16px 16px; padding:15px 13px 13px; border-radius:14px; }
  #danh-muc-van-tai .tm37-hero-routes-title { font-size:18px; }
  #danh-muc-van-tai .tm37-hero-route-list { grid-template-columns:1fr; gap:8px; }
  #danh-muc-van-tai .tm37-hero-route { min-height:36px; padding:8px 10px; font-size:11.5px; border-radius:10px; }
  #danh-muc-van-tai .tmvf-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:11px; }
  #danh-muc-van-tai .tmvf-card { min-height:0; border-radius:14px; padding:12px 11px; gap:8px; }
  #danh-muc-van-tai .tmvf-icon { width:49px; height:49px; flex-basis:49px; border-radius:14px; }
  #danh-muc-van-tai .tmvf-icon svg { width:27px; height:27px; }
  #danh-muc-van-tai .tmvf-title { font-size:15px; line-height:1.25; margin:4px 0 6px; }
  #danh-muc-van-tai .tmvf-desc { font-size:11.5px; line-height:1.4; }
  #danh-muc-van-tai .tmvf-tag { font-size:9px; }
  #danh-muc-van-tai .tmvf-action { font-size:10.5px; min-height:34px; padding:6px 8px; margin-top:7px; gap:6px; }
  #danh-muc-van-tai .tmvf-desc { flex:0 1 auto; }
}
@media (max-width: 350px) {
  #danh-muc-van-tai .tmvf-card { padding:13px 10px 12px; }
  #danh-muc-van-tai .tmvf-title { font-size:13.8px; }
  #danh-muc-van-tai .tmvf-action { font-size:9.2px; }
}
@media (prefers-reduced-motion: reduce) {
  #danh-muc-van-tai :is(.tmvf-card,.tmvf-action svg,.tm37-hero,.tm37-hero-cta,.tm37-hero-route){ transition:none!important; }
}
