/* ============================================================================
   TECOTEC Group - design system dùng chung cho toàn bộ demo HTML
   File: wp-content/themes/flatsome-child/design/assets/teco.css

   Vì sao có file này thay vì mỗi trang 1 khối <style> tự chứa:
   bộ demo có 26 trang. Nhân bản ~1.000 dòng CSS ra 26 file là cách chắc chắn
   để 26 bản drift khỏi nhau. Toàn bộ token và component nằm đúng một chỗ.
   Mở bằng file:// vẫn chạy (CSS/JS là file cùng thư mục, không fetch).

   MÀU: theo KDB "05 - Bảng màu thiết kế".
   - Primary cam #FF9900 - accent duy nhất, dùng cho CTA và điểm nhấn.
   - Thang xanh Figma Primary/50..950 giữ nguyên mã trong tài liệu 05.
   - LƯU Ý MỘT LỆCH ĐÃ BIẾT: brand playbook ghi xanh thương hiệu là #146EB4,
     còn thang Figma trong "05" ghi Primary/500 = #146BE4 (hai mã khác nhau,
     nhìn như lỗi đảo chữ số ở một trong hai nguồn). Demo trang chủ đã duyệt
     dùng #146EB4 nên toàn bộ bộ demo giữ #146EB4 để không đổi diện mạo đã
     xem; thang Figma vẫn có đủ ở đây. Cần designer chốt lại - ghi gap.
   ========================================================================== */

:root{
  /* --- Token gốc theo "05 - Bảng màu thiết kế" ------------------------- */
  --teco-color-primary:#FF9900;
  --teco-color-orange:var(--teco-color-primary);

  --teco-color-blue-950:#020B17;
  --teco-color-blue-900:#04152E;
  --teco-color-blue-800:#082B5B;
  --teco-color-blue-700:#0C4089;
  --teco-color-blue-600:#1056B6;
  --teco-color-blue-500:#146BE4;
  --teco-color-blue-400:#4389E9;
  --teco-color-blue-300:#72A6EF;
  --teco-color-blue-200:#A1C4F4;
  --teco-color-blue-100:#D0E1FA;
  --teco-color-blue-50:#E8F0FC;

  --teco-gradient-light-to-dark:linear-gradient(225deg,var(--teco-color-blue-200) 0%,var(--teco-color-blue-600) 52%,var(--teco-color-blue-950) 100%);
  --teco-gradient-light-to-mid:linear-gradient(225deg,var(--teco-color-blue-200) 0%,var(--teco-color-blue-500) 52%,var(--teco-color-blue-800) 100%);

  /* --- Alias làm việc (giữ đúng bộ đã dùng ở demo trang chủ) ----------- */
  --blue:#146EB4;
  --blue-deep:#0F5488;
  --orange:var(--teco-color-primary);
  --orange-ink:#8A4F00;      /* cam đủ tối để làm chữ trên nền sáng */
  --ink:#141A24;
  --ink-2:#4B5768;
  --ink-3:#77839A;
  --paper:#FFFFFF;
  --paper-2:#F4F6F8;
  --paper-3:#E9EDF2;
  --line:#D7DEE7;
  --line-soft:#E7ECF2;
  --dark:#1B2436;
  --dark-2:#232E44;
  --dark-line:#37435C;
  --danger:#B42318;

  --radius:2px;
  /* Bo góc riêng cho các control dạng nút (btn, chip, nút carousel, burger).
     Tách khỏi --radius để không đụng vào form, ảnh. */
  --radius-btn:8px;
  /* Bo góc cho mọi mặt card, kể cả carousel Tin tức. */
  --radius-card:8px;
  --nav-h:68px;
  --container:1300px;
  --gutter:clamp(20px,4vw,48px);

  --ease:cubic-bezier(.16,1,.3,1);
  --shadow:0 1px 2px rgba(20,26,36,.04),0 12px 32px -12px rgba(20,110,180,.16);
}

/* ==========================================================================
   RESET + BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Reset/Override Flatsome parent defaults */
button, input, select, textarea, fieldset {
  margin: 0;
  margin-bottom: 0;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}

.nav {
  border: none;
}

body{
  margin:0;
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.65;font-weight:400;
  color:var(--ink);background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.022em;line-height:1.2}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
table{border-collapse:collapse;width:100%}

:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:var(--radius)}

.container--narrow{max-width:880px}
.mono{font-family:"Inter",sans-serif;font-variant-numeric:tabular-nums}
.nowrap{white-space:nowrap}

.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--paper);padding:12px 18px;border:1px solid var(--line)}

/* Section rhythm. Flatsome parent định nghĩa .section riêng cho page-builder
   row (display:flex;flex-flow:row) - trùng tên với .section demo, khiến các
   con bên trong (.container, .accimg...) bị xếp ngang thay vì xếp dọc. Reset
   lại display:block để giữ đúng layout dọc của demo. */
.section{display:block;padding-block:clamp(64px,8vw,112px)}
.section--tight{padding-block:clamp(36px,5vw,40px)}
.section--flush{padding-top:0}
.section__head{max-width:62ch;margin-bottom:clamp(32px,4vw,52px)}
.section__head h2{font-size:clamp(1.75rem,3.4vw,2.75rem)}
.section__head p{margin-top:14px;color:var(--ink-2);font-size:1.0625rem;max-width:58ch}
.section__head--wide{max-width:none;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end}
@media (max-width:760px){.section__head--wide{grid-template-columns:1fr}}

.eyebrow{
  font-family:"Inter",sans-serif;font-size:.6875rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.18em;color:var(--blue);
  display:block;margin-bottom:16px;
}
.eyebrow--onDark{color:var(--orange)}

.hr{border:0;border-top:1px solid var(--line-soft);margin:0}

/* ==========================================================================
   BUTTONS - contrast đã kiểm: cam #FF9900 nền + chữ #141A24 = 8.4:1
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;gap:10px;white-space:nowrap;
  padding:14px 24px;border-radius:var(--radius-btn);border:1px solid transparent;
  font-weight:600;font-size:.9375rem;cursor:pointer;
  transition:transform .18s var(--ease),background-color .18s var(--ease),border-color .18s var(--ease);
}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--orange);color:#FFFFFF;border-color:var(--orange)}
.btn--primary:hover{background:#FFFFFF;color:var(--orange);border-color:var(--orange)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--blue);color:var(--blue)}
.btn--onDark{background:transparent;color:#fff;border-color:var(--dark-line)}
.btn--onDark:hover{border-color:var(--orange);color:var(--orange)}
.btn--sm{padding:10px 16px;font-size:.875rem}
.btn svg{width:16px;height:16px;flex:none}

.tlink{
  display:inline-flex;align-items:center;gap:8px;font-weight:600;
  color:var(--blue);font-size:.9375rem;
}
.tlink svg{width:15px;height:15px;transition:transform .2s var(--ease)}
.tlink:hover svg{transform:translateX(4px)}
.tlink--onDark{color:var(--orange)}

.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.actions--tight{margin-top:20px}

/* ==========================================================================
   BREADCRUMB + PAGE HEAD - hero rút gọn cho trang trong
   ========================================================================== */
.crumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-size:.8125rem;color:var(--ink-3);padding-top:22px;
}
.crumb a{color:var(--ink-3)}
.crumb a:hover{color:var(--blue)}
.crumb span[aria-current]{color:var(--ink-2)}
.crumb i{font-style:normal;opacity:.5}

.phead{border-bottom:1px solid var(--line-soft);background:var(--paper-2)}
.phead__in{padding-block:clamp(28px,4vw,44px) clamp(40px,5vw,64px)}
.phead h1{font-size:clamp(2rem,4.6vw,3.5rem);letter-spacing:-.035em;max-width:20ch}
.single-insight .phead h1{max-width:none}
.phead__lead{margin-top:18px;font-size:clamp(1rem,1.35vw,1.1875rem);color:var(--ink-2);max-width:60ch;line-height:1.6}
.phead__split{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(28px,5vw,64px);align-items:end}
.phead__aside{padding-bottom:6px}
@media (max-width:900px){.phead__split{grid-template-columns:1fr}}

.phead--dark{background:var(--dark);border-bottom-color:var(--dark-line);color:rgba(255,255,255,.74)}
.phead--dark h1{color:#fff}
.phead--dark .phead__lead{color:rgba(255,255,255,.74)}
.phead--dark .crumb,.phead--dark .crumb a{color:rgba(255,255,255,.55)}
.phead--dark .crumb a:hover{color:var(--orange)}
.phead--dark .crumb span[aria-current]{color:rgba(255,255,255,.8)}

/* Dải mã số công nhận / thẻ nhỏ dưới hero */
.accred{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.chip{
  font-family:"Inter",sans-serif;font-size:.8125rem;
  border:1px solid var(--line);border-radius:var(--radius);
  padding:7px 13px;color:var(--ink-2);background:var(--paper);
}
.chip--solid{background:var(--paper-2)}
.phead--dark .chip{background:transparent;border-color:var(--dark-line);color:rgba(255,255,255,.78)}

/* ==========================================================================
   SLOT - khung ảnh minh họa Unsplash. Nhãn mô tả vẫn nằm trên ảnh để người xem
   biết nội dung ảnh cần có khi thay bằng tư liệu chính thức của TECOTEC.
   ========================================================================== */
.slot{
  position:relative;display:grid;place-items:center;
  border:1px dashed var(--line);border-radius:var(--radius);
  background-color:var(--paper-2);
  background-image:repeating-linear-gradient(-45deg,
    color-mix(in srgb,var(--line) 34%,transparent) 0 1px,transparent 1px 9px);
    text-align:center;overflow:hidden;
}
.slot__label{
  font-family:"Inter",sans-serif;font-size:.75rem;line-height:1.5;
  color:var(--ink-3);max-width:34ch;
}
.slot__label b{
  display:block;font-family:"Inter",sans-serif;font-weight:600;
  font-size:.875rem;color:var(--ink-2);margin-bottom:4px;letter-spacing:-.01em;
}
.slot--onDark{border-color:var(--dark-line);background-color:var(--dark-2);
  background-image:repeating-linear-gradient(-45deg,rgba(255,255,255,.06) 0 1px,transparent 1px 9px)}
.slot--onDark .slot__label{color:rgba(255,255,255,.5)}
.slot--onDark .slot__label b{color:rgba(255,255,255,.78)}

/* Ảnh nằm dưới, nhãn nằm trên và được giữ như chú thích nội dung dự kiến.
   Unsplash chỉ là ảnh minh họa, không phải ảnh tư liệu hay bằng chứng dự án của
   TECOTEC, nên nguồn ảnh luôn được ghi rõ ở chân khung. */
.slot[data-filled]{border-style:solid;border-color:var(--line);background-image:none;padding:0}
.slot--onDark[data-filled]{border-color:var(--dark-line)}
.slot__img{
  grid-area:1/1;width:100%;height:100%;object-fit:cover;display:block;
}
.slot[data-filled] .slot__label{
  grid-area:1/1;align-self:end;justify-self:stretch;max-width:none;
  margin:0;padding:12px 14px;text-align:left;
  background:linear-gradient(to top,rgba(11,15,20,.82),rgba(11,15,20,.52) 62%,transparent);
  color:rgba(255,255,255,.86);
}
.slot[data-filled] .slot__label b{color:#fff}
.slot[data-filled="unsplash"] .slot__label::after{
  content:"Ảnh minh họa · Unsplash";
  display:block;margin-top:6px;font-size:.6875rem;letter-spacing:.04em;
  color:var(--orange);
}
.slot[data-filled="unsplash"] .slot__label{
  background:linear-gradient(to top,rgba(11,15,20,.78),rgba(11,15,20,.42) 66%,transparent);
  font-size:.6875rem;
}
.slot[data-filled="unsplash"] .slot__label b{font-size:.8125rem;margin-bottom:0}

/* ==========================================================================
   NHÃN PLACEHOLDER - mọi nội dung chưa có thật phải nhìn thấy được là chưa có
   ========================================================================== */
.ph{
  display:inline-flex;align-items:center;gap:6px;vertical-align:middle;
  font-family:"Inter",sans-serif;font-size:.625rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.1em;
  padding:3px 7px;border-radius:var(--radius);
  border:1px solid color-mix(in srgb,var(--orange) 55%,transparent);
  color:var(--orange-ink);background:color-mix(in srgb,var(--orange) 12%,transparent);
}
.ph--b2g{
  border-color:color-mix(in srgb,var(--danger) 55%,transparent);
  color:var(--danger);background:color-mix(in srgb,var(--danger) 10%,transparent);
}
.phnote{
  margin-top:16px;padding:14px 16px;font-size:.875rem;line-height:1.55;
  border:1px dashed color-mix(in srgb,var(--orange) 46%,var(--line));
  border-top-style:solid;
  border-radius:var(--radius);
  background:color-mix(in srgb,var(--orange) 6%,var(--paper-2));color:var(--ink-2);
}
.phnote b{color:var(--ink)}

/* Callout thường (không phải placeholder): dùng hairline toàn khung + nền xanh
   rất nhẹ thay cho side-tab dày, để không tạo pattern AI-generated dễ nhận ra. */
.callout{
  padding:18px 20px;border:1px solid color-mix(in srgb,var(--blue) 32%,var(--line));
  border-radius:var(--radius);background:color-mix(in srgb,var(--blue) 5%,var(--paper-2));
  font-size:.9375rem;line-height:1.6;color:var(--ink-2);
}
.callout b{color:var(--ink)}

/* ==========================================================================
   STAT BAND
   ========================================================================== */
.stats{border-bottom:1px solid var(--line-soft);background:var(--paper)}
.stats__grid{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:clamp(28px,3.4vw,40px) clamp(18px,2.4vw,32px);border-left:1px solid var(--line-soft)}
.stat:first-child{border-left:0;padding-left:0}
.stat__n{
  font-family:"Inter",sans-serif;font-size:clamp(1.75rem,3.4vw,2.5rem);
  font-weight:500;letter-spacing:-.04em;color:var(--blue);line-height:1;
}
.stat__n small{font-size:.5em;color:var(--ink-3);letter-spacing:0}
.stat__l{margin-top:12px;font-size:.875rem;color:var(--ink-2);line-height:1.45;max-width:24ch}
.stats--onDark{background:transparent;border-bottom:0}
.stats--onDark .stat{border-left-color:var(--dark-line)}
.stats--onDark .stat__n{color:var(--orange)}
.stats--onDark .stat__l{color:rgba(255,255,255,.7)}
@media (max-width:820px){
  .stats__grid{grid-template-columns:1fr 1fr}
  .stat{border-left:1px solid var(--line-soft);border-top:1px solid var(--line-soft);padding:24px}
  .stat:first-child,.stat:nth-child(3){border-left:0;padding-left:0}
  .stat:nth-child(-n+2){border-top:0}
  .stats--onDark .stat{border-color:var(--dark-line)}
}

/* ==========================================================================
   CARD GRID - dùng cho hub, nhóm dịch vụ, sản phẩm, bài viết, dự án
   ========================================================================== */
.cards{display:grid;gap:32px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.cards--2{grid-template-columns:repeat(auto-fill,minmax(420px,1fr))}
.cards--4{grid-template-columns:repeat(auto-fill,minmax(258px,1fr))}
@media (max-width:640px){
  .cards,.cards--2,.cards--4{grid-template-columns:1fr}
}

.card{
  display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:var(--radius-card);
  background:var(--paper);overflow:hidden;
  transition:border-color .18s var(--ease),transform .18s var(--ease);
}
a.card:hover,.card--link:hover{border-color:var(--blue)}
a.card:hover{transform:translateY(-2px)}
.card .slot{width:100%;border:0;border-radius:0;border-bottom:1px solid var(--line)}
.card__body{padding:clamp(20px,2.4vw,26px);display:flex;flex-direction:column;flex:1}
.card__kicker{
  font-family:"Inter",sans-serif;font-size:.6875rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.14em;color:var(--orange-ink);
  margin-bottom:12px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;
}
.card__body h3{font-size:1.125rem;line-height:1.34}
.card__body h3 a:hover{color:var(--blue)}
.card__body p{margin-top:10px;font-size:.9375rem;color:var(--ink-2);line-height:1.6}
.card__meta{
  margin-top:auto;padding-top:18px;display:flex;flex-wrap:wrap;gap:6px 18px;
  font-size:.8125rem;color:var(--ink-3);
}
.card__meta b{color:var(--ink-2);font-weight:600}
.card__actions{
  margin-top:18px;padding-top:16px;border-top:1px solid var(--line-soft);
  display:flex;flex-wrap:wrap;gap:8px;
}
.card__num{
  font-family:"Inter",sans-serif;font-size:1.5rem;font-weight:500;
  color:var(--blue);line-height:1;margin-bottom:14px;letter-spacing:-.03em;
}
.card--flat{border-color:var(--line-soft);background:var(--paper-2)}
.card--onDark{border-color:var(--dark-line);background:var(--dark-2)}
.card--onDark .card__body h3{color:#fff}
.card--onDark .card__body p{color:rgba(255,255,255,.72)}
.card--onDark .card__meta{color:rgba(255,255,255,.55)}
.card--onDark .card__meta b{color:rgba(255,255,255,.8)}
.card--onDark .card__kicker{color:var(--orange)}
.card--onDark .card__actions{border-top-color:var(--dark-line)}

/* ==========================================================================
   BENTO - lưới 12 cột cho khối năng lực
   ========================================================================== */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.cell{
  position:relative;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--radius-card);
  background:var(--paper);padding:clamp(22px,2.6vw,32px);
  display:flex;flex-direction:column;justify-content:flex-end;
  min-height:220px;
}
.cell h3{font-size:1.1875rem;line-height:1.3}
.cell p{margin-top:10px;font-size:.9375rem;color:var(--ink-2);max-width:44ch}
.cell--a{grid-column:span 7;min-height:300px}
.cell--b{grid-column:span 5;min-height:300px}
.cell--c{grid-column:span 4}
.cell--d{grid-column:span 4}
.cell--e{grid-column:span 4}
.cell--f{grid-column:span 12;min-height:260px}
.cell--half{grid-column:span 6}
.cell--media{justify-content:flex-start;padding:0;overflow:hidden}
.cell--media .slot{width:100%;border:0;border-radius:0;border-bottom:1px solid var(--line)}
.cell--media__txt{padding:clamp(22px,2.6vw,32px)}
.cell--grad{border:0;background:linear-gradient(140deg,var(--blue-deep) 0%,var(--blue) 58%,#2B8FDB 100%)}
.cell--grad h3{color:#fff}
.cell--grad p{color:rgba(255,255,255,.86)}
@media (max-width:900px){
  .cell--a,.cell--b,.cell--c,.cell--d,.cell--e,.cell--f,.cell--half{grid-column:span 12;min-height:200px}
}

/* ==========================================================================
   DẢI TỐI
   ========================================================================== */
.section--dark{background:var(--dark);color:#fff}
.section--dark h2,.section--dark h3{color:#fff}
.section--dark .section__head p{color:rgba(255,255,255,.74)}
.section--dark .hr{border-top-color:var(--dark-line)}

/* ==========================================================================
   LOGO GRID
   ========================================================================== */
.marks{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:1px;background:var(--line-soft);
  border:1px solid var(--line-soft);border-radius:var(--radius-card);overflow:hidden;
}
.mark{
  display:flex;align-items:center;gap:11px;
  padding:18px 20px;background:var(--paper);
  transition:background-color .18s var(--ease);
}
.mark:hover{background:var(--paper-2)}
.mark__glyph{
  width:34px;height:34px;flex:none;border:1px solid var(--line);border-radius:var(--radius);
  display:grid;place-items:center;font-family:"Inter",sans-serif;
  font-size:.75rem;font-weight:500;color:var(--blue);background:var(--paper-2);
}
.mark__glyph--img{background:var(--paper);padding:5px}
.mark__glyph--img img{width:100%;height:100%;object-fit:contain}
.mark__name{font-weight:600;font-size:.9375rem;color:var(--ink-2)}
.mark__sub{display:block;font-weight:400;font-size:.75rem;color:var(--ink-3)}
.clients{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,44px)}
.clients--2{grid-template-columns:repeat(2,1fr)}
.clients__g h3{
  font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3);
  font-weight:600;padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:20px;
}
.clients__row{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center}
.cword{font-weight:600;font-size:.9375rem;color:var(--ink-2)}
.clients__note{margin-top:16px;font-size:.8125rem;color:var(--ink-3);line-height:1.5}
@media (max-width:900px){.clients,.clients--2{grid-template-columns:1fr}}

/* ==========================================================================
   LINK ROWS (hệ sinh thái, danh sách vị trí, danh sách văn phòng)
   ========================================================================== */
.rows{border-top:1px solid var(--line)}
.rows>*{
  display:grid;grid-template-columns:auto 1fr auto;gap:clamp(16px,3vw,40px);
  align-items:center;padding:clamp(22px,3vw,32px) 12px;
  margin-inline:-12px;border-bottom:1px solid var(--line-soft);
  transition:background-color .2s var(--ease);
}
.rows a:hover{background:var(--paper-2)}
.rows__name{font-size:clamp(1.0625rem,1.7vw,1.375rem);font-weight:600;letter-spacing:-.02em}
.rows__name em{font-style:normal;color:var(--blue)}
.rows__desc{color:var(--ink-2);font-size:.9375rem;max-width:52ch}
.rows__arrow{color:var(--blue);transition:transform .24s var(--ease)}
.rows a:hover .rows__arrow{transform:translateX(6px)}
.rows__arrow svg{width:22px;height:22px}
@media (max-width:760px){
  .rows>*{grid-template-columns:1fr auto;gap:8px}
  .rows__desc{grid-column:1/-1}
}

/* ==========================================================================
   TIMELINE - lịch sử phát triển
   ========================================================================== */
.tl{position:relative;padding-left:clamp(28px,5vw,64px)}
.tl::before{
  content:"";position:absolute;left:clamp(8px,1.6vw,18px);top:6px;bottom:6px;width:1px;
  background:var(--line);
}
.tl__era+.tl__era{margin-top:clamp(36px,4vw,56px)}
.tl__eraname{
  position:relative;font-family:"Inter",sans-serif;font-size:1.125rem;
  font-weight:500;color:var(--blue);letter-spacing:-.02em;margin-bottom:20px;
}
.tl__eraname::before{
  content:"";position:absolute;left:calc(-1 * clamp(28px,5vw,64px) + clamp(4px,1.6vw,14px));
  top:.55em;width:9px;height:9px;border-radius:50%;
  background:var(--orange);outline:3px solid var(--paper);
}
.tl__item{position:relative;padding-block:12px}
.tl__item+.tl__item{border-top:1px solid var(--line-soft)}
.tl__item::before{
  content:"";position:absolute;left:calc(-1 * clamp(28px,5vw,64px) + clamp(7px,1.6vw,17px));
  top:1.35em;width:3px;height:3px;border-radius:50%;background:var(--ink-3);
}
.tl__y{font-family:"Inter",sans-serif;font-size:.875rem;color:var(--ink-3);font-weight:500}
.tl__t{margin-top:4px;font-size:1rem;line-height:1.55;color:var(--ink)}
.tl__item[data-hi] .tl__t{font-weight:600}
.tl__item[data-hi]::before{width:7px;height:7px;background:var(--orange);top:1.2em;
  left:calc(-1 * clamp(28px,5vw,64px) + clamp(5px,1.6vw,15px))}

/* ==========================================================================
   BẢNG DỮ LIỆU - thông số kỹ thuật, phạm vi dịch vụ, R&D
   ========================================================================== */
.dtable{
  border:1px solid var(--line);border-radius:var(--radius-card);overflow:hidden;
  background:var(--paper);
}
.dtable__scroll{overflow-x:auto}
.dtable table{min-width:560px;font-size:.9375rem}
.dtable th,.dtable td{padding:14px 18px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line-soft)}
.dtable thead th{
  background:var(--paper-2);font-size:.75rem;text-transform:uppercase;
  letter-spacing:.1em;color:var(--ink-3);font-weight:600;white-space:nowrap;
}
.dtable tbody tr:last-child th,.dtable tbody tr:last-child td{border-bottom:0}
.dtable tbody th{font-weight:600;color:var(--ink);width:34%}
.dtable td{color:var(--ink-2)}
.dtable tbody tr:hover td,.dtable tbody tr:hover th{background:var(--paper-2)}

/* ==========================================================================
   FAQ ACCORDION
   ========================================================================== */
.faq{border-top:1px solid var(--line)}
.faq__i{border-bottom:1px solid var(--line-soft)}
.faq__q{
  width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  padding:20px 0;background:none;border:0;cursor:pointer;text-align:left;
  font-size:1.0625rem;font-weight:600;line-height:1.45;letter-spacing:-.015em;
  transition:color .16s;
}
.faq__q:hover{color:var(--blue)}
.faq__q svg{width:18px;height:18px;flex:none;margin-top:4px;color:var(--blue);
  transition:transform .22s var(--ease)}
.faq__q[aria-expanded="true"] svg{transform:rotate(45deg)}
.faq__a{display:none;padding-bottom:22px;color:var(--ink-2);font-size:.9375rem;
  line-height:1.7;max-width:70ch}
.faq__a[data-open]{display:block}
.faq__a p+p{margin-top:12px}

/* ==========================================================================
   QUY TRÌNH - các bước
   ========================================================================== */
.steps{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));counter-reset:s}
.step{
  border:1px solid var(--line);border-radius:var(--radius-card);background:var(--paper);
  padding:clamp(20px,2.4vw,26px);position:relative;counter-increment:s;
}
.step::before{
  content:counter(s,decimal-leading-zero);
  font-family:"Inter",sans-serif;font-size:.8125rem;font-weight:500;
  color:var(--orange-ink);letter-spacing:.08em;
}
.step h3{margin-top:12px;font-size:1rem;line-height:1.4}
.step p{margin-top:8px;font-size:.875rem;color:var(--ink-2);line-height:1.6}

/* ==========================================================================
   BỘ LỌC - chip filter (case study, sản phẩm, insight)
   ========================================================================== */
.filters{
  display:grid;gap:18px 32px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  padding:clamp(20px,2.4vw,26px);border:1px solid var(--line);
  border-radius:var(--radius-card);background:var(--paper-2);
}
.filters__g h3{
  font-size:.6875rem;text-transform:uppercase;letter-spacing:.12em;
  color:var(--ink-3);font-weight:600;margin-bottom:12px;
  font-family:"Inter",sans-serif;
}
.filters__row{display:flex;flex-wrap:wrap;gap:8px}
.fchip{
  appearance:none;cursor:pointer;font:inherit;font-size:.875rem;
  padding:7px 14px;border-radius:var(--radius-btn);
  border:1px solid var(--line);background:var(--paper);color:var(--ink-2);
  transition:border-color .16s,color .16s,background-color .16s;
}
.fchip:hover{border-color:var(--blue);color:var(--blue)}
.fchip[aria-pressed="true"]{
  background:var(--blue);border-color:var(--blue);color:#fff;font-weight:600;
}
.fcount{margin-top:20px;font-size:.875rem;color:var(--ink-3)}
.fcount b{color:var(--ink);font-family:"Inter",sans-serif}
[data-hidden]{display:none !important}

/* ==========================================================================
   META BLOCK - thông tin nhanh dự án / vị trí tuyển dụng
   ========================================================================== */
.meta{
  display:grid;gap:1px;background:var(--line-soft);
  border:1px solid var(--line-soft);border-radius:var(--radius-card);overflow:hidden;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
}
.meta__i{background:var(--paper);padding:18px 20px}
.meta__k{
  font-family:"Inter",sans-serif;font-size:.6875rem;text-transform:uppercase;
  letter-spacing:.12em;color:var(--ink-3);
}
.meta__v{margin-top:7px;font-size:.9375rem;font-weight:600;color:var(--ink);line-height:1.45}

/* ==========================================================================
   PROSE - nội dung dài (bài Insight, câu chuyện công ty, mô tả dịch vụ)
   ========================================================================== */
.prose{max-width:72ch;font-size:1.0625rem;line-height:1.75;color:var(--ink-2)}
.prose>*+*{margin-top:18px}
.prose h2{font-size:clamp(1.375rem,2.4vw,1.875rem);color:var(--ink);margin-top:44px}
.prose h3{font-size:1.1875rem;color:var(--ink);margin-top:32px}
.prose strong,.prose b{color:var(--ink);font-weight:600}
.prose ul{list-style:none;padding-left:0}
.prose ul li{position:relative;padding-left:22px}
.prose ul li+li{margin-top:9px}
.prose ul li::before{
  content:"";position:absolute;left:2px;top:.72em;width:6px;height:1px;background:var(--orange);
}
.prose ol{padding-left:22px;list-style:decimal}
.prose ol li+li{margin-top:9px}
.prose a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.prose figure{margin:32px 0}
.prose figcaption{margin-top:10px;font-size:.8125rem;color:var(--ink-3)}

/* Bố cục bài dài: nội dung + cột phụ dính (mục lục, CTA, tài liệu) */
.article{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(32px,5vw,72px);align-items:start}
.aside{position:sticky;top:calc(var(--nav-h) + 24px);display:grid;gap:14px}
@media (max-width:1000px){
  .article{grid-template-columns:1fr}
  .aside{position:static}
}
.asidebox{border:1px solid var(--line);border-radius:var(--radius-card);padding:22px;background:var(--paper-2)}
.asidebox h3{font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3);
  font-weight:600;margin-bottom:14px}
.asidebox li+li{margin-top:9px}
.asidebox a{font-size:.9375rem;color:var(--ink-2)}
.asidebox a:hover{color:var(--blue)}

/* ==========================================================================
   QUOTE - testimonial
   ========================================================================== */
.quote{
  border:1px solid var(--line);border-radius:var(--radius-card);background:var(--paper);
  padding:clamp(24px,3vw,32px);display:flex;flex-direction:column;
}
.quote__mark{font-family:"Inter",sans-serif;color:var(--orange);font-size:1.5rem;line-height:1}
.quote blockquote{margin:16px 0 0;font-size:1.0625rem;line-height:1.65;color:var(--ink)}
.quote__by{
  margin-top:auto;padding-top:22px;display:flex;align-items:center;gap:14px;
}
.quote__av{
  width:44px;height:44px;flex:none;border-radius:50%;border:1px dashed var(--line);
  display:grid;place-items:center;background:var(--paper-2);
  font-family:"Inter",sans-serif;font-size:.625rem;color:var(--ink-3);
}
.quote__who b{display:block;font-size:.9375rem}
.quote__who span{font-size:.8125rem;color:var(--ink-3)}

/* ==========================================================================
   DANH SÁCH VỊ TRÍ TUYỂN DỤNG
   ========================================================================== */
.job{
  display:grid;grid-template-columns:1fr auto;gap:12px 24px;align-items:center;
  padding:22px 0;border-bottom:1px solid var(--line-soft);
}
.job:first-child{border-top:1px solid var(--line)}
.job h3{font-size:1.0625rem;line-height:1.4}
.job h3 a:hover{color:var(--blue)}
.job__facts{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.8125rem;color:var(--ink-3)}
.job__facts b{color:var(--ink-2);font-weight:600}
.badge{
  font-family:"Inter",sans-serif;font-size:.6875rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.1em;padding:5px 10px;border-radius:var(--radius);
  border:1px solid var(--blue);color:var(--blue);white-space:nowrap;
}
.badge--off{border-color:var(--line);color:var(--ink-3)}
.badge--on{background:var(--blue);color:#fff;border-color:var(--blue)}
@media (max-width:640px){.job{grid-template-columns:1fr}}

/* ==========================================================================
   FORM
   ========================================================================== */
.form{border:1px solid var(--line);border-radius:var(--radius-card);
  padding:clamp(24px,3vw,34px);background:var(--paper-2)}
.form h3{font-size:1.125rem}
.form>p{margin-top:10px;font-size:.9375rem;color:var(--ink-2)}
.fgrid{display:grid;gap:16px 20px;grid-template-columns:1fr 1fr;margin-top:24px}
.fgrid .field--full{grid-column:1/-1}
@media (max-width:680px){.fgrid{grid-template-columns:1fr}}

.field{display:flex;flex-direction:column;gap:8px;margin-top:22px}
.fgrid .field{margin-top:0}
.field label{font-size:.875rem;font-weight:600}
.field label i{font-style:normal;color:var(--danger);margin-left:2px}
.field input,.field select,.field textarea{
  font:inherit;font-size:.9375rem;padding:13px 14px;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  width:100%;
}
.field textarea{min-height:130px;resize:vertical;line-height:1.6}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3)}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:2px solid var(--orange);outline-offset:1px;border-color:var(--blue);
}
.field input[type="file"]{padding:10px 12px;font-size:.875rem}
.field__help{font-size:.8125rem;color:var(--ink-2)}
.field__err{font-size:.8125rem;color:var(--danger);font-weight:500;display:none}
.field[data-invalid] input,.field[data-invalid] select,.field[data-invalid] textarea{border-color:var(--danger)}
.field[data-invalid] .field__err{display:block}
.form button[type="submit"]{margin-top:22px}
.form button[data-loading]{opacity:.72;pointer-events:none}
.form__ok{
  display:none;margin-top:18px;padding:14px 16px;font-size:.9375rem;
  border:1px solid var(--blue);border-radius:var(--radius);
  background:color-mix(in srgb,var(--blue) 10%,transparent);color:var(--ink);
}
.form[data-sent] .form__ok{display:block}
.form[data-sent] form{display:none}

/* ==========================================================================
   BỐ CỤC PHỤ TRỢ
   ========================================================================== */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,68px);align-items:center}
