/* ==========================================================================
   Thanh Ngọc – CSS toàn site: màu thương hiệu, nút, header, footer.
   Tông màu: xanh navy (tin cậy) + vàng công nghiệp (nổi bật, kêu gọi gọi điện).
   ========================================================================== */

:root {
  --tn-navy-950: #071a33;
  --tn-navy-900: #0a2246;
  --tn-navy-800: #0e2f60;
  --tn-navy: #123c7a;
  --tn-blue: #1f5fbf;
  --tn-yellow: #ffc20e;
  --tn-yellow-600: #f2a900;
  --tn-yellow-soft: #fff4cc;
  --tn-ink: #0f1b2d;
  --tn-text: #2a3547;
  --tn-muted: #586377;
  --tn-line: #e2e8f1;
  --tn-soft: #f3f6fb;
  --tn-zalo: #0068ff;
  --tn-green: #15803d;
  --tn-shadow: 0 10px 30px rgba(10, 34, 70, .10);
  --tn-shadow-lg: 0 24px 60px rgba(10, 34, 70, .18);

  /* Đồng bộ biến màu của theme cha để trang bài viết / chuyên mục cùng tông. */
  --vs-primary: #123c7a;
  --vs-primary-dark: #0a2246;
  --vs-secondary: #1f5fbf;
  --vs-accent: #ffc20e;
  --vs-accent-hover: #f2a900;
  --vs-gold-text: #8a5d00;
  --vs-lotus: #1f5fbf;
  --vs-lotus-soft: #eaf1fc;
  --vs-text: #2a3547;
  --vs-muted: #586377;
  --vs-bg-light: #f3f6fb;
  --vs-bg-soft: #e8eef7;
  --vs-border: #e2e8f1;
  --vs-shadow-sm: 0 1px 3px rgba(10, 34, 70, .08), 0 1px 2px rgba(10, 34, 70, .06);
  --vs-shadow-md: 0 8px 24px rgba(10, 34, 70, .10);
  --vs-shadow-lg: 0 20px 50px rgba(10, 34, 70, .16);
}

