/* ---------- 1. Token sáng + tối ---------- */
.tn-b01{
  --b01-primary:#2F7BF5;
  --b01-primary-2:#60A5FA;
  --b01-accent:#1EB4E6;
  --b01-active:#2563EB;
  --b01-ink:#0F172A;
  --b01-text:#334155;
  --b01-muted:#64748B;
  --b01-surface:#FFFFFF;
  --b01-glass:rgb(255 255 255 / .78);
  --b01-tint:#EFF6FF;
  --b01-line:#E2E8F0;
  --b01-grid:rgb(255 255 255 / .1);
  /* Nút hotline: gradient xanh, rê chuột/bấm thì xanh đậm tràn từ hai góc */
  --b01-hl-a:#2563EB;
  --b01-hl-b:#3B82F6;
  --b01-hl-fill-a:#1E40AF;
  --b01-hl-fill-b:#1D4ED8;
  --b01-hl-fg:#FFFFFF;
  --b01-hl-ic:rgb(255 255 255 / .2);
  --b01-hl-ring:rgb(255 255 255 / .6);
  --b01-hl-shine:rgb(255 255 255 / .35);
  --b01-hl-shadow:0 10px 22px -10px rgb(37 99 235 / .65);
  --b01-ic-grad-a:#2F7BF5;
  --b01-ic-grad-b:#1EB4E6;
  --b01-on-color:#FFFFFF;
  --b01-on-color-soft:rgb(255 255 255 / .9);
  --b01-track:#E2E8F0;
  --b01-knob:#FFFFFF;
  --b01-knob-ic:#F59E0B;
  --b01-knob-shadow:0 2px 6px rgb(15 23 42 / .2);
  --b01-backdrop:rgb(15 23 42 / .45);
  --b01-focus:#2F7BF5;
  --b01-burger-line:rgb(47 123 245 / .35);
  --b01-r-md:18px;
  --b01-r-sm:12px;
  --b01-r-pill:999px;
  --b01-shadow:0 10px 30px -14px rgb(15 23 42 / .16);
  --b01-shadow-pop:0 24px 60px -20px rgb(15 23 42 / .28);
}
/* Đọc giao ước sáng/tối trên <html> (selector toàn cục bắt buộc) */
:root[data-med-theme="dark"] .tn-b01{
  --b01-primary:#60A5FA;
  --b01-primary-2:#93C5FD;
  --b01-accent:#38BDF8;
  --b01-active:#93C5FD;
  --b01-ink:#F1F5F9;
  --b01-text:#CBD5E1;
  --b01-muted:#94A3B8;
  --b01-surface:#0B1220;
  --b01-glass:rgb(11 18 32 / .78);
  --b01-tint:rgb(96 165 250 / .12);
  --b01-line:rgb(255 255 255 / .1);
  --b01-hl-shadow:0 10px 22px -10px rgb(0 0 0 / .8);
  --b01-ic-grad-a:#2563EB;
  --b01-ic-grad-b:#0EA5E9;
  --b01-track:#1E293B;
  --b01-knob:#F1F5F9;
  --b01-knob-ic:#1D4ED8;
  --b01-knob-shadow:0 2px 6px rgb(0 0 0 / .4);
  --b01-backdrop:rgb(2 6 23 / .6);
  --b01-focus:#93C5FD;
  --b01-burger-line:rgb(147 197 253 / .35);
  --b01-shadow:0 10px 30px -14px rgb(0 0 0 / .6);
  --b01-shadow-pop:0 24px 60px -20px rgb(0 0 0 / .75);
}
/* Khóa cuộn trang khi mở menu mobile (selector toàn cục bắt buộc) */
html.tn-b01-lock{overflow:hidden}
/* Block full-width: chặn cuộn ngang do 100vw (selector toàn cục bắt buộc) */
body{overflow-x:clip}
/* ---------- 2. Reset trong phạm vi block ---------- */
.tn-b01,.tn-b01 *,.tn-b01 *::before,.tn-b01 *::after{box-sizing:border-box}
.tn-b01 p,.tn-b01 ul,.tn-b01 li,.tn-b01 a,.tn-b01 button,.tn-b01 img{
  margin:0;padding:0;border:0;
  font-family:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif!important;
  text-transform:none!important;letter-spacing:normal;box-shadow:none;background:none;
  line-height:inherit;color:inherit;
}
.tn-b01 ul,.tn-b01 li{list-style:none!important}
.tn-b01 li::before,.tn-b01 li::marker{content:none!important}
.tn-b01 a{text-decoration:none!important}
.tn-b01 button{font-size:inherit;cursor:pointer;-webkit-appearance:none;appearance:none}
.tn-b01 img{display:block;max-width:none}
.tn-b01 svg{display:block;flex:none}
.tn-b01 a:focus-visible,.tn-b01 button:focus-visible{outline:2px solid var(--b01-focus);outline-offset:2px}
/* ---------- 3. Component ---------- */
.tn-b01{
  position:sticky;top:var(--wp-admin--admin-bar--height,0px);z-index:1000;
  display:block;isolation:isolate;
  width:100vw;max-width:100vw;margin:0 calc(50% - 50vw)!important;
  font-family:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif!important;
  font-size:15px;line-height:1.5;color:var(--b01-text);
  -webkit-font-smoothing:antialiased;
}
/* Nền nằm ở lớp giả: blur trên chính header sẽ làm menu fixed bị giam trong header */
.tn-b01::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--b01-surface);
  border-bottom:1px solid transparent;
  transition:background-color .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.tn-b01.is-scrolled::before{
  background:var(--b01-glass);
  -webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px);
  border-bottom-color:var(--b01-line);
  box-shadow:var(--b01-shadow);
}
/* Thanh tiến độ cuộn trang: dải gradient mỏng dưới header */
.tn-b01 .tn-b01-progress{
  position:absolute;left:0;right:0;bottom:0;height:2px;pointer-events:none;
  background:linear-gradient(90deg,var(--b01-primary),var(--b01-accent));
  transform-origin:left;transform:scaleX(0);
  opacity:0;transition:opacity .3s ease;
}
.tn-b01.is-scrolled .tn-b01-progress{opacity:1}
.tn-b01 .tn-b01-bar{
  position:relative;display:flex;align-items:center;gap:6px;
  max-width:1200px;height:64px;margin:0 auto;padding:0 12px;
}
/* Thương hiệu: chữ FINDER gradient */
.tn-b01 .tn-b01-brand{
  display:inline-flex;align-items:center;gap:6px;
  min-height:44px;margin-right:auto;
  font-size:clamp(12px,3.4vw,17px);font-weight:800;line-height:1.1;letter-spacing:.01em;color:var(--b01-ink);
  white-space:nowrap;
}
.tn-b01 .tn-b01-brand img{width:32px;height:32px;transition:transform .5s cubic-bezier(.3,1.4,.5,1)}
.tn-b01 .tn-b01-brand:hover img{transform:rotate(-8deg) scale(1.06)}
.tn-b01 .tn-b01-brand b,.tn-b01 .tn-b01-nav-brand b{
  font-weight:800;
  background:linear-gradient(90deg,var(--b01-primary),var(--b01-accent));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
/* Màn rất hẹp (dưới 360px) chỉ hiện logo, tên thương hiệu vẫn có trong aria-label */
.tn-b01 .tn-b01-brand > span{display:none}
/* 2 dòng: MEDI FINDER nhỏ phía trên, chữ thanh header lớn phía dưới */
.tn-b01 .tn-b01-brand-txt{flex-direction:column;align-items:flex-start;gap:2px;line-height:1.05}
.tn-b01 .tn-b01-brand-txt small{font-size:.58em;font-weight:700;letter-spacing:.16em;color:var(--b01-muted)}
.tn-b01 .tn-b01-actions{display:flex;align-items:center;gap:6px}
.tn-b01 .tn-b01-icon-btn{
  display:inline-grid;place-items:center;
  width:44px;height:44px;border-radius:var(--b01-r-pill);
  border:1px solid var(--b01-line);background:var(--b01-surface);color:var(--b01-ink);
  transition:background-color .2s ease,border-color .2s ease,color .2s ease;
}
.tn-b01 .tn-b01-icon-btn:hover{background:var(--b01-tint);border-color:transparent;color:var(--b01-active)}
.tn-b01 .tn-b01-icon-btn svg{width:20px;height:20px}
/* Công tắc sáng/tối: núm trượt có mặt trời / mặt trăng */
.tn-b01 .tn-b01-switch{display:none;align-items:center;height:44px;padding:0 2px}
.tn-b01 .tn-b01-track{
  position:relative;display:block;flex:none;
  width:56px;height:32px;border-radius:var(--b01-r-pill);
  background:var(--b01-track);
  transition:background-color .3s ease;
}
.tn-b01 .tn-b01-knob{
  position:absolute;top:4px;left:4px;
  display:grid;place-items:center;
  width:24px;height:24px;border-radius:50%;
  background:var(--b01-knob);color:var(--b01-knob-ic);box-shadow:var(--b01-knob-shadow);
  transition:transform .35s cubic-bezier(.3,1.4,.5,1);
}
.tn-b01 .tn-b01-knob svg{position:absolute;width:14px;height:14px;transition:opacity .25s ease,transform .35s ease}
.tn-b01 .tn-b01-knob .tn-b01-moon{opacity:0;transform:rotate(-90deg)}
:root[data-med-theme="dark"] .tn-b01 .tn-b01-knob{transform:translateX(24px)}
:root[data-med-theme="dark"] .tn-b01 .tn-b01-knob .tn-b01-sun{opacity:0;transform:rotate(90deg)}
:root[data-med-theme="dark"] .tn-b01 .tn-b01-knob .tn-b01-moon{opacity:1;transform:none}
/* Nút hotline: gradient xanh, vệt sáng lướt định kỳ; rê chuột/bấm thì xanh đậm tràn từ hai góc */
.tn-b01 .tn-b01-call{
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;gap:6px;
  height:44px;padding:0 12px 0 4px;border-radius:var(--b01-r-pill);
  background:linear-gradient(135deg,var(--b01-hl-a),var(--b01-hl-b));color:var(--b01-hl-fg);box-shadow:var(--b01-hl-shadow);
  white-space:nowrap;
  transition:transform .3s ease;
}
.tn-b01 .tn-b01-call::before,.tn-b01 .tn-b01-call::after{
  content:"";position:absolute;z-index:-1;width:50%;height:100%;
  background:linear-gradient(135deg,var(--b01-hl-fill-a),var(--b01-hl-fill-b));
  transform:scale(0);
  transition:transform .45s cubic-bezier(.2,.7,.2,1);
}
.tn-b01 .tn-b01-call::before{top:0;left:0;transform-origin:top left}
.tn-b01 .tn-b01-call::after{bottom:0;right:0;transform-origin:bottom right}
.tn-b01 .tn-b01-call:hover,.tn-b01 .tn-b01-call:focus-visible{color:var(--b01-hl-fg);transform:translateY(-1px)}
.tn-b01 .tn-b01-call:active{transform:scale(.97)}
.tn-b01 .tn-b01-call:hover::before,.tn-b01 .tn-b01-call:hover::after,
.tn-b01 .tn-b01-call:focus-visible::before,.tn-b01 .tn-b01-call:focus-visible::after,
.tn-b01 .tn-b01-call:active::before,.tn-b01 .tn-b01-call:active::after{transform:scale(1)}
/* Vệt sáng lướt qua nút (thẻ riêng vì ::before/::after đã dùng cho hiệu ứng tràn màu) */
.tn-b01 .tn-b01-call-shine{
  position:absolute;z-index:-1;top:0;left:0;width:40%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent,var(--b01-hl-shine),transparent);
  transform:translateX(-150%) skewX(-20deg);
  animation:b01Shine 4.5s ease-in-out infinite;
}
.tn-b01 .tn-b01-call i{
  position:relative;display:grid;place-items:center;flex:none;
  width:32px;height:32px;border-radius:50%;
  background:var(--b01-hl-ic);color:var(--b01-hl-fg);
}
.tn-b01 .tn-b01-call i::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid var(--b01-hl-ring);
  opacity:0;animation:b01Pulse 2.4s ease-out infinite;
}
.tn-b01 .tn-b01-call svg{width:16px;height:16px;animation:b01Ring 2.4s ease-in-out infinite}
.tn-b01 .tn-b01-call-txt{display:block;font-size:14px;font-weight:700;line-height:1.25;letter-spacing:.01em}
@keyframes b01Shine{0%,65%{transform:translateX(-150%) skewX(-20deg)}100%{transform:translateX(320%) skewX(-20deg)}}
@keyframes b01Pulse{0%{opacity:.6;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.7)}}
@keyframes b01Ring{0%,60%,100%{transform:rotate(0)}66%{transform:rotate(-14deg)}72%{transform:rotate(12deg)}78%{transform:rotate(-8deg)}84%{transform:rotate(4deg)}}
.tn-b01 .tn-b01-burger{display:none}
.tn-b01.tn-b01--js .tn-b01-burger{display:inline-grid}
/* Nút mở menu: ô bo góc nền xanh nhạt, viền xanh mảnh, 3 gạch bằng nhau; bấm thì lún nhẹ */
.tn-b01 .tn-b01-burger{
  border:1.5px solid var(--b01-burger-line);border-radius:14px;
  background:var(--b01-tint);color:var(--b01-active);
  transition:border-color .25s ease,transform .2s ease;
}
.tn-b01 .tn-b01-burger:hover{border-color:var(--b01-primary);background:var(--b01-tint);color:var(--b01-active)}
.tn-b01 .tn-b01-burger:active{transform:scale(.92)}
/* Menu (mobile trước) */
.tn-b01 .tn-b01-nav-head,.tn-b01 .tn-b01-nav-foot{display:none}
.tn-b01 .tn-b01-menu{padding:6px 10px 8px}
.tn-b01 .tn-b01-item{position:relative;display:flex;flex-wrap:wrap;align-items:center}
.tn-b01 .tn-b01-link{
  position:relative;
  display:flex;align-items:center;gap:12px;flex:1;
  min-height:52px;padding:4px 8px;border-radius:14px;
  font-size:16px;font-weight:600;color:var(--b01-ink);
  transition:background-color .2s ease,color .2s ease;
}
.tn-b01 .tn-b01-link:hover{background:var(--b01-tint);color:var(--b01-active)}
.tn-b01 .tn-b01-link[aria-current="page"],.tn-b01 .tn-b01-link.is-parent{background:var(--b01-tint);color:var(--b01-active)}
/* Icon mục chính: chỉ hiện trong ngăn menu mobile */
.tn-b01 .tn-b01-ico{
  display:grid;place-items:center;flex:none;
  width:38px;height:38px;border-radius:12px;
  background:var(--b01-tint);color:var(--b01-primary);
  transition:background-color .2s ease,color .2s ease,transform .3s ease;
}
.tn-b01 .tn-b01-ico svg{width:18px;height:18px}
.tn-b01 .tn-b01-link:hover .tn-b01-ico{transform:scale(1.06)}
.tn-b01 .tn-b01-link[aria-current="page"] .tn-b01-ico,.tn-b01 .tn-b01-link.is-parent .tn-b01-ico{
  background:linear-gradient(135deg,var(--b01-ic-grad-a),var(--b01-ic-grad-b));color:var(--b01-on-color);
}
.tn-b01 .tn-b01-sub-btn{
  display:grid;place-items:center;
  width:44px;height:44px;border-radius:12px;color:var(--b01-muted);
}
.tn-b01 .tn-b01-sub-btn:hover{background:var(--b01-tint);color:var(--b01-active)}
.tn-b01 .tn-b01-sub-btn svg{width:18px;height:18px;transition:transform .3s ease}
.tn-b01 .tn-b01-sub-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.tn-b01 .tn-b01-mega{flex-basis:100%;margin:0 0 6px;padding:2px 0 0 14px}
.tn-b01 .tn-b01-sub a{
  display:flex;align-items:center;gap:10px;
  min-height:46px;padding:4px 8px;border-radius:12px;
  font-size:15px;font-weight:500;line-height:1.3;color:var(--b01-text);
  transition:background-color .2s ease,color .2s ease;
}
.tn-b01 .tn-b01-sub a:hover{background:var(--b01-tint);color:var(--b01-active)}
.tn-b01 .tn-b01-sub a[aria-current="page"]{background:var(--b01-tint);color:var(--b01-active);font-weight:600}
.tn-b01 .tn-b01-sub-ico{
  display:grid;place-items:center;flex:none;
  width:32px;height:32px;border-radius:10px;
  background:var(--b01-tint);color:var(--b01-primary);
  transition:background-color .25s ease,color .25s ease,transform .3s ease;
}
.tn-b01 .tn-b01-sub-ico svg{width:17px;height:17px}
.tn-b01 .tn-b01-sub a:hover .tn-b01-sub-ico,
.tn-b01 .tn-b01-sub a[aria-current="page"] .tn-b01-sub-ico{
  background:linear-gradient(135deg,var(--b01-ic-grad-a),var(--b01-ic-grad-b));color:var(--b01-on-color);
}
.tn-b01 .tn-b01-sub-txt{display:block}
.tn-b01 .tn-b01-sub-txt small{display:none}
.tn-b01 .tn-b01-sub-all,.tn-b01 .tn-b01-promo{display:none}
.tn-b01.tn-b01--js .tn-b01-mega{display:none}
.tn-b01.tn-b01--js .tn-b01-sub-btn[aria-expanded="true"] + .tn-b01-mega{display:block}
/* Không có JS: menu xếp ngay dưới thanh header để vẫn dùng được */
.tn-b01:not(.tn-b01--js) .tn-b01-bar{flex-wrap:wrap;height:auto;min-height:64px;padding-block:10px}
.tn-b01:not(.tn-b01--js) .tn-b01-nav{order:3;flex-basis:100%}
.tn-b01:not(.tn-b01--js) .tn-b01-sub-btn{display:none}
/* Có JS: menu thành ngăn trượt từ trái, rộng 79% màn hình */
.tn-b01.tn-b01--js .tn-b01-nav{
  position:fixed;top:0;left:0;bottom:0;z-index:2;
  display:flex;flex-direction:column;
  width:79%;max-width:380px;
  background:var(--b01-surface);box-shadow:var(--b01-shadow-pop);
  overflow-y:auto;overscroll-behavior:contain;
  transform:translateX(-100%);visibility:hidden;
  transition:transform .4s cubic-bezier(.2,.8,.2,1),visibility 0s linear .4s;
}
.tn-b01.tn-b01--js.is-open .tn-b01-nav{
  transform:none;visibility:visible;
  transition:transform .4s cubic-bezier(.2,.8,.2,1),visibility 0s;
}
/* Các mục trong ngăn lần lượt trượt vào khi mở */
@media (max-width:1023.98px){
.tn-b01.tn-b01--js .tn-b01-menu > li,.tn-b01.tn-b01--js .tn-b01-nav-foot > *{
  opacity:0;transform:translateX(-14px);
  transition:opacity .35s ease,transform .45s cubic-bezier(.2,.8,.2,1);
}
.tn-b01.tn-b01--js.is-open .tn-b01-menu > li,.tn-b01.tn-b01--js.is-open .tn-b01-nav-foot > *{opacity:1;transform:none}
.tn-b01.is-open .tn-b01-menu > li:nth-child(1){transition-delay:.08s}
.tn-b01.is-open .tn-b01-menu > li:nth-child(2){transition-delay:.13s}
.tn-b01.is-open .tn-b01-menu > li:nth-child(3){transition-delay:.18s}
.tn-b01.is-open .tn-b01-menu > li:nth-child(4){transition-delay:.23s}
.tn-b01.is-open .tn-b01-menu > li:nth-child(5){transition-delay:.28s}
.tn-b01.is-open .tn-b01-nav-foot > *{transition-delay:.32s}
}
.tn-b01.tn-b01--js .tn-b01-nav-head{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;align-items:center;justify-content:space-between;
  min-height:72px;padding:0 10px 0 20px;
  border-bottom:1px solid var(--b01-line);
}
/* Dải sáng gradient rất nhẹ ở đầu ngăn menu */
.tn-b01 .tn-b01-nav-head::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.12;
  background:linear-gradient(120deg,var(--b01-primary),var(--b01-accent));
}
.tn-b01 .tn-b01-nav-head .tn-b01-icon-btn{border:0;border-radius:14px;background:none}
.tn-b01 .tn-b01-nav-head .tn-b01-icon-btn:hover{background:var(--b01-tint)}
.tn-b01 .tn-b01-nav-head .tn-b01-icon-btn svg{width:22px;height:22px;transition:transform .3s ease}
.tn-b01 .tn-b01-nav-head .tn-b01-icon-btn:hover svg{transform:rotate(90deg)}
.tn-b01 .tn-b01-nav-brand{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:800;letter-spacing:.01em;color:var(--b01-ink);white-space:nowrap}
.tn-b01 .tn-b01-nav-brand img{width:32px;height:32px}
.tn-b01.tn-b01--js .tn-b01-nav-foot{display:flex;flex-direction:column;gap:10px;margin-top:auto;padding:16px}
.tn-b01 .tn-b01-row-theme{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:52px;padding:0 10px 0 14px;border-radius:14px;
  background:var(--b01-tint);text-align:left;
  font-size:15px;font-weight:600;color:var(--b01-ink);
}
.tn-b01 .tn-b01-btn{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:0 16px;border-radius:var(--b01-r-pill);
  font-size:15px;font-weight:600;white-space:nowrap;
  transition:background-color .2s ease,color .3s ease;
}
.tn-b01 .tn-b01-btn svg{width:18px;height:18px}
.tn-b01 .tn-b01-btn--call{background:linear-gradient(135deg,var(--b01-hl-a),var(--b01-hl-b));color:var(--b01-hl-fg);box-shadow:var(--b01-hl-shadow)}
.tn-b01 .tn-b01-btn--call::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(135deg,var(--b01-hl-fill-a),var(--b01-hl-fill-b));
  transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.2,.7,.2,1);
}
.tn-b01 .tn-b01-btn--call:hover{color:var(--b01-hl-fg)}
.tn-b01 .tn-b01-btn--call:hover::before{transform:scaleX(1)}
.tn-b01 .tn-b01-btn--zalo{border:1px solid var(--b01-line);color:var(--b01-ink)}
.tn-b01 .tn-b01-btn--zalo:hover{background:var(--b01-tint)}
.tn-b01 .tn-b01-backdrop{
  position:fixed;inset:0;z-index:1;
  background:var(--b01-backdrop);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  opacity:0;visibility:hidden;
  transition:opacity .35s ease,visibility 0s linear .35s;
}
.tn-b01.is-open .tn-b01-backdrop{opacity:1;visibility:visible;transition:opacity .35s ease,visibility 0s}
/* ---------- 4. Responsive (min-width) ---------- */
@media (min-width:360px){
  .tn-b01 .tn-b01-brand > span{display:flex}
}
@media (min-width:400px){
  .tn-b01 .tn-b01-brand{gap:8px;font-size:clamp(13px,3.75vw,17px)}
  .tn-b01 .tn-b01-call{gap:8px;padding:0 16px 0 5px}
  .tn-b01 .tn-b01-call i{width:34px;height:34px}
  .tn-b01 .tn-b01-call-txt{font-size:15px}
}
@media (min-width:480px){
  .tn-b01 .tn-b01-bar{gap:8px;padding:0 16px}
  .tn-b01 .tn-b01-brand{gap:10px;font-size:19px}
  .tn-b01 .tn-b01-brand img{width:42px;height:42px}
}
/* Công tắc sáng/tối trên thanh chỉ hiện khi đủ chỗ; màn hẹp hơn dùng công tắc trong ngăn menu */
@media (min-width:520px){
  .tn-b01 .tn-b01-switch{display:inline-flex}
}
@media (min-width:1024px){
  .tn-b01 .tn-b01-bar,.tn-b01:not(.tn-b01--js) .tn-b01-bar{flex-wrap:nowrap;gap:16px;height:80px;padding:0 24px}
  .tn-b01 .tn-b01-brand{margin-right:0}
  .tn-b01 .tn-b01-call{height:46px;padding:0 20px 0 6px}
  .tn-b01 .tn-b01-call i{width:36px;height:36px}
  .tn-b01.tn-b01--js .tn-b01-burger,
  .tn-b01.tn-b01--js .tn-b01-nav-head,
  .tn-b01.tn-b01--js .tn-b01-nav-foot,
  .tn-b01 .tn-b01-backdrop{display:none}
  .tn-b01 .tn-b01-nav,.tn-b01.tn-b01--js .tn-b01-nav{
    position:static;order:0;flex-basis:auto;display:block;
    width:auto;max-width:none;margin:0 auto;
    background:none;box-shadow:none;overflow:visible;
    transform:none;visibility:visible;transition:none;
  }
  .tn-b01 .tn-b01-menu{display:flex;align-items:center;gap:4px;padding:0}
  .tn-b01 .tn-b01-item{flex-wrap:nowrap;height:80px}
  /* Mega menu căn giữa theo thanh header (không theo mục "Dịch vụ") để không tràn mép màn 1024px */
  .tn-b01 .tn-b01-item.tn-b01-has-sub{position:static}
  .tn-b01 .tn-b01-menu > li > .tn-b01-link .tn-b01-ico{display:none}
  /* Link desktop: gạch chân gradient chạy ra khi rê chuột (hiệu ứng kiểu Careon) */
  .tn-b01 .tn-b01-link,
  .tn-b01 .tn-b01-link:hover,
  .tn-b01 .tn-b01-link[aria-current="page"],
  .tn-b01 .tn-b01-link.is-parent{
    min-height:44px;padding:0 14px;border-radius:0;background:none;
    font-size:15px;font-weight:600;color:var(--b01-text);
  }
  .tn-b01 .tn-b01-link::after{
    content:"";position:absolute;left:14px;right:14px;bottom:6px;height:2px;border-radius:2px;
    background:linear-gradient(90deg,var(--b01-primary),var(--b01-accent));
    transform:scaleX(0);transform-origin:right center;
    transition:transform .45s cubic-bezier(.2,.7,.2,1);
  }
  .tn-b01 .tn-b01-item:hover > .tn-b01-link,
  .tn-b01 .tn-b01-link[aria-current="page"],
  .tn-b01 .tn-b01-link.is-parent{color:var(--b01-active)}
  .tn-b01 .tn-b01-item:hover > .tn-b01-link::after,
  .tn-b01 .tn-b01-link[aria-current="page"]::after,
  .tn-b01 .tn-b01-link.is-parent::after{transform:scaleX(1);transform-origin:left center}
  .tn-b01 .tn-b01-has-sub .tn-b01-link{padding-right:2px}
  .tn-b01 .tn-b01-has-sub .tn-b01-link::after{right:2px}
  .tn-b01 .tn-b01-sub-btn,.tn-b01:not(.tn-b01--js) .tn-b01-sub-btn{display:grid;width:28px;height:44px;margin-right:4px}
  .tn-b01 .tn-b01-sub-btn:hover{background:none}
  .tn-b01 .tn-b01-has-sub:hover .tn-b01-sub-btn{color:var(--b01-active)}
  .tn-b01 .tn-b01-has-sub:hover .tn-b01-sub-btn svg{transform:rotate(180deg)}
  /* Mega menu "Dịch vụ" – mở mờ dần + trượt nhẹ xuống, mục con hiện lần lượt */
  .tn-b01 .tn-b01-mega,.tn-b01.tn-b01--js .tn-b01-mega{
    position:absolute;top:calc(100% - 6px);left:50%;z-index:3;
    width:min(820px,calc(100vw - 32px));margin:0;
    opacity:0;visibility:hidden;transform:translateX(-50%) translateY(10px);
    transition:opacity .25s ease,transform .35s cubic-bezier(.2,.8,.2,1),visibility 0s linear .35s;
    display:grid;grid-template-columns:1fr 230px;gap:10px;padding:10px;
    border:1px solid var(--b01-line);border-radius:22px;
    background:var(--b01-surface);box-shadow:var(--b01-shadow-pop);
  }
  .tn-b01 .tn-b01-mega::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
  .tn-b01 .tn-b01-has-sub:hover > .tn-b01-mega,
  .tn-b01 .tn-b01-has-sub:focus-within > .tn-b01-mega,
  .tn-b01.tn-b01--js .tn-b01-sub-btn[aria-expanded="true"] + .tn-b01-mega{
    display:grid;opacity:1;visibility:visible;transform:translateX(-50%);
    transition:opacity .25s ease,transform .35s cubic-bezier(.2,.8,.2,1),visibility 0s;
  }
  .tn-b01 .tn-b01-sub > li{opacity:0;transform:translateY(6px);transition:opacity .3s ease,transform .35s cubic-bezier(.2,.8,.2,1)}
  .tn-b01 .tn-b01-has-sub:hover .tn-b01-sub > li,
  .tn-b01 .tn-b01-has-sub:focus-within .tn-b01-sub > li,
  .tn-b01 .tn-b01-sub-btn[aria-expanded="true"] + .tn-b01-mega .tn-b01-sub > li{opacity:1;transform:none}
  .tn-b01 .tn-b01-sub > li:nth-child(2){transition-delay:.03s}
  .tn-b01 .tn-b01-sub > li:nth-child(3){transition-delay:.06s}
  .tn-b01 .tn-b01-sub > li:nth-child(4){transition-delay:.09s}
  .tn-b01 .tn-b01-sub > li:nth-child(5){transition-delay:.12s}
  .tn-b01 .tn-b01-sub > li:nth-child(6){transition-delay:.15s}
  .tn-b01 .tn-b01-sub > li:nth-child(7){transition-delay:.18s}
  .tn-b01 .tn-b01-sub-txt small{display:block;margin-top:2px;font-size:13px;font-weight:400;line-height:1.35;color:var(--b01-muted)}
  .tn-b01 .tn-b01-sub a:hover .tn-b01-sub-ico{transform:scale(1.06) rotate(-4deg)}
  .tn-b01 .tn-b01-sub{display:grid;grid-template-columns:1fr 1fr;align-content:start;gap:4px}
  .tn-b01 .tn-b01-sub a{align-items:center;min-height:64px;padding:10px 12px;border-radius:14px;color:var(--b01-ink);font-weight:600}
  .tn-b01 .tn-b01-sub-ico{width:42px;height:42px;border-radius:12px}
  .tn-b01 .tn-b01-sub-ico svg{width:20px;height:20px}
  .tn-b01 .tn-b01-sub .tn-b01-sub-all{display:block;grid-column:1 / -1;margin-top:2px;padding-top:6px;border-top:1px dashed var(--b01-line)}
  /* "Xem tất cả dịch vụ" căn giữa */
  .tn-b01 .tn-b01-sub .tn-b01-sub-all a{min-height:44px;align-items:center;justify-content:center;gap:8px;padding:0 12px;font-size:14px;font-weight:600;color:var(--b01-active)}
  .tn-b01 .tn-b01-sub .tn-b01-sub-all a:hover{background:var(--b01-tint)}
  .tn-b01 .tn-b01-sub-all svg{width:16px;height:16px;transition:transform .25s ease}
  .tn-b01 .tn-b01-sub-all a:hover svg{transform:translateX(4px)}
  .tn-b01 .tn-b01-promo{
    position:relative;isolation:isolate;overflow:hidden;
    display:flex;flex-direction:column;justify-content:center;gap:8px;padding:20px 18px;border-radius:16px;
    background:linear-gradient(160deg,#DCEAFE,#F3F8FF);color:#0F172A;
  }
  :root[data-med-theme="dark"] .tn-b01 .tn-b01-promo{background:linear-gradient(160deg,#14305E,#0E1B33);color:#F1F5F9}
  .tn-b01 .tn-b01-promo::before{
    content:"";position:absolute;inset:0;z-index:-1;
    background-image:linear-gradient(rgb(37 99 235 / .1) 1px,transparent 1px),linear-gradient(90deg,rgb(37 99 235 / .1) 1px,transparent 1px);
    background-size:24px 24px;
    -webkit-mask-image:radial-gradient(ellipse 90% 70% at 80% 0%,#000 20%,transparent 100%);
    mask-image:radial-gradient(ellipse 90% 70% at 80% 0%,#000 20%,transparent 100%);
  }
  .tn-b01 .tn-b01-promo strong{font-size:17px;font-weight:700;line-height:1.3}
  .tn-b01 .tn-b01-promo span{font-size:14px;line-height:1.55;color:var(--b01-text)}
  .tn-b01 .tn-b01-promo a{
    position:relative;isolation:isolate;overflow:hidden;
    display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;margin-top:6px;padding:0 14px;border-radius:var(--b01-r-pill);
    background:linear-gradient(135deg,#2563EB,#3B82F6);color:#FFFFFF;box-shadow:0 10px 20px -10px rgb(37 99 235 / .7);
    font-size:14px;font-weight:700;white-space:nowrap;transition:transform .25s ease;
  }
  .tn-b01 .tn-b01-promo a::before{content:"";position:absolute;inset:0;z-index:-1;background:#1D4ED8;opacity:0;transition:opacity .3s ease}
  .tn-b01 .tn-b01-promo a:hover{transform:translateY(-2px)}
  .tn-b01 .tn-b01-promo a:hover::before{opacity:1}
  .tn-b01 .tn-b01-promo a svg{width:16px;height:16px}
}
/* ---------- 5. Reveal + reduced-motion ---------- */
/* Chỉ ẩn khi JS đã gắn class bật animation -> JS lỗi/tắt vẫn thấy đủ nội dung */
.tn-b01.tn-b01--anim .tn-b01-rv{
  opacity:0;transform:translateY(-10px);
  transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1);
  transition-delay:var(--b01-d,0ms);
}
.tn-b01.tn-b01--anim .tn-b01-rv.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .tn-b01.tn-b01--anim .tn-b01-rv{opacity:1;transform:none;transition:none}
  .tn-b01 *,.tn-b01 *::before,.tn-b01 *::after,.tn-b01::before,.tn-b01.tn-b01--js .tn-b01-nav,.tn-b01.tn-b01--js.is-open .tn-b01-nav{transition:none!important;animation:none!important}
  .tn-b01.tn-b01--js .tn-b01-menu > li,.tn-b01.tn-b01--js .tn-b01-nav-foot > *{opacity:1;transform:none}
}
/* Hiệu ứng nút gọi chung toàn trang (giống nút gọi block CTA cuối): rê chuột/bấm thì xanh đậm tràn từ hai góc,
   chữ trắng, nút nhích lên, quầng sáng lan ra, icon điện thoại rung một nhịp */
.tn-b01 .tn-b01-call,.tn-b01 .tn-b01-btn--call{position:relative;isolation:isolate;overflow:hidden;transition:transform .25s ease,color .35s ease,box-shadow .35s ease}
.tn-b01 .tn-b01-call::before,.tn-b01 .tn-b01-btn--call::before,.tn-b01 .tn-b01-call::after,.tn-b01 .tn-b01-btn--call::after{
  content:"";position:absolute;z-index:-1;width:51%;height:100%;
  background:#1E40AF;transform:scale(0);transition:transform .45s cubic-bezier(.2,.7,.2,1);
}
.tn-b01 .tn-b01-call::before,.tn-b01 .tn-b01-btn--call::before{top:0;left:0;right:auto;bottom:auto;transform-origin:top left}
.tn-b01 .tn-b01-call::after,.tn-b01 .tn-b01-btn--call::after{bottom:0;right:0;top:auto;left:auto;transform-origin:bottom right}
.tn-b01 .tn-b01-call:hover,.tn-b01 .tn-b01-btn--call:hover,.tn-b01 .tn-b01-call:focus-visible,.tn-b01 .tn-b01-btn--call:focus-visible{color:#FFFFFF;transform:translateY(-2px);box-shadow:0 0 0 6px rgb(96 165 250 / .25),0 18px 32px -12px rgb(15 23 42 / .45)}
.tn-b01 .tn-b01-call:active,.tn-b01 .tn-b01-btn--call:active{transform:scale(.97)}
.tn-b01 .tn-b01-call:hover::before,.tn-b01 .tn-b01-btn--call:hover::before,.tn-b01 .tn-b01-call:hover::after,.tn-b01 .tn-b01-btn--call:hover::after,.tn-b01 .tn-b01-call:focus-visible::before,.tn-b01 .tn-b01-btn--call:focus-visible::before,.tn-b01 .tn-b01-call:focus-visible::after,.tn-b01 .tn-b01-btn--call:focus-visible::after,.tn-b01 .tn-b01-call:active::before,.tn-b01 .tn-b01-btn--call:active::before,.tn-b01 .tn-b01-call:active::after,.tn-b01 .tn-b01-btn--call:active::after{transform:scale(1)}
.tn-b01 .tn-b01-call:hover svg,.tn-b01 .tn-b01-btn--call:hover svg,.tn-b01 .tn-b01-call:focus-visible svg,.tn-b01 .tn-b01-btn--call:focus-visible svg{animation:b01CallHit .8s ease-in-out}
@keyframes b01CallHit{0%,100%{transform:rotate(0)}20%{transform:rotate(-14deg)}40%{transform:rotate(12deg)}60%{transform:rotate(-8deg)}80%{transform:rotate(4deg)}}
@media (prefers-reduced-motion:reduce){
  .tn-b01 .tn-b01-call,.tn-b01 .tn-b01-btn--call,.tn-b01 .tn-b01-call::before,.tn-b01 .tn-b01-btn--call::before,.tn-b01 .tn-b01-call::after,.tn-b01 .tn-b01-btn--call::after{transition:none}
  .tn-b01 .tn-b01-call:hover,.tn-b01 .tn-b01-btn--call:hover,.tn-b01 .tn-b01-call:focus-visible,.tn-b01 .tn-b01-btn--call:focus-visible,.tn-b01 .tn-b01-call:active,.tn-b01 .tn-b01-btn--call:active{transform:none}
  .tn-b01 .tn-b01-call:hover svg,.tn-b01 .tn-b01-btn--call:hover svg,.tn-b01 .tn-b01-call:focus-visible svg,.tn-b01 .tn-b01-btn--call:focus-visible svg{animation:none}
}
/* Hiệu ứng nút Zalo chung toàn trang: rê chuột/bấm thì nền quét màu xanh Zalo từ trái sang phải, chữ trắng, nhích lên, icon nảy */
.tn-b01 .tn-b01-btn--zalo{position:relative;isolation:isolate;overflow:hidden;transition:transform .25s ease,color .3s ease,border-color .3s ease,box-shadow .3s ease}
.tn-b01 .tn-b01-btn--zalo::before{content:"";position:absolute;inset:0;z-index:-1;background:#0068FF;transform:scaleX(0);transform-origin:left center;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.tn-b01 .tn-b01-btn--zalo:hover,.tn-b01 .tn-b01-btn--zalo:focus-visible{transform:translateY(-2px);border-color:#0068FF;color:#FFFFFF;box-shadow:0 14px 26px -12px rgb(0 104 255 / .55)}
.tn-b01 .tn-b01-btn--zalo:active{transform:scale(.97)}
.tn-b01 .tn-b01-btn--zalo:hover::before,.tn-b01 .tn-b01-btn--zalo:focus-visible::before,.tn-b01 .tn-b01-btn--zalo:active::before{transform:scaleX(1)}
.tn-b01 .tn-b01-btn--zalo:hover svg,.tn-b01 .tn-b01-btn--zalo:focus-visible svg{color:#FFFFFF;animation:b01ZaloPop .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes b01ZaloPop{0%{transform:scale(1)}40%{transform:scale(1.3) rotate(-8deg)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){
  .tn-b01 .tn-b01-btn--zalo,.tn-b01 .tn-b01-btn--zalo::before{transition:none}
  .tn-b01 .tn-b01-btn--zalo:hover,.tn-b01 .tn-b01-btn--zalo:focus-visible,.tn-b01 .tn-b01-btn--zalo:active{transform:none}
  .tn-b01 .tn-b01-btn--zalo:hover svg,.tn-b01 .tn-b01-btn--zalo:focus-visible svg{animation:none}
}