/* Landing page Thang máy Canny – PNT Việt Nam (v2, order "LDP Canny" 07/10/2026). Trang tĩnh, theo style website PNT. */

/* ---------- Be Vietnam Pro, self-hosted (SIL OFL 1.1, ../fonts/OFL.txt) ---------- */
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/be-vietnam-pro-vietnamese-400-normal.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/be-vietnam-pro-vietnamese-500-normal.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/be-vietnam-pro-vietnamese-600-normal.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/be-vietnam-pro-vietnamese-700-normal.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/be-vietnam-pro-vietnamese-800-normal.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/be-vietnam-pro-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/be-vietnam-pro-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/be-vietnam-pro-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/be-vietnam-pro-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/be-vietnam-pro-latin-ext-800-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/be-vietnam-pro-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/be-vietnam-pro-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/be-vietnam-pro-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/be-vietnam-pro-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/be-vietnam-pro-latin-800-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- Tokens: hình khối và màu đỏ của website PNT (theme pnt, design.css); các màu xanh theo cover Canny ----------
   13/10/2026: Sơn chọn màu xanh trời trên cover website Canny ("Elevators lift your dreams", vùng khoanh đỏ) = #0896D7;
   các dải xanh chạy từ xanh đậm phía trên cover (#0063C0) sang #0896D7 – sáng hơn bản 12/10 (xanh logo #00419A, "tối quá").
   Vàng chấm logo Canny #FFD400 cho điểm nhấn số liệu trên nền xanh. */
:root {
  --pnt-red-primary: #D93645;
  --pnt-red-hover: #C62839;
  --pnt-red-soft: #FDE9EB;
  --pnt-bg-blue-strong: #0873C4;   /* chữ / biểu tượng xanh trên nền trắng (đủ tương phản 4.5:1) */
  --pnt-bg-blue-main: #2FA0DE;
  --pnt-bg-blue-soft: #7CC4EE;
  --pnt-bg-blue-light: #BCE0F6;
  --pnt-bg-blue-pale: #E4F3FC;
  --pnt-text-blue: #0B3A72;
  --pnt-text-body: #22324A;
  --pnt-text-muted: #5B6E84;
  --pnt-off-white: #F3F9FD;
  --pnt-border: #DCECF7;
  --pnt-frame: #BEDCF1;
  --pnt-blue-deep: #0063C0;
  --canny-blue: #0896D7;
  --canny-bright: #3CB4EE;
  --canny-yellow: #FFD400;
  /* nền các dải xanh (tháp thử, chỉ số, hạ tầng, dịch vụ): như bầu trời cover Canny, đậm phía trái, sáng dần sang phải */
  --band-bg: radial-gradient(90% 140% at 100% 0%, rgba(150, 220, 255, .5) 0%, rgba(150, 220, 255, 0) 62%), linear-gradient(135deg, #0063C0 0%, #0A82D2 45%, var(--canny-blue) 75%, #2DAAE8 100%);
  --zalo: #0068FF;
  --shadow: 0 1px 2px rgba(0, 90, 160, .04), 0 8px 28px rgba(0, 90, 160, .07);
  --shadow-hover: 0 4px 10px rgba(0, 90, 160, .07), 0 20px 42px rgba(0, 90, 160, .12);
  --header-h: 76px;
  --header-h-compact: 60px;
  --gutter: clamp(16px, 3.6vw, 48px);
  --container: 1280px;
  --font: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
@media (max-width: 1180px) { :root { --header-h: 64px; --header-h-compact: 60px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.65; color: var(--pnt-text-body); background: #fff; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--pnt-bg-blue-strong); outline-offset: 3px; }
main section[id], [id="dich-vu"] { scroll-margin-top: var(--header-h-compact); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 1.2em; height: 1.2em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 200; padding: 10px 16px; background: var(--pnt-text-blue); color: #fff; font-weight: 600; }
.skip-link:focus { top: 12px; }
.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.section { position: relative; padding-block: clamp(56px, 8vh, 96px); }
.section--gray { background: var(--pnt-off-white); }

/* ---------- Chữ ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 12px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--pnt-red-hover); }
.eyebrow::before { content: ""; width: 28px; height: 3px; background: var(--pnt-red-primary); transform: skewX(-30deg); flex: none; }
.eyebrow--light { color: #fff; }
.section__title { font-size: clamp(24px, 2.4vw, 34px); line-height: 1.22; font-weight: 800; letter-spacing: -.01em; color: var(--pnt-text-blue); text-wrap: balance; }
.section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 32px; margin-bottom: clamp(18px, 3.4vh, 36px); }
.section__head .eyebrow { margin-bottom: 10px; }
@media (max-width: 640px) { .section__head { flex-direction: column; align-items: flex-start; gap: 10px; } }

/* ---------- Nút: góc cắt xiên như website PNT ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 11px 28px; border: 0; font-size: 15px; font-weight: 700; letter-spacing: .01em; line-height: 1.2; text-align: center;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); transition: background-color .2s, color .2s, transform .2s; }
.btn .ico { width: 17px; height: 17px; transition: transform .2s; }
.btn:hover { transform: translateY(-1px); }
.btn:hover .ico { transform: translateX(2px); }
.btn--sm { min-height: 40px; padding: 8px 18px; font-size: 13.5px; clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 11px 100%, 0 calc(100% - 11px)); }
.btn--primary { background: var(--pnt-red-primary); color: #fff; }
.btn--primary:hover { background: var(--pnt-red-hover); }
.btn--light { background: #fff; color: var(--pnt-text-blue); }
.btn--light:hover { background: var(--pnt-bg-blue-pale); }
.btn--ghost { isolation: isolate; background: var(--pnt-text-blue); color: var(--pnt-text-blue); }
.btn--ghost::before { content: ""; position: absolute; inset: 1.5px; z-index: -1; background: #fff; transition: background-color .2s;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); }
.btn--ghost:hover::before { background: var(--pnt-bg-blue-pale); }
.link-more { display: inline-flex; align-items: center; gap: 6px; padding: 0 0 3px; border: 0; border-bottom: 2px solid var(--pnt-bg-blue-strong); background: none; font-size: 13px; font-weight: 600; color: var(--pnt-bg-blue-strong); white-space: nowrap; transition: color .2s, border-color .2s; }
.link-more .ico { width: 15px; height: 15px; transition: transform .2s; }
.link-more:hover { color: var(--pnt-red-primary); border-color: var(--pnt-red-primary); }
.link-more:hover .ico { transform: translateX(3px); }

/* ---------- Header (website PNT) ---------- */
/* Header thu gọn (76 → 60px) khi cuộn quá 10px. Trước đây việc thu gọn kéo cả trang lên 16px, Chrome cuộn bù (scroll
   anchoring) về dưới 10px, header to lại… trang dừng gần đầu thì header nháy liên tục (video Sơn 12/10/2026, cùng lỗi
   trang chủ PNT đã sửa ở theme 0.7.2). Header thu gọn giữ chỗ bằng margin dưới đúng phần đã thu, nên nội dung không dịch. */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .97); backdrop-filter: blur(8px); border-bottom: 1px solid var(--pnt-border); transition: box-shadow .25s, margin-bottom .25s; }
.site-header.is-compact { margin-bottom: calc(var(--header-h) - var(--header-h-compact)); box-shadow: 0 6px 24px rgba(0, 72, 150, .1); }
.header__inner { display: flex; align-items: center; gap: 28px; height: var(--header-h); transition: height .25s; }
.site-header.is-compact .header__inner { height: var(--header-h-compact); }
.brand { display: flex; align-items: center; gap: 14px; flex: none; }
.brand__pnt { width: auto; height: 46px; transition: height .25s; }
/* logo Canny to ngang logo PNT (phản hồi Canny 12/10/2026; trước cao 19px, rộng bằng 85% logo PNT) */
.brand__canny { width: auto; height: 27px; transition: height .25s; }
.brand__sep { width: 1px; height: 34px; background: var(--pnt-frame); }
.site-header.is-compact .brand__pnt { height: 38px; }
.site-header.is-compact .brand__canny { height: 23px; }
.nav { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.nav__list { display: flex; gap: 2px; }
.nav__link { position: relative; display: block; padding: 10px 12px; font-size: 13.5px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; color: var(--pnt-text-blue); transition: color .2s; }
.nav__link::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 3px; background: var(--pnt-red-primary); transform: scaleX(0) skewX(-30deg); transform-origin: left; transition: transform .25s; }
.nav__link:hover { color: var(--pnt-red-primary); }
.nav__link.is-active { font-weight: 700; }
.nav__link.is-active::after, .nav__link:hover::after { transform: scaleX(1) skewX(-30deg); }
.nav__cta { display: none; }
.lang { position: relative; isolation: isolate; display: flex; align-items: center; height: 36px; padding: 0 5px; background: var(--pnt-frame);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)); }
.lang::before { content: ""; position: absolute; inset: 1px; z-index: -1; background: #fff; clip-path: polygon(0 0, calc(100% - 7.4px) 0, 100% 7.4px, 100% 100%, 7.4px 100%, 0 calc(100% - 7.4px)); }
.lang__btn { padding: 4px 8px; border: 0; background: none; font-size: 13px; font-weight: 600; line-height: 1.25; color: var(--pnt-text-muted); transition: color .2s; }
.lang__btn + .lang__btn { border-left: 1px solid var(--pnt-border); }
.lang__btn:hover { color: var(--pnt-text-blue); }
.lang__btn.is-active { color: var(--pnt-red-primary); font-weight: 700; }
.hotline { display: flex; align-items: center; gap: 10px; flex: none; color: var(--pnt-red-primary); }
.hotline__icon { display: grid; place-items: center; width: 34px; height: 34px; border: 1.5px solid var(--pnt-red-primary); border-radius: 50%; transition: background-color .2s, color .2s; }
.hotline__icon .ico { width: 16px; height: 16px; }
.hotline:hover .hotline__icon { background: var(--pnt-red-primary); color: #fff; }
.hotline__text { display: flex; flex-direction: column; line-height: 1.15; }
.hotline__label { font-size: 11px; font-weight: 500; color: var(--pnt-text-muted); }
.hotline__number { font-size: 17px; font-weight: 800; white-space: nowrap; }
.site-header.is-compact .hotline__label { display: none; }
.nav-toggle { display: none; flex-direction: column; justify-content: space-between; width: 42px; height: 42px; padding: 11px 10px; border: 1px solid var(--pnt-border); border-radius: 6px; background: #fff; }
.nav-toggle span { display: block; height: 2px; background: var(--pnt-text-blue); transition: transform .25s, opacity .25s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
@media (max-width: 1366px) {
  .header__inner { gap: 20px; }
  .brand__pnt { height: 40px; }
  .brand__canny, .site-header.is-compact .brand__canny { height: 23px; }
  .nav { gap: 14px; }
  .nav__link { padding-inline: 9px; font-size: 13px; }
  .nav__link::after { left: 9px; right: 9px; }
}
@media (min-width: 1181px) and (max-width: 1240px) {   /* laptop hẹp: menu + logo + hotline vừa khung (trước lấn lề phải 26px ở 1181px) */
  .brand__canny, .site-header.is-compact .brand__canny { height: 20px; }
  .nav__link { padding-inline: 7px; }
  .nav__link::after { left: 7px; right: 7px; }
}
@media (max-width: 1180px) {
  .nav-toggle { display: flex; margin-left: 4px; }
  .hotline { margin-left: auto; }
  .nav { position: fixed; inset: var(--header-h) 0 auto 0; flex-direction: column; align-items: stretch; gap: 14px; margin: 0; padding: 8px var(--gutter) 20px; background: #fff; border-bottom: 1px solid var(--pnt-border); box-shadow: 0 20px 40px -20px rgba(0, 72, 150, .35);
    opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .2s, transform .2s, visibility .2s; max-height: calc(100vh - var(--header-h)); overflow-y: auto; }
  .site-header.is-compact .nav { inset: var(--header-h-compact) 0 auto 0; }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav__list { flex-direction: column; }
  .nav__link { padding: 13px 2px; border-bottom: 1px solid var(--pnt-border); font-size: 14px; }
  .nav__link::after { display: none; }
  .lang { align-self: flex-start; height: 40px; }
  .lang__btn { padding: 6px 12px; font-size: 14px; }
  .nav__cta { display: inline-flex; }
}
@media (max-width: 560px) {
  .header__inner { gap: 10px; }
  .brand { gap: 10px; }
  .brand__pnt, .site-header.is-compact .brand__pnt { height: 32px; }
  .brand__canny, .site-header.is-compact .brand__canny { height: 18px; }
  .brand__sep { height: 24px; }
  .hotline__text { display: none; }
  .hotline__icon { width: 40px; height: 40px; }
}
@media (max-width: 374px) {
  .brand { gap: 8px; }
  .brand__pnt, .site-header.is-compact .brand__pnt { height: 26px; }
  .brand__canny, .site-header.is-compact .brand__canny { height: 14px; }
  .brand__sep { height: 20px; }
  .hotline__icon { width: 36px; height: 36px; }
  .nav-toggle { width: 40px; height: 40px; padding: 10px 9px; }
}

/* ---------- 1. Hero: slider tràn màn hình như trang chủ PNT ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: var(--pnt-blue-deep); height: calc(100vh - var(--header-h)); min-height: 520px; max-height: 900px; padding: 0; }
.hero__slides { position: absolute; inset: 0; z-index: 0; }
.hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; }
.hero__slide.is-active { opacity: 1; }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__slide.is-active .hero__img { animation: heroZoom 9s ease-out both; }
@keyframes heroZoom { from { transform: scale(1.07); } to { transform: scale(1); } }
/* 16/10 (Sơn): bỏ lớp phủ màu trên ảnh hero cho sáng hơn – chữ đọc được nhờ bóng chữ (như slide ảnh sáng của trang chủ PNT) */
@media (min-width: 768px) { .hero__slide[data-tone="bright"] .hero__img { object-position: 50% 0; } }   /* màn rộng cắt bớt đáy ảnh, không cắt đầu: người đứng thấp xuống, tiêu đề không đè lên mặt */
.hero__ghost { position: absolute; left: 50%; top: 44%; z-index: 1; margin: 0; transform: translate(-50%, -50%); font-size: clamp(80px, 15vw, 260px); font-weight: 800; line-height: 1; letter-spacing: .04em; white-space: nowrap; color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .16); pointer-events: none; user-select: none; }
.hero__ghost { transition: opacity .6s; }
.hero[data-slide="2"] .hero__ghost, .hero[data-slide="3"] .hero__ghost { opacity: 0; }   /* chữ chìm chỉ ở slide 1: slide 2, 3 ảnh đã có chữ / người */
.hero__captions { position: absolute; inset: 0; z-index: 2; }
.hero__caption { position: absolute; inset: 0; display: flex; align-items: center; opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s; }
.hero__caption.is-active { opacity: 1; visibility: visible; }
.hero__row { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding-bottom: 48px; }
.hero__copy { max-width: 760px; }   /* đủ để mỗi dòng tiêu đề nằm trên 1 hàng: dòng dài nhất ("Showroom thang máy") rộng 713px ở cỡ chữ lớn nhất */
.hero__copy > * { opacity: 0; transform: translateX(-40px); transition: opacity .7s ease, transform .9s cubic-bezier(.2, .7, .2, 1); }
.hero__caption.is-in .hero__copy > * { opacity: 1; transform: none; }
.hero__caption.is-in .hero__copy > :nth-child(2) { transition-delay: .1s; }
.hero__caption.is-in .hero__copy > :nth-child(3) { transition-delay: .2s; }
.hero__caption.is-in .hero__copy > :nth-child(4) { transition-delay: .3s; }
.hero .eyebrow { margin-bottom: 14px; text-shadow: 0 0 2px rgba(0, 30, 70, .85), 0 1px 3px rgba(0, 30, 70, .75), 0 0 16px rgba(0, 30, 70, .7); }
/* line-height 1.22 + khoảng giữa 2 dòng: dấu tiếng Việt chồng (Ấ, Ợ, Ố, Ế) không chạm dấu nặng dòng trên (phản hồi Canny: "2 dòng bị dính nhau") */
/* cỡ chữ như trang chủ PNT (design.css: 29px / 3.2vw / 50px) – phản hồi Canny 13/10: "text đang hơi to" */
.hero__title { font-size: clamp(29px, 3.2vw, 50px); line-height: 1.22; font-weight: 800; letter-spacing: -.02em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 2px rgba(0, 30, 70, .5), 0 2px 18px rgba(0, 30, 70, .45); }
.hero__line { display: block; }
.hero__line + .hero__line { margin-top: .14em; }
.hero__title-red { color: var(--pnt-red-primary); }   /* cùng màu đỏ nút CTA (phản hồi Canny 14/10) */
.hero__desc { margin-top: 16px; max-width: 460px; font-size: 14.5px; font-weight: 600; color: #fff; text-shadow: 0 0 2px rgba(0, 30, 70, .85), 0 1px 3px rgba(0, 30, 70, .75), 0 0 16px rgba(0, 30, 70, .7); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
/* cỡ nút như CTA hero trang chủ PNT (design.css: btn--sm 42px, chữ 11,2px, lề 15px) – phản hồi Canny 14/10 */
.hero__actions .btn { min-height: 42px; padding: 9px 15px; gap: 6px; font-size: 11.2px;
  clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 11px 100%, 0 calc(100% - 11px)); }
.hero__actions .btn .ico { width: 14px; height: 14px; }
.hero__seals { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.hero__seals li { display: flex; flex-direction: column; justify-content: center; min-width: 86px; padding: 9px 14px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .32); backdrop-filter: blur(4px);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); }
.hero__seals b { font-size: 20px; font-weight: 800; line-height: 1.1; }
.hero__seals span { font-size: 11.5px; color: rgba(255, 255, 255, .85); }
.hero__nav { position: absolute; left: 0; right: 0; bottom: clamp(18px, 4vh, 40px); z-index: 3; display: flex; align-items: center; justify-content: center; gap: 18px; }
.hero__arrow { display: grid; place-items: center; width: 33px; height: 33px; border: 0; color: #fff; background: rgba(255, 255, 255, .18); transition: background-color .2s;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)); }
.hero__arrow .ico { width: 16px; height: 16px; }
.hero__arrow:hover { background: var(--pnt-red-primary); }
.hero__dots { display: flex; gap: 10px; }
.hero__dot { width: 34px; height: 4px; padding: 0; border: 0; background: rgba(255, 255, 255, .85); transform: skewX(-30deg); box-shadow: 0 1px 3px rgba(0, 0, 0, .28); transition: background-color .2s, width .2s; }
.hero__dot.is-active { width: 52px; background: var(--pnt-red-primary); }
@media (max-width: 767px) {
  .hero { height: auto; min-height: calc(100svh - var(--header-h) - 58px); max-height: none; }
  /* điện thoại: chữ nằm trên phần dưới ảnh – giữ một dải mờ nhẹ ở đáy (nhạt hơn nhiều bản cũ) để chữ đọc được */
  .hero__slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 50, 110, .62) 0%, rgba(0, 50, 110, .32) 34%, rgba(0, 50, 110, 0) 62%); }
  .hero__caption { align-items: flex-end; }
  .hero__row { padding-bottom: 76px; }
  .hero__title { font-size: clamp(19px, calc((100vw - 32px) / 13.5), 27px); }   /* như PNT (≤ 27px); theo bề ngang màn để mỗi dòng vừa 1 hàng */
  .hero__desc { font-size: 13.5px; }
  .hero__actions { flex-wrap: nowrap; gap: 8px; }
  .hero__actions .btn { flex: 0 1 auto; min-height: 38px; padding-inline: 12px; font-size: 11.5px; white-space: nowrap; }
  .hero__seals li { min-width: 0; flex: 1 1 28%; padding: 7px 10px; }
  .hero__seals b { font-size: 16px; }
  .hero__ghost { top: 26%; }
}
/* Slide 2 = cover Canny: ảnh đã có chữ – không lớp phủ trái, chỉ một dải mờ ở đáy cho nút chuyển slide trên nền mây trắng */
.hero__slide[data-tone="cover"]::after { content: none; }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- 2. Về Canny: video tự chạy + chỉ số ---------- */
.about__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.about__copy .section__title { margin-bottom: 14px; }
.about__copy p:not(.eyebrow) { color: var(--pnt-text-body); }
.about__video { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--pnt-blue-deep); box-shadow: var(--shadow);
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%); }
.about__video img, .about__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.about__video::after { content: ""; position: absolute; left: 0; bottom: 0; width: 40px; height: 40px; background: var(--pnt-red-primary); clip-path: polygon(0 0, 100% 100%, 0 100%); pointer-events: none; }
/* Dải chỉ số: nền xanh Canny, số trắng cỡ lớn, đơn vị vàng logo; từng ô trồi lên lần lượt, số đếm lên, vệt sáng lướt qua
   (phản hồi Canny 12/10/2026: "hiệu ứng thông số chưa nổi bật"). */
