/**
 * Trang lĩnh vực: Đầu tư hạ tầng trọng điểm.
 *
 * Mọi lớp mang tiền tố "ht-" để không đụng các quy tắc chung của shared-shell.css
 * (nó ẩn những lớp phủ tên .hero-overlay, .hero-shade… và ép mask-image: none
 * lên mọi ảnh trong main). Vì thế hiệu ứng mờ dần của ảnh đặt trên khung bọc,
 * không đặt trên thẻ <img>.
 *
 * Cỡ chữ, độ đậm và khoảng cách lấy theo các trang lĩnh vực khác (/bandan/,
 * /batdongsan/…): tiêu đề mục Plus Jakarta Sans 300 cỡ 40px viết hoa, nhãn
 * 11.5px, đoạn văn 14px/300, số liệu và tiêu đề banner Montserrat, mỗi mục
 * cách nhau 96px, nội dung rộng tối đa 1256px.
 */

.page-hatang {
  --ht-toi: #111315;
  --ht-toi-2: #16191b;
  --ht-giay: #f5f2eb;
  --ht-vang: #c9a45c;
  --ht-vang-sang: #d8b774;
  /* Vàng nhãn chữ nhỏ trên nền sáng, trùng màu các trang lĩnh vực khác. */
  --ht-vang-dam: #9c7535;
  --ht-muc: #1c1d1b;
  --ht-muc-nhat: #5b5c57;
  --ht-duong: rgba(201, 164, 92, .38);
  --ht-sans: "Plus Jakarta Sans", "Be Vietnam Pro", system-ui, sans-serif;
  --ht-so-font: "Montserrat", "Plus Jakarta Sans", system-ui, sans-serif;
  --ht-le: clamp(24px, 6.6vw, 68px);
  --ht-muc-cach: 96px;
  background: var(--ht-giay);
}

/* Nền tảng giống các trang lĩnh vực khác (xem bandan/styles.css): bỏ lề mặc
   định của trình duyệt, cỡ chữ gốc 14px để header dùng chung đo đúng. */
html { overflow-x: clip; }
body.page-hatang { margin: 0; overflow-x: clip; font-size: 14px; -webkit-font-smoothing: antialiased; }
body.page-hatang :is(button, input, select, textarea) { font: inherit; }
body.page-hatang button { cursor: pointer; }

/* Shell giới hạn ảnh ở 65svh trên desktop để ảnh minh hoạ không chiếm cả màn
   hình. Ở trang này ảnh là nền của từng mục, cắt theo khung bằng object-fit. */
@media (min-width: 981px) {
  body.page-hatang.dg-shared-shell main img { max-height: none !important; }
  body.page-hatang.dg-shared-shell main :is(picture, figure, div):has(> img) { max-height: none; }
}

.ht { font-family: var(--ht-sans); color: var(--ht-muc); overflow-x: clip; }
.ht *, .ht *::before, .ht *::after { box-sizing: border-box; }
.ht img { display: block; max-width: 100%; }
.ht a { color: inherit; text-decoration: none; }