.split--top{align-items:start}
.split--wide{grid-template-columns:1.35fr .65fr}
.split--flip>*:first-child{order:2}
@media (max-width:900px){
  .split,.split--wide{grid-template-columns:1fr}
  .split--flip>*:first-child{order:0}
}

.close{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,72px);align-items:start}
.close h2{font-size:clamp(1.625rem,3vw,2.375rem);max-width:20ch}
.close__lead{margin-top:16px;color:var(--ink-2);max-width:46ch}
.close__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.close__hot{margin-top:24px;font-size:.9375rem;color:var(--ink-2)}
.close__hot a{color:var(--blue);font-weight:600;font-family:"Inter",sans-serif}
@media (max-width:900px){.close{grid-template-columns:1fr}}

/* ==========================================================================
   GFIG - khung ảnh có viền tick-mark, dùng ở trang Về TECOTEC Group
   ========================================================================== */
.gfig{position:relative;padding:14px}
.gfig__frame{position:absolute;inset:0;pointer-events:none}
.gfig__frame::before,.gfig__frame::after{
  content:"";position:absolute;left:0;right:0;height:14px;
  background-image:repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 16px);
}
.gfig__frame::before{top:0}
.gfig__frame::after{bottom:0}
.gfig__side{position:absolute;top:14px;bottom:14px;width:14px;
  background-image:repeating-linear-gradient(180deg,var(--line) 0 1px,transparent 1px 16px)}