/* Cỡ số theo bề rộng dải (cqi), không theo bề rộng màn: số dài nhất "840.000 m²" (cột 4, rộng hơn) luôn nằm gọn trong ô.
   Dòng font-size đầu là dự phòng cho trình duyệt chưa hỗ trợ container query. */
.kpi { container-type: inline-size; position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.35fr) repeat(3, minmax(0, 1fr)); margin-top: clamp(22px, 4.6vh, 52px); padding: clamp(14px, 2.4vh, 22px) 6px clamp(16px, 2.6vh, 24px); overflow: hidden; color: #fff; background: var(--band-bg);
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px)); }
.kpi::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, .26) 50%, rgba(255, 255, 255, 0) 65%); transform: translateX(-100%); }
.kpi.is-counted::before { animation: kpiShine 1.8s .5s ease-out; }
@keyframes kpiShine { to { transform: translateX(100%); } }
.kpi::after { content: ""; position: absolute; right: 0; bottom: 0; width: 34px; height: 34px; background: var(--pnt-red-primary); clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.kpi__item { position: relative; padding: 4px 14px 12px; border-left: 1px solid rgba(255, 255, 255, .2); transition: opacity .55s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.kpi__item:first-child { border-left: 0; }
.js .kpi__item { opacity: 0; transform: translateY(18px); }
.js .kpi.is-counted .kpi__item { opacity: 1; transform: none; }
.kpi__item::after { content: ""; position: absolute; left: 14px; bottom: 0; width: 0; height: 3px; background: var(--canny-yellow); transform: skewX(-30deg); transition: width .9s .5s cubic-bezier(.2, .7, .2, 1); }
.kpi.is-counted .kpi__item::after { width: 30px; }
.kpi__value { display: flex; align-items: baseline; gap: 2px; font-size: clamp(20px, 1.9vw, 30px); font-size: clamp(22px, 2.9cqi, 38px); line-height: 1.05; font-weight: 800; font-style: italic; letter-spacing: -.02em; white-space: nowrap; font-variant-numeric: tabular-nums; text-shadow: 0 2px 14px rgba(0, 45, 100, .35); }
.kpi__value small { margin-left: 3px; font-size: .5em; font-style: normal; font-weight: 700; letter-spacing: 0; color: var(--canny-yellow); }
.kpi__value i { font-style: italic; color: var(--canny-yellow); }
.kpi__value.is-pop { animation: kpiPop .6s cubic-bezier(.2, .7, .2, 1); }
@keyframes kpiPop { 40% { transform: scale(1.12); color: var(--canny-yellow); } }
.kpi__value { transform-origin: 0 80%; transition: transform .3s cubic-bezier(.2, .7, .2, 1), color .3s; }
@media (hover: hover) {
  .kpi__item:hover .kpi__value { transform: translateY(-3px) scale(1.07); color: var(--canny-yellow); }
  .kpi.is-counted .kpi__item:hover::after { width: 58px; transition-delay: 0s; }
}
.kpi__label { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.35; color: rgba(255, 255, 255, .86); }
@media (max-width: 1080px) { .kpi { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 18px; } .kpi__item:nth-child(5) { border-left: 0; } .kpi__value { font-size: clamp(18px, 1.9vw, 26px); font-size: clamp(18px, 3.6cqi, 34px); } }
@media (max-width: 860px) { .about__grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-inline: 2px; } .kpi__item:nth-child(odd) { border-left: 0; } .kpi__item:nth-child(even) { border-left: 1px solid rgba(255, 255, 255, .2); } .kpi__value { font-size: 22px; font-size: clamp(20px, 7.2cqi, 28px); } }

/* ---------- 3. Công nghệ: tháp thử + R&D + chứng nhận ---------- */
.tech__grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 24px; align-items: stretch; }
.tower { position: relative; isolation: isolate; display: grid; grid-template-areas: "tabs" "scene"; grid-template-rows: auto 1fr; gap: 12px; padding: 18px 30px 26px; overflow: hidden; color: #fff; background: var(--band-bg);
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 28px 100%, 0 calc(100% - 28px)); }
.tower::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .55; background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px); background-size: 40px 40px; }
.tower::after { content: ""; position: absolute; right: 0; bottom: 0; width: 46px; height: 46px; background: var(--pnt-red-primary); clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.tower__tabs { grid-area: tabs; justify-self: start; display: flex; gap: 2px; padding: 3px; background: rgba(255, 255, 255, .16);
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px)); }
.tower__tab { padding: 6px 14px; border: 0; background: none; font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, .88); transition: background-color .2s, color .2s;
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px)); }
.tower__tab:hover { color: #fff; background: rgba(255, 255, 255, .14); }
.tower__tab.is-active { color: var(--pnt-text-blue); background: #fff; }
.tower__scene { grid-area: scene; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: center; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .45s, visibility .45s, transform .45s; }
.tower__scene.is-active { opacity: 1; visibility: visible; transform: none; }
.tower__svg { width: auto; height: clamp(220px, calc(100vh - 420px), 400px); cursor: pointer; }
/* Thang cuốn ngoài trời: hình nằm ngang ở trên, số liệu ở dưới */
.tower__scene--esc { grid-template-columns: minmax(0, 1fr); align-content: center; gap: 8px; }
.esc__svg { width: 100%; height: clamp(140px, calc(100vh - 480px), 250px); cursor: pointer; }
.esc__sky circle, .esc__sky path { fill: none; stroke: rgba(255, 226, 110, .8); stroke-width: 1.4; stroke-linecap: round; }
.esc__sky path:last-child { stroke: rgba(255, 255, 255, .5); }
.esc__panel { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 2px 26px; }
.esc__panel .tower__label { flex-basis: 100%; }
.esc__panel .tower__num { margin: 0; }
.esc__panel .tower__meters { margin: 0 0 8px; }
.esc__panel .btn { margin: 0 0 8px auto; }
.tower__frame path, .tower__dim { fill: none; stroke: rgba(219, 235, 247, .6); stroke-width: 1.3; }
.tower__dim { stroke: rgba(255, 138, 148, .85); stroke-dasharray: 3 4; }
/* vật chạy: lớp HTML riêng, chỉ đổi transform mỗi khung hình (card đồ hoạ tự chạy, không vẽ lại) – 16/10 hết giật trên máy yếu */
.tower__fig { position: relative; display: block; width: max-content; max-width: 100%; line-height: 0; cursor: pointer; }
.tower__fig.esc__fig { width: 100%; }
.tower__mover { position: absolute; left: 0; top: 0; width: 0; height: 0; border-radius: 2px; background: var(--pnt-red-primary); box-shadow: 0 0 8px rgba(217, 54, 69, .9); will-change: transform; pointer-events: none; }
.esc__rider { border-radius: 3px; }
.tower__label { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pnt-bg-blue-light); }
.tower__label .ico { width: 18px; height: 18px; }
.tower__num { margin: 4px 0 10px; font-size: clamp(56px, 6vw, 92px); font-weight: 800; font-style: italic; line-height: .95; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.tower__num small { font-size: .4em; font-style: normal; color: #FF8A94; }
/* số đổi liên tục khi chạy: ô cố định bề rộng nên chữ bên cạnh không xê dịch */
[data-tower-h], [data-esc-h], [data-tower-t] { display: inline-block; text-align: right; }
[data-tower-h] { min-width: 3ch; }
[data-esc-h] { min-width: 2ch; }
[data-tower-t] { min-width: 3.4ch; }
.tower__meters { display: flex; gap: 22px; margin: 0 0 12px; }
.tower__meters dt { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--pnt-bg-blue-light); }
.tower__meters dd { margin: 0; font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tower__sub { max-width: 34ch; margin-bottom: 16px; font-size: 13.5px; line-height: 1.55; color: rgba(255, 255, 255, .88); }
.tower .btn--ghost { color: var(--pnt-text-blue); }
.tower .btn--ghost .ico { width: 14px; height: 14px; }
.tower__scene.is-running .btn--ghost { pointer-events: none; opacity: .7; }
.tech__side { display: grid; grid-template-rows: auto 1fr; gap: 18px; min-width: 0; }
.rnd { display: grid; grid-template-columns: 42% minmax(0, 1fr); overflow: hidden; background: #fff; border: 1px solid var(--pnt-border); clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); }
.rnd img { width: 100%; height: 100%; object-fit: cover; object-position: 28% 40%; }   /* ảnh ngang: khung giữ 2 kỹ sư + bo mạch */
.rnd__body { padding: 18px 22px 18px; }
.rnd__label { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pnt-red-hover); }
.rnd__label .ico { width: 18px; height: 18px; }
.rnd h3 { font-size: 18px; line-height: 1.3; font-weight: 800; color: var(--pnt-text-blue); }
.rnd__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin-top: 12px; }
.rnd__facts li { display: flex; flex-direction: column; padding-left: 10px; border-left: 2px solid var(--pnt-bg-blue-light); font-size: 12.5px; line-height: 1.35; color: var(--pnt-text-body); }
.rnd__facts b { font-size: 19px; line-height: 1.15; font-weight: 800; font-style: italic; color: var(--canny-blue); }
.rnd__facts li:last-child { grid-column: 1 / -1; border-left-color: var(--pnt-red-primary); }
.certs { position: relative; isolation: isolate; display: flex; flex-direction: column; container-type: inline-size; padding: 16px 20px 18px; background: #fff; border: 1px solid var(--pnt-border); clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); }
.certs__title { margin-bottom: 12px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pnt-text-blue); }
/* 7 chứng nhận (Top 10 đứng đầu); cột tự chia theo số nút đang hiện – nút Top 10 ẩn khi chưa có ảnh bản 2026 */
/* 15/10 (Sơn): ô chữ nhật dọc lấp phần còn lại của khung; mọi ô cùng bố cục nên biểu tượng, tên, dòng phụ thẳng hàng */
.certs__list { flex: 1; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; min-height: 112px; }
.cert { display: flex; }
.cert__btn { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; width: 100%; min-height: 112px; padding: 14px 4px 10px; border: 0; background: var(--pnt-frame); text-align: center; transition: transform .2s;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); }
.cert__btn::before { content: ""; position: absolute; inset: 1px; z-index: -1; background: var(--pnt-off-white); transition: background-color .2s; clip-path: polygon(0 0, calc(100% - 9.4px) 0, 100% 9.4px, 100% 100%, 9.4px 100%, 0 calc(100% - 9.4px)); }
.cert__ico { width: 22px; height: 22px; margin-bottom: 4px; color: var(--canny-blue); }
.cert__btn--top .cert__ico { color: var(--pnt-red-primary); }
.cert__btn b { font-size: clamp(12px, 2.5cqi, 17px); font-weight: 800; line-height: 1.15; color: var(--pnt-text-blue); white-space: nowrap; transition: color .2s; }
.cert__btn span { font-size: 11px; line-height: 1.3; color: var(--pnt-text-muted); }
.cert__more { display: inline-flex; align-items: center; gap: 3px; margin-top: auto; padding-top: 6px; font-size: 11px; font-style: normal; font-weight: 700; color: var(--pnt-bg-blue-strong); opacity: .75; transition: opacity .2s, color .2s; }
.cert__more .ico { width: 12px; height: 12px; }
.cert__btn:hover .cert__more, .cert__btn.is-active .cert__more { opacity: 1; color: var(--pnt-red-primary); }
.cert__btn--top b { color: var(--pnt-red-primary); }
@media (hover: hover) { .cert__btn:hover { transform: translateY(-2px); } }
.cert__btn:hover::before, .cert__btn.is-active::before { background: #fff; }
.cert__btn.is-active { background: var(--canny-blue); }
.cert__btn:hover b, .cert__btn.is-active b { color: var(--pnt-red-primary); }
/* Ảnh chứng nhận hiện to trong khung tháp thử: rê chuột vào tên thì hiện, rời chuột thì tắt (phản hồi Canny 12/10/2026) */
.tower__cert { position: absolute; inset: 0; z-index: 5; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: minmax(0, 100%); align-items: center; gap: 24px; margin: 0; padding: 22px 30px; background: var(--band-bg);
  opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
.tower__cert.is-on { opacity: 1; visibility: visible; }
.tower__cert[hidden] { display: none; }
.tower__cert img { width: auto; height: 100%; max-height: 100%; padding: 8px; background: #fff; box-shadow: 0 24px 50px -18px rgba(0, 16, 42, .65); transform: scale(.94); transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.tower__cert.is-on img { transform: none; }
.tower__cert figcaption { display: flex; flex-direction: column; gap: 6px; }
.tower__cert-code { font-size: clamp(34px, 4vw, 56px); font-weight: 800; font-style: italic; line-height: 1; letter-spacing: -.02em; color: var(--canny-yellow); }
.tower__cert-name { font-size: 17px; font-weight: 700; line-height: 1.35; }
.tower__cert-region { font-size: 13px; color: rgba(255, 255, 255, .8); }
.tower__cert-close { position: absolute; right: 30px; top: 14px; display: grid; place-items: center; width: 34px; height: 34px; border: 0; color: #fff; background: rgba(255, 255, 255, .16); }
.tower__cert-close .ico { width: 18px; height: 18px; }
.tower__cert-close:hover { background: var(--pnt-red-primary); }
/* Bấm vào chứng nhận: cửa sổ ảnh lớn + giới thiệu (phản hồi Canny 14/10/2026) */
.cert__info[hidden] { display: none; }
.tower__cert.no-img img { display: none; }
.modal__box.certbox { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 28px; width: min(880px, 100%); padding: 30px 34px 32px; }
.certbox__img { display: grid; place-items: center; margin: 0; }
.certbox__img img { width: auto; max-height: min(64vh, 480px); padding: 8px; background: #fff; border: 1px solid var(--pnt-border); box-shadow: var(--shadow); }
.certbox__badge { display: grid; place-content: center; gap: 6px; width: 230px; aspect-ratio: 3 / 4; padding: 18px; text-align: center; color: #fff; background: var(--band-bg);
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); }
.certbox__badge b { font-size: 46px; font-weight: 800; font-style: italic; line-height: 1; color: var(--canny-yellow); }
.certbox__badge span { font-size: 13px; font-weight: 700; line-height: 1.4; }
.certbox__badge[hidden], .certbox__img img[hidden] { display: none; }
.certbox__body .eyebrow { margin-bottom: 8px; }
.certbox__title { font-size: 22px; line-height: 1.3; font-weight: 800; color: var(--pnt-text-blue); text-wrap: balance; }
.certbox__text { margin: 12px 0 20px; font-size: 15px; line-height: 1.65; color: var(--pnt-text-body); }
.certbox__text .cert__issuer { margin-bottom: 8px; padding-left: 10px; border-left: 3px solid var(--pnt-red-primary); font-size: 13.5px; font-weight: 700; color: var(--pnt-bg-blue-strong); }
@media (max-width: 640px) {
  .modal__box.certbox { grid-template-columns: 1fr; gap: 16px; padding: 22px 18px 24px; }
  .certbox__img img { max-height: 42vh; }
  .certbox__badge { width: 170px; }
  .certbox__title { font-size: 19px; padding-right: 36px; }
}
@media (max-width: 960px) { .tech__grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .tower { padding: 16px 20px 20px; }
  .tower__scene:not(.tower__scene--esc) { grid-template-columns: 92px minmax(0, 1fr); gap: 14px; }
  .tower__tab { padding: 6px 11px; font-size: 12.5px; }
  .tower__svg { width: 92px; height: auto; }
  .rnd { grid-template-columns: 1fr; }
  .rnd img { height: 150px; }
  .certs__list { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .esc__panel .btn { margin-left: 0; }
}

/* ---------- 4. Canny trong hạ tầng lớn: màn điểm nhấn ---------- */
/* nền xanh logo Canny, sáng hơn bản trước (phản hồi Canny 12/10/2026: "màu nền hơi tối so với màu chủ đạo của Canny") */
/* 14/10: chuyển từ xanh đậm (bên chữ) sang xanh sáng hơn hẳn (bên ảnh) – khu vực ảnh không bị tối */
.infra { overflow: hidden; isolation: isolate; color: #fff;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0) 0 58%, rgba(255, 255, 255, .08) 58% 72%, rgba(255, 255, 255, 0) 72%),
    linear-gradient(100deg, #0058B4 0%, #0A7FD0 30%, #2BA6E6 54%, #7ACEF7 78%, #B8E6FD 100%); }
.infra::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .6; background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px); background-size: 44px 44px; }
.infra::after { content: ""; position: absolute; right: 0; bottom: 0; width: 64px; height: 64px; background: var(--pnt-red-primary); clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.infra__ghost { position: absolute; left: -1vw; bottom: -.18em; z-index: -1; margin: 0; font-size: clamp(110px, 17vw, 300px); font-weight: 800; line-height: 1; letter-spacing: .02em; color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .14); pointer-events: none; user-select: none; }
.infra__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.infra .section__title { color: #fff; margin-bottom: 14px; }
.infra__copy > p:not(.eyebrow) { color: rgba(255, 255, 255, .9); font-size: 15.5px; }
/* Số liệu "woah": cỡ lớn, đếm lên, dấu + vàng logo, viền vàng chạy dọc khi đếm xong */
.infra__kpi { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: clamp(16px, 3vh, 28px); }
.infra__kpi li { position: relative; padding: 10px 14px 12px 16px; background: linear-gradient(225deg, transparent 12px, rgba(255, 255, 255, .13) 12px); }
.infra__kpi li::before { content: ""; position: absolute; left: 0; bottom: 0; width: 3px; height: 0; background: var(--canny-yellow); transition: height .9s .4s cubic-bezier(.2, .7, .2, 1); }
.infra__kpi.is-counted li::before { height: 100%; }
.infra__kpi b { display: flex; align-items: baseline; font-size: clamp(34px, 3.6vw, 58px); line-height: 1; font-weight: 800; font-style: italic; letter-spacing: -.03em; font-variant-numeric: tabular-nums; text-shadow: 0 3px 18px rgba(0, 45, 100, .4); }
.infra__kpi b i { margin-left: 2px; font-size: .7em; color: var(--canny-yellow); }
.infra__kpi li:first-child b { color: var(--canny-yellow); }
.infra__kpi li > span { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.35; color: rgba(255, 255, 255, .88); }
@media (max-width: 960px) { .infra__grid { grid-template-columns: 1fr; } }

/* ---------- Dải ảnh có mũi tên 2 bên (màn 4 hạ tầng, màn 7 công trình) ----------
   Cuộn ngang bằng scroll-snap (vuốt trên điện thoại, kéo thanh cuộn / mũi tên trên máy tính); tự chạy chậm, dừng khi rê chuột / chạm.
   --row: chiều cao 1 hàng ảnh; thẻ rộng = 1,5 lần chiều cao (ảnh nguồn ngang 3:2). */
.carousel { --row: 200px; --gap: 12px; position: relative; min-width: 0; }
.carousel__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc(var(--row) * 1.5); grid-template-rows: var(--row); gap: var(--gap); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.carousel__track::-webkit-scrollbar { display: none; }
.carousel--2rows .carousel__track { grid-template-rows: var(--row) var(--row); }
.ccard { position: relative; overflow: hidden; scroll-snap-align: start; background: var(--pnt-blue-deep); clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%); }
.ccard > a { display: block; height: 100%; color: inherit; }
.ccard img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.ccard:hover img { transform: scale(1.06); }
.ccard::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(0deg, rgba(0, 72, 150, .88) 0, rgba(0, 72, 150, .45) 38px, rgba(0, 72, 150, 0) 72px); }   /* lớp mờ thấp (14/10) */
.ccard__body { position: absolute; left: 12px; right: 12px; bottom: 10px; z-index: 2; margin: 0; color: #fff; font-size: 12.5px; line-height: 1.3; }
.ccard__body b { display: block; font-size: 13.5px; font-weight: 700; }
.ccard__body span { display: block; margin-top: 2px; font-size: 12px; font-weight: 600; color: #FFE36B; }
/* thẻ có bài viết: icon mở bài nhỏ ở góc dưới phải, chữ chừa chỗ cho icon (Sơn 15/10: bỏ nhãn "Bài viết") */
.ccard__go { position: absolute; right: 12px; bottom: 12px; z-index: 2; width: 16px; height: 16px; color: #fff; opacity: .9; transition: transform .25s, color .25s; }
.ccard > a .ccard__body { right: 36px; }
.ccard > a:hover .ccard__go { color: #FFE36B; transform: translate(2px, -2px); }
.ccard > a:hover .ccard__body b { text-decoration: underline; text-underline-offset: 3px; }
.ccard--more { background: var(--pnt-red-primary); }
.ccard--more::before { display: none; }
.ccard--more a { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 16px 18px; color: #fff; }
.ccard--more a > .ico { width: 34px; height: 34px; margin-bottom: auto; }
.ccard--more b { font-size: 16px; line-height: 1.3; }
.ccard--more span { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: rgba(255, 255, 255, .9); }
.ccard--more span .ico { width: 14px; height: 14px; }
.ccard--more:hover { background: var(--pnt-red-hover); }
.carousel__btn { position: absolute; top: 50%; z-index: 4; display: grid; place-items: center; width: 44px; height: 44px; margin-top: -22px; border: 0; color: var(--pnt-text-blue); background: #fff; box-shadow: 0 8px 22px rgba(0, 45, 100, .28); transition: background-color .2s, color .2s, opacity .2s;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); }
.carousel__btn .ico { width: 20px; height: 20px; }
.carousel__btn:hover { background: var(--pnt-red-primary); color: #fff; }
.carousel__btn--prev { left: -14px; }
.carousel__btn--next { right: -14px; }
.carousel__btn:disabled { opacity: .35; pointer-events: none; }
@media (max-width: 640px) { .carousel__btn--prev { left: -6px; } .carousel__btn--next { right: -6px; } .carousel__btn { width: 38px; height: 38px; margin-top: -19px; } }
.infra__carousel { --row: clamp(150px, calc((100vh - 330px) / 2), 230px); }
.infra__carousel .ccard { background: rgba(0, 45, 100, .4); }
@media (max-width: 960px) { .infra__carousel { --row: 150px; } }

/* ---------- 5. Sản phẩm nổi bật: tab theo dòng thang ---------- */
/* Cột dòng sản phẩm cao bằng khung bên phải, 6 ô chia đều (phản hồi Canny 12/10/2026: "cột bên trái bị díu") */
.ptabs { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 22px; align-items: stretch; }
.ptabs__list { display: grid; grid-template-rows: repeat(6, minmax(0, 1fr)); gap: 10px; contain: size; }   /* cao theo khung sản phẩm, không tự đẩy cao */
.ptab { position: relative; isolation: isolate; display: flex; align-items: center; gap: 14px; min-height: 0; padding: 6px 14px 6px 6px; border: 0; background: var(--pnt-border); text-align: left; transition: transform .2s;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); }
.ptab::before { content: ""; position: absolute; inset: 1px; z-index: -1; background: #fff; transition: background-color .25s; clip-path: polygon(0 0, calc(100% - 11.4px) 0, 100% 11.4px, 100% 100%, 0 100%); }
.ptab img { width: auto; height: 100%; max-height: 64px; aspect-ratio: 1; object-fit: cover; flex: none; }
.ptab span { font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--pnt-text-blue); }
.ptab:hover { transform: translateX(3px); }
.ptab.is-active { background: var(--canny-blue); }
.ptab.is-active::before { background: linear-gradient(135deg, var(--pnt-blue-deep) 0%, var(--canny-blue) 55%, var(--canny-bright) 100%); }
.ptab.is-active span { color: #fff; }
.ptab.is-active::after { content: ""; position: absolute; right: 0; bottom: 0; width: 18px; height: 18px; background: var(--pnt-red-primary); clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.ppanel { display: grid; grid-template-columns: minmax(0, .5fr) minmax(0, 1fr); gap: 24px; padding: 20px; background: #fff; border: 1px solid var(--pnt-border); box-shadow: var(--shadow); animation: fadeUp .4s ease;
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%); }
.ppanel[hidden] { display: none; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } }
.ppanel__img { width: 100%; height: clamp(240px, calc(100vh - 340px), 430px); object-fit: cover; object-position: 50% 35%; background: var(--pnt-off-white); clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%); }
.ppanel__body { display: flex; flex-direction: column; min-width: 0; }
/* dòng công trình tương ứng (như bản 07/10, Canny muốn thêm lại 14/10) */
.ppanel__use { margin-bottom: 14px; padding-left: 12px; border-left: 3px solid var(--pnt-red-primary); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pnt-text-blue); }
.ppanel__use span { display: block; margin-bottom: 2px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: none; color: var(--pnt-text-muted); }
/* 2 thẻ kéo dài xuống bằng ảnh bên cạnh: tên + mã ở trên, thông số ở dưới */
.models { flex: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; }
.model { display: flex; flex-direction: column; padding: 22px 24px 24px; background: var(--pnt-off-white); border-top: 3px solid var(--canny-blue); }
/* tên thang to, mã thang nhỏ (phản hồi Canny: "nhấn mạnh tên thang thay vì ký hiệu") */
.model__name { font-size: clamp(18px, 1.6vw, 22px); font-weight: 800; line-height: 1.25; letter-spacing: -.01em; color: var(--pnt-text-blue); text-wrap: balance; }
.model__code { margin: 6px 0 16px; font-size: 13.5px; letter-spacing: .02em; font-weight: 700; color: var(--pnt-red-hover); }
/* gạch phân cách ngay dưới mã thang; 4 thông số giãn đều phần còn lại của thẻ (Sơn 15/10) */
.specs { flex: 1; display: grid; grid-template-columns: 1fr 1fr; align-content: space-evenly; gap: 18px 18px; margin: 0; padding: 14px 0 4px; border-top: 1px dashed var(--pnt-frame); }
.specs dt { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--pnt-text-muted); }
.specs dd { margin: 2px 0 0; font-size: 16px; font-weight: 700; white-space: nowrap; color: var(--pnt-text-blue); }
/* nút báo giá: cùng cỡ, cùng vị trí (đáy thẻ) ở mọi thẻ */
.model--note { border-top-color: var(--pnt-red-primary); }
.model__text { flex: 1; margin: 0 0 16px; padding-top: 16px; border-top: 1px dashed var(--pnt-frame); font-size: 14px; line-height: 1.6; color: var(--pnt-text-body); }
.model--note .link-more { align-self: flex-start; }
@media (max-width: 960px) {
  .ptabs { grid-template-columns: 1fr; }
  .ptabs__list { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; contain: none; }
  .ptabs__list::-webkit-scrollbar { display: none; }
  .ptab { flex: none; }
  .ptab img { height: 46px; }
  .ptab:hover { transform: none; }
}
@media (max-width: 640px) {
  .ppanel { grid-template-columns: 1fr; padding: 14px; }
  .ppanel__img { height: 220px; }
  .ptab img { height: 36px; }
  .ptab span { font-size: 13px; }
}

/* ---------- 6. PNT Việt Nam + Dịch vụ trọn đời sản phẩm ----------
   Phản hồi Canny 12/10/2026: khối chữ rộng hơn (mỗi ý 1 dòng), 2 ảnh bằng nhau và bấm mở bài viết, dải dịch vụ 6 bước màu Canny. */
/* 15/10: cột chữ hẹp lại (4 ý xếp 1 cột, mỗi ý 1 dòng), 2 ảnh to ra */
.pnt__grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(24px, 3.4vw, 48px); align-items: stretch; }
.pnt__copy { align-self: center; }
.pnt__copy .section__title { margin-bottom: clamp(14px, 2.6vh, 24px); }
.pnt__points { display: grid; grid-template-columns: 1fr; gap: 8px; }
.pnt__points li { position: relative; isolation: isolate; }
.pnt__points a { display: flex; align-items: center; gap: 12px; padding: 9px 14px 9px 10px; color: inherit; }
.pnt__points .ico.pnt__go { width: 16px; height: 16px; margin-left: auto; padding: 0; color: var(--pnt-bg-blue-strong); background: none; clip-path: none; opacity: .55; transition: opacity .2s, transform .2s; }
.pnt__points li:hover .pnt__go { opacity: 1; transform: translate(2px, -2px); }
.pnt__points li:hover b { color: var(--pnt-bg-blue-strong); }
.pnt__points li::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #fff; border: 1px solid var(--pnt-border); transition: border-color .2s; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); }
.pnt__points .ico { width: 38px; height: 38px; padding: 8px; color: var(--canny-blue); background: linear-gradient(145deg, #F6F9FE 0%, var(--pnt-bg-blue-pale) 100%); clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px)); }
.pnt__points li:hover::before { border-color: var(--pnt-bg-blue-soft); }
.pnt__points b { display: block; font-size: 15px; line-height: 1.35; white-space: nowrap; color: var(--pnt-text-blue); transition: color .2s; }
.pnt__photos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pnt__photo { position: relative; display: block; overflow: hidden; color: #fff; clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); }
/* 2 ảnh cao bằng cột chữ bên trái (ảnh to hơn, không làm khối cao thêm) */
.pnt__photos { align-items: stretch; }
.pnt__photo img { width: 100%; height: 100%; min-height: 200px; max-height: 420px; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.pnt__photo:hover img { transform: scale(1.05); }
.pnt__photo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(0, 72, 150, .85) 0, rgba(0, 72, 150, .4) 36px, rgba(0, 72, 150, 0) 70px); }   /* lớp mờ ngắn (14/10) */
.pnt__caption { position: absolute; left: 12px; right: 12px; bottom: 10px; z-index: 2; display: flex; align-items: center; gap: 8px; padding-left: 10px; border-left: 3px solid var(--pnt-red-primary); line-height: 1.3; }
.pnt__caption b { display: block; font-size: 12.5px; font-weight: 700; }
.pnt__caption .ico { width: 17px; height: 17px; flex: none; color: #FFE36B; transition: transform .25s; }
.pnt__photo:hover .pnt__caption .ico { transform: translate(2px, -2px); }
.service-band { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2.2fr); align-items: center; gap: 24px; margin-top: clamp(30px, 7.5vh, 76px); padding: clamp(18px, 3vh, 28px) 34px; overflow: hidden; color: #fff;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0) 0 58%, rgba(255, 255, 255, .1) 58% 72%, rgba(255, 255, 255, 0) 72%), var(--band-bg);
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 28px 100%, 0 calc(100% - 28px)); }
.service-band::after { content: ""; position: absolute; right: 0; bottom: 0; width: 40px; height: 40px; background: var(--pnt-red-primary); clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.service-band .eyebrow { margin-bottom: 8px; }
.service-band__title { font-size: 17px; line-height: 1.4; font-weight: 700; text-wrap: balance; }
.steps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.step { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 10px 12px 12px; background: linear-gradient(225deg, transparent 11px, rgba(255, 255, 255, .14) 11px); box-shadow: inset 0 -2px 0 rgba(255, 255, 255, .24); transition: transform .25s, background-color .25s; }
.step:hover { transform: translateY(-4px); background-color: rgba(255, 255, 255, .08); }
.step__no { padding: 2px 12px 2px 8px; font-size: 12.5px; font-weight: 800; font-style: italic; letter-spacing: .08em; color: #fff; background: var(--pnt-red-primary); clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.step__icon { width: 28px; height: 28px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.step__text { font-size: 13px; line-height: 1.35; font-weight: 600; }
.step:not(:last-child)::after { content: ""; position: absolute; right: -11px; top: 50%; z-index: 2; width: 9px; height: 9px; border-top: 2px solid rgba(255, 255, 255, .75); border-right: 2px solid rgba(255, 255, 255, .75); transform: translateY(-50%) rotate(45deg); }
@media (max-width: 1080px) { .service-band { grid-template-columns: 1fr; } }
@media (max-width: 960px) { .pnt__grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .pnt__points { grid-template-columns: 1fr; }
  .pnt__photo img { height: 180px; }
  .service-band { padding: 22px 18px 26px; }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .step:not(:last-child)::after { display: none; }
}
@media (max-width: 400px) { .steps { grid-template-columns: 1fr 1fr; } }

/* ---------- 7. Công trình tiêu biểu: dải ảnh 2 hàng, mũi tên 2 bên ---------- */
.projects__carousel { --row: clamp(160px, calc((100vh - 270px) / 2), 270px); }
@media (max-width: 960px) { .projects__carousel { --row: 170px; } }
/* 15/10 (Sơn): khung báo giá đứng riêng, cùng footer bên dưới vừa một màn. Khung ngang: chữ + liên hệ trái, form phải. */
.quote { position: relative; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; gap: clamp(20px, 3vw, 48px); padding: clamp(14px, 2.4vh, 34px) clamp(18px, 3vw, 44px);
  background: linear-gradient(150deg, var(--pnt-bg-blue-pale) 0%, var(--pnt-bg-blue-light) 100%); clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%); }
.quote .eyebrow { margin-bottom: 6px; }
.quote__title { font-size: clamp(20px, 2vw, 28px); line-height: 1.25; font-weight: 800; color: var(--pnt-text-blue); text-wrap: balance; }
.quote .contact__lines { gap: 12px 26px; margin-top: clamp(12px, 2.4vh, 22px); }
.quote .contact__lines > a, .quote .contact__hotline { gap: 10px; font-size: 14px; }
.quote .contact__hotline .hotline-line { font-size: 18px; }
.quote .contact__icon { width: 34px; height: 34px; }
.quote .contact__icon .ico { width: 17px; height: 17px; }
.quote__form { padding: 14px 18px; border: 0; box-shadow: 0 6px 20px rgba(0, 90, 160, .1); clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%); }
.quote__form .lead-form__row { gap: 10px; margin-bottom: 10px; }
.quote__form .field { gap: 4px; }
.quote__form .field__label { font-size: 12.5px; }
.quote__form .field input, .quote__form .field select { height: 38px; padding-inline: 11px; font-size: 14px; }
.quote__form .field select { padding-right: 28px; background-position: right 10px center; }
.quote__form .lead-form__submit { min-height: 42px; font-size: 15px; }
@media (max-width: 960px) { .quote { grid-template-columns: 1fr; } }
@media (min-width: 1081px) and (min-height: 760px) {   /* màn cao: khung, form và chữ giãn ra */
  .quote { padding: clamp(28px, 4.5vh, 56px) clamp(28px, 3.4vw, 60px); }
  .quote__title { font-size: clamp(24px, 2.1vw, 32px); }
  .quote .contact__lines { gap: 16px 30px; margin-top: 26px; }
  .quote__form { padding: 24px 26px 22px; }
  .quote__form .lead-form__row { gap: 14px; margin-bottom: 16px; }
  .quote__form .field { gap: 6px; }
  .quote__form .field__label { font-size: 13.5px; }
  .quote__form .field input, .quote__form .field select { height: 46px; font-size: 15px; }
  .quote__form .lead-form__submit { min-height: 50px; font-size: 16px; }
}
@media (max-width: 560px) { .projects__carousel { --row: 150px; } }

/* ---------- 8. Báo giá: khối chuyển đổi gọn ---------- */
.contact__lines { display: flex; flex-wrap: wrap; gap: 14px 28px; }
.contact__lines > a, .contact__hotline { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 800; color: var(--pnt-text-blue); }
.contact__hotline .hotline-line { font-size: 20px; }
.contact__lines small { display: block; font-size: 11.5px; font-weight: 500; color: var(--pnt-text-muted); line-height: 1.2; }
.hotline-line { font-weight: 800; line-height: 1.15; white-space: nowrap; color: var(--pnt-red-primary); }
.hotline-line > a:first-child { color: inherit; }
/* chữ "Zalo" = 0,52 cỡ số; cao 1,4 em của chính nó = 0,727 em cỡ số = chiều cao chữ số */
.zalo-link { display: inline-block; overflow: hidden; vertical-align: baseline; height: 1.4em; margin-left: .85em; padding: 0 .7em; border-radius: 999px;
  font-size: .52em; font-weight: 700; line-height: 1.4em; letter-spacing: .02em; color: #fff !important; background: var(--zalo); transition: background-color .2s; }
.zalo-link:hover { background: #0052CC; }
.contact__icon { display: grid; place-items: center; width: 42px; height: 42px; color: #fff; background: var(--pnt-bg-blue-strong); clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px)); }
.contact__hotline .contact__icon { background: var(--pnt-red-primary); }
.lead-form { position: relative; padding: 30px 32px 30px; background: #fff; color: var(--pnt-text-body); border: 1px solid var(--pnt-border); box-shadow: 0 8px 28px rgba(0, 90, 160, .1);
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%); }
.lead-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.field { display: flex; flex-direction: column; gap: 7px; position: relative; }
.field__label { font-size: 13px; font-weight: 600; color: var(--pnt-text-blue); }
.field__label i { font-style: normal; color: var(--pnt-red-primary); }
.field input, .field select { width: 100%; height: 46px; padding: 0 14px; font-size: 15px; color: var(--pnt-text-body); background: var(--pnt-off-white); border: 1px solid var(--pnt-border); border-radius: 4px; transition: border-color .2s, background-color .2s; }
.field select { appearance: none; padding-right: 38px; background: var(--pnt-off-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2366788A' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center; }
.field input:focus, .field select:focus { outline: none; border-color: var(--pnt-bg-blue-strong); background-color: #fff; }
.field.is-invalid input { border-color: var(--pnt-red-primary); }
.field__error { font-size: 12.5px; font-weight: 500; color: var(--pnt-red-hover); }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lead-form__submit { width: 100%; min-height: 50px; font-size: 16px; }
.lead-form .btn.is-loading { pointer-events: none; opacity: .8; }
.lead-form .btn.is-loading .ico { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.lead-form__consent { margin-top: 10px; font-size: 12px; line-height: 1.5; color: var(--pnt-text-muted); }
.lead-form__consent a { color: var(--pnt-bg-blue-strong); text-decoration: underline; }
.lead-form__status:empty { display: none; }
.lead-form__status { margin-top: 14px; padding: 14px 16px; font-size: 14.5px; line-height: 1.55; }
.lead-form__status.is-success { background: #E9F7EF; color: #17603A; border: 1px solid #BFE5CF; }
.lead-form__status.is-error { background: var(--pnt-red-soft); color: #9E1E2B; border: 1px solid #F5C3C9; }
.lead-form__status a { font-weight: 700; text-decoration: underline; }
.lead-form__status .btn { margin-top: 10px; text-decoration: none; }
.lead-form.is-done .field, .lead-form.is-done .lead-form__row, .lead-form.is-done .lead-form__submit, .lead-form.is-done .lead-form__consent { display: none; }
@media (max-width: 560px) { .lead-form { padding: 22px 18px 24px; } .lead-form__row { grid-template-columns: 1fr; gap: 14px; margin-bottom: 14px; } }

/* ---------- Footer (website PNT: nền trắng, đỏ chỉ cho hotline) ----------
   Phản hồi Canny 12/10/2026: gọn, tên công ty 1 dòng, Facebook / YouTube dưới phần liên hệ (như footer website PNT 0.7.4). */
.footer { padding-top: clamp(16px, 3vh, 32px); background: #fff; color: var(--pnt-text-body); border-top: 1px solid var(--pnt-border); }
.footer__top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px clamp(28px, 3.4vw, 48px); align-items: start; padding-bottom: clamp(12px, 2.4vh, 24px); }
.footer__logo { width: auto; height: 50px; }
.footer__legalname { margin-top: 12px; font-size: 13.5px; font-weight: 700; white-space: nowrap; color: var(--pnt-text-blue); }
.footer__tax { margin-top: 2px; font-size: 12.5px; color: var(--pnt-text-muted); }
.footer__social { display: flex; gap: 8px; margin-top: 10px; }
.footer__social a { display: grid; place-items: center; width: 32px; height: 32px; color: var(--canny-blue); background: var(--pnt-off-white); border: 1px solid var(--pnt-border); transition: color .2s, background-color .2s;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)); }
.footer__social .ico { width: 18px; height: 18px; }
.footer__social a:hover { color: #fff; background: var(--pnt-text-blue); }
.footer__heading { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pnt-text-blue); }
.footer__heading::before { content: ""; width: 20px; height: 3px; background: var(--pnt-red-primary); transform: skewX(-30deg); flex: none; }
.footer__offices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 24px; }
.foffice { display: flex; align-items: flex-start; gap: 10px; }
.foffice__icon { display: grid; place-items: center; flex: none; width: 24px; height: 24px; margin-top: 1px; color: var(--canny-blue); background: var(--pnt-bg-blue-pale); clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px)); }
.foffice__icon .ico { width: 14px; height: 14px; }
.foffice__text strong { display: block; font-size: 13px; font-weight: 700; color: var(--pnt-text-blue); }
.foffice__text span { display: block; font-size: 12.5px; line-height: 1.5; color: var(--pnt-text-muted); }
.footer__hotline { display: flex; flex-direction: column; margin-bottom: 10px; padding-left: 14px; border-left: 3px solid var(--pnt-red-primary); line-height: 1.15; }
.footer__hotline > span:first-child { font-size: 12px; color: var(--pnt-text-muted); }
.footer__hotline .hotline-line { font-size: 22px; }
.footer__contacts { display: grid; gap: 6px; font-size: 13.5px; }
.footer__contacts li { display: flex; align-items: center; gap: 10px; }
.footer__contacts .ico { width: 17px; height: 17px; color: var(--canny-blue); }
.footer a:hover { color: var(--pnt-red-primary); }
.footer__social a:hover { color: #fff; }
.footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; padding-block: 10px 12px; border-top: 1px solid var(--pnt-border); font-size: 13px; color: var(--pnt-text-muted); }
.footer__links a { color: var(--pnt-text-muted); }
@media (max-width: 1239px) { .footer__offices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }   /* laptop hẹp: 2 cột văn phòng – địa chỉ ít xuống dòng */
@media (max-width: 960px) { .footer__top { grid-template-columns: auto minmax(0, 1fr); } .footer__col--offices { grid-column: 1 / -1; grid-row: 2; } }
@media (max-width: 860px) { .footer__offices { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__top { grid-template-columns: 1fr; } .footer__offices { grid-template-columns: 1fr; } .footer__legalname { white-space: normal; } }

/* ---------- Nút nổi + thanh liên hệ ---------- */
.fab { position: fixed; right: 24px; bottom: 20px; z-index: 60; display: inline-flex; align-items: center; gap: 9px; min-height: 42px; padding: 0 20px 0 17px; background: var(--pnt-red-primary); color: #fff; font-size: 14px; font-weight: 700;
  filter: drop-shadow(0 10px 22px rgba(217, 54, 69, .38)); clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); transition: transform .2s, background-color .2s, opacity .3s, visibility .3s; }
.fab .ico { width: 18px; height: 18px; }
.fab:hover { transform: translateY(-2px); background: var(--pnt-red-hover); }
.fab.is-hidden { opacity: 0; visibility: hidden; }
.quickbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: none; grid-template-columns: 1fr 1fr 1.15fr; gap: 1px; padding-bottom: env(safe-area-inset-bottom); background: rgba(0, 72, 150, .15); box-shadow: 0 -8px 24px -12px rgba(0, 72, 150, .45); }
.quickbar a { display: flex; align-items: center; justify-content: center; gap: 8px; height: 58px; font-size: 15px; font-weight: 700; color: #fff; }
.quickbar .ico { width: 20px; height: 20px; }
.quickbar__call { background: var(--pnt-red-primary); }
.quickbar__zalo { background: var(--zalo); }
.quickbar__quote { background: var(--pnt-blue-deep); }
@media (max-width: 1080px) {
  .fab { display: none; }
  .quickbar { display: grid; }
  body { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }
}

/* ---------- Popup brochure ---------- */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; }
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(0, 72, 150, .78); backdrop-filter: blur(3px); animation: fade .2s; }
.modal__box { position: relative; width: min(760px, 100%); max-height: calc(100vh - 40px); overflow: auto; background: #fff; animation: pop .25s; clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%); }
.modal__close { position: absolute; right: 30px; top: 12px; z-index: 2; display: grid; place-items: center; width: 38px; height: 38px; border: 0; background: var(--pnt-off-white); color: var(--pnt-text-blue); }
.modal__close .ico { width: 20px; height: 20px; }
.brochure { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 26px; padding: 30px; }
.brochure__cover { width: 100%; box-shadow: 0 16px 30px -14px rgba(0, 72, 150, .55); align-self: start; }
.brochure__title { font-size: 22px; line-height: 1.25; font-weight: 800; color: var(--pnt-text-blue); }
.brochure__desc { margin-top: 6px; font-size: 14px; color: var(--pnt-text-muted); }
.lead-form--compact { margin-top: 16px; padding: 0; border: 0; box-shadow: none; clip-path: none; }
.lead-form--compact .field { margin-bottom: 12px; }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@media (max-width: 640px) { .brochure { grid-template-columns: 1fr; padding: 24px 18px; gap: 14px; } .brochure__cover { width: 110px; } }
body.has-modal { overflow: hidden; }

/* ---------- Hiện dần khi cuộn ---------- */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ---------- Google Translate (EN / 中): ẩn thanh và tooltip của Google, như website PNT ---------- */
iframe.skiptranslate, .goog-te-banner-frame, #goog-gt-tt, .goog-te-balloon-frame, .VIpgJd-ZVi9od-ORHb-OEVmcd, .VIpgJd-ZVi9od-aZ2wEe-wOHMyf, .VIpgJd-yAWNEb-L7lbkb { display: none !important; }
body { top: 0 !important; }
.goog-text-highlight, .VIpgJd-yAWNEb-VIpgJd-fmcmS-sn54Q { background: none !important; box-shadow: none !important; }

/* ==== Mỗi màn gọn trong một khung hình (desktop / laptop, rộng ≥ 1081px) ====
   Mỗi khối cao đúng một màn trừ header thu gọn; nội dung căn giữa; ảnh co theo chiều cao màn (vh).
   Đáy chừa chỗ cho nút "Nhận báo giá" nổi. Màn cuối = khung báo giá + footer, cộng lại đúng một màn (Sơn 15/10).
   Đo vừa ở 1280×600, 1265×650, 1366×657, 1536×730, 1440×789, 1920×969 (tools/shot.mjs). */
@media (min-width: 1081px) {
  main > .section { min-height: calc(100vh - var(--header-h-compact)); display: flex; flex-direction: column; justify-content: center; padding-block: clamp(20px, 4.4vh, 56px) clamp(60px, 7.5vh, 76px); }
  main > .section > .container { flex: none; }
  /* màn cuối = khung báo giá + footer (--footer-h do JS đo) */
  /* khung báo giá nằm cao hơn giữa màn một chút (đáy chừa nhiều hơn đỉnh), màn càng cao càng thoáng (Sơn 16/10) */
  main > .section.contact { min-height: calc(100vh - var(--header-h-compact) - var(--footer-h, 0px)); padding-block: clamp(10px, 2vh, 36px) clamp(10px, calc(16vh - 90px), 110px); }
}
@media (min-width: 1081px) and (max-height: 900px) {
  .section__title { font-size: clamp(22px, 3.6vh, 32px); }
  .section__head { margin-bottom: clamp(12px, 2.6vh, 26px); }
  .eyebrow { margin-bottom: 8px; font-size: 12px; }
  .hero__title { font-size: clamp(26px, 5.6vh, 48px); }
  .about__copy p:not(.eyebrow) { font-size: 15px; }
  .kpi { margin-top: clamp(16px, 3.6vh, 40px); }
  .kpi__value { font-size: min(1.9vw, max(20px, 4.6vh), 30px); font-size: min(2.9cqi, max(22px, 4.6vh), 38px); }
  .kpi__label { font-size: 12px; }
  .tower { padding: 14px 24px 18px; gap: 10px; }
  .tower__num { font-size: clamp(48px, 10vh, 84px); }
  .tower__sub { font-size: 12.5px; margin-bottom: 12px; }
  .tower__meters dd { font-size: 17px; }
  .tower__cert { padding: 16px 24px; }
  .rnd__body { padding: 14px 18px; }
  .rnd h3 { font-size: 16px; }
  .rnd__facts { margin-top: 8px; gap: 6px 12px; }
  .rnd__facts li { font-size: 12px; }
  .rnd__facts b { font-size: 16px; }
  .certs { padding: 12px 16px 14px; }
  .certs__title { margin-bottom: 8px; }
  .cert__btn { min-height: 100px; padding-top: 12px; }
  .infra__copy > p:not(.eyebrow) { font-size: 14px; }
  .infra__kpi { gap: 10px; }
  .infra__kpi li { padding: 8px 12px 10px 14px; }
  .infra__kpi b { font-size: clamp(30px, 6.4vh, 54px); }
  .ptabs__list { gap: 8px; }
  .ptab span { font-size: 14px; }
  .ppanel { padding: 16px; gap: 20px; }
  .ppanel__img { height: clamp(220px, calc(100vh - 330px), 430px); }
  .model { padding: 18px 20px 20px; }
  .model__name { font-size: clamp(17px, 3vh, 22px); }
  .specs { padding: 12px 0 2px; gap: 12px 16px; }
  .specs dd { font-size: 14px; }
  .pnt__points { gap: 6px; }
  .pnt__points a { padding: 6px 12px 6px 9px; }
  .pnt__points .ico { width: 30px; height: 30px; padding: 6px; }
  .pnt__points b { font-size: 14px; }
  .service-band__title { font-size: 15.5px; }
  .step { padding: 9px 8px 9px 10px; gap: 5px; }
  .step__icon { width: 22px; height: 22px; }
  .step__text { font-size: 12.5px; }
  .lead-form { padding: 20px 26px 20px; }
  .lead-form__row { gap: 14px; margin-bottom: 12px; }
  .field { gap: 4px; }
  .field input, .field select { height: 40px; }
  .lead-form__submit { min-height: 46px; }
}
@media (min-width: 1081px) and (max-width: 1199px) {   /* laptop hẹp 1081–1199px: cột phải hẹp làm chữ / thẻ xuống dòng thêm – thu gọn để vẫn vừa một màn */
  .rnd { grid-template-columns: 36% minmax(0, 1fr); }
  .rnd h3 { font-size: 15px; }
  .rnd__facts li { font-size: 11.5px; }
  .cert__btn { padding: 10px 2px 8px; }
  .cert__btn span { font-size: 10px; }
  .cert__ico { width: 18px; height: 18px; }
  .ptabs { grid-template-columns: 220px minmax(0, 1fr); gap: 16px; }
  .ptab { gap: 10px; }
  .ptab span { font-size: 13.5px; }
  .ppanel { grid-template-columns: minmax(0, .42fr) minmax(0, 1fr); gap: 16px; }
  .models { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
  .model { padding: 16px 16px 18px; }
}
@media (min-width: 1081px) and (max-height: 680px) {
  .certs__list { min-height: 0; }
  .tech__side { gap: 14px; }
  .pnt__points { gap: 5px; }
  .cert__btn { min-height: 0; padding: 9px 3px 7px; gap: 2px; }
  .cert__ico { width: 17px; height: 17px; margin-bottom: 2px; }
  .cert__more { padding-top: 3px; }
  .certs { padding-block: 10px 12px; }
  .certs__title { margin-bottom: 7px; }
  .about__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }   /* video hẹp lại: khối Về Canny vừa màn 1280×600 */
  .about__video { max-height: calc(100vh - 290px); }   /* màn rộng mà thấp (vd. 1440×620): video không đẩy khối quá một màn */
  .about__copy p:not(.eyebrow) { font-size: 14px; }
  .tower__sub { display: none; }
  .footer__offices { gap: 6px 22px; }
  .foffice__text span { font-size: 12px; line-height: 1.45; }
  .kpi { margin-top: clamp(12px, 3vh, 40px); }
  .lead-form { padding: 16px 22px 14px; }
  .lead-form__row { margin-bottom: 10px; }
  .field input, .field select { height: 38px; }
  .lead-form__submit { min-height: 42px; }
  .lead-form__consent { margin-top: 6px; }
}
@media (min-width: 1081px) and (max-height: 620px) {
  main > .section.contact { padding-block: 8px; }
  .footer { padding-top: 12px; }
  .service-band { margin-top: 24px; }
  .pnt__copy .section__title { margin-bottom: 10px; }
  .quote { padding-block: 12px; }
  .quote .contact__lines { margin: 8px 0 10px; }
  .quote .contact__lines small { display: none; }
  .quote__form { padding: 12px 16px 10px; }
  .quote__form .lead-form__row { margin-bottom: 8px; }
  .quote__form .field input, .quote__form .field select { height: 36px; }
  .quote__form .lead-form__submit { min-height: 40px; }
  .foffice__text span { line-height: 1.36; }
  .footer__offices { gap: 4px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js .reveal, .hero__copy > *, .js .kpi__item { opacity: 1; transform: none; }
}