.ht-khung { position: relative; z-index: 2; width: min(calc(1256px + 2 * var(--ht-le)), 100%); margin-inline: auto; padding-inline: var(--ht-le); }
.ht-sang { background: var(--ht-giay); color: var(--ht-muc); }
.ht-toi { background: var(--ht-toi); color: #f1ede4; }

/* --- Chữ dùng chung ------------------------------------------------------- */

.ht-nhan {
  margin: 0 0 8px;
  color: var(--ht-vang-dam);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.ht-toi .ht-nhan { color: var(--ht-vang); }

.ht-tieude,
.ht-tieude-hoa {
  margin: 0;
  font-family: var(--ht-sans);
  font-size: 40px;
  font-weight: 300;
  line-height: 1.8;
  letter-spacing: .005em;
  text-transform: uppercase;
}

/* :where() giữ độ ưu tiên thấp để nhãn, khẩu hiệu… (cũng là <p>) tự đặt cỡ chữ riêng. */
:where(.ht) p { margin: 0; font-size: 14px; font-weight: 300; line-height: 1.72; }

/* Tiêu đề thẻ và cột: cùng kiểu h3 mảnh viết hoa của các trang lĩnh vực. */
.ht h3 { font-family: var(--ht-sans); font-weight: 200; letter-spacing: -.01em; text-transform: uppercase; }

.ht-nut {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 46px;
  padding: 0 24px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.ht-nut span { font-size: 15px; letter-spacing: 0; transition: transform .25s ease; }
.ht-nut:hover span { transform: translateX(4px); }
.ht-nut:focus-visible, .ht-mui:focus-visible, .ht-the a:focus-visible { outline: 2px solid var(--ht-vang-sang); outline-offset: 3px; }
.ht-nut-vang { color: #1b1a17; background: var(--ht-vang); border: 1px solid var(--ht-vang); }
.ht-nut-vang:hover { background: var(--ht-vang-sang); border-color: var(--ht-vang-sang); }
.ht-nut-vien { color: var(--ht-vang-sang); border: 1px solid var(--ht-vang); }
.ht-nut-vien:hover { color: #1b1a17; background: var(--ht-vang); }

/* Khẩu hiệu dọc "Vì một Việt Nam thịnh vượng hơn" có vạch vàng bên trái. */
.ht-khau-hieu-doc {
  padding-left: 16px;
  border-left: 1px solid var(--ht-vang);
  color: var(--ht-vang-dam);
  font-size: 11.5px !important;
  font-weight: 600 !important;
  line-height: 1.8 !important;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.ht-toi .ht-khau-hieu-doc { color: var(--ht-vang); }

/* --- 1. Banner ------------------------------------------------------------ */

.ht-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: max(620px, 78svh);
  padding: 128px 0 92px;
  color: #fff;
  background: var(--ht-toi);
  isolation: isolate;
}
.ht-hero-anh, .ht-hero-phu { position: absolute; inset: 0; }
.ht-hero-anh { z-index: -2; }
.ht-hero-anh img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 58%; }
.ht-hero-phu {
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(10, 11, 12, .9) 0%, rgba(10, 11, 12, .7) 30%, rgba(10, 11, 12, .18) 58%, rgba(10, 11, 12, .35) 100%),
    linear-gradient(180deg, rgba(10, 11, 12, .45) 0%, transparent 28%, transparent 70%, rgba(10, 11, 12, .55) 100%);
}
.ht-crumb { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; color: rgba(255, 255, 255, .78); font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.ht-crumb a:hover { color: var(--ht-vang-sang); }
/* Cùng kiểu tiêu đề banner của các trang lĩnh vực: Montserrat 430, chữ thường. */
.ht-hero h1 {
  margin: 0;
  font-family: var(--ht-so-font);
  font-size: clamp(36px, 3.5vw, 56px);
  font-weight: 430;
  line-height: 1.08;
  letter-spacing: -.04em;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
}
.ht-hero-lead { max-width: 32em; margin-top: 20px !important; color: rgba(255, 255, 255, .9); }
.ht-hero .ht-nut { margin-top: 32px; }
.ht-hero-khau-hieu { display: flex; align-items: center; gap: 12px; margin-top: 54px !important; color: rgba(255, 255, 255, .78); font-size: 11.5px !important; font-weight: 600 !important; letter-spacing: .2em; text-transform: uppercase; }
.ht-hero-khau-hieu i { font-style: normal; opacity: .6; }
.ht-hero-khau-hieu b { width: 44px; height: 1px; background: var(--ht-vang); }

/* Số "02" viền mảnh, vạch dọc và hai khối chữ tiếng Anh bên phải. */
.ht-hero-so {
  position: absolute;
  z-index: 1;
  top: clamp(110px, 14vh, 150px);
  right: var(--ht-le);
  bottom: 70px;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  justify-items: end;
  text-align: right;
  pointer-events: none;
}
.ht-so-vien {
  font-family: var(--ht-so-font);
  font-size: clamp(110px, 11vw, 170px);
  font-weight: 200;
  line-height: .8;
  letter-spacing: -.04em;
  color: transparent;
  -webkit-text-stroke: 1.2px var(--ht-vang-sang);
}
.ht-hero-doc { position: absolute; top: 44%; bottom: 0; right: calc(100% + 26px); width: 1px; background: linear-gradient(var(--ht-vang), rgba(201, 164, 92, 0)); }
.ht-hero-en { margin-top: 26px !important; color: rgba(255, 255, 255, .84); font-size: 11.5px !important; font-weight: 600 !important; line-height: 1.8 !important; letter-spacing: .16em; text-transform: uppercase; }
.ht-hero-en-duoi { align-self: end; color: rgba(255, 255, 255, .7); }

/* --- 2. Tổng quan --------------------------------------------------------- */

.ht-intro { padding: var(--ht-muc-cach) 0; }
.ht-intro-luoi { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.ht-intro-chu p:last-child { max-width: 34em; margin-top: 16px; color: var(--ht-muc-nhat); }
.ht-ba-cot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.ht-ba-cot li { padding: 6px clamp(18px, 2.2vw, 34px); border-left: 1px solid var(--ht-duong); }
.ht-so { display: block; color: var(--ht-vang-dam); font-family: var(--ht-so-font); font-size: 48px; font-weight: 400; line-height: .8; }
.ht-ba-cot h3 { margin: 18px 0 10px; font-size: 20px; font-weight: 300; line-height: 1.25; }
.ht-ba-cot p { color: var(--ht-muc-nhat); }

/* --- 3. Đường sắt tốc độ cao --------------------------------------------- */

.ht-railway { position: relative; min-height: 560px; display: flex; align-items: center; padding: var(--ht-muc-cach) 0; overflow: hidden; isolation: isolate; }
.ht-railway-anh { position: absolute; z-index: 0; top: 0; right: 0; bottom: 0; width: 62%; }
.ht-railway-anh img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }
/* Mép trái của ảnh tan dần vào nền tối. */
.ht-railway-anh::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--ht-toi) 0%, rgba(17, 19, 21, .55) 18%, rgba(17, 19, 21, 0) 42%), linear-gradient(0deg, rgba(17, 19, 21, .55), transparent 40%); }
.ht-railway-chu { max-width: 500px; }
.ht-railway-chu > p:not(.ht-nhan) { margin-top: 16px; color: rgba(241, 237, 228, .8); }
.ht-so-lieu { display: flex; flex-wrap: wrap; gap: clamp(22px, 3.4vw, 48px); margin: 34px 0 36px; }
.ht-so-lieu div { display: flex; flex-direction: column-reverse; gap: 8px; }
.ht-so-lieu dd { margin: 0; color: var(--ht-vang-sang); font-family: var(--ht-so-font); font-size: 38px; font-weight: 500; line-height: 1; }
.ht-so-lieu small { font-size: .55em; font-weight: 400; }
.ht-so-lieu dt { color: rgba(241, 237, 228, .72); font-size: 12px; font-weight: 300; }
.ht-railway-chuthich {
  position: absolute;
  z-index: 2;
  right: var(--ht-le);
  bottom: 48px;
  padding-bottom: 16px;
  color: #fff;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  line-height: 1.6 !important;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .6);
}
.ht-railway-chuthich::after { content: ""; position: absolute; left: 0; bottom: 0; width: 40px; height: 1px; background: var(--ht-vang); }

/* --- 4. Giá trị cốt lõi -------------------------------------------------- */

.ht-values { position: relative; padding: var(--ht-muc-cach) 0; overflow: hidden; isolation: isolate; }
.ht-values-anh {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  width: 44%;
  height: 78%;
  /* Mờ dần về bên trái và phía dưới để chữ các cột vẫn nằm trên nền sáng. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 55%), linear-gradient(0deg, transparent 0%, #000 45%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, #000 55%), linear-gradient(0deg, transparent 0%, #000 45%);
  mask-composite: intersect;
  opacity: .9;
}
.ht-values-anh img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }
.ht-values .ht-dau-muc { position: relative; z-index: 1; }
.ht-values-luoi { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 0; margin-top: clamp(40px, 5vw, 56px); align-items: end; }
.ht-gia-tri { padding: 0 clamp(18px, 2.6vw, 40px); border-left: 1px solid var(--ht-duong); }
.ht-gia-tri:first-child { padding-left: 0; border-left: 0; }
.ht-icon { width: 38px; height: 38px; fill: none; stroke: var(--ht-vang); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.ht-gia-tri h3 { margin: 22px 0 12px; font-size: clamp(20px, 1.8vw, 26px); line-height: 1.2; }
.ht-gia-tri p { color: var(--ht-muc-nhat); }
.ht-values .ht-khau-hieu-doc { margin-left: clamp(18px, 3vw, 48px); }

/* --- 5. Bốn trụ cột ------------------------------------------------------ */

.ht-pillars { padding: var(--ht-muc-cach) 0; background: radial-gradient(circle at 85% 0%, rgba(201, 164, 92, .08), transparent 42%), var(--ht-toi); }
.ht-pillars-luoi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(40px, 5vw, 56px); }
.ht-tru { padding: 4px clamp(18px, 2.2vw, 32px) 8px; border-left: 1px solid rgba(201, 164, 92, .28); scroll-margin-top: 110px; }
.ht-tru:first-child { padding-left: 0; border-left: 0; }
.ht-tru-icon { display: grid; place-items: center; width: 50px; height: 50px; border: 1px solid var(--ht-vang); border-radius: 50%; }
.ht-tru-icon svg { width: 22px; height: 22px; fill: none; stroke: var(--ht-vang-sang); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.ht-tru h3 { margin: 26px 0 14px; font-size: clamp(20px, 1.8vw, 26px); line-height: 1.2; color: #fff; }
.ht-tru p { color: rgba(241, 237, 228, .72); }

/* --- 6. Dự án tiêu biểu -------------------------------------------------- */

.ht-projects { padding: var(--ht-muc-cach) 0; }
.ht-projects-dau { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 20px 32px; }
.ht-projects-dieu-khien { display: flex; align-items: center; gap: 12px; min-height: 42px; }
.ht-projects-dieu-khien p { display: flex; align-items: center; gap: 14px; margin-right: 12px; color: var(--ht-muc-nhat); font-size: 11.5px !important; font-weight: 600 !important; letter-spacing: .16em; text-transform: uppercase; }
.ht-projects-dieu-khien b { width: 42px; height: 1px; background: var(--ht-muc); }
.ht-mui { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; color: var(--ht-muc); background: transparent; border: 1px solid rgba(30, 31, 29, .45); border-radius: 50%; font-size: 16px; cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease; }
.ht-mui:hover:not(:disabled) { color: #fff; background: var(--ht-muc); border-color: var(--ht-muc); }
.ht-mui:disabled { opacity: .3; cursor: default; }
/* Cả bốn thẻ đã nằm vừa một hàng thì bỏ hai nút mũi tên (script.js gắn cờ). */
.ht-mui[hidden] { display: none; }

/* Desktop: bốn thẻ dọc trên một hàng. Màn hẹp hơn chuyển thành dải cuộn ngang. */
.ht-the-ray {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3 * 20px) / 4);
  gap: 20px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.ht-the-ray::-webkit-scrollbar { display: none; }
.ht-the { scroll-snap-align: start; }
.ht-the a { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 5; background: var(--ht-toi); }
.ht-the img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.ht-the a:hover img { transform: scale(1.05); }
/* Chân thẻ hai hàng: số thứ tự trên, tên dự án dưới, nút mũi tên bên phải —
   đủ chỗ cho tên dài như "Đường sắt tốc độ cao Bắc – Nam" khi thẻ chỉ rộng
   khoảng 300px. */
.ht-the-chan {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "so mui" "ten mui";
  align-items: end;
  column-gap: 14px;
  row-gap: 10px;
  padding: 18px 20px 20px;
  color: #fff;
  background: linear-gradient(0deg, rgba(12, 13, 14, .94), rgba(12, 13, 14, .8));
}
.ht-the-chan b { grid-area: so; color: var(--ht-vang-sang); font-family: var(--ht-so-font); font-size: 32px; font-weight: 400; line-height: 1; }
.ht-the-chan span { grid-area: ten; font-size: 12px; font-weight: 600; line-height: 1.5; letter-spacing: .1em; text-transform: uppercase; }
.ht-the-chan i { grid-area: mui; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(255, 255, 255, .7); border-radius: 50%; font-style: normal; transition: background-color .25s ease, color .25s ease, border-color .25s ease; }
.ht-the a:hover .ht-the-chan i { color: #1b1a17; background: var(--ht-vang); border-color: var(--ht-vang); }

/* --- 7. Dải kêu gọi ------------------------------------------------------ */

.ht-cta { position: relative; padding: 80px 0; overflow: hidden; isolation: isolate; }
.ht-cta-anh { position: absolute; inset: 0; z-index: 0; }
.ht-cta-anh img { width: 100%; height: 100%; object-fit: cover; object-position: 0% 60%; }
.ht-cta-anh::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 9, 11, .15), rgba(8, 9, 11, .55) 45%, rgba(8, 9, 11, .7)); }
.ht-cta-luoi { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: clamp(24px, 3.4vw, 52px); padding-left: max(var(--ht-le), 17%); }
.ht-cta-chu .ht-nhan { margin-bottom: 4px; }
.ht-cta .ht-tieude-hoa { color: #fff; }
.ht-cta-chu { padding-top: 14px; border-top: 1px solid rgba(201, 164, 92, .35); }

/* --- Hiện dần khi cuộn tới ----------------------------------------------- */

.ht-js .ht-hien { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
.ht-js .ht-hien.ht-da-hien { opacity: 1; transform: none; }

/* --- Máy tính bảng ------------------------------------------------------- */

@media (max-width: 1100px) {
  .ht-intro-luoi { grid-template-columns: minmax(0, 1fr); }
  .ht-ba-cot li:first-child { padding-left: 0; border-left: 0; }
  .ht-pillars-luoi { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 44px; }
  .ht-tru:nth-child(3) { padding-left: 0; border-left: 0; }
  .ht-the-ray { grid-auto-columns: calc((100% - 2 * 20px) / 3); }
  .ht-values-luoi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ht-values .ht-khau-hieu-doc { grid-column: 1 / -1; margin: 40px 0 0; }
  .ht-cta-luoi { grid-template-columns: minmax(0, 1fr) auto; padding-left: var(--ht-le); }
  .ht-cta .ht-khau-hieu-doc { display: none; }
}

@media (max-width: 980px) {
  .ht-hero-so { display: none; }
  .ht-railway { display: block; min-height: 0; padding-top: 0; }
  .ht-railway-anh { position: relative; width: 100%; aspect-ratio: 16 / 10; margin-bottom: 36px; }
  .ht-railway-anh img { object-position: 30% 50%; }
  .ht-railway-anh::after { background: linear-gradient(0deg, var(--ht-toi) 0%, rgba(17, 19, 21, 0) 35%); }
  .ht-railway-chuthich { display: none; }
  .ht-values-anh { width: 70%; height: 46%; opacity: .55; }
}

@media (max-width: 860px) {
  .ht-the-ray { grid-auto-columns: calc((100% - 20px) / 2); }
}

/* --- Điện thoại ---------------------------------------------------------- */
/* Các trang lĩnh vực thu cỡ chữ ở dưới 768px: tiêu đề mục 28px, đoạn văn
   12px, nhãn 12px, khoảng cách mục 48px. */

@media (max-width: 767px) {
  .page-hatang { --ht-muc-cach: 48px; }
  .ht-nhan { font-size: 12px; }
  .ht-tieude, .ht-tieude-hoa { font-size: 28px; line-height: 1.25; letter-spacing: .01em; }
  .ht-nhan + .ht-tieude, .ht-nhan + .ht-tieude-hoa { margin-top: 12px; }
  :where(.ht) p { font-size: 12px; }
  .ht-so { font-size: 36px; }
  .ht-so-lieu dd { font-size: 30px; }
  .ht-ba-cot h3 { font-size: 18px; }
  .ht-gia-tri h3, .ht-tru h3 { font-size: 20px; line-height: 1.25; }
  .ht-cta { padding: 56px 0; }
}

@media (max-width: 680px) {
  .ht-hero { min-height: 100svh; padding: 116px 0 56px; align-items: flex-end; }
  .ht-hero-anh img { object-position: 70% 50%; }
  .ht-hero-phu { background: linear-gradient(180deg, rgba(10, 11, 12, .55) 0%, rgba(10, 11, 12, .25) 32%, rgba(10, 11, 12, .82) 70%, rgba(10, 11, 12, .95) 100%); }
  .ht-hero-khau-hieu { margin-top: 36px !important; }

  .ht-ba-cot { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .ht-ba-cot li { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 16px; padding: 0 0 24px; border-left: 0; border-bottom: 1px solid var(--ht-duong); }
  .ht-ba-cot li:last-child { padding-bottom: 0; border-bottom: 0; }
  .ht-ba-cot .ht-so { grid-row: span 2; }
  .ht-ba-cot h3 { margin: 2px 0 6px; }
  .ht-ba-cot h3 br, .ht-ba-cot p br { display: none; }

  .ht-values-anh { width: 100%; height: 220px; opacity: .45; }
  .ht-values-luoi { grid-template-columns: minmax(0, 1fr); gap: 30px; margin-top: 32px; }
  .ht-gia-tri { padding: 0 0 0 18px; border-left: 1px solid var(--ht-duong); }
  .ht-gia-tri:first-child { padding-left: 18px; border-left: 1px solid var(--ht-duong); }
  .ht-values .ht-khau-hieu-doc { margin-top: 8px; }

  .ht-pillars-luoi { grid-template-columns: minmax(0, 1fr); row-gap: 34px; margin-top: 32px; }
  .ht-tru, .ht-tru:first-child, .ht-tru:nth-child(3) { display: grid; grid-template-columns: 50px minmax(0, 1fr); column-gap: 18px; padding: 0; border-left: 0; }
  .ht-tru-icon { grid-row: span 2; }
  .ht-tru h3 { margin: 4px 0 8px; }

  .ht-projects-dieu-khien p { display: none; }
  .ht-the-ray { grid-auto-columns: 78%; gap: 14px; margin-top: 28px; }

  .ht-cta-luoi { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .ht-cta-anh img { object-position: 12% 50%; }
  .ht-cta-anh::after { background: rgba(8, 9, 11, .62); }
}

/* --- Ghi đè giao diện sáng dùng chung ------------------------------------ */
/*
 * subpage-shell.css có khối "Unified light theme for every Discovery subpage":
 * mọi tiêu đề màu #1c1d1b, đoạn văn #5b5c57, h2 cỡ 40px, tất cả viết hoa — đều
 * !important. Kiểu chữ ở đây đã trùng với khối đó; phần khai báo lại bên dưới
 * chỉ giữ màu cho các mục nền tối, cỡ chữ trên điện thoại và những dòng chữ
 * thường, trong phạm vi .page-hatang .ht, không đụng các trang con khác.
 */

body.page-hatang .ht :is(p, li, dt, dd, small, strong) { text-transform: none !important; }

/* Tiêu đề */
body.page-hatang .ht .ht-hero h1 {
  color: #fff !important;
  font-family: var(--ht-so-font) !important;
  font-weight: 430 !important;
  text-transform: none !important;
}
body.page-hatang .ht h2.ht-tieude,
body.page-hatang .ht h2.ht-tieude-hoa {
  font-family: var(--ht-sans) !important;
  font-size: 40px !important;
  font-weight: 300 !important;
  line-height: 1.8 !important;
  letter-spacing: .005em !important;
  text-transform: uppercase !important;
  padding-block: 0 !important;
  color: var(--ht-muc) !important;
}
body.page-hatang .ht .ht-toi h2 { color: #fff !important; }
@media (max-width: 767px) {
  body.page-hatang .ht h2.ht-tieude,
  body.page-hatang .ht h2.ht-tieude-hoa { font-size: 28px !important; line-height: 1.25 !important; letter-spacing: .01em !important; }
}

body.page-hatang .ht :is(.ht-ba-cot, .ht-gia-tri) h3 { color: var(--ht-muc) !important; font-family: var(--ht-sans) !important; text-transform: uppercase !important; }
body.page-hatang .ht .ht-tru h3 { color: #fff !important; font-family: var(--ht-sans) !important; text-transform: uppercase !important; }

/* Đoạn văn và nhãn */
body.page-hatang .ht .ht-nhan { color: var(--ht-vang-dam) !important; text-transform: uppercase !important; }
body.page-hatang .ht .ht-toi .ht-nhan,
body.page-hatang .ht .ht-hero .ht-nhan { color: var(--ht-vang) !important; }
body.page-hatang .ht .ht-hero-lead { color: rgba(255, 255, 255, .9) !important; }
body.page-hatang .ht .ht-hero-khau-hieu { color: rgba(255, 255, 255, .78) !important; text-transform: uppercase !important; }
body.page-hatang .ht .ht-hero-en { color: rgba(255, 255, 255, .84) !important; text-transform: uppercase !important; }
body.page-hatang .ht .ht-hero-en-duoi { color: rgba(255, 255, 255, .7) !important; }
body.page-hatang .ht .ht-intro-chu p:last-child,
body.page-hatang .ht .ht-ba-cot p,
body.page-hatang .ht .ht-gia-tri p,
body.page-hatang .ht .ht-projects-dieu-khien p { color: var(--ht-muc-nhat) !important; }
body.page-hatang .ht .ht-projects-dieu-khien p { text-transform: uppercase !important; }
body.page-hatang .ht .ht-railway-chu > p:not(.ht-nhan) { color: rgba(241, 237, 228, .8) !important; }
body.page-hatang .ht .ht-so-lieu dd { color: var(--ht-vang-sang) !important; }
body.page-hatang .ht .ht-so-lieu dt { color: rgba(241, 237, 228, .72) !important; }
body.page-hatang .ht .ht-railway-chuthich { color: #fff !important; text-transform: uppercase !important; }
body.page-hatang .ht .ht-tru p { color: rgba(241, 237, 228, .72) !important; }
body.page-hatang .ht .ht-khau-hieu-doc { color: var(--ht-vang-dam) !important; text-transform: uppercase !important; }
body.page-hatang .ht .ht-toi .ht-khau-hieu-doc { color: var(--ht-vang) !important; }