.gfig__side--l{left:0}
.gfig__side--r{right:0}
.gfig .slot{width:100%}
.gfig__tag{
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-top:14px;padding-top:12px;border-top:1px solid var(--line);
  font-size:.8125rem;color:var(--ink-2);
}
.gfig__tag b{color:var(--ink);font-weight:600}
@media (max-width:900px){
  .gfig{order:-1}
  .gfig .slot{aspect-ratio:16/11 !important}
}

/* .eco đã xoá cùng section 8 "Hệ sinh thái liên kết ngoài" của trang chủ
   (chốt KDB 06 ngày 2026-08-12). Không markup nào còn dùng, nên bỏ luôn CSS
   thay vì để lại rule chết. Cần một dải link dạng hàng thì dùng .rows. */

/* ==========================================================================
   TRANG LIÊN HỆ - danh bạ mạng lưới và bản đồ chi nhánh
   ========================================================================== */
body[data-page="lien-he"]{--contact-grid:color-mix(in srgb,var(--line) 54%,transparent)}
.contact-hero{position:relative;overflow:hidden;background:var(--paper-2);border-bottom:1px solid var(--line)}
.contact-hero::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.56;background-image:linear-gradient(var(--contact-grid) 1px,transparent 1px),linear-gradient(90deg,var(--contact-grid) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(90deg,#000 0%,transparent 72%)}
.contact-hero__grid{position:relative;display:grid;grid-template-columns:minmax(0,.94fr) minmax(420px,.72fr);gap:clamp(52px,8vw,120px);align-items:center;min-height:clamp(640px,78vh,820px);padding-block:clamp(68px,8vw,112px)}
.contact-hero__copy h1{margin-top:clamp(34px,5vw,64px);font-size:clamp(3rem,6.4vw,4rem);line-height:1.2;letter-spacing:-.04em;text-wrap:balance}
.contact-hero__copy>p{max-width:61ch;margin-top:26px;color:var(--ink-2);font-size:clamp(1rem,1.4vw,1.125rem);line-height:1.72}
.contact-network{position:relative;border-top:1px solid var(--line)}
.contact-network::before{content:"";position:absolute;left:12px;top:58px;bottom:28px;width:1px;background:var(--line)}
.contact-network__label{display:block;padding:0 0 18px;font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.contact-network__node{position:relative;display:grid;grid-template-columns:26px 1fr 20px;gap:14px;align-items:center;min-height:64px;padding:10px 6px;border-bottom:1px solid var(--line-soft);transition:background-color .18s var(--ease),transform .18s var(--ease)}
.contact-network__node:hover{transform:translateX(6px);background:var(--paper)}
.contact-network__node:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.contact-network__node b{display:block;font-size:.9375rem;font-weight:600}
.contact-network__node small{display:block;margin-top:2px;color:var(--ink-3);font-size:.75rem}
.contact-network__node svg,.contact-channel svg{width:18px;fill:none;stroke:currentColor;stroke-width:1.7;transition:transform .18s var(--ease)}
.contact-network__node:hover svg,.contact-channel:hover svg{transform:translateX(3px)}
.contact-network__marker{position:relative;z-index:1;width:9px;height:9px;margin-left:8px;border:2px solid var(--paper-2);border-radius:50%;background:var(--blue);box-shadow:0 0 0 1px var(--blue)}
.contact-network__node--hq .contact-network__marker{width:13px;height:13px;margin-left:6px;background:var(--orange);box-shadow:0 0 0 1px var(--orange)}
.contact-network__node--pending{color:var(--ink-3)}
.contact-network__node--pending .contact-network__marker{background:var(--paper-2);box-shadow:0 0 0 1px var(--line)}
.office-directory{padding-block:clamp(76px,9vw,126px)}
.office-directory__head{display:grid;grid-template-columns:1fr minmax(300px,.65fr);gap:clamp(28px,6vw,96px);align-items:end;padding-bottom:clamp(38px,5vw,68px)}
.office-directory__head h2{font-size:clamp(2rem,4.4vw,4rem);letter-spacing:-.035em}
.office-directory__head p{max-width:52ch;color:var(--ink-2);line-height:1.7}
.office-entry{display:grid;grid-template-columns:minmax(0,.78fr) minmax(440px,1.22fr);min-height:430px;border-top:1px solid var(--line);scroll-margin-top:calc(var(--nav-h) + 24px)}
.office-entry:last-child{border-bottom:1px solid var(--line)}
.office-entry__info{display:flex;flex-direction:column;justify-content:center;padding:clamp(34px,5vw,68px) clamp(30px,5vw,70px) clamp(34px,5vw,68px) 0}
.office-entry__topline{display:flex;justify-content:space-between;gap:20px;margin-bottom:clamp(28px,4vw,48px);font-size:.75rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.office-entry__topline span:last-child{color:var(--blue)}
.office-entry__info h3{max-width:18ch;font-size:clamp(1.75rem,3.2vw,3.25rem);line-height:1.05;letter-spacing:-.035em;text-wrap:balance}
.office-entry__info address,.office-entry__since{max-width:52ch;margin-top:22px;color:var(--ink-2);font-style:normal;line-height:1.72}
.office-entry__contacts{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:clamp(30px,4vw,44px);padding-top:18px;border-top:1px solid var(--line-soft)}
.office-entry__contacts dt{font-size:.75rem;color:var(--ink-3)}
.office-entry__contacts dd{margin-top:5px;font-size:.875rem;font-weight:600;overflow-wrap:anywhere}
.office-entry__contacts a:hover{color:var(--blue)}
.office-entry__actions{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;margin-top:30px}
.office-entry__pending{max-width:26ch;color:var(--ink-3);font-size:.75rem;line-height:1.5}
.office-entry__direction{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;margin-top:28px;padding-bottom:5px;border-bottom:1px solid var(--ink);font-size:.875rem;font-weight:600;transition:color .18s,border-color .18s}
.office-entry__direction:hover{color:var(--blue);border-color:var(--blue)}
.office-entry__direction .link-arrow{width:17px;fill:none;stroke:currentColor;stroke-width:1.7;transition:transform .18s var(--ease)}
.office-entry__direction:hover .link-arrow{transform:translate(2px,-2px)}
.contact-form-layout__intro .office-entry__direction:hover .link-arrow{transform:translateX(3px)}
.office-map{position:relative;height:430px;align-self:start;overflow:hidden;background:var(--paper-2);border-left:1px solid var(--line)}
.office-map iframe{display:block;width:100%;height:100%;border:0;filter:saturate(.72) contrast(1.04)}
.office-entry:nth-of-type(odd) .office-entry__info{order:2;padding-inline:clamp(30px,5vw,70px) 0}
.office-entry:nth-of-type(odd) .office-map{order:1;border-left:0;border-right:1px solid var(--line)}
.office-entry--hq{border-top:2px solid var(--orange)}
.office-entry__notice{display:grid;gap:7px;margin-top:34px;padding:18px 0;border-block:1px solid var(--line-soft)}
.office-entry__notice b{font-size:.9375rem}
.office-entry__notice span{color:var(--ink-3);font-size:.8125rem;line-height:1.55}
.office-map--pending{display:grid;place-items:center;align-content:center;gap:20px;padding:36px;color:var(--ink-3);text-align:center;background-image:linear-gradient(var(--contact-grid) 1px,transparent 1px),linear-gradient(90deg,var(--contact-grid) 1px,transparent 1px);background-size:32px 32px}
.office-map--pending svg{width:60px;fill:none;stroke:var(--ink-3);stroke-width:1.3}
.office-map--pending p{display:grid;gap:7px;max-width:34ch}
.office-map--pending b{color:var(--ink);font-size:1rem}
.office-map--pending span{font-size:.8125rem;line-height:1.55}
.contact-channels{padding-block:clamp(58px,7vw,86px)}
.contact-channels__grid{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:0}
.contact-channels__intro{grid-row:span 2;padding:10px clamp(30px,5vw,68px) 10px 0}
.contact-channels__intro h2{max-width:11ch;font-size:clamp(2rem,4vw,3.75rem);line-height:1.04;letter-spacing:-.035em}
.contact-channels__intro p{max-width:40ch;margin-top:18px;color:rgba(255,255,255,.64);line-height:1.65}
.contact-channel{display:grid;grid-template-columns:1fr auto;gap:6px 20px;align-items:center;padding:24px 0;border-top:1px solid var(--dark-line);transition:color .18s}
.contact-channel:nth-of-type(2),.contact-channel:nth-of-type(3){padding-left:clamp(22px,3vw,42px)}
.contact-channel span{font-size:.75rem;color:rgba(255,255,255,.54)}
.contact-channel b{grid-column:1;font-size:clamp(.875rem,1.4vw,1rem);font-weight:500;overflow-wrap:anywhere}
.contact-channel svg{grid-column:2;grid-row:1/3}
.contact-channel:hover{color:var(--orange)}
.contact-channel--pending{grid-column:2/-1;color:rgba(255,255,255,.5);border-bottom:1px solid var(--dark-line)}
.contact-channel--pending:hover{color:rgba(255,255,255,.5)}
.contact-form-layout{display:grid;grid-template-columns:.72fr 1.28fr;gap:clamp(48px,8vw,116px);align-items:start}
.contact-form-layout__intro{position:sticky;top:calc(var(--nav-h) + 36px)}
.contact-form-layout__intro h2{max-width:10ch;font-size:clamp(2.25rem,4.5vw,4rem);line-height:1.03;letter-spacing:-.035em}
.contact-form-layout__intro p{max-width:43ch;margin-top:22px;color:var(--ink-2);line-height:1.7}
.contact-faq{background:var(--paper-2);border-top:1px solid var(--line-soft)}
@media (max-width:1040px){.contact-hero__grid{grid-template-columns:1fr minmax(360px,.78fr);gap:50px}.office-entry{grid-template-columns:minmax(0,.9fr) minmax(380px,1.1fr)}.contact-channels__grid{grid-template-columns:1fr 1fr}.contact-channels__intro{grid-column:1/-1;grid-row:auto;padding:0 0 38px}.contact-channel--pending{grid-column:1/-1}}
@media (max-width:820px){.contact-hero::before{mask-image:linear-gradient(#000 0%,transparent 72%)}.contact-hero__grid{grid-template-columns:1fr;min-height:auto;padding-block:58px 76px}.contact-hero__copy h1{margin-top:38px}.contact-network{margin-top:10px}.office-directory__head,.office-entry,.contact-form-layout{grid-template-columns:1fr}.office-directory__head{align-items:start}.office-entry{min-height:0}.office-entry__info,.office-entry:nth-of-type(odd) .office-entry__info{order:1;padding:44px 0 36px}.office-map,.office-entry:nth-of-type(odd) .office-map{order:2;height:360px;border:1px solid var(--line)}.contact-form-layout__intro{position:static}}
@media (max-width:620px){.contact-hero__grid{padding-block:42px 64px}.contact-hero__copy h1{font-size:clamp(2.75rem,15vw,4.4rem)}.contact-network__node{grid-template-columns:26px 1fr 18px}.office-directory{padding-block:64px}.office-directory__head{padding-bottom:28px}.office-entry__topline{margin-bottom:26px}.office-entry__contacts{grid-template-columns:1fr;gap:15px}.office-map,.office-entry:nth-of-type(odd) .office-map{height:300px}.contact-channels__grid{grid-template-columns:1fr}.contact-channel:nth-of-type(2),.contact-channel:nth-of-type(3){padding-left:0}.contact-channel--pending{grid-column:auto}}
@media (prefers-reduced-motion:reduce){.contact-network__node,.contact-network__node svg,.contact-channel svg{transition:none}}

/* ==========================================================================
   SCROLL REVEAL - IntersectionObserver, không dùng scroll listener
   ========================================================================== */
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv[data-in]{opacity:1;transform:none}
.rv:nth-child(2){transition-delay:.06s}
.rv:nth-child(3){transition-delay:.12s}
.rv:nth-child(4){transition-delay:.18s}
.rv:nth-child(5){transition-delay:.24s}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .resources__track{transition:none}
}

/* ==========================================================================
   TRANG MỤC LỤC DEMO (index.html) - chỉ dùng cho trang này
   ========================================================================== */
.idx__group{margin-top:clamp(36px,4vw,52px)}
.idx__group h2{font-size:1.25rem;display:flex;align-items:baseline;gap:12px}
.idx__group h2 span{font-family:"Inter",sans-serif;font-size:.75rem;color:var(--ink-3);font-weight:400}
.idx__list{margin-top:18px;border-top:1px solid var(--line)}
.idx__list a{
  display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:baseline;
  padding:15px 12px;margin-inline:-12px;border-bottom:1px solid var(--line-soft);
  transition:background-color .18s var(--ease);
}
.idx__list a:hover{background:var(--paper-2)}
.idx__no{font-family:"Inter",sans-serif;font-size:.8125rem;color:var(--ink-3)}
.idx__t{font-weight:600;font-size:1rem}
.idx__t small{display:block;font-weight:400;font-size:.8125rem;color:var(--ink-2);margin-top:3px}
.idx__f{font-family:"Inter",sans-serif;font-size:.75rem;color:var(--ink-3);justify-self:end}
@media (max-width:680px){
  .idx__list a{grid-template-columns:auto 1fr}
  .idx__f{display:none}
}

/* ==========================================================================
   SHORTCODE [submenu_tai_nguyen] - block Tin tức / Tài nguyên kỹ thuật
   ========================================================================== */
.tn-block{
  width:100%;padding-inline:var(--gutter);
  max-height:min(80vh,720px);overflow-y:auto;
}
.tn-block__top{
  display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;
  margin-bottom:clamp(24px,3vw,36px);
}
.tn-block__tabs{display:flex;flex-wrap:wrap;gap:10px}
.tn-chip{
  display:inline-flex;align-items:center;font-size:.9375rem;font-weight:600;
  padding:11px 22px;border-radius:999px;border:1px solid var(--line);
  background:var(--paper);color:var(--ink-2);
  transition:border-color .16s,color .16s,background-color .16s;
}
.tn-chip:hover{border-color:var(--orange);color:var(--orange-ink)}
.tn-chip--active,.tn-chip--active:hover{background:var(--orange);border-color:var(--orange);color:#141A24}
.tn-block__viewall{
  display:inline-flex;align-items:center;gap:8px;font-size:.9375rem;font-weight:600;color:var(--orange-ink);
}
.tn-block__viewall svg{width:16px;height:16px;transition:transform .2s var(--ease)}
.tn-block__viewall:hover svg{transform:translateX(4px)}

.tn-block__body{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:28px;align-items:start}
@media (max-width:960px){.tn-block__body{grid-template-columns:1fr}}

.tn-feature{
  display:grid;grid-template-columns:1.05fr .95fr;gap:0;
  border:1px solid var(--line);border-radius:var(--radius-card);overflow:hidden;background:var(--paper-2);
}
@media (max-width:720px){.tn-feature{grid-template-columns:1fr}}
.tn-feature__media{display:block}
.tn-feature__media img{width:100%;height:100%;aspect-ratio:16/10;object-fit:cover}
.tn-feature__media-slot{width:100%;height:100%;aspect-ratio:16/10;background:var(--paper-3)}
.tn-feature__body{padding:clamp(22px,3vw,32px);display:flex;flex-direction:column;justify-content:center}
.tn-feature__body h3{margin-top:10px;font-size:clamp(1.25rem,2.2vw,1.5rem);line-height:1.34}
.tn-feature__body h3 a:hover{color:var(--blue)}
.tn-feature__body p{margin-top:12px;font-size:.9375rem;color:var(--ink-2);line-height:1.6}
.tn-feature__body .tlink{margin-top:16px}

.tn-block__subtitle{margin-top:clamp(36px,4vw,52px);font-size:1.25rem}

.tn-latest-grid{margin-top:20px;display:grid;gap:24px;grid-template-columns:repeat(3,1fr)}
@media (max-width:1100px){.tn-latest-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:720px){.tn-latest-grid{grid-template-columns:1fr}}
.tn-latest-grid .card__body h3{
  font-size:1.0625rem;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.tn-latest-grid .card__body p{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.tn-latest-grid__date{
  margin-top:auto;padding-top:14px;display:flex;align-items:center;gap:6px;
  font-size:.8125rem;color:var(--ink-3);
}
.tn-latest-grid__date svg{width:14px;height:14px;flex:none}

.tn-empty{margin-top:20px;color:var(--ink-3);font-size:.9375rem}

.tn-block__side{display:grid;gap:20px}
.tn-tags{margin-top:2px;display:flex;flex-wrap:wrap;gap:8px 10px}
.tn-tag{
  display:inline-flex;align-items:center;
  border-bottom:1px solid var(--line);
  font-size:.8125rem;color:var(--ink-2);line-height:1.3;
  transition:color .16s,border-color .16s;
}
.tn-tag:hover{color:var(--orange-ink);border-color:var(--orange)}
.tn-tag__icon{display:none}
.tn-tag__label{white-space:nowrap}

.tn-docbox{
  border:1px solid var(--line);border-radius:var(--radius-card);background:var(--paper-2);
  padding:24px;
}
.tn-docbox__icon{
  display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:var(--orange);color:#141A24;
}
.tn-docbox__icon svg{width:20px;height:20px}
.tn-docbox h3{margin-top:16px;font-size:1.0625rem}
.tn-docbox p{margin-top:8px;font-size:.875rem;color:var(--ink-2);line-height:1.6}
.tn-docbox .tlink{margin-top:14px}

/* [tecotec_faq] shortcode */
.teco-faq{display:flex;flex-direction:column;gap:15px}
.dropdown-section{
  margin:0 auto;background-color:#ffffff;border:2px solid #146eb4;
  border-radius:8px;overflow:hidden;box-shadow:0 2px 8px rgba(20,110,180,.15);
}
.dropdown-header{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 25px;cursor:pointer;user-select:none;
  background-color:#146eb4;transition:background-color .3s ease;
}
.dropdown-header:hover{background-color:#0f5a94}
.dropdown-title{color:#ffffff;font-size:18px;font-weight:600}
.dropdown-icon{
  width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;
  border-top:8px solid #ff9900;transition:transform .3s ease;flex:none;margin-left:16px;
}
.dropdown-icon.active{transform:rotate(180deg)}
.dropdown-content{display:grid;grid-template-rows:0fr;overflow:hidden;transition:grid-template-rows .4s ease;background-color:#f8f9fa}
.dropdown-content.active{grid-template-rows:1fr}
.dropdown-content-inner{min-height:0;overflow:hidden}
.dropdown-content-text{padding:20px 25px;box-shadow:inset 0 2px 0 0 #e8f1f8}
.dropdown-content-text p{color:#2c3e50!important;line-height:1.8;font-size:15px;margin:0}

.teco-newsletter-form p{
  display:flex;flex-wrap:wrap;align-items:stretch;gap:12px;margin:0;
}
.teco-newsletter-form p br{
  display:none;
}
.teco-newsletter-form .wpcf7-form-control-wrap{
  flex:1 1 240px;
  display:flex;
}
.teco-newsletter-form input[type="email"].wpcf7-form-control{
  width:100%;height:100%;box-sizing:border-box;
  padding:0 16px;border:1px solid #d0d5dd;border-radius:6px;font-size:15px;
}
.teco-newsletter-form input[type="submit"].wpcf7-form-control{
  flex:0 0 auto;padding:0 28px;border:none;border-radius:6px;
  background-color:#146eb4;color:#fff;font-weight:600;cursor:pointer;
  transition:background-color .3s ease;
}
.teco-newsletter-form input[type="submit"].wpcf7-form-control:hover{background-color:#0f5a94}
.teco-newsletter-form .wpcf7-response-output{flex:1 0 100%;margin:8px 0 0}