body.tn { margin: 0; background: #fff; }
.tn img { max-width: 100%; height: auto; }

/* Nút của theme cha: nền vàng → chữ tối cho dễ đọc. */
.tn .vs-btn { --_fg: var(--tn-ink); }
.tn .vs-btn:hover { color: var(--tn-ink); }
.tn .vs-btn.vs-btn--primary, .tn .vs-btn.vs-btn--lotus, .tn .vs-btn.vs-btn--ghost { --_fg: #fff; }
.tn .vs-btn.vs-btn--primary:hover, .tn .vs-btn.vs-btn--lotus:hover, .tn .vs-btn.vs-btn--ghost:hover { color: #fff; }
.tn .vs-btn.vs-btn--outline { --_fg: var(--vs-primary); }

/* ---------- Nút ---------- */
.tn-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 48px; padding: .75rem 1.35rem; border-radius: 10px;
  font-family: inherit; font-weight: 700; font-size: 1rem; line-height: 1.2;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  border: 2px solid transparent;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .15s ease, box-shadow .2s ease;
}
.tn-btn .vs-ico { width: 20px; height: 20px; flex: none; }
.tn-btn:hover { transform: translateY(-2px); }
.tn-btn:focus-visible { outline: 3px solid var(--tn-blue); outline-offset: 3px; }
.tn-btn--yellow { background: var(--tn-yellow); color: var(--tn-ink); box-shadow: 0 10px 22px -10px rgba(242, 169, 0, .9); }
.tn-btn--yellow:hover { background: var(--tn-yellow-600); color: var(--tn-ink); }
.tn-btn--navy { background: var(--tn-navy); color: #fff; }
.tn-btn--navy:hover { background: var(--tn-navy-900); color: #fff; }
.tn-btn--zalo { background: var(--tn-zalo); color: #fff; }
.tn-btn--zalo:hover { background: #0052cc; color: #fff; }
.tn-btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); }
.tn-btn--ghost:hover { background: rgba(255, 255, 255, .1); border-color: #fff; color: #fff; }
.tn-btn--outline { background: #fff; color: var(--tn-navy); border-color: var(--tn-line); }
.tn-btn--outline:hover { border-color: var(--tn-navy); color: var(--tn-navy); }
.tn-btn--lg { min-height: 56px; padding: .9rem 1.6rem; font-size: 1.05rem; }
.tn-btn--block { width: 100%; }
.tn-btn.is-loading { opacity: .7; pointer-events: none; }

/* Chấm xanh "đang trực" */
.tn-dot {
  display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: #22c55e; animation: tnPulse 2s infinite;
}
@keyframes tnPulse {
  0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .55); }
  70% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.tn-header { position: relative; z-index: 999; font-family: var(--vs-font); }

/* Topbar */
.tn-topbar { background: var(--tn-navy-950); color: #c3d0e4; font-size: .84rem; }
.tn-topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 38px; }
.tn-topbar__note { margin: 0; display: flex; align-items: center; gap: .55rem; }
.tn-topbar__note strong { color: var(--tn-yellow); }
.tn-topbar__list { display: flex; align-items: center; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.tn-topbar__list li, .tn-topbar__list a { display: inline-flex; align-items: center; gap: .45rem; color: inherit; text-decoration: none; white-space: nowrap; }
.tn-topbar__list a:hover { color: var(--tn-yellow); }
.tn-topbar .vs-ico { width: 15px; height: 15px; color: var(--tn-yellow); flex: none; }

/* Thanh thương hiệu */
.tn-brandbar { background: #fff; border-bottom: 1px solid var(--tn-line); }
.tn-brandbar__inner { display: flex; align-items: center; gap: 1.25rem; min-height: 90px; }

.tn-logo { display: inline-flex; align-items: center; gap: .75rem; flex: none; text-decoration: none; color: var(--tn-navy-900); }
.tn-logo img { display: block; height: 60px; width: auto; }
.tn-logo__mark {
  display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 14px;
  background: linear-gradient(145deg, var(--tn-navy) 0%, var(--tn-navy-900) 100%);
  color: var(--tn-yellow); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2);
}
.tn-logo__mark .vs-ico { width: 30px; height: 30px; stroke-width: 2; }
.tn-logo__text { display: flex; flex-direction: column; line-height: 1.05; }
.tn-logo__name { font-weight: 800; font-size: 1.5rem; letter-spacing: .02em; text-transform: uppercase; color: var(--tn-navy-900); }
.tn-logo__tag { display: inline-flex; align-items: center; gap: .4rem; margin-top: .35rem; font-size: .68rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--tn-blue); }
.tn-logo__tag::before { content: ""; width: 14px; height: 3px; border-radius: 2px; background: var(--tn-yellow); }
.tn-logo--light .tn-logo__name { color: #fff; }
.tn-logo--light .tn-logo__tag { color: #9fb3d1; }
.tn-logo--light .tn-logo__mark { background: var(--tn-yellow); color: var(--tn-navy-900); }
.tn-logo--sm .tn-logo__mark { width: 42px; height: 42px; border-radius: 11px; }
.tn-logo--sm .tn-logo__mark .vs-ico { width: 24px; height: 24px; }
.tn-logo--sm .tn-logo__name { font-size: 1.15rem; }
.tn-logo--sm .tn-logo__tag { font-size: .58rem; }

.tn-brandbar__info { margin-left: auto; display: flex; align-items: center; gap: 1.6rem; }
.tn-hcall { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--tn-ink); }
.tn-hcall__ico {
  display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%;
  background: var(--tn-yellow-soft); color: var(--tn-navy);
}
.tn-hcall__ico .vs-ico { width: 22px; height: 22px; }
.tn-hcall small { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tn-muted); }
.tn-hcall strong { display: block; font-size: 1.25rem; font-weight: 800; color: var(--tn-navy-900); letter-spacing: .01em; line-height: 1.2; }
.tn-hcall:hover strong { color: var(--tn-blue); }
.tn-hcall--main .tn-hcall__ico { background: var(--tn-yellow); color: var(--tn-ink); }
.tn-hcall--main .tn-hcall__ico .vs-ico { animation: tnRing 2.6s ease-in-out infinite; }
@keyframes tnRing {
  0%, 60%, 100% { transform: rotate(0); }
  65% { transform: rotate(-14deg); } 70% { transform: rotate(14deg); }
  75% { transform: rotate(-10deg); } 80% { transform: rotate(10deg); } 85% { transform: rotate(0); }
}

.vs-burger.tn-burger { display: none; margin-left: .25rem; border-color: var(--tn-line); color: var(--tn-navy); }

/* Thanh menu (dính khi cuộn — vinasite.js thêm .is-stuck) */
.vs-bar.tn-navbar { background: var(--tn-navy); border-bottom: 0; }
.tn-navbar__inner { display: flex; align-items: center; gap: 1rem; min-height: 54px; }
.tn-nav { flex: 1 1 auto; min-width: 0; }
.tn-nav .vs-menu { justify-content: space-between; gap: .15rem; width: 100%; }
.tn-nav .vs-menu > li > a {
  color: #fff; padding: 1rem .6rem; font-size: .93rem; font-weight: 600;
}
.tn-nav .vs-menu > li > a::before { bottom: .5rem; height: 3px; border-radius: 2px; background: var(--tn-yellow); }
.tn-nav .vs-menu > li > a:hover,
.tn-nav .vs-menu > li:hover > a,
.tn-nav .vs-menu > li.current-menu-item > a,
.tn-nav .vs-menu > li.current-menu-ancestor > a { color: var(--tn-yellow); }
.tn-nav .vs-menu > li:hover > a::before,
.tn-nav .vs-menu > li.current-menu-ancestor > a::before { transform: scaleX(1); }
.tn-nav .vs-menu > li > a > i,
.tn-offcanvas .vs-offcanvas__nav i { display: none; }
.tn-nav .vs-menu .sub-menu { border: 0; border-top: 3px solid var(--tn-yellow); border-radius: 0 0 12px 12px; }
.tn-nav .vs-menu .sub-menu li > a { color: var(--tn-ink); }
.tn-nav .vs-menu .sub-menu li > a:hover,
.tn-nav .vs-menu .sub-menu li > a:focus-visible { color: var(--tn-navy); background: var(--tn-soft); }
.tn-nav .vs-menu .sub-menu li > a::before { background: var(--tn-yellow-600); }
.tn-nav .vs-menu .sub-menu li > a:hover::before { background: var(--tn-navy); }
/* Mục cuối gần mép phải: mở menu con sang trái để không tràn màn hình. */
.tn-nav .vs-menu > li:nth-last-child(-n+2) > .sub-menu { left: auto; right: 0; }

.tn-navbar__call {
  display: none; align-items: center; gap: .45rem; flex: none;
  padding: .5rem 1rem; border-radius: 999px; background: var(--tn-yellow); color: var(--tn-ink);
  font-weight: 800; text-decoration: none; white-space: nowrap;
}
.tn-navbar__call .vs-ico { width: 18px; height: 18px; }
.vs-bar.tn-navbar.is-stuck { background: var(--tn-navy); }
/* Nút gọi trên menu dính chỉ hiện ở màn rất rộng, tránh đè lên mục menu. */
@media (min-width: 1500px) {
  .vs-bar.tn-navbar.is-stuck .tn-navbar__call { display: inline-flex; }
  .vs-bar.tn-navbar.is-stuck .tn-navbar__inner { max-width: 1440px; }
}
.admin-bar .vs-bar.tn-navbar.is-stuck { top: 32px; }

/* Menu di động */
.tn-offcanvas .vs-offcanvas__nav a { color: var(--tn-navy-900); }
.tn-offcanvas .vs-offcanvas__nav .sub-menu a { color: var(--tn-text); }
.tn-offcanvas .vs-offcanvas__nav .sub-menu a::before { background: var(--tn-yellow-600); }
.tn-offcanvas .vs-offcanvas__actions .tn-btn { white-space: normal; }
.vs-overlay { background: rgba(7, 26, 51, .55); }

/* ---------- Header responsive ---------- */
@media (max-width: 1200px) {
  .tn-hcall--alt { display: none; }
  .tn-nav .vs-menu > li > a { padding-inline: .45rem; font-size: .9rem; }
}
@media (max-width: 1080px) {
  .tn-topbar, .vs-bar.tn-navbar { display: none; }
  .vs-burger.tn-burger { display: inline-flex; }
  .tn-header { position: sticky; top: 0; box-shadow: 0 4px 18px rgba(10, 34, 70, .08); }
  .admin-bar .tn-header { top: 32px; }
  .tn-brandbar__inner { min-height: 74px; }
}
@media (max-width: 782px) {
  .admin-bar .tn-header { top: 46px; }
}
@media (max-width: 640px) {
  .admin-bar .tn-header { top: 0; }
  .tn-brandbar__inner { min-height: 66px; gap: .6rem; }
  .tn-brandbar__info { gap: .5rem; }
  .tn-brandbar__cta, .tn-hcall__txt { display: none; }
  .tn-hcall__ico { width: 44px; height: 44px; }
  .tn-logo { gap: .55rem; }
  .tn-logo__mark { width: 42px; height: 42px; border-radius: 11px; }
  .tn-logo__mark .vs-ico { width: 24px; height: 24px; }
  .tn-logo__name { font-size: 1.12rem; }
  .tn-logo__tag { font-size: .56rem; letter-spacing: .1em; }
  .tn-logo img { height: 46px; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

/* Dải kêu gọi gọi điện */
.tn-cta {
  background:
    repeating-linear-gradient(-45deg, rgba(15, 27, 45, .045) 0 14px, transparent 14px 28px),
    var(--tn-yellow);
  color: var(--tn-ink); font-family: var(--vs-font);
}
.tn-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem 2rem; padding-block: clamp(1.75rem, 4vw, 2.5rem); flex-wrap: wrap; }
.tn-cta h2 { margin: 0 0 .35rem; font-size: clamp(1.25rem, 2.3vw, 1.75rem); font-weight: 800; line-height: 1.25; color: var(--tn-ink); }
.tn-cta p { margin: 0; color: #3a3220; }
.tn-cta__actions { display: flex; gap: .75rem; flex-wrap: wrap; }

.tn-footer { background: var(--tn-navy-950); color: #b3c1d6; font-family: var(--vs-font); font-size: .94rem; line-height: 1.65; }
.tn-footer a { color: #d9e3f0; text-decoration: none; }
.tn-footer a:hover { color: var(--tn-yellow); }
.tn-footer ul { list-style: none; margin: 0; padding: 0; }
.tn-footer__main { padding-block: clamp(2.75rem, 5vw, 4rem); }
.tn-footer__grid { display: grid; grid-template-columns: 1.45fr 1fr 1.05fr 1.3fr; gap: 2.25rem; }
.tn-footer h3 {
  position: relative; margin: 0 0 1.1rem; padding-bottom: .65rem;
  color: #fff; font-size: 1rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
}
.tn-footer h3::after { content: ""; position: absolute; left: 0; bottom: 0; width: 36px; height: 3px; border-radius: 2px; background: var(--tn-yellow); }
.tn-footer__brand .tn-logo { margin-bottom: 1.1rem; }
.tn-footer__brand p { margin: 0 0 .9rem; }
.tn-footer__company strong { color: #fff; }
.tn-footer__socials { display: flex; gap: .55rem; margin-top: 1rem; }
.tn-footer__socials a {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, .18);
}
.tn-footer__socials a:hover { background: var(--tn-yellow); border-color: var(--tn-yellow); color: var(--tn-ink); }
.tn-footer__socials .vs-ico { width: 20px; height: 20px; }
.tn-footer__links li { margin-bottom: .55rem; }
.tn-footer__links a { display: inline-flex; align-items: center; gap: .4rem; }
.tn-footer__links .vs-ico { width: 14px; height: 14px; color: var(--tn-yellow); flex: none; }
.tn-footer__contact li { display: flex; gap: .7rem; align-items: flex-start; margin-bottom: .9rem; }
.tn-footer__contact .vs-ico { width: 18px; height: 18px; flex: none; margin-top: .22em; color: var(--tn-yellow); }
.tn-footer__contact strong { color: #fff; font-size: 1.05rem; }
.tn-footer__map {
  display: inline-block; margin-left: .3rem; padding: 0 .55rem; border: 1px solid var(--tn-yellow); border-radius: 999px;
  font-size: .76rem; font-weight: 700; color: var(--tn-yellow) !important; white-space: nowrap;
}
.tn-footer__map:hover { background: var(--tn-yellow); color: var(--tn-ink) !important; }
.tn-footer__bottom { border-top: 1px solid rgba(255, 255, 255, .08); padding-block: 1.1rem; font-size: .85rem; color: #8597b2; }
.tn-footer__bottom-inner { display: flex; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; flex-wrap: wrap; }
.tn-footer__legal { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.tn-footer__legal a { color: #8597b2; }

/* Thanh liên hệ nhanh di động (theme cha hiện ở màn ≤768px) */
.tn-mobilebar a { color: var(--tn-navy-900); }
.tn-mobilebar .vs-ico { color: var(--tn-navy); }
.tn-mobilebar a.is-primary { background: var(--tn-yellow); color: var(--tn-ink); }
.tn-mobilebar a.is-primary .vs-ico { color: var(--tn-ink); }

/* Plugin cũ còn bật trên site: theme đã có menu di động và thanh liên hệ riêng,
   nên ẩn thanh "MENU" của WP Responsive Menu và nút gọi của Easy Call Now
   (trên di động) để không bị trùng, đè lên nhau. */
.tn .wprm-wrapper, .tn #wprmenu_bar, .tn #mg-wprm-wrap, .tn .wprm-overlay { display: none !important; }
@media (max-width: 768px) {
  .tn .fix_tel { display: none !important; }
}

@media (max-width: 960px) {
  .tn-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .tn-footer__grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .tn-cta__actions, .tn-cta__actions .tn-btn { width: 100%; }
  .tn-footer__bottom-inner { flex-direction: column; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .tn-dot, .tn-hcall--main .tn-hcall__ico .vs-ico { animation: none; }
  .tn-btn:hover { transform: none; }
}