/* SINH TỰ ĐỘNG từ blocks/b01-header.html — không sửa tay */
/* ---------- 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 / .97);
--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-call-bg:#FFFFFF;
--b01-call-bd:#2F7BF5;
--b01-call-fg:#2563EB;
--b01-call-shadow:0 0 0 5px rgb(47 123 245 / .08),0 8px 18px -12px rgb(37 99 235 / .55);
--b01-call-glow:0 0 14px rgb(47 123 245 / .55);
--b01-flag-ring:rgb(15 23 42 / .1);
--b01-c-blue:#2563EB;
--b01-c-violet:#7C3AED;
--b01-c-teal:#0D9488;
--b01-c-amber:#D97706;
--b01-c-green:#16A34A;
--b01-c-pink:#DB2777;
--b01-c-sky:#0284C7;
--b01-c-rose:#E11D48;
--b01-pa:12%;
--b01-navy:#0F172A;
--b01-fill-pct:88%;
--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 (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 / .97);
--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-call-bg:#0B1220;
--b01-call-bd:#60A5FA;
--b01-call-fg:#BFDBFE;
--b01-call-shadow:0 0 0 5px rgb(96 165 250 / .1);
--b01-call-glow:0 0 14px rgb(96 165 250 / .45);
--b01-flag-ring:rgb(255 255 255 / .18);
--b01-c-blue:#60A5FA;
--b01-c-violet:#A78BFA;
--b01-c-teal:#2DD4BF;
--b01-c-amber:#FBBF24;
--b01-c-green:#4ADE80;
--b01-c-pink:#F472B6;
--b01-c-sky:#38BDF8;
--b01-c-rose:#FB7185;
--b01-pa:18%;
--b01-fill-pct:50%;
--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:'Inter',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:'Inter',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);
/* nền gần đặc, không làm mờ nền: cuộn mượt hơn trên điện thoại (25/10/2026) */
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ữ HAPPY 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}
/* Tên 2 dòng: DOCTOR HAPPY lớn phía trên, dòng "DỊCH VỤ Y TẾ TP.HCM" nhỏ 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:.1em;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}
/* Nút sáng/tối trên thanh (mẫu B 24/10/2026): nút tròn, icon xoay khi đổi chế độ */
.tn-b01 .tn-b01-switch{
position:relative;display:none;place-items:center;flex:none;
width:44px;height:44px;border-radius:50%;
border:1px solid var(--b01-line);background:var(--b01-surface);color:var(--b01-knob-ic);
transition:background-color .2s ease,border-color .2s ease;
}
.tn-b01 .tn-b01-switch:hover{background:var(--b01-tint);border-color:transparent}
.tn-b01 .tn-b01-switch svg{position:absolute;width:20px;height:20px;transition:opacity .3s ease,transform .5s cubic-bezier(.3,1.4,.5,1)}
.tn-b01 .tn-b01-switch .tn-b01-moon{opacity:0;transform:rotate(-120deg) scale(.4)}
:root[data-med-theme="dark"] .tn-b01 .tn-b01-switch .tn-b01-sun{opacity:0;transform:rotate(120deg) scale(.4)}
:root[data-med-theme="dark"] .tn-b01 .tn-b01-switch .tn-b01-moon{opacity:1;transform:none}
/* Chọn ngôn ngữ (mẫu A 24/10/2026): cờ + VI, không viền; danh sách thả xuống. Site mới có tiếng Việt, English để "Sắp có" */
.tn-b01 .tn-b01-lang{position:relative;display:none}
.tn-b01 .tn-b01-lang-btn{
display:inline-flex;align-items:center;gap:6px;
height:44px;padding:0 8px;border-radius:var(--b01-r-pill);
background:transparent;color:var(--b01-ink);font-size:14px;font-weight:700;line-height:1;cursor:pointer;
transition:background-color .2s ease;
}
.tn-b01 .tn-b01-lang-btn:hover,.tn-b01 .tn-b01-lang.is-open .tn-b01-lang-btn{background:var(--b01-tint)}
.tn-b01 .tn-b01-flag{display:block;flex:none;width:22px;height:15px;border-radius:3px;overflow:hidden;box-shadow:0 0 0 1px var(--b01-flag-ring)}
.tn-b01 .tn-b01-flag svg{display:block;width:100%;height:100%}
.tn-b01 .tn-b01-lang-chev{width:16px;height:16px;color:var(--b01-muted);transition:transform .25s ease}
.tn-b01 .tn-b01-lang.is-open .tn-b01-lang-chev{transform:rotate(180deg)}
.tn-b01 .tn-b01-lang-menu{
position:absolute;z-index:3;top:calc(100% + 8px);right:0;min-width:200px;padding:6px;list-style:none;
border:1px solid var(--b01-line);border-radius:14px;background:var(--b01-surface);box-shadow:var(--b01-shadow-pop);
opacity:0;visibility:hidden;transform:translateY(-6px);
transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s;
}
.tn-b01 .tn-b01-lang.is-open .tn-b01-lang-menu{opacity:1;visibility:visible;transform:none;transition:opacity .2s ease,transform .2s ease,visibility 0s}
.tn-b01 .tn-b01-lang-menu a{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 12px;border-radius:10px;font-size:14px;font-weight:600;color:var(--b01-text)}
.tn-b01 .tn-b01-lang-menu a{color:var(--b01-active)}
.tn-b01 .tn-b01-lang-menu a:hover{background:var(--b01-tint)}
/* Nút hotline (mẫu I 24/10/2026): nền trắng viền xanh, vòng icon xanh có quầng sáng + hai lớp sóng tỏa nối nhau;
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);
border:1.5px solid var(--b01-call-bd);background:var(--b01-call-bg);color:var(--b01-call-fg);box-shadow:var(--b01-call-shadow);
white-space:nowrap;
transition:transform .3s ease,border-color .35s 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);border-color:var(--b01-hl-fill-a);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)}
.tn-b01 .tn-b01-call i{
position:relative;display:grid;place-items:center;flex:none;
width:32px;height:32px;border-radius:50%;
background:linear-gradient(135deg,var(--b01-hl-a),var(--b01-accent));color:var(--b01-on-color);box-shadow:var(--b01-call-glow);
}
.tn-b01 .tn-b01-call i::before,.tn-b01 .tn-b01-call i::after{
content:"";position:absolute;inset:0;border-radius:50%;
border:2px solid var(--b01-call-bd);
opacity:0;animation:b01Pulse 2.4s ease-out infinite;
}
.tn-b01 .tn-b01-call i::before{animation-delay:1.2s}
.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 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) — ngăn menu theo mẫu chủ site 24/10/2026 */
.tn-b01 .tn-b01-nav-head,.tn-b01 .tn-b01-nav-foot{display:none}
.tn-b01 .tn-b01-menu{padding:4px 12px 8px}
.tn-b01 .tn-b01-item{position:relative;display:flex;flex-wrap:wrap;align-items:center;margin-bottom:2px}
.tn-b01 .tn-b01-link{
position:relative;
display:flex;align-items:center;gap:12px;flex:1;
min-height:50px;padding:4px 12px;border-radius:14px;
font-size:17px;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 ngăn menu (bộ 3 "Khối đặc" 24/10/2026): icon tô đặc, chi tiết trắng, trên ô màu pastel riêng từng mục.
Màu tn-b01-c--* dùng chung cho ô icon (mobile) và nền phủ khi rê chuột menu Dịch vụ (máy tính) */
.tn-b01 .tn-b01-c--blue{--b01-c:var(--b01-c-blue)}
.tn-b01 .tn-b01-c--violet{--b01-c:var(--b01-c-violet)}
.tn-b01 .tn-b01-c--teal{--b01-c:var(--b01-c-teal)}
.tn-b01 .tn-b01-c--amber{--b01-c:var(--b01-c-amber)}
.tn-b01 .tn-b01-c--green{--b01-c:var(--b01-c-green)}
.tn-b01 .tn-b01-c--pink{--b01-c:var(--b01-c-pink)}
.tn-b01 .tn-b01-c--sky{--b01-c:var(--b01-c-sky)}
.tn-b01 .tn-b01-c--rose{--b01-c:var(--b01-c-rose)}
.tn-b01 .tn-b01-ico{
display:grid;place-items:center;flex:none;
width:36px;height:36px;margin-left:-4px;border-radius:11px;
background:var(--b01-tint);background:color-mix(in srgb,var(--b01-c,var(--b01-primary)) var(--b01-pa),transparent);
color:var(--b01-c,var(--b01-primary));
transition:transform .3s cubic-bezier(.3,1.4,.5,1);
}
.tn-b01 .tn-b01-ico svg{width:19px;height:19px}
.tn-b01 .tn-b01-link:hover .tn-b01-ico{transform:scale(1.08)}
.tn-b01 .tn-b01-link[aria-current="page"] .tn-b01-ico,.tn-b01 .tn-b01-link.is-parent .tn-b01-ico{background:color-mix(in srgb,var(--b01-c,var(--b01-primary)) 24%,transparent)}
/* Mũi tên › cuối mỗi dòng */
.tn-b01 .tn-b01-go{flex:none;width:18px;height:18px;margin-left:auto;color:var(--b01-muted);transition:transform .25s ease,color .2s ease}
.tn-b01 .tn-b01-link:hover .tn-b01-go{transform:translateX(3px);color:var(--b01-active)}
.tn-b01 .tn-b01-sub-btn{
display:grid;place-items:center;
width:44px;height:44px;margin-right:2px;border-radius:12px;color:var(--b01-ink);
}
.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)}
/* Dịch vụ con: ô icon xanh nhạt + tên + một dòng mô tả */
.tn-b01 .tn-b01-mega{flex-basis:100%;margin:0 0 6px;padding:0 0 0 4px}
.tn-b01 .tn-b01-sub a{
display:flex;align-items:center;gap:12px;
min-height:56px;padding:5px 10px;border-radius:14px;
font-size:16px;font-weight:700;line-height:1.3;color:var(--b01-ink);
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)}
.tn-b01 .tn-b01-sub-ico{
display:grid;place-items:center;flex:none;
width:40px;height:40px;border-radius:12px;
background:var(--b01-tint);background:color-mix(in srgb,var(--b01-c,var(--b01-primary)) var(--b01-pa),transparent);
color:var(--b01-c,var(--b01-primary));
transition:transform .3s cubic-bezier(.3,1.4,.5,1);
}
.tn-b01 .tn-b01-sub-ico svg{width:20px;height:20px}
.tn-b01 .tn-b01-sub a:hover .tn-b01-sub-ico{transform:scale(1.08)}
.tn-b01 .tn-b01-sub a[aria-current="page"] .tn-b01-sub-ico{background:color-mix(in srgb,var(--b01-c,var(--b01-primary)) 24%,transparent)}
.tn-b01 .tn-b01-sub-go{display:none}
.tn-b01 .tn-b01-sub-txt{display:block}
.tn-b01 .tn-b01-sub-txt small{display:block;margin-top:1px;font-size:14px;font-weight:400;line-height:1.35;color:var(--b01-muted)}
.tn-b01 .tn-b01-sub-all{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-menu > li:nth-child(6){transition-delay:.33s}
.tn-b01.is-open .tn-b01-menu > li:nth-child(7){transition-delay:.36s}
.tn-b01.is-open .tn-b01-nav-foot > *{transition-delay:.38s}
}
/* Đầu ngăn: logo + DOCTOR HAPPY lớn, "DỊCH VỤ Y TẾ TP.HCM" nhỏ bên dưới, nút đóng vuông có viền */
.tn-b01.tn-b01--js .tn-b01-nav-head{
display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:16px 16px 12px 20px;
}
.tn-b01 .tn-b01-nav-head .tn-b01-icon-btn{flex:none;border:1px solid var(--b01-line);border-radius:14px;background:var(--b01-surface)}
.tn-b01 .tn-b01-nav-head .tn-b01-icon-btn:hover{background:var(--b01-tint);border-color:transparent}
.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:10px;min-width:0;white-space:nowrap}
.tn-b01 .tn-b01-nav-brand img{width:36px;height:36px}
.tn-b01 .tn-b01-nav-brand-txt{display:flex;flex-direction:column;gap:3px;line-height:1.05}
.tn-b01 .tn-b01-nav-brand-txt small{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--b01-muted)}
.tn-b01 .tn-b01-nav-brand-txt b{font-size:19px;letter-spacing:.01em}
/* Chân ngăn: lời mời kết nối, nút gọi + Zalo, hàng ngôn ngữ + sáng/tối */
.tn-b01.tn-b01--js .tn-b01-nav-foot{display:flex;flex-direction:column;gap:10px;margin-top:auto;padding:12px 16px calc(12px + env(safe-area-inset-bottom))}
.tn-b01 .tn-b01-foot-label{font-size:14px;line-height:1.4;color:var(--b01-muted)}
.tn-b01 .tn-b01-foot-ctas{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tn-b01 .tn-b01-btn{
position:relative;isolation:isolate;overflow:hidden;
display:flex;align-items:center;justify-content:center;gap:8px;
min-height:50px;padding:0 12px;border-radius:var(--b01-r-sm);
font-size:15px;font-weight:700;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:hover{color:var(--b01-hl-fg)}
.tn-b01 .tn-b01-btn--zalo{border:1.5px solid var(--b01-burger-line);background:var(--b01-surface);color:var(--b01-ink)}
.tn-b01 .tn-b01-foot-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:4px;padding-top:12px;border-top:1px solid var(--b01-line)}
.tn-b01 .tn-b01-foot-lang{display:flex;align-items:center;gap:4px}
.tn-b01 .tn-b01-foot-lang a,.tn-b01 .tn-b01-foot-lang span{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:12px;font-size:15px;font-weight:700}
.tn-b01 .tn-b01-foot-lang a{color:var(--b01-ink)}
.tn-b01 .tn-b01-foot-lang a[aria-current="true"]{background:var(--b01-tint);color:var(--b01-active)}
.tn-b01 .tn-b01-foot-lang span{font-weight:600;color:var(--b01-muted);cursor:not-allowed}
/* Nút sáng/tối trong ngăn: cùng kiểu nút tròn trên thanh nhưng không viền, luôn hiện */
.tn-b01 .tn-b01-nav-foot .tn-b01-switch{display:inline-grid;border-color:transparent;background:none}
.tn-b01 .tn-b01-nav-foot .tn-b01-switch:hover{background:var(--b01-tint)}
.tn-b01 .tn-b01-backdrop{
position:fixed;inset:0;z-index:1;
background:var(--b01-backdrop);
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}
}
/* Nút ngôn ngữ chỉ hiện khi đủ chỗ trên thanh */
@media (min-width:640px){
.tn-b01 .tn-b01-lang{display:block}
}
@media (min-width:520px){
.tn-b01 .tn-b01-switch{display:inline-grid}
}
@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,.tn-b01 .tn-b01-go{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)}
/* Menu "Dịch vụ" (24/10/2026): một cột gọn ngay dưới mục – 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:340px;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:block;padding:8px;
border:1px solid var(--b01-line);border-radius:18px;
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:block;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{display:grid;gap:2px}
.tn-b01 .tn-b01-sub a{align-items:center;min-height:58px;padding:8px 10px;border-radius:12px;color:var(--b01-ink);font-size:15px;font-weight:600}
/* Mẫu 14 (24/10/2026): ảnh thu nhỏ thay icon; rê chuột cả dòng phủ màu riêng của dịch vụ (pha navy cho chữ trắng đủ tương phản) */
.tn-b01 .tn-b01-sub-ico{display:none}
/* Chuyên mục tin tức: không có ảnh, giữ ô icon nhỏ */
.tn-b01 .tn-b01-mega--news .tn-b01-sub-ico{display:grid;width:36px;height:36px;border-radius:11px}
.tn-b01 .tn-b01-mega--news .tn-b01-sub-ico svg{width:18px;height:18px}
.tn-b01 .tn-b01-mega--news .tn-b01-sub a{min-height:56px}
.tn-b01 .tn-b01-mega--news .tn-b01-sub a:hover .tn-b01-sub-ico,.tn-b01 .tn-b01-mega--news .tn-b01-sub a:focus-visible .tn-b01-sub-ico{background:rgb(255 255 255 / .2);color:var(--b01-on-color)}
.tn-b01 .tn-b01-sub-go{display:block;flex:none;width:16px;height:16px;margin-left:auto;color:var(--b01-on-color);opacity:0;transform:translateX(-6px);transition:opacity .2s ease,transform .25s ease}
.tn-b01 .tn-b01-sub a{transition:background-color .25s ease,color .25s ease}
.tn-b01 .tn-b01-sub a:hover,.tn-b01 .tn-b01-sub a:focus-visible{background:color-mix(in srgb,var(--b01-c) var(--b01-fill-pct),var(--b01-navy));color:var(--b01-on-color)}
.tn-b01 .tn-b01-sub a:hover .tn-b01-sub-txt small,.tn-b01 .tn-b01-sub a:focus-visible .tn-b01-sub-txt small{color:var(--b01-on-color-soft)}
.tn-b01 .tn-b01-sub a:hover .tn-b01-sub-go,.tn-b01 .tn-b01-sub a:focus-visible .tn-b01-sub-go{opacity:1;transform:none}
.tn-b01 .tn-b01-sub .tn-b01-sub-all{display:block;margin-top:4px;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)}
}
/* 1024–1279px: menu ngang có 6 mục nên ẩn nút ngôn ngữ (English đang "Sắp có"), mục menu sát nhau hơn */
@media (min-width:1024px) and (max-width:1279.98px){
.tn-b01 .tn-b01-lang{display:none}
.tn-b01 .tn-b01-bar,.tn-b01:not(.tn-b01--js) .tn-b01-bar{gap:10px}
.tn-b01 .tn-b01-menu{gap:0}
.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{padding:0 9px;white-space:nowrap}
.tn-b01 .tn-b01-has-sub .tn-b01-link{padding-right:2px}
}
}
/* 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 */
/* ---------- 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}
}
/* Rà soát 25/10/2026: dòng "DỊCH VỤ Y TẾ TP.HCM" dưới logo không nhỏ hơn 9px trên điện thoại */
.tn-b01 .tn-b01-brand-txt small{font-size:max(9px,.58em)}
@media (max-width:420px){.tn-b01 .tn-b01-brand-txt small{letter-spacing:0}}
/* ===== Menu thả xuống trên máy tính = mẫu 3 "Kính mờ" (chủ site chốt 25/10/2026 từ luu-tru/mau-menu-dich-vu/) + giữ hover mẫu 14 (cả dòng phủ màu dịch vụ, chữ trắng, mũi tên trượt vào) ===== */
.tn-b01 .tn-b01-ic-l{display:none}
@media (min-width:1024px){
.tn-b01{--b01-glass-pop:rgb(255 255 255 / .74)}
:root[data-med-theme="dark"] .tn-b01{--b01-glass-pop:rgb(11 18 32 / .78)}
.tn-b01 .tn-b01-mega,.tn-b01.tn-b01--js .tn-b01-mega{border:1px solid transparent;border-radius:20px;background:linear-gradient(var(--b01-glass-pop),var(--b01-glass-pop)) padding-box,linear-gradient(135deg,rgb(47 123 245 / .55),rgb(30 180 230 / .25),rgb(47 123 245 / .1)) border-box;-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4)}
.tn-b01 .tn-b01-mega::after{content:"";position:absolute;left:50%;top:-7px;width:14px;height:14px;margin-left:-7px;transform:rotate(45deg);border-radius:3px 0 0 0;background:var(--b01-glass-pop);border-left:1px solid rgb(47 123 245 / .45);border-top:1px solid rgb(47 123 245 / .45)}
.tn-b01 .tn-b01-mega:not(.tn-b01-mega--news) .tn-b01-sub-ico{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:12px;color:#FFFFFF;background:linear-gradient(135deg,var(--b01-c),color-mix(in srgb,var(--b01-c) 55%,#FFFFFF));box-shadow:0 6px 14px -8px var(--b01-c);transition:transform .3s cubic-bezier(.3,1.4,.5,1),box-shadow .25s ease}
.tn-b01 .tn-b01-mega:not(.tn-b01-mega--news) .tn-b01-ic-m{display:none}
.tn-b01 .tn-b01-mega:not(.tn-b01-mega--news) .tn-b01-ic-l{display:block;width:21px;height:21px}
.tn-b01 .tn-b01-mega:not(.tn-b01-mega--news) .tn-b01-sub a:hover .tn-b01-sub-ico,.tn-b01 .tn-b01-mega:not(.tn-b01-mega--news) .tn-b01-sub a:focus-visible .tn-b01-sub-ico{transform:scale(1.06);box-shadow:0 0 0 2px var(--b01-on-color)}
}