/* ==========================================================================
   TGSH — Hồ sơ năng lực
   Mọi thứ nằm trong .tgsh nên không ảnh hưởng phần còn lại của theme.
   ========================================================================== */

.tgsh{
  --ink:#0A1420;          /* nền tối — biệt thự về đêm */
  --ink-2:#0F1D2E;        /* mặt thẻ trên nền tối */
  --ink-3:#152C44;        /* thẻ nhấn */
  --line-d:#1E3449;       /* kẻ mảnh trên nền tối */
  --cyan:#22D3F0;
  --blue:#2B7FE8;
  --amber:#F2B34B;
  --paper:#F2F6F9;        /* nền sáng */
  --paper-2:#E8EFF5;
  --card:#FFFFFF;
  --line-l:#D8E3EB;
  --slate-d:#8AA2B6;      /* chữ phụ trên nền tối */
  --slate-l:#53697D;      /* chữ phụ trên nền sáng */
  --text-l:#0E1D2B;       /* chữ chính trên nền sáng */
  --r:16px;
  --pad:clamp(40px,6vw,88px);
  --gap:clamp(14px,1.6vw,22px);

  position:relative;
  overflow-x:clip;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
}
@supports not (overflow-x:clip){ .tgsh{ overflow-x:hidden } }

/* Không phụ thuộc reset của theme: tự đảm bảo padding nằm trong chiều rộng. */
.tgsh,.tgsh *,.tgsh *::before,.tgsh *::after{ box-sizing:border-box }

/* ---------- full-bleed sections bên trong container của Flatsome ---------- */
.tgsh-s{
  position:relative;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  padding:var(--pad) 0;
  scroll-margin-top:90px;
  isolation:isolate;
}
.tgsh-wrap{
  width:min(1240px, 100% - clamp(32px,6vw,80px));
  margin-inline:auto;
  position:relative;
  z-index:1;
}

/* ---------- nền: chép lại hiệu ứng của bản PowerPoint -------------------- */
.tgsh-s--dark{ background:var(--ink); color:#fff }
.tgsh-s--dark::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(60% 70% at 88% -10%, rgba(43,127,232,.34), rgba(34,211,240,.08) 45%, transparent 72%),
    radial-gradient(46% 55% at -6% 106%, rgba(242,179,75,.12), transparent 66%);
}
.tgsh-s--dark::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--line-d) 1px,transparent 1px),linear-gradient(90deg,var(--line-d) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 70% 72% at 50% 42%,#000 12%,transparent 76%);
          mask-image:radial-gradient(ellipse 70% 72% at 50% 42%,#000 12%,transparent 76%);
}
.tgsh-s--light{ background:var(--paper); color:var(--text-l) }
.tgsh-s--light-alt{ background:var(--paper-2); color:var(--text-l) }
.tgsh-s--light::before,.tgsh-s--light-alt::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(52% 60% at 94% -12%, rgba(43,127,232,.09), transparent 70%);
}

/* ---------- typography ---------------------------------------------------- */
/* QUAN TRỌNG — Flatsome in ra quy tắc `h1,h2,h3,h4,h5,h6{color:#0a0a0a}` đặt
   thẳng lên thẻ. Màu kế thừa từ section không bao giờ thắng được quy tắc trực
   tiếp, nên phải chỉ định rõ màu tiêu đề cho từng nền thay vì trông chờ kế thừa. */
.tgsh-s--dark h1,.tgsh-s--dark h2,.tgsh-s--dark h3,
.tgsh-s--dark h4,.tgsh-s--dark h5,.tgsh-s--dark h6{ color:#fff }

.tgsh-s--light h1,.tgsh-s--light h2,.tgsh-s--light h3,
.tgsh-s--light h4,.tgsh-s--light h5,.tgsh-s--light h6,
.tgsh-s--light-alt h1,.tgsh-s--light-alt h2,.tgsh-s--light-alt h3,
.tgsh-s--light-alt h4,.tgsh-s--light-alt h5,.tgsh-s--light-alt h6{ color:var(--text-l) }

/* các khối nổi nằm ngoài section */
.tgsh-sheet h1,.tgsh-sheet h2,.tgsh-sheet h3,.tgsh-sheet h4{ color:#fff }

/* theme cũng có thể đặt màu cho đoạn văn và liên kết */
.tgsh-s--dark p,.tgsh-s--dark li,.tgsh-s--dark dd,.tgsh-s--dark address{ color:var(--slate-d) }
.tgsh-s--light p,.tgsh-s--light li,.tgsh-s--light dd,.tgsh-s--light address,
.tgsh-s--light-alt p,.tgsh-s--light-alt li,.tgsh-s--light-alt dd,.tgsh-s--light-alt address{ color:var(--slate-l) }

.tgsh h1,.tgsh h2,.tgsh h3{ margin:0; letter-spacing:-.022em; text-wrap:balance; line-height:1.18 }
.tgsh p{ margin:0 }
.tgsh-h1{ font-size:clamp(30px,6.2vw,54px); font-weight:800; line-height:1.1; letter-spacing:-.03em }
.tgsh-h2{ font-size:clamp(24px,4.2vw,40px); font-weight:800 }
.tgsh-h2--big{ font-size:clamp(28px,5.4vw,52px) }
.tgsh h3{ font-size:clamp(17px,1.5vw,19px); font-weight:700 }
.tgsh-h3--big{ font-size:clamp(19px,2.1vw,23px)!important }
.tgsh-rangename{ font-size:clamp(17px,1.7vw,20px)!important; letter-spacing:0 }
.tgsh-accent{ color:var(--cyan) }

/* Nhãn cấp PHẦN — to, có ô vuông dẫn như trong bản hồ sơ PowerPoint */
.tgsh-eyebrow{
  display:flex;align-items:center;gap:10px;
  font-size:clamp(13px,1.35vw,14.5px);font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--blue);margin-bottom:14px;
}
.tgsh-eyebrow::before{
  content:"";width:10px;height:10px;flex:none;border-radius:2px;
  background:linear-gradient(135deg,var(--cyan),var(--blue));
}
.tgsh-s--dark .tgsh-eyebrow{ color:var(--cyan) }

/* Nhãn cấp THẺ — nhỏ hơn một bậc nhưng vẫn đọc được thoải mái */
.tgsh-label{
  display:block;font-size:clamp(11.5px,1.15vw,12.5px);font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;color:var(--blue);margin-bottom:8px;line-height:1.4;
}
.tgsh-s--dark .tgsh-label{ color:var(--cyan) }
.tgsh-card.is-amber .tgsh-label{ color:var(--amber) }

/* Tiêu đề phụ trong một phần */
.tgsh-sub{
  font-size:clamp(18px,2vw,22px)!important;font-weight:800;letter-spacing:-.018em;
  margin-bottom:18px!important;
}
.tgsh-kicker{
  display:block;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--slate-l);
}
.tgsh-s--dark .tgsh-kicker{ color:var(--slate-d) }
.tgsh-lede{
  font-size:clamp(15.5px,1.75vw,18px);line-height:1.62;color:var(--slate-l);max-width:72ch;
}
.tgsh-s--dark .tgsh-lede{ color:var(--slate-d) }
.tgsh-s--dark .tgsh-lede strong{ color:#fff }
.tgsh p:not(.tgsh-lede){ font-size:clamp(14.5px,1.45vw,15.5px); line-height:1.66; color:var(--slate-l) }
.tgsh-s--dark p:not(.tgsh-lede){ color:var(--slate-d) }
.tgsh-muted{ display:block;color:var(--slate-d);font-size:14px }
.tgsh-link{ color:var(--blue)!important;font-weight:700 }

.tgsh-head{ margin-bottom:clamp(26px,3.4vw,40px) }
.tgsh-head .tgsh-h2+.tgsh-lede{ margin-top:12px }
.tgsh-head--split{ display:grid;grid-template-columns:1fr auto;gap:24px;align-items:start }
.tgsh-rule{ height:1px;background:var(--line-l);margin:clamp(28px,3.4vw,40px) 0 }
.tgsh-s--dark .tgsh-rule{ background:var(--line-d) }

/* ---------- grids --------------------------------------------------------- */
.tgsh-grid{ display:grid;gap:var(--gap) }
.tgsh-grid--2{ grid-template-columns:repeat(2,1fr) }
.tgsh-grid--3{ grid-template-columns:repeat(3,1fr) }
.tgsh-grid--4{ grid-template-columns:repeat(4,1fr) }
.tgsh-grid--5{ grid-template-columns:repeat(5,1fr) }
.tgsh-grid--plain{ gap:clamp(20px,2.6vw,36px) }
.tgsh-grid--plain h3{ margin-bottom:8px }

/* ---------- cards --------------------------------------------------------- */
.tgsh-card{
  background:var(--card);border:1px solid var(--line-l);border-radius:var(--r);
  padding:clamp(18px,1.9vw,26px);
  display:flex;flex-direction:column;gap:9px;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.tgsh-s--light-alt .tgsh-card{ border-color:#D2DFE9 }
.tgsh-card:hover{ transform:translateY(-3px); box-shadow:0 14px 34px -18px rgba(14,40,66,.45); border-color:#BFD3E2 }
.tgsh-s--dark .tgsh-card{ background:var(--ink-2);border-color:var(--line-d) }
.tgsh-s--dark .tgsh-card:hover{ border-color:#2F5A7C; box-shadow:0 16px 40px -20px rgba(0,0,0,.8) }
.tgsh-card.is-amber{ background:var(--ink-3);border-color:#36617F }
.tgsh-card.is-amber .tgsh-eyebrow{ color:var(--amber) }
.tgsh-card .tgsh-eyebrow{ margin-bottom:2px }

.tgsh-ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:11px;flex:none;
  background:rgba(34,211,240,.12);color:var(--cyan);margin-bottom:4px;
}
.tgsh-s--light .tgsh-ico,.tgsh-s--light-alt .tgsh-ico{ background:rgba(43,127,232,.1);color:var(--blue) }
.tgsh-ico svg{ width:21px;height:21px }
.tgsh-card--icon .tgsh-num{ position:absolute;top:18px;right:20px;opacity:.5 }
.tgsh-card--icon{ position:relative }
.tgsh-card--check{ flex-direction:row;gap:16px;align-items:flex-start }
.tgsh-ico--check{ width:34px;height:34px;border-radius:50% }
.tgsh-ico--check svg{ width:17px;height:17px }

.tgsh-num{
  font-size:11.5px;font-weight:800;letter-spacing:.14em;color:var(--blue);
}
.tgsh-s--dark .tgsh-num{ color:var(--cyan) }

/* ---------- hero ---------------------------------------------------------- */
.tgsh-hero{ padding-top:clamp(36px,5vw,64px);padding-bottom:clamp(48px,6vw,80px) }
.tgsh-hero .tgsh-wrap{ display:flex;flex-direction:column;gap:clamp(28px,4vw,48px) }
.tgsh-logo{ height:auto;display:block }
.tgsh-logo--hero{ width:clamp(190px,24vw,280px) }
.tgsh-logo--foot{ width:clamp(170px,20vw,230px) }
.tgsh-hero__body .tgsh-h1{ margin:6px 0 18px }
.tgsh-hero__cta{ display:flex;flex-wrap:wrap;gap:12px;margin-top:26px }

/* Thẻ nhận diện thương hiệu — kính mờ, viền gradient mảnh */
.tgsh-idcard{
  position:relative;border-radius:20px;padding:20px 22px;
  display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between;
  background:linear-gradient(135deg,rgba(34,211,240,.07),rgba(43,127,232,.05) 45%,rgba(255,255,255,.02));
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.tgsh-idcard::before{
  content:"";position:absolute;inset:0;border-radius:20px;padding:1px;pointer-events:none;
  background:linear-gradient(135deg,rgba(34,211,240,.55),rgba(43,127,232,.3) 40%,rgba(30,52,73,.5));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.tgsh-idcard__brand{ display:flex;align-items:center;gap:15px;min-width:0 }
.tgsh-idcard__mark{ width:50px;height:50px;flex:none;border-radius:50%;display:block }
.tgsh-idcard__name{
  display:block;font-size:clamp(16px,1.9vw,20px);font-weight:800;letter-spacing:-.01em;
  margin:5px 0 3px;color:#fff;
}
.tgsh-pills{ list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px }
.tgsh-pills li{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--line-d);border-radius:99px;padding:7px 14px 7px 8px;
  font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#B9CCDA;
  background:rgba(10,20,32,.5);
}
.tgsh-pill__ic{
  display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;flex:none;
  border-radius:50%;background:rgba(34,211,240,.14);color:var(--cyan);
}
.tgsh-pill__ic svg{ width:13px;height:13px }
.tgsh-pill__ic--it{ background:transparent }
.tgsh-flag--sm{ width:19px;height:13px;border-radius:2px;border-color:#2B4055 }
.tgsh-scrollcue{
  position:absolute;left:50%;bottom:18px;transform:translateX(-50%);
  width:22px;height:34px;border:1.5px solid var(--line-d);border-radius:12px;z-index:1;
}
.tgsh-scrollcue i{
  position:absolute;left:50%;top:7px;width:3px;height:7px;border-radius:2px;background:var(--cyan);
  transform:translateX(-50%);animation:tgsh-cue 1.9s ease-in-out infinite;
}
@keyframes tgsh-cue{ 0%,100%{opacity:0;transform:translate(-50%,0)} 40%{opacity:1} 70%{opacity:0;transform:translate(-50%,11px)} }

/* ---------- buttons ------------------------------------------------------- */
.tgsh-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:0 20px;border-radius:99px;font-weight:700;font-size:14.5px;line-height:1;
  text-decoration:none!important;border:1px solid transparent;transition:.2s ease;
  height:46px;white-space:nowrap;
}
.tgsh-btn svg{ width:17px;height:17px;flex:none }
.tgsh-btn--primary{ background:linear-gradient(100deg,var(--blue),var(--cyan));color:#06121e!important;box-shadow:0 10px 26px -12px rgba(34,211,240,.75) }
.tgsh-btn--primary:hover{ filter:brightness(1.08);transform:translateY(-2px) }
.tgsh-btn--ghost{ border-color:var(--line-d);color:#fff!important }
.tgsh-btn--ghost:hover{ border-color:var(--cyan);color:var(--cyan)!important }

/* ---------- stats --------------------------------------------------------- */
.tgsh-stats{ display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,32px) }
.tgsh-stat b{
  display:block;font-size:clamp(30px,4.6vw,48px);font-weight:800;line-height:1;letter-spacing:-.04em;
  background:linear-gradient(130deg,var(--cyan),var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:8px;
}
.tgsh-stats--light .tgsh-stat b{ background:linear-gradient(130deg,var(--blue),#1B5FB8);-webkit-background-clip:text;background-clip:text }
.tgsh-stat span{ display:block;font-size:clamp(13px,1.35vw,14.5px);line-height:1.5;color:var(--slate-d) }
.tgsh-s--light .tgsh-stat span{ color:var(--slate-l) }

/* ---------- facts / address ----------------------------------------------- */
.tgsh-facts{ display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);margin:0 }
.tgsh-facts dt{ font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--slate-l);margin-bottom:6px }
.tgsh-facts dd{ margin:0;font-size:clamp(15px,1.6vw,17px);font-weight:700;color:var(--text-l) }
.tgsh-addr{
  font-style:normal;text-align:right;font-size:13px;line-height:1.75;color:var(--slate-l);
}
.tgsh-addr .tgsh-kicker{ margin:8px 0 6px }
.tgsh-flag{ display:inline-flex;width:30px;height:20px;border:1px solid var(--line-l);border-radius:3px;overflow:hidden }
.tgsh-flag i{ flex:1 }
.tgsh-flag i:nth-child(1){ background:#008C45 } .tgsh-flag i:nth-child(2){ background:#fff } .tgsh-flag i:nth-child(3){ background:#CD212A }

/* ---------- projects ------------------------------------------------------ */
.tgsh-proj{
  background:var(--card);border:1px solid var(--line-l);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .25s ease,box-shadow .25s ease;
}
.tgsh-proj:hover{ transform:translateY(-3px);box-shadow:0 16px 36px -20px rgba(14,40,66,.5) }
.tgsh-proj.is-empty{ border-style:dashed;border-color:#B9CCDA;background:rgba(255,255,255,.6);box-shadow:none }
.tgsh-proj.is-empty:hover{ transform:none }
.tgsh-proj__img{ aspect-ratio:4/3;background:#E4EDF4;overflow:hidden }
.tgsh-proj__img img{ width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease }
.tgsh-proj:hover .tgsh-proj__img img{ transform:scale(1.05) }
.tgsh-proj__ph{
  display:block;width:100%;height:100%;
  background:repeating-linear-gradient(45deg,#E7EFF5 0 10px,#DFE9F1 10px 20px);
}
.tgsh-proj__body{ padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px }
.tgsh-proj h3{ font-size:16px }
.tgsh-proj.is-empty h3{ color:#9EB1C0 }
.tgsh-proj__meta{ list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:3px }
.tgsh-proj__meta li{ font-size:12.5px;line-height:1.55;color:var(--slate-l);padding-left:14px;position:relative }
.tgsh-proj__meta li::before{
  content:"";position:absolute;left:0;top:.56em;width:5px;height:5px;border-radius:50%;background:var(--blue);opacity:.55;
}
.tgsh-proj.is-empty .tgsh-proj__meta li{ color:#A8BBC9 }

/* ---------- scene timeline ------------------------------------------------ */
.tgsh-day{
  height:8px;border-radius:99px;margin-bottom:22px;
  background:linear-gradient(90deg,#F2B34B 0%,#FFE3B0 18%,#DCEFF7 42%,#9FD9EE 58%,#F2C98A 76%,#2B4A6E 100%);
}
.tgsh-scenes article{ position:relative;padding-top:18px }
.tgsh-tick{ position:absolute;top:0;left:0;width:9px;height:9px;border-radius:2px;background:var(--blue) }
.tgsh-scenes h3{ margin-bottom:8px }

/* ---------- hệ sinh thái Eelectron --------------------------------------- */
.tgsh-swipe{ position:relative }

.tgsh-fams{ display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap) }
.tgsh-fam{
  background:var(--card);border:1px solid var(--line-l);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .25s ease,box-shadow .25s ease;
}
.tgsh-fam:hover{ transform:translateY(-3px);box-shadow:0 18px 40px -22px rgba(14,40,66,.5) }
.tgsh-fam__img{ aspect-ratio:4/3;background:#EDF3F8;overflow:hidden }
.tgsh-fam__img img{ width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease }
.tgsh-fam:hover .tgsh-fam__img img{ transform:scale(1.04) }
.tgsh-fam__body{ padding:16px 18px 18px;display:flex;flex-direction:column;gap:7px;flex:1 }
.tgsh-fam__body h4{ font-size:clamp(18px,1.9vw,21px);font-weight:800;letter-spacing:.01em;margin:0 }
.tgsh-fam__body p{ font-size:13.5px!important;line-height:1.6!important }
.tgsh-award{
  margin-top:auto;display:inline-flex;align-items:center;gap:7px;align-self:flex-start;
  background:rgba(242,179,75,.14);color:#8A6116;border-radius:99px;padding:6px 12px 6px 9px;
  font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;line-height:1.3;
}
.tgsh-award svg{ width:14px;height:14px;flex:none }

.tgsh-block + .tgsh-block{ margin-top:4px }
.tgsh-devhead{ display:flex;flex-wrap:wrap;gap:16px 24px;align-items:flex-end;justify-content:space-between;margin-bottom:20px }
.tgsh-devhead .tgsh-sub{ margin-bottom:6px!important }
.tgsh-blocklede{ font-size:14.5px!important;line-height:1.6!important;max-width:62ch;margin:0 }
.tgsh-empty{ padding:28px 0;text-align:center;color:var(--slate-l) }
.tgsh-filters{ display:flex;flex-wrap:wrap;gap:7px }

/* thanh chỉ báo còn nội dung khi vuốt ngang */
.tgsh-swipefoot{
  display:none;align-items:center;gap:14px;margin-top:14px;
  transition:opacity .35s ease;
}
.tgsh-swipefoot.is-off{ opacity:0;pointer-events:none }
.tgsh-swipebar{
  position:relative;flex:1;height:4px;border-radius:99px;background:#D4E1EB;overflow:hidden;
}
.tgsh-s--dark .tgsh-swipebar{ background:#1E3449 }
.tgsh-swipebar i{
  position:absolute;top:0;bottom:0;left:0;width:40%;border-radius:99px;
  background:linear-gradient(90deg,var(--blue),var(--cyan));
  transition:left .12s linear, width .2s ease;
}
.tgsh-swipefoot .tgsh-hint{ margin-top:0;flex:none }
.tgsh-filter{
  border:1px solid var(--line-l);background:var(--card);border-radius:99px;
  padding:0 15px;height:38px;font-size:13px;font-weight:700;color:var(--slate-l);
  cursor:pointer;transition:.18s ease;font-family:inherit;
}
.tgsh-filter:hover{ border-color:var(--blue);color:var(--blue) }
.tgsh-filter.is-on{ background:var(--blue);border-color:var(--blue);color:#fff }

.tgsh-devs{ display:grid;grid-template-columns:repeat(5,1fr);gap:var(--gap) }
.tgsh-dev{
  background:var(--card);border:1px solid var(--line-l);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .25s ease,box-shadow .25s ease,opacity .25s ease;
}
.tgsh-dev:hover{ transform:translateY(-3px);box-shadow:0 16px 36px -20px rgba(14,40,66,.45) }
.tgsh-dev[hidden]{ display:none }
.tgsh-dev__img{
  aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;padding:14px;
  background:radial-gradient(60% 60% at 50% 42%,#F7FAFC,#E9F0F6);
}
.tgsh-dev__img img{ max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block }
.tgsh-dev__body{ padding:13px 15px 16px;display:flex;flex-direction:column;gap:5px }
.tgsh-dev__code{
  font-size:10.5px;font-weight:800;letter-spacing:.09em;color:var(--blue);text-transform:uppercase;
}
.tgsh-dev__body h4{ font-size:15px;font-weight:800;letter-spacing:-.01em;margin:0;line-height:1.3 }
.tgsh-dev__body p{ font-size:12.5px!important;line-height:1.58!important }
.tgsh-note{
  margin-top:20px;font-size:13.5px!important;line-height:1.65!important;
  padding:14px 16px;border-radius:12px;background:rgba(43,127,232,.06);
}
.tgsh-s--dark .tgsh-note{ background:rgba(34,211,240,.07) }

/* ghi chú cuối phần hệ sinh thái: số thiết bị đang xem / tổng danh mục */
.tgsh-catnote{
  margin-top:28px;border-radius:var(--r);padding:22px 24px;
  background:linear-gradient(135deg,rgba(43,127,232,.08),rgba(34,211,240,.05));
  border:1px solid #D2E0EB;
  display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:22px 32px;align-items:center;
}
.tgsh-catnote__nums{ display:flex;flex-direction:column;gap:14px }
.tgsh-catnote__nums div{ display:flex;align-items:baseline;gap:11px }
.tgsh-catnote__nums b{
  font-size:clamp(26px,3vw,34px);font-weight:800;line-height:1;letter-spacing:-.03em;flex:none;
  background:linear-gradient(130deg,var(--blue),#1B5FB8);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.tgsh-catnote__nums span{ font-size:13px;line-height:1.45;color:var(--slate-l) }
.tgsh-catnote p{ font-size:13.5px!important;line-height:1.66!important;margin:0 }

/* gợi ý vuốt ngang — chỉ hiện trên màn hình cảm ứng hẹp */
.tgsh-hint{
  display:none;align-items:center;gap:8px;margin-top:12px;
  font-size:12.5px;font-weight:700;letter-spacing:.04em;color:var(--slate-l);
  opacity:1;transition:opacity .45s ease;
}
.tgsh-s--dark .tgsh-hint{ color:var(--slate-d) }
.tgsh-hint.is-off{ opacity:0;pointer-events:none }
.tgsh-hint svg{ width:22px;height:22px;flex:none;color:var(--blue);animation:tgsh-swipe 1.9s ease-in-out infinite }
.tgsh-s--dark .tgsh-hint svg{ color:var(--cyan) }
@keyframes tgsh-swipe{
  0%,100%{ transform:translateX(0);opacity:.55 }
  45%{ transform:translateX(7px);opacity:1 }
}

/* ---------- quy trình: đường đi có dấu chân ------------------------------ */
.tgsh-journey{ list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:0 }
.tgsh-jstep{ display:flex;flex-direction:column;position:relative;padding:0 9px }
.tgsh-jtrack{ position:relative;height:54px;display:flex;align-items:center;justify-content:center }
.tgsh-jline{
  position:absolute;top:50%;height:2px;width:50%;
  background-image:linear-gradient(90deg,#BBCFDE 55%,transparent 55%);
  background-size:9px 2px;
}
.tgsh-jline--in{ left:0 }
.tgsh-jline--out{ right:0 }
.tgsh-jstep:first-child .tgsh-jline--in,
.tgsh-jstep:last-child .tgsh-jline--out{ display:none }
.tgsh-jnode{
  position:relative;z-index:2;width:46px;height:46px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--cyan),var(--blue));color:#06121e;
  font-weight:800;font-size:17px;
  box-shadow:0 0 0 5px var(--paper),0 8px 20px -8px rgba(43,127,232,.8);
}
.tgsh-s--light-alt .tgsh-jnode{ box-shadow:0 0 0 5px var(--paper-2),0 8px 20px -8px rgba(43,127,232,.8) }
.tgsh-jfoot{
  position:absolute;top:50%;right:-13px;transform:translateY(-50%) rotate(90deg);
  color:var(--blue);opacity:.42;z-index:1;
}
.tgsh-jfoot svg{ width:24px;height:24px }
.tgsh-jcard{
  background:var(--card);border:1px solid var(--line-l);border-radius:var(--r);
  padding:16px 16px 18px;margin-top:12px;flex:1;
  display:flex;flex-direction:column;gap:6px;
  transition:transform .25s ease,box-shadow .25s ease;
}
.tgsh-jstep:hover .tgsh-jcard{ transform:translateY(-3px);box-shadow:0 14px 32px -18px rgba(14,40,66,.45) }
.tgsh-jcard h3{ font-size:16px }
.tgsh-jcard p{ font-size:13px!important;line-height:1.58!important }

/* ---------- steps --------------------------------------------------------- */
.tgsh-steps{ list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:var(--gap) }
.tgsh-steps li{
  background:var(--card);border:1px solid var(--line-l);border-radius:var(--r);
  padding:clamp(16px,1.6vw,22px);display:flex;flex-direction:column;gap:7px;
  transition:transform .25s ease,box-shadow .25s ease;
}
.tgsh-steps li:hover{ transform:translateY(-3px);box-shadow:0 14px 32px -18px rgba(14,40,66,.45) }
.tgsh-badge{
  display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;
  background:linear-gradient(130deg,var(--cyan),var(--blue));color:#06121e;font-weight:800;font-size:12.5px;margin-bottom:6px;
}
.tgsh-steps .tgsh-eyebrow{ margin-bottom:0 }

/* ---------- contact ------------------------------------------------------- */
.tgsh-ct{ display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap) }
.tgsh-ct__item{
  display:flex;gap:14px;align-items:center;text-decoration:none!important;
  background:var(--ink-2);border:1px solid var(--line-d);border-radius:var(--r);padding:16px 18px;
  transition:.22s ease;min-height:76px;
}
.tgsh-ct__item:hover{ border-color:var(--cyan);transform:translateY(-3px) }
.tgsh-ct__item em{ display:block;font-style:normal;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--slate-d);margin-bottom:4px }
.tgsh-ct__item strong{ display:block;font-size:clamp(15px,1.6vw,17px);color:#fff;letter-spacing:-.01em;word-break:break-word }
.tgsh-ct__item:first-child strong{ color:var(--cyan) }
.tgsh-contact__foot{ display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between }
.tgsh-contact__foot>div{ text-align:right }

/* ==========================================================================
   Điều hướng theo phần
   ========================================================================== */

/* thanh tiến độ đọc trên cùng */
.tgsh-progress{ position:fixed;top:0;left:0;right:0;height:3px;z-index:9998;background:transparent;pointer-events:none }
.tgsh-progress__bar{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--blue),var(--cyan));
  box-shadow:0 0 12px rgba(34,211,240,.7);transition:width .1s linear;
}

/* rail dọc bên phải — desktop */
.tgsh-rail{ position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:9997;display:none }
.tgsh-rail ol{ list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px }
.tgsh-rail a{
  display:flex;align-items:center;gap:10px;justify-content:flex-end;
  padding:5px 4px;text-decoration:none!important;color:inherit;
}
.tgsh-rail__txt{
  display:flex;align-items:center;gap:8px;
  font-size:12.5px;font-weight:600;white-space:nowrap;
  background:rgba(10,20,32,.92);color:#C7D7E4;border:1px solid var(--line-d);
  padding:6px 12px;border-radius:99px;
  opacity:0;transform:translateX(8px);transition:.22s ease;pointer-events:none;
}
.tgsh-rail__txt em{ font-style:normal;font-size:10.5px;letter-spacing:.1em;color:#6E8CA5 }
.tgsh-rail__dot{
  width:9px;height:9px;border-radius:50%;background:#9FB4C6;opacity:.45;flex:none;transition:.22s ease;
}
.tgsh-rail a:hover .tgsh-rail__txt,.tgsh-rail a:focus-visible .tgsh-rail__txt{ opacity:1;transform:none }
.tgsh-rail a:hover .tgsh-rail__dot{ opacity:1 }
.tgsh-rail li.is-active .tgsh-rail__dot{
  background:var(--cyan);opacity:1;transform:scale(1.35);box-shadow:0 0 0 4px rgba(34,211,240,.18);
}
.tgsh-rail li.is-active .tgsh-rail__txt{ opacity:1;transform:none;color:#fff;border-color:#2F5A7C }

/* nút điều hướng nổi — mobile */
.tgsh-mnav{
  /* Neo bên trái: cạnh phải thường đã có nút Zalo / gọi của website. */
  position:fixed;left:14px;bottom:14px;z-index:9997;
  display:none;align-items:center;gap:10px;
  background:rgba(10,20,32,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line-d);border-radius:40px;
  padding:7px 14px 7px 7px;cursor:pointer;
  box-shadow:0 14px 34px -14px rgba(0,0,0,.8);
  max-width:calc(100vw - 96px);min-height:54px;
  /* ẩn khi còn ở màn hình đầu — tránh che khối thương hiệu */
  transform:translateY(16px);opacity:0;pointer-events:none;
  transition:opacity .28s ease, transform .28s cubic-bezier(.22,.8,.3,1);
}
.tgsh-mnav.is-on{ transform:none;opacity:1;pointer-events:auto }
.tgsh-mnav__ring{ position:relative;width:40px;height:40px;flex:none }
.tgsh-mnav__ring svg{ width:40px;height:40px;transform:rotate(-90deg) }
.tgsh-mnav__trk{ fill:none;stroke:#23394F;stroke-width:3 }
.tgsh-mnav__val{
  fill:none;stroke:var(--cyan);stroke-width:3;stroke-linecap:round;
  stroke-dasharray:97.4;stroke-dashoffset:97.4;transition:stroke-dashoffset .25s ease;
}
.tgsh-mnav__ring b{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:12.5px;font-weight:800;color:#fff;
}
.tgsh-mnav__lab{ display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto;text-align:left }
/* Cả hai dòng đều phải nằm gọn trên một dòng, thừa thì cắt bằng dấu ba chấm.
   Thiếu nowrap ở dòng trên là nguyên nhân nút bị phình thành khối bầu dục. */
.tgsh-mnav__lab em,
.tgsh-mnav__lab strong{
  display:block;max-width:100%;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tgsh-mnav__lab em{
  font-style:normal;font-size:9.5px;line-height:1.2;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--cyan);
}
.tgsh-mnav__lab strong{ font-size:13px;line-height:1.2;font-weight:700;color:#fff }
.tgsh-mnav__ico{ color:#8AA2B6;display:flex;flex:none }
.tgsh-mnav__ico svg{ width:20px;height:20px }

/* bảng mục lục trượt lên — mobile */
.tgsh-sheet{ position:fixed;inset:0;z-index:9999;display:flex;align-items:flex-end }
.tgsh-sheet[hidden]{ display:none }
.tgsh-sheet::before{ content:"";position:absolute;inset:0;background:rgba(4,10,18,.72);opacity:0;transition:opacity .25s ease }
.tgsh-sheet.is-open::before{ opacity:1 }
.tgsh-sheet__in{
  position:relative;width:100%;max-height:82vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:#0C1A2A;border-top:1px solid var(--line-d);border-radius:20px 20px 0 0;
  padding:8px 16px calc(20px + env(safe-area-inset-bottom));
  transform:translateY(100%);transition:transform .3s cubic-bezier(.22,.8,.3,1);
}
.tgsh-sheet.is-open .tgsh-sheet__in{ transform:none }
.tgsh-sheet__top{
  display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;background:#0C1A2A;padding:12px 2px 10px;z-index:2;
  font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan);
}
.tgsh-sheet__x{ background:none;border:0;color:#8AA2B6;padding:6px;cursor:pointer;display:flex;min-width:44px;min-height:44px;align-items:center;justify-content:center }
.tgsh-sheet__x svg{ width:20px;height:20px }
.tgsh-sheet__list{ list-style:none;margin:0;padding:0 }
.tgsh-sheet__part{
  font-size:10.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#5E7A93;
  padding:16px 2px 6px;border-top:1px solid #16293B;margin-top:6px;
}
.tgsh-sheet__list>li:first-child.tgsh-sheet__part{ border-top:0;margin-top:0;padding-top:4px }
.tgsh-sheet__list a{
  display:flex;align-items:center;gap:12px;padding:13px 2px;color:#D3E0EA;text-decoration:none!important;
  border-bottom:1px solid #16293B;font-size:15px;min-height:48px;
}
.tgsh-sheet__list a em{ font-style:normal;font-size:11px;font-weight:700;letter-spacing:.08em;color:#5E7A93;min-width:22px }
.tgsh-sheet__list li.is-active a{ color:var(--cyan) }
.tgsh-sheet__list li.is-active a em{ color:var(--cyan) }

/* nút lên đầu trang */
.tgsh-top{
  position:fixed;right:16px;bottom:84px;z-index:9996;
  width:46px;height:46px;border-radius:50%;display:none;align-items:center;justify-content:center;
  background:rgba(10,20,32,.9);border:1px solid var(--line-d);color:#9FB4C6;
  text-decoration:none!important;transition:.2s ease;
}
.tgsh-top.is-on{ display:flex }
.tgsh-top:hover{ color:var(--cyan);border-color:var(--cyan) }
.tgsh-top svg{ width:19px;height:19px }

/* ---------- reveal on scroll ---------------------------------------------- */
.tgsh-reveal{ opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s cubic-bezier(.22,.8,.3,1) }
.tgsh-reveal.is-in{ opacity:1;transform:none }
.tgsh-grid .tgsh-reveal:nth-child(2),.tgsh-stats .tgsh-reveal:nth-child(2),.tgsh-steps .tgsh-reveal:nth-child(2){ transition-delay:.07s }
.tgsh-grid .tgsh-reveal:nth-child(3),.tgsh-stats .tgsh-reveal:nth-child(3),.tgsh-steps .tgsh-reveal:nth-child(3){ transition-delay:.14s }
.tgsh-grid .tgsh-reveal:nth-child(4),.tgsh-stats .tgsh-reveal:nth-child(4),.tgsh-steps .tgsh-reveal:nth-child(4){ transition-delay:.21s }
.tgsh-grid .tgsh-reveal:nth-child(5),.tgsh-steps .tgsh-reveal:nth-child(5){ transition-delay:.28s }
.tgsh-grid .tgsh-reveal:nth-child(6),.tgsh-steps .tgsh-reveal:nth-child(6){ transition-delay:.35s }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (min-width:1100px){
  .tgsh-rail{ display:block }
}
@media (max-width:1099px){
  .tgsh-mnav{ display:flex }
  /* Nút lên đầu trang cũng dời sang trái, nằm trên nút điều hướng —
     cạnh phải để trống cho nút Zalo / gọi của website. */
  .tgsh-top{ left:14px;right:auto;bottom:82px;width:42px;height:42px }
  .tgsh{ --r:14px }
  /* chừa chỗ cho nút điều hướng nổi */
  .tgsh-contact{ padding-bottom:calc(var(--pad) + 60px) }
}
@media (max-width:1024px){
  .tgsh-grid--4{ grid-template-columns:repeat(2,1fr) }
  .tgsh-grid--5{ grid-template-columns:repeat(3,1fr) }
  .tgsh-steps{ grid-template-columns:repeat(3,1fr) }
  .tgsh-ct{ grid-template-columns:repeat(2,1fr) }
  .tgsh-stats{ grid-template-columns:repeat(2,1fr);gap:26px }
  .tgsh-devs{ grid-template-columns:repeat(3,1fr) }
  .tgsh-fams{ grid-template-columns:repeat(2,1fr) }

  /* quy trình chuyển sang đường dọc, dễ theo dõi hơn trên màn hình hẹp */
  .tgsh-journey{ grid-template-columns:1fr;gap:0 }
  .tgsh-jstep{ flex-direction:row;gap:16px;padding:0 }
  .tgsh-jtrack{ height:auto;width:46px;flex:none;flex-direction:column;align-self:stretch }
  .tgsh-jline{
    width:2px;height:50%;left:50%;right:auto;top:auto;transform:translateX(-50%);
    background-image:linear-gradient(180deg,#BBCFDE 55%,transparent 55%);background-size:2px 9px;
  }
  .tgsh-jline--in{ top:0 }
  .tgsh-jline--out{ bottom:0 }
  .tgsh-jnode{ position:absolute;top:0;left:50%;transform:translateX(-50%) }
  .tgsh-jfoot{
    top:auto;bottom:-12px;right:auto;left:50%;transform:translateX(-50%) rotate(0deg);
  }
  .tgsh-jcard{ margin-top:0;margin-bottom:16px }
  .tgsh-jstep:last-child .tgsh-jcard{ margin-bottom:0 }
}
@media (max-width:860px){
  .tgsh-grid--3{ grid-template-columns:1fr }
  .tgsh-head--split{ grid-template-columns:1fr }
  .tgsh-addr{ text-align:left }
  .tgsh-facts{ grid-template-columns:1fr;gap:18px }
  .tgsh-contact__foot>div{ text-align:left }
}
@media (max-width:680px){
  .tgsh{ --pad:44px; --gap:12px }
  .tgsh-s{ scroll-margin-top:72px }
  .tgsh-grid--2{ grid-template-columns:1fr }
  .tgsh-steps{ grid-template-columns:1fr }
  .tgsh-ct{ grid-template-columns:1fr }
  .tgsh-grid--plain{ gap:24px }

  /* chữ dễ đọc hơn trên điện thoại */
  .tgsh-lede{ font-size:16px;line-height:1.68 }
  .tgsh p:not(.tgsh-lede){ font-size:15px;line-height:1.7 }
  .tgsh h3{ font-size:18px }
  .tgsh-eyebrow{ font-size:11px;letter-spacing:.16em }

  /* 8 tiện ích: 2 cột gọn */
  .tgsh-grid--4{ grid-template-columns:repeat(2,1fr) }
  .tgsh-card--icon{ padding:16px 14px }
  .tgsh-card--icon .tgsh-num{ display:none }
  .tgsh-card--icon h3{ font-size:16px }
  .tgsh-card--icon p{ font-size:13.5px!important;line-height:1.55!important }
  .tgsh-ico{ width:36px;height:36px }

  /* công trình: 1 cột, ảnh rộng */
  .tgsh-projects{ grid-template-columns:1fr }
  .tgsh-proj__img{ aspect-ratio:16/10 }

  /* kịch bản: lướt ngang có điểm dừng, thay vì xếp chồng 5 khối cao */
  .tgsh-scenes{
    display:grid;grid-auto-flow:column;grid-auto-columns:78%;grid-template-columns:none;
    overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;
    padding-bottom:12px;margin-inline:calc(-1*clamp(16px,3vw,40px));
    padding-inline:clamp(16px,3vw,40px);
    scrollbar-width:none;
  }
  .tgsh-scenes::-webkit-scrollbar{ display:none }
  .tgsh-scenes article{
    scroll-snap-align:start;background:var(--card);border:1px solid var(--line-l);
    border-radius:var(--r);padding:16px 16px 18px;
  }
  .tgsh-tick{ top:16px;left:16px }
  .tgsh-scenes article{ padding-top:32px }

  /* ---- Hero căn giữa, nút gọn lại ---- */
  .tgsh-hero .tgsh-wrap{ text-align:center;align-items:center }
  .tgsh-hero__brand{ display:flex;justify-content:center;width:100% }
  .tgsh-logo--hero{ width:min(230px,66vw) }
  .tgsh-hero__body{ width:100% }
  .tgsh-hero .tgsh-eyebrow{ justify-content:center }
  .tgsh-hero .tgsh-lede{ margin-inline:auto;max-width:36ch }
  .tgsh-hero__cta{ justify-content:center;gap:10px;margin-top:22px }
  .tgsh-hero__cta .tgsh-btn{ flex:0 1 auto;min-width:0;padding:0 18px;font-size:14px }

  /* ---- Thẻ thương hiệu ---- */
  .tgsh-idcard{ flex-direction:column;align-items:center;text-align:center;gap:16px;padding:20px 18px;width:100% }
  .tgsh-idcard__brand{ flex-direction:column;gap:10px }
  .tgsh-idcard__mark{ width:54px;height:54px }
  .tgsh-idcard .tgsh-kicker{ text-align:center }
  .tgsh-pills{ justify-content:center;gap:7px }
  .tgsh-pills li{ font-size:11px;padding:6px 12px 6px 7px }

  .tgsh-card--check{ flex-direction:row }

  /* ---- Hệ sinh thái: thiết bị 2 cột, tab lướt ngang ---- */
  .tgsh-devs{ grid-template-columns:repeat(2,1fr) }
  .tgsh-dev__body{ padding:12px 13px 14px }
  .tgsh-dev__body h4{ font-size:14.5px }
  .tgsh-devhead{ flex-direction:column;align-items:stretch }
  .tgsh-swipe--tabs{ margin-inline:calc(-1*clamp(16px,3vw,40px)) }
  .tgsh-filters{
    padding-inline:clamp(16px,3vw,40px);
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
  }
  .tgsh-filters::-webkit-scrollbar{ display:none }
  .tgsh-filter{ flex:none }
  .tgsh-swipe--tabs .tgsh-swipefoot{ display:none!important }

  .tgsh-catnote{ grid-template-columns:1fr;gap:18px;padding:20px }
  .tgsh-catnote__nums{ flex-direction:row;flex-wrap:wrap;gap:18px 28px }
  .tgsh-catnote__nums div{ flex-direction:column;align-items:flex-start;gap:2px }
  .tgsh-catnote__nums span{ max-width:22ch }

  /* ---- Gợi ý vuốt + thanh chỉ báo ---- */
  .tgsh-hint{ display:flex }
  .tgsh-swipefoot{ display:flex }
}
@media (max-width:420px){
  .tgsh-grid--4{ grid-template-columns:1fr }
  .tgsh-mnav{ max-width:calc(100vw - 86px) }
  .tgsh-hero__cta{ flex-direction:column;align-items:center }
  .tgsh-hero__cta .tgsh-btn{ width:auto;min-width:244px;max-width:100% }
  .tgsh-devs{ gap:10px }
  .tgsh-dev__body p{ font-size:12px!important }
}

/* ---------- tôn trọng lựa chọn giảm chuyển động --------------------------- */
@media (prefers-reduced-motion:reduce){
  .tgsh *,.tgsh *::before,.tgsh *::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .tgsh-reveal{ opacity:1;transform:none }
}

/* ---------- in ra giấy / PDF ---------------------------------------------- */
@media print{
  .tgsh-rail,.tgsh-mnav,.tgsh-sheet,.tgsh-progress,.tgsh-top,.tgsh-scrollcue{ display:none!important }
  .tgsh-reveal{ opacity:1!important;transform:none!important }
  .tgsh-s{ break-inside:avoid;margin:0;padding:24px 0 }
  .tgsh-s--dark{ background:#0A1420!important;-webkit-print-color-adjust:exact;print-color-adjust:exact }
}