/* SINH TỰ ĐỘNG từ blocks/b07-footer.html — không sửa tay */
/* ---------- 1. Token sáng + tối ---------- */
.tn-b07{
  --b07-ink:#173B73;--b07-text:#3B4A63;--b07-muted:#5B6B85;
  --b07-bg:#FFFFFF;--b07-soft:#F4F8FF;--b07-line:#E2EAF7;
  --b07-brand:#0068FF;
  --b07-ic-shadow:0 8px 18px -8px rgb(0 71 199 / .55);
}
/* Giao ước sáng/tối: đọc thuộc tính data-med-theme trên thẻ html (do header ghi) */
:root[data-med-theme="dark"] .tn-b07{
  --b07-ink:#F1F5F9;--b07-text:#CBD5E1;--b07-muted:#94A3B8;
  --b07-bg:#0B1220;--b07-soft:#0F172A;--b07-line:rgb(255 255 255 / .1);
  --b07-brand:#60A5FA;
  --b07-ic-shadow:0 8px 18px -8px rgb(0 0 0 / .7);
}
/* Full-width trong khung theme: chặn cuộn ngang do 100vw */
body{overflow-x:clip}
/* ---------- 2. Reset trong phạm vi block ---------- */
.tn-b07{position:relative;box-sizing:border-box;width:100vw;margin-inline:calc(50% - 50vw);padding:44px 16px calc(24px + env(safe-area-inset-bottom));background:var(--b07-soft);border-top:1px solid var(--b07-line);color:var(--b07-text);font:400 15px/1.6 "Inter",system-ui,sans-serif!important;-webkit-font-smoothing:antialiased}
.tn-b07 *,.tn-b07 *::before,.tn-b07 *::after{box-sizing:border-box}
.tn-b07 h2,.tn-b07 p,.tn-b07 ul,.tn-b07 li,.tn-b07 address,.tn-b07 a,.tn-b07 img{margin:0;padding:0;font-style:normal;letter-spacing:0;text-transform:none;box-shadow:none}
.tn-b07 h2,.tn-b07 p,.tn-b07 a,.tn-b07 li,.tn-b07 span,.tn-b07 small{font-family:"Inter",system-ui,sans-serif!important}
.tn-b07 ul{list-style:none}
.tn-b07 a{color:inherit;text-decoration:none}
.tn-b07 img{display:block;max-width:100%;height:auto;border:0}
.tn-b07 svg{flex:none}
.tn-b07 a:focus-visible{outline:2px solid var(--b07-brand);outline-offset:3px;border-radius:6px}
/* ---------- 3. Component ---------- */
/* Nền xanh rất nhạt trải hết chiều ngang (chủ site chốt 25/10/2026); nội dung rộng 1112px ở giữa, thẳng mép với các khối khác */
.tn-b07 .tn-b07-box{max-width:1112px;margin:0 auto}
.tn-b07 .tn-b07-grid{display:grid;gap:32px}
.tn-b07 .tn-b07-intro{display:grid;gap:14px;justify-items:center;align-content:start;text-align:center;padding-bottom:28px;border-bottom:1px solid var(--b07-line)}
.tn-b07 .tn-b07-brand{display:inline-flex;align-items:center;gap:10px;color:var(--b07-ink)}
.tn-b07 .tn-b07-logo{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:#FFFFFF;box-shadow:0 0 0 1px var(--b07-line)}
.tn-b07 .tn-b07-logo img{width:34px;height:34px}
.tn-b07 .tn-b07-wm{font-weight:800;font-size:20px;letter-spacing:-.01em}
.tn-b07 .tn-b07-wm b{font-weight:800;background:linear-gradient(90deg,#0047C7,#1597E5);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
:root[data-med-theme="dark"] .tn-b07 .tn-b07-wm b{background-image:linear-gradient(90deg,#60A5FA,#7DD3FC)}
.tn-b07 .tn-b07-about{max-width:340px;text-wrap:balance;color:var(--b07-muted);font-size:16px}
.tn-b07 .tn-b07-cols{display:grid;gap:28px}
.tn-b07 .tn-b07-h{margin-bottom:12px;color:var(--b07-ink);font:800 16px/1.3 "Inter",system-ui,sans-serif!important}
.tn-b07 .tn-b07-links a{display:inline-flex;align-items:center;min-height:44px;color:var(--b07-text);transition:color .2s}
.tn-b07 .tn-b07-links a:hover{color:var(--b07-brand)}
/* Liên hệ: icon trắng trong ô vuông bo tròn gradient xanh (cùng dải màu nút gọi) */
.tn-b07 .tn-b07-info{display:grid;gap:14px}
.tn-b07 .tn-b07-info li{display:flex;gap:14px;align-items:center;text-align:left}
.tn-b07 .tn-b07-ic{position:relative;display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:13px;background:linear-gradient(135deg,#0047C7,#1597E5);color:#FFFFFF;box-shadow:var(--b07-ic-shadow)}
.tn-b07 .tn-b07-ic::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgb(255 255 255 / .22),transparent 55%);pointer-events:none}
.tn-b07 .tn-b07-ic svg{width:19px;height:19px}
.tn-b07 .tn-b07-info small{display:block;font-size:13px;line-height:1.3;color:var(--b07-muted)}
.tn-b07 .tn-b07-info b,.tn-b07 .tn-b07-info a{display:block;font-weight:600;color:var(--b07-ink);line-height:1.45;overflow-wrap:anywhere}
.tn-b07 .tn-b07-info a{transition:color .2s}
.tn-b07 .tn-b07-info a:hover{color:var(--b07-brand)}
.tn-b07 .tn-b07-pages{display:flex;flex-wrap:wrap;justify-content:center;gap:0 20px;margin-top:28px;padding-top:16px;border-top:1px solid var(--b07-line)}
.tn-b07 .tn-b07-pages a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:var(--b07-text);transition:color .2s}
.tn-b07 .tn-b07-pages a:hover{color:var(--b07-brand)}
.tn-b07 .tn-b07-copy{margin-top:8px;text-align:center;font-size:13.5px;color:var(--b07-muted)}
/* 3 nút tròn liên hệ nhanh (gọi / Zalo / email) — thay cặp nút lớn vì khối CTA ngay trên đã có (chủ site chốt 25/10/2026) */
.tn-b07 .tn-b07-round{display:flex;justify-content:center;gap:12px}
.tn-b07 .tn-b07-round a{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--b07-bg);border:1px solid var(--b07-line);color:var(--b07-brand);transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s ease,box-shadow .25s ease}
.tn-b07 .tn-b07-round svg{width:19px;height:19px}
.tn-b07 .tn-b07-round .tn-b07-zi{width:24px;height:24px;border-radius:6px}
.tn-b07 .tn-b07-round a:hover,.tn-b07 .tn-b07-round a:focus-visible{background:#1E40AF;border-color:#1E40AF;color:#FFFFFF;transform:translateY(-2px);box-shadow:0 0 0 5px rgb(96 165 250 / .22)}
.tn-b07 .tn-b07-round a:first-child:hover svg,.tn-b07 .tn-b07-round a:first-child:focus-visible svg{animation:b07CallHit .8s ease-in-out}
@keyframes b07CallHit{0%,100%{transform:rotate(0)}20%{transform:rotate(-14deg)}40%{transform:rotate(12deg)}60%{transform:rotate(-8deg)}80%{transform:rotate(4deg)}}
/* Nút gọi nhanh điện thoại/tablet = mẫu D bên trái (chủ site chốt 27/10/2026, luu-tru/mau-thanh-goi/): 2 nút tròn nổi góc trái — gọi (xanh, quầng sáng) + icon app Zalo; hiện khi đã cuộn qua đầu trang */
.tn-b07{padding-bottom:calc(24px + env(safe-area-inset-bottom))}
.tn-b07 .tn-b07-bar{position:fixed;left:14px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:999;display:flex;flex-direction:column;gap:12px;transition:transform .35s cubic-bezier(.2,.7,.2,1),opacity .35s ease,visibility .35s}
.tn-b07 .tn-b07-bar a{display:grid;place-items:center;width:56px;height:56px;box-shadow:0 12px 24px -10px rgb(0 40 120 / .55);transition:transform .2s ease}
.tn-b07 .tn-b07-bar-call{border-radius:50%;background:linear-gradient(135deg,#0047C7,#1597E5);color:#FFFFFF;box-shadow:0 0 0 7px rgb(21 151 229 / .16),0 12px 24px -10px rgb(0 40 120 / .55)}
.tn-b07 .tn-b07-bar-call svg{width:24px;height:24px}
.tn-b07 .tn-b07-bar-zalo{overflow:hidden;border-radius:16px;background:#FFFFFF}
.tn-b07 .tn-b07-bar-zalo .tn-b07-zi{width:56px;height:56px}
.tn-b07 .tn-b07-bar a:active{transform:scale(.94)}
.tn-b07.tn-b07--bar-wait .tn-b07-bar{transform:translateY(24px);opacity:0;visibility:hidden}
/* Điện thoại (dưới 640px): căn giữa tiêu đề + danh sách dịch vụ, khối liên hệ nằm giữa — cân với phần logo + 3 nút tròn phía trên (25/10/2026) */
@media (max-width:639px){.tn-b07 .tn-b07-h{text-align:center}.tn-b07 .tn-b07-col:first-child{text-align:center}.tn-b07 .tn-b07-links a{justify-content:center}.tn-b07 .tn-b07-info{width:fit-content;max-width:100%;margin:0 auto}}
/* ---------- 4. Responsive (min-width) ---------- */
@media (min-width:640px){
  .tn-b07 .tn-b07-cols{grid-template-columns:1fr 1fr}
}
@media (min-width:1024px){
  .tn-b07{padding:64px 24px 24px}
  .tn-b07 .tn-b07-bar{display:none}
  .tn-b07 .tn-b07-grid{grid-template-columns:420px 1fr;gap:48px}
  .tn-b07 .tn-b07-intro{justify-items:start;text-align:left;padding:0 36px 0 0;border:0;border-right:1px solid var(--b07-line)}
  .tn-b07 .tn-b07-intro .tn-b07-round{justify-content:flex-start}
  .tn-b07 .tn-b07-cols{grid-template-columns:1fr 1.25fr;gap:32px}
  .tn-b07 .tn-b07-pages{justify-content:flex-start}
}
/* ---------- 5. Reveal + reduced-motion ---------- */
.tn-b07.tn-b07--anim .tn-b07-rv{opacity:0;transform:translateY(18px);transition:opacity .6s ease var(--b07-d,0ms),transform .6s cubic-bezier(.2,.7,.2,1) var(--b07-d,0ms)}
.tn-b07.tn-b07--anim .tn-b07-rv.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .tn-b07 .tn-b07-rv{opacity:1!important;transform:none!important;transition:none!important}
  .tn-b07 .tn-b07-round a,.tn-b07 .tn-b07-bar{transition:none}
  .tn-b07 .tn-b07-round a:hover,.tn-b07 .tn-b07-round a:focus-visible,.tn-b07 .tn-b07-bar a:active{transform:none}
  .tn-b07 .tn-b07-round a:first-child:hover svg,.tn-b07 .tn-b07-round a:first-child:focus-visible svg{animation:none}
}