/* =====================================================================
   D-GROUP THEME — dgroup.vn
   Bảng màu và typography theo mục 10 của brief. Thiết kế cam kết một tông
   duy nhất (nền sáng Warm White + các mảng tối Ink Black), mọi màu khai báo
   tường minh nên không phụ thuộc theme trình duyệt của người xem.
   ===================================================================== */
:root {
  /* Bảng màu chính thức D-Group */
  --color-midnight: #071B2A;
  --color-ocean: #0A3654;
  --color-primary: #0B5C8D;
  --color-accent: #1688B3;

  --color-background: #F6F9FB;
  --color-background-soft: #E8F1F5;
  --color-silver: #B5C3CD;
  --color-border: #D8E3E9;

  --color-text: #17242E;
  /* Đậm hơn một nấc so với #61717D để đạt WCAG AA trên nền #E8F1F5 */
  --color-text-muted: #5A6874;
  --color-white: #FFFFFF;

  --color-primary-hover: #084A72;
  --color-accent-hover: #107292;

  /* Đường kẻ trên nền tối */
  --color-border-dark: #143349;

  /* Accent sáng hơn để đủ tương phản khi đặt trên nền tối */
  --color-accent-on-dark: #5BC0E8;

  --display: "Source Serif 4", ui-serif, Georgia, "Times New Roman", serif;
  --sans: "Be Vietnam Pro", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --gutter: clamp(1.5rem, 4vw, 3rem);
  --maxw: 1440px;

  /* Thang khoảng cách dùng chung cho mọi khối, giữ nhịp dọc đồng đều */
  --space-section: clamp(4.5rem, 8vw, 8rem);
  --space-block: clamp(2.5rem, 4.5vw, 3.5rem);
  --space-head: clamp(1rem, 1.6vw, 1.5rem);

  /* Chiều cao header, dùng để canh sticky và neo cuộn */
  --header-h: 72px;
}

*, *::before, *::after { box-sizing: border-box; }

/* Nền của html để màu Midnight: khi cuộn quá đà (iOS/macOS) phần lộ ra ở hai
   đầu trang trùng màu với hero và footer, không còn vệt sáng lạ. */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
  background: var(--color-midnight);
}

body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-text);
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* clip thay cho hidden: chặn tràn ngang mà không biến body thành vùng cuộn
     riêng — giữ cho position:sticky và các hiệu ứng theo cuộn hoạt động đúng. */
  overflow-x: clip;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  font-optical-sizing: auto;
  letter-spacing: -0.012em;
  text-wrap: balance;
  margin: 0;
}
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

::selection { background: var(--color-primary); color: var(--color-white); }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }

/* ---------- Typography scale ---------- */
.display { font-family: var(--display); font-size: clamp(2.5rem, 1.5rem + 4.3vw, 5.5rem); line-height: 1.06; letter-spacing: -0.02em; }
.title   { font-family: var(--display); font-size: clamp(1.95rem, 1.3rem + 2.5vw, 3.25rem); line-height: 1.14; }
.subtitle{ font-family: var(--display); font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.8rem); line-height: 1.26; }
.lede    { font-size: clamp(1.03rem, 0.98rem + 0.3vw, 1.25rem); line-height: 1.7; }
.eyebrow {
  display: flex; align-items: center; gap: 0.75rem;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--color-primary);
}
.eyebrow::before { content: ""; width: 2rem; height: 1px; background: color-mix(in srgb, var(--color-primary) 55%, transparent); flex: none; }
.on-dark .eyebrow { color: var(--color-accent-on-dark); }
.on-dark .eyebrow::before { background: color-mix(in srgb, var(--color-accent-on-dark) 55%, transparent); }
.label { font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; }

/* ---------- Links & buttons ---------- */
.ulink {
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%; background-repeat: no-repeat; background-size: 0% 1px;
  transition: background-size 0.45s var(--ease), color 0.3s var(--ease);
}
.ulink:hover, .ulink:focus-visible { background-size: 100% 1px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.75rem;
  padding: 1rem 1.75rem; border: 1px solid transparent; cursor: pointer;
  font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.btn span { transition: transform 0.3s var(--ease); }
.btn:hover span { transform: translateX(4px); }
.btn--solid { background: var(--color-primary); color: var(--color-white); }
.btn--solid:hover { background: var(--color-primary-hover); }
.btn--outline { border-color: color-mix(in srgb, var(--color-primary) 35%, transparent); color: var(--color-primary); }
.btn--outline:hover { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-white); }
.on-dark .btn--solid { background: var(--color-white); color: var(--color-midnight); }
.on-dark .btn--solid:hover { background: var(--color-accent); color: var(--color-white); }
.on-dark .btn--outline { border-color: color-mix(in srgb, var(--color-white) 30%, transparent); color: var(--color-white); }
.on-dark .btn--outline:hover { border-color: var(--color-white); background: var(--color-white); color: var(--color-midnight); }

.tlink {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
}
.tlink:hover { color: var(--color-accent-hover); }

/* ---------- Header ---------- */
/* Header luôn nền sáng để logo D-Group hiển thị đúng màu thương hiệu. */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  background: color-mix(in srgb, var(--color-white) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease),
    background-color 0.4s var(--ease), transform 0.45s var(--ease);
}
/* Cuộn xuống thì header thu lại nhường chỗ cho nội dung, cuộn lên hiện lại */
.header[data-hidden="true"] { transform: translateY(-100%); }
.header[data-solid="true"] {
  background: color-mix(in srgb, var(--color-white) 96%, transparent);
  border-bottom-color: var(--color-border);
  box-shadow: 0 1px 24px rgba(7, 27, 42, 0.06);
}
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; height: 72px; }

.logo { display: inline-flex; align-items: center; gap: 0.75rem; }
.logo img { height: 42px; width: auto; }
.wordmark {
  font-family: var(--display); font-size: 1.375rem; line-height: 1;
  letter-spacing: -0.01em; color: var(--color-midnight);
}

.nav { display: none; }
.nav ul { display: flex; align-items: center; gap: 1.5rem; }
.nav a {
  display: inline-block; white-space: nowrap;
  font-size: 0.75rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-text-muted); transition: color 0.3s var(--ease);
}
.nav a:hover { color: var(--color-primary); }
.nav a[aria-current="page"] { color: var(--color-primary); }
.nav .current-menu-ancestor > a,
.nav .current-menu-parent > a { color: var(--color-primary); }

/* ---------- Menu con (dropdown) ---------- */
.nav li { position: relative; }

/* Mũi tên báo hiệu mục có menu con */
.nav .menu-item-has-children > a::after {
  content: "";
  display: inline-block;
  width: 0.36em; height: 0.36em;
  margin-left: 0.55em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-0.15em) rotate(45deg);
  transition: transform 0.3s var(--ease);
}
.nav .menu-item-has-children:hover > a::after,
.nav .menu-item-has-children:focus-within > a::after { transform: translateY(0.05em) rotate(225deg); }

.nav .sub-menu {
  position: absolute;
  top: 100%; left: -1rem;
  z-index: 5;
  display: grid;
  gap: 0;
  min-width: 15rem;
  padding: 0.5rem 0;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  box-shadow: 0 18px 40px rgba(7, 27, 42, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease), visibility 0.28s;
}

/* Vùng đệm vô hình để chuột đi từ mục cha xuống menu con không bị mất */
.nav .menu-item-has-children::after {
  content: "";
  position: absolute;
  inset: 100% 0 auto 0;
  height: 1rem;
}

.nav li:hover > .sub-menu,
.nav li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.nav .sub-menu a {
  display: block;
  padding: 0.7rem 1.25rem;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--color-text);
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.nav .sub-menu a:hover,
.nav .sub-menu a:focus-visible { background: var(--color-background-soft); color: var(--color-primary); }

/* ---------- Menu con trong menu mobile ---------- */
.drawer .sub-menu {
  display: grid;
  gap: 0;
  margin: 0.25rem 0 0.5rem;
  padding-left: 1rem;
  border-left: 1px solid var(--color-border-dark);
}
.drawer .sub-menu li { border: 0; }
.drawer .sub-menu a {
  padding: 0.6rem 0;
  font-family: var(--sans);
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  color: var(--color-silver);
}
.drawer .sub-menu a em { display: none; }

.header__cta {
  display: none; padding: 0.8rem 1.5rem;
  border: 1px solid color-mix(in srgb, var(--color-primary) 35%, transparent);
  color: var(--color-primary);
  font-size: 0.75rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.header__cta:hover { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-white); }

.burger { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -0.5rem; background: none; border: 0; cursor: pointer; color: var(--color-midnight); }
.burger i { position: relative; display: block; width: 24px; height: 14px; }
.burger i::before, .burger i::after { content: ""; position: absolute; left: 0; width: 24px; height: 1px; background: currentColor; transition: transform 0.3s var(--ease), top 0.3s var(--ease); }
.burger i::before { top: 0; }
.burger i::after { top: 12px; }
.burger[aria-expanded="true"] i::before { top: 6px; transform: rotate(45deg); }
.burger[aria-expanded="true"] i::after { top: 6px; transform: rotate(-45deg); }

/* Menu mobile: đóng/mở bằng display để không bao giờ kẹt ẩn nếu môi trường
   không chạy transition; hiệu ứng vào dùng animation nên mất animation thì menu
   vẫn hiển thị đầy đủ. */
.drawer {
  position: fixed; inset: 0; z-index: 40;
  background: var(--color-midnight);
  padding-top: var(--header-h);
  display: none;
}
.drawer[data-open="true"] {
  display: block;
  animation: dg-drawer-in 0.35s var(--ease);
}
@keyframes dg-drawer-in {
  from { opacity: 0; transform: translateY(-10px); }
}

/* Các mục menu hiện lần lượt */
.drawer[data-open="true"] li { animation: dg-drawer-item 0.45s var(--ease) backwards; }
@keyframes dg-drawer-item {
  from { opacity: 0; transform: translateY(12px); }
}
.drawer[data-open="true"] li:nth-child(1) { animation-delay: 60ms; }
.drawer[data-open="true"] li:nth-child(2) { animation-delay: 110ms; }
.drawer[data-open="true"] li:nth-child(3) { animation-delay: 160ms; }
.drawer[data-open="true"] li:nth-child(4) { animation-delay: 210ms; }
.drawer[data-open="true"] li:nth-child(5) { animation-delay: 260ms; }
.drawer[data-open="true"] li:nth-child(6) { animation-delay: 310ms; }
.drawer ul { border-bottom: 1px solid var(--color-border-dark); }
.drawer li + li { border-top: 1px solid var(--color-border-dark); }
.drawer a { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 0; font-family: var(--display); font-size: 1.5rem; color: var(--color-white); }
.drawer a em { font-style: normal; color: var(--color-accent); }
.drawer .btn { width: 100%; margin-top: 2rem; }

/* ---------- Sections ---------- */
.section { padding-block: var(--space-section); }
.section--sm { padding-block: calc(var(--space-section) * 0.62); }
.section--warm { background: var(--color-background); }
.section--dim  { background: var(--color-background-soft); }
.section--ink  { background: var(--color-midnight); color: var(--color-white); }
.section--graphite { background: var(--color-ocean); color: var(--color-white); }
.on-dark h1, .on-dark h2, .on-dark h3 { color: var(--color-white); }
.on-dark .muted { color: var(--color-silver); }
.muted { color: var(--color-text-muted); }
.muted-sm { color: var(--color-text-muted); font-size: 0.9375rem; }
.on-dark .muted-sm { color: var(--color-silver); }

.head { max-width: 46rem; display: flex; flex-direction: column; gap: var(--space-head); }
.head .lede { max-width: 42rem; }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; background: var(--color-midnight); color: var(--color-white); overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(130% 110% at 18% 8%, #0d4368 0%, #082638 48%, #051724 100%); }
.hero::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-accent) 45%, transparent), transparent); }
.hero__body { position: relative; flex: 1; display: flex; align-items: flex-end; padding-top: 7rem; padding-bottom: 3.5rem; }
.hero__grid { display: grid; gap: 3rem; }
.hero__strip { position: relative; border-top: 1px solid color-mix(in srgb, var(--color-white) 10%, transparent); }
.hero__strip .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.5rem; }
.hero__strip ul { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; }
.hero__strip li { font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-silver); }
.scrollhint { display: none; align-items: center; gap: 0.75rem; font-size: 0.625rem; letter-spacing: 0.24em; text-transform: uppercase; color: color-mix(in srgb, var(--color-silver) 80%, transparent); }
.scrollhint::after { content: ""; width: 2rem; height: 1px; background: color-mix(in srgb, var(--color-silver) 35%, transparent); }

/* ---------- Ảnh nền hero ---------- */
.hero__media {
  position: absolute; inset: 0;
  overflow: hidden;
  z-index: 0;
}
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.62;
}
/* Lớp phủ giữ cho chữ luôn đọc được dù ảnh sáng hay tối */
.hero__media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(7, 27, 42, 0.82) 0%, rgba(7, 27, 42, 0.55) 42%, rgba(7, 27, 42, 0.93) 100%),
    linear-gradient(90deg, rgba(7, 27, 42, 0.9) 0%, rgba(7, 27, 42, 0.35) 62%, rgba(7, 27, 42, 0.15) 100%);
}

/* Khi có ảnh, bỏ nền chuyển sắc mặc định để ảnh hiện rõ */
.hero.has-media::before,
.pagehero.has-media::before { opacity: 0.25; }

.hero.has-media .hero__body,
.hero.has-media .hero__strip,
.pagehero.has-media .container { position: relative; z-index: 1; }

/* ---------- Khối ảnh minh hoạ trong nội dung ---------- */
.figure {
  position: relative;
  margin: var(--space-block) 0 0;
  overflow: hidden;
  background: var(--color-background-soft);
}
.figure img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.head + .figure { margin-top: var(--space-block); }

/* ---------- Page hero ---------- */
.pagehero { position: relative; background: var(--color-midnight); color: var(--color-white); padding-top: 8.5rem; padding-bottom: clamp(3.5rem, 7vw, 7rem); overflow: hidden; }
.pagehero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 100% at 15% 0%, #0a3654 0%, #071b2a 60%); }
.pagehero .container { position: relative; }
.crumbs { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 2.5rem; font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-silver); }
.crumbs .sep { color: color-mix(in srgb, var(--color-silver) 55%, transparent); }

/* ---------- Grids ---------- */
.grid { display: grid; gap: var(--space-block) 2.5rem; }
/* Lưới ngay sau một tiêu đề khối luôn cách đều nhau */
.head + .grid, .head + .rowlist, .head + ol { margin-top: var(--space-block); }
.split { display: grid; gap: 2.5rem; }

/* ---------- Cards ---------- */
.card { border-top: 1px solid var(--color-border); padding-top: 1.75rem; display: flex; flex-direction: column; gap: 1rem; transition: border-color 0.5s var(--ease); height: 100%; }

/* Căn hàng ngang.
   Các thẻ trong cùng một hàng dùng chung lưới dòng của lưới cha (subgrid), nên
   tiêu đề, mô tả và liên kết luôn thẳng hàng dù chữ dài ngắn khác nhau — kể cả
   khi đội vận hành sửa lại nội dung. Trình duyệt chưa hỗ trợ subgrid vẫn hiển
   thị bình thường theo kiểu cũ. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 640px) {
    .grid--aligned { row-gap: 1rem; }

    .grid--aligned > .card--aligned {
      display: grid;
      grid-row: span var(--card-rows, 3);
      grid-template-rows: subgrid;
      align-content: start;
      padding-bottom: 2.25rem;
      height: auto;
    }
  }
}
.card:hover { border-top-color: var(--color-accent); }
.on-dark .card { border-top-color: var(--color-border-dark); }
.card__index { font-family: var(--display); font-size: 1.5rem; line-height: 1; color: var(--color-primary); }
.on-dark .card__index { color: var(--color-accent-on-dark); }
.card__title-row { display: flex; align-items: baseline; gap: 1rem; }

.visual {
  position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3;
  background: radial-gradient(120% 90% at 20% 0%, #0f4368 0%, #071b2a 64%);
  overflow: hidden;
}
.visual::after { content: ""; position: absolute; inset: 1.5rem; border: 1px solid color-mix(in srgb, var(--color-white) 10%, transparent); }
.visual__mono { font-family: var(--display); font-size: clamp(2.25rem, 6vw, 3.5rem); line-height: 1; color: color-mix(in srgb, var(--color-white) 85%, transparent); }
.visual__cap { margin-top: 0.75rem; font-size: 0.625rem; letter-spacing: 0.28em; text-transform: uppercase; color: color-mix(in srgb, var(--color-silver) 70%, transparent); }
.visual__inner { position: relative; text-align: center; padding-inline: 1.5rem; }

/* Khối logo thương hiệu — logo PNG đã tách nền, đặt trên nền đồng bộ.
   Nền mặc định là sáng cho cả hệ sinh thái; đổi từng thương hiệu trong wp-admin
   bằng trường "Nền hiển thị logo" nếu logo đó cần nền tối. */
.visual--logo { display: grid; place-items: center; }
.visual--logo::after { display: none; }
.visual--logo.is-light { background: var(--color-white); box-shadow: inset 0 0 0 1px var(--color-border); }
.visual--logo.is-dark { background: var(--color-midnight); }
.visual--logo img {
  position: static;
  width: auto; height: auto;
  max-width: 58%; max-height: 52%;
  object-fit: contain;
  transition: transform 0.6s var(--ease);
}
.brandcard:hover .visual--logo img,
.row:hover .visual--logo img { transform: scale(1.03); }

.badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.75rem; border: 1px solid color-mix(in srgb, var(--color-midnight) 15%, transparent);
  font-size: 0.625rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-text-muted);
}
.on-dark .badge { border-color: color-mix(in srgb, var(--color-white) 22%, transparent); color: var(--color-silver); }
.badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); }
.on-dark .badge i { background: var(--color-accent-on-dark); }
.badge[data-status="coming-soon"] i { background: var(--color-silver); }

.brandcard { position: relative; }
.brandcard .visual { margin-bottom: 1.75rem; }
/* Trong thẻ thương hiệu, nhãn ngành và nhãn trạng thái luôn xuống dòng theo cùng
   một cách để các thẻ trong hàng không lệch nhau. */
.brandcard .brandcard__meta { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
.brandcard__meta { display: flex; flex-wrap: wrap; align-items: center; align-content: flex-start; gap: 0.75rem; margin-bottom: 0.5rem; }
.brandcard__visit { margin-top: auto; padding-top: 1.5rem; display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-primary); transition: color 0.3s var(--ease); }
.brandcard:hover .brandcard__visit { color: var(--color-accent-hover); }
/* Cả thẻ là một vùng bấm dẫn vào trang thương hiệu… */
.brandcard__link::after { content: ""; position: absolute; inset: 0; }
/* …riêng liên kết ra website thương hiệu phải nằm trên vùng đó mới bấm được. */
.brandcard__visit { position: relative; z-index: 1; align-self: flex-start; }
.brandcard__visit:hover { color: var(--color-accent-hover); text-decoration: underline; text-underline-offset: 0.35em; }

.ticks { display: grid; gap: 0.5rem; }
.ticks li { display: flex; gap: 0.75rem; font-size: 0.9375rem; line-height: 1.6; }
.ticks li::before { content: ""; flex: none; width: 1rem; height: 1px; margin-top: 0.7rem; background: color-mix(in srgb, var(--color-accent) 70%, transparent); }

.row { border-top: 1px solid var(--color-border); padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.row:first-child { border-top: 0; padding-top: 0; }
.rowlist li { display: grid; gap: 0.5rem; border-top: 1px solid var(--color-border); padding-block: 1.75rem; }

dl { margin: 0; display: grid; gap: 1.25rem; }
dt { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-text-muted); }
dd { margin: 0.5rem 0 0; font-size: 0.9375rem; line-height: 1.7; color: var(--color-text); }

/* ---------- Form ---------- */
.form { display: grid; gap: 2rem; }
.form__fields { display: grid; gap: 2rem; }
.field { display: grid; gap: 0.75rem; }
.field > span { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-text-muted); }
.field input, .field select, .field textarea {
  width: 100%; padding: 0.75rem 0; border: 0; border-bottom: 1px solid var(--color-border);
  background: transparent; color: var(--color-text); font: inherit; font-size: 0.9375rem; border-radius: 0;
  transition: border-color 0.3s var(--ease);
}
.field select { appearance: none; }
.field textarea { resize: vertical; min-height: 8rem; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--color-accent); }
.field input::placeholder, .field textarea::placeholder { color: color-mix(in srgb, var(--color-text-muted) 35%, transparent); }
.form__note { border: 1px solid var(--color-border); background: color-mix(in srgb, var(--color-background-soft) 60%, transparent); padding: 1.5rem; font-size: 0.9375rem; line-height: 1.65; }
.err { font-size: 0.8125rem; color: var(--color-accent); }

/* ---------- Footer ---------- */
.footer { background: var(--color-midnight); color: var(--color-white); border-top: 1px solid var(--color-border-dark); }
.footer__grid {
  display: grid;
  gap: 2.25rem;
  padding-block: clamp(2.5rem, 4vw, 3.5rem);
}

/* Trên điện thoại: khối giới thiệu chiếm hết chiều ngang, hai danh sách link
   xếp thành 2 cột để chân trang không kéo dài quá một màn hình. */
@media (max-width: 639px) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1.5rem; }
  .footer__grid > :first-child { grid-column: 1 / -1; }
}

/* Từ tablet trở lên các cột nằm ngang, chân trang gọn lại đáng kể */
@media (min-width: 640px) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; }
}

@media (min-width: 1024px) {
  /* 3 cột khi chưa công bố thông tin liên hệ, 4 cột khi đã công bố */
  .footer__grid { grid-template-columns: 1.8fr 1fr 1.2fr; gap: 2.5rem 3rem; }
  .footer__grid:has(> *:nth-child(4)) { grid-template-columns: 1.5fr 1fr 1.1fr 1.1fr; }
}
.footer__logo { display: inline-flex; align-items: center; }
.footer__logo img { height: 44px; width: auto; }
.footer__wordmark {
  font-family: var(--display);
  font-size: 1.75rem;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--color-white);
}
.footer h2 { font-family: var(--sans); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: color-mix(in srgb, var(--color-silver) 85%, transparent); }
/* Chân trang là nền tối: chữ phụ phải dùng tông sáng mới đủ tương phản */
.footer .muted-sm, .footer .muted { color: var(--color-silver); }
.footer ul { display: grid; gap: 0.5rem; margin-top: 1.125rem; }
.footer a { font-size: 0.9375rem; color: color-mix(in srgb, var(--color-white) 85%, transparent); }
.footer a:hover { color: var(--color-accent); }
.footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem; border-top: 1px solid var(--color-border-dark); padding-block: 1.5rem; font-size: 0.8125rem; color: var(--color-silver); }

/* ---------- Chuyển trang ---------- */
/* Trình duyệt hỗ trợ View Transitions sẽ chuyển trang bằng hiệu ứng mờ dần;
   trình duyệt khác điều hướng bình thường, không mất chức năng nào. */
@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: dg-page-out 220ms cubic-bezier(0.4, 0, 1, 1) both;
}
::view-transition-new(root) {
  animation: dg-page-in 420ms var(--ease) both;
}
@keyframes dg-page-out { to { opacity: 0; transform: translateY(-10px); } }
@keyframes dg-page-in { from { opacity: 0; transform: translateY(16px); } }

/* Header và footer giữ nguyên vị trí khi chuyển trang */
.header { view-transition-name: dg-header; }
.footer { view-transition-name: dg-footer; }

/* Trình duyệt chưa hỗ trợ View Transitions: trang vẫn hiện lên mềm mại */
@keyframes dg-fade-in { from { opacity: 0; } to { opacity: 1; } }
body { animation: dg-fade-in 420ms var(--ease) both; }
body.is-leaving { opacity: 0; transition: opacity 200ms ease-in; }

/* ---------- Hàng liên kết nội bộ trong khối kêu gọi ---------- */
.crosslinks {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem 2rem;
  margin-top: var(--space-block);
  padding-top: 1.5rem;
  border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}
.crosslinks__label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.75;
}
.crosslinks ul { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; }
.crosslinks a { font-size: 0.9375rem; }

/* ---------- Thanh tiến độ cuộn ---------- */
.progress {
  position: fixed; inset: 0 auto auto 0; z-index: 55;
  height: 2px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  transition: transform 120ms linear;
  pointer-events: none;
}

/* ---------- Reveal khi cuộn ----------
   Nguyên tắc an toàn: mặc định nội dung LUÔN hiển thị. Chỉ khi JavaScript chạy
   được (thẻ html có class "js") thì mới ẩn đi để làm hiệu ứng. Nhờ vậy nếu file
   JS không tải được — bị plugin tối ưu chặn, bị 404, hay trình duyệt tắt JS —
   trang vẫn hiện đầy đủ thay vì trắng trơn. */
.js .rv {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
  will-change: opacity, transform;
}
.js .rv[data-in="true"] { opacity: 1; transform: none; will-change: auto; }

/* Khối ảnh nở nhẹ khi xuất hiện */
.js .rv .visual img { transform: scale(1.06); transition: transform 1.4s var(--ease); }
.js .rv[data-in="true"] .visual img { transform: none; }

/* Thẻ trong lưới trượt lên lần lượt (độ trễ do JS gán) */
.js .card.rv { transform: translateY(28px); }

/* Lưới an toàn cuối cùng: main.js gắn class "js-ready" ngay khi chạy. Nếu sau
   3 giây vẫn chưa có class đó (JS lỗi hoặc không tải được), CSS tự hiện nội dung. */
.js:not(.js-ready) .rv {
  animation: dg-hien-du-phong 0s linear 3s forwards;
}
@keyframes dg-hien-du-phong {
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  .js .rv, .js .card.rv { opacity: 1; transform: none; animation: none; }
  .js .rv .visual img { transform: none; }
  .header[data-hidden="true"] { transform: none; }
  .progress { display: none; }
  @view-transition { navigation: none; }
}

/* ---------- Breakpoints ---------- */
@media (min-width: 640px) {
  .grid--2, .grid--3, .grid--4, .grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scrollhint { display: flex; }
}
@media (min-width: 900px) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rowlist li { grid-template-columns: 5fr 7fr; gap: 2rem; }
  .split { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4rem; }
  .split--sticky > .col-4,
  .split--sticky > .col-5 {
    position: sticky;
    top: calc(var(--header-h) + 3rem);
    align-self: start;
  }
  .split > .col-4 { grid-column: span 4; }
  .split > .col-5 { grid-column: span 5; }
  .split > .col-6 { grid-column: span 6; }
  .split > .col-7 { grid-column: span 7; }
  .split > .col-start-6 { grid-column: 6 / span 7; }
  .split > .col-start-7 { grid-column: 7 / span 6; }
  .split > .col-start-9 { grid-column: 9 / span 4; }
  .split--reverse > .col-6:first-child { order: 2; }
  .milestone { grid-template-columns: 3fr 4fr 5fr; gap: 2rem; }
}
@media (max-width: 639px) {
  /* Hero trên điện thoại: bớt khoảng trống thừa, chữ dễ đọc hơn */
  .hero__body { padding-top: 6.5rem; padding-bottom: 2.5rem; }
  .hero__strip .container { padding-block: 1.125rem; }
  .hero__strip ul { gap: 0.375rem 1.25rem; }
  .display { line-height: 1.1; }
  .btn { width: 100%; }
  .card { padding-top: 1.5rem; }
  .visual { aspect-ratio: 3 / 2; }
  .pagehero { padding-top: 7.5rem; }
  .footer__legal { flex-direction: column; gap: 0.5rem; }
}

@media (min-width: 1024px) {
  .header__inner { height: 84px; }
  :root { --header-h: 84px; }
  .nav { display: block; }
  .header__cta { display: inline-flex; }
  .burger { display: none; }
  .hero__grid { grid-template-columns: 2fr 1fr; align-items: end; gap: 2.5rem; }
  .hero__body { padding-top: 11rem; padding-bottom: 5rem; }
  .pagehero { padding-top: 11.5rem; }
}
@media (min-width: 1280px) {
  .grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .nav a { font-size: 0.8125rem; letter-spacing: 0.14em; }
}

@media (min-width: 1440px) {
  .nav ul { gap: 2.25rem; }
}

.milestone { display: grid; gap: 0.75rem; border-top: 1px solid var(--color-border); padding-block: 2rem; }
.milestone__year { font-family: var(--display); font-size: 1.75rem; line-height: 1; color: var(--color-accent); }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; z-index: 70; padding: 0.75rem 1.25rem; background: var(--color-midnight); color: var(--color-white); }




/* =====================================================================
   HÌNH ẢNH BỔ SUNG TRÊN CÁC TRANG CHÍNH
   ===================================================================== */

/* ---------- Ảnh nền cho một mục nội dung (không phải hero) ---------- */
.section.has-media { position: relative; overflow: hidden; }
.section.has-media > .container { position: relative; z-index: 1; }

/* Mục nội dung có nhiều chữ hơn hero nên ảnh phải mờ hơn để giữ độ tương phản */
.hero__media--soft img { opacity: 0.3; }
.hero__media--soft::after {
  background:
    linear-gradient(180deg, rgba(5, 23, 36, 0.94) 0%, rgba(5, 23, 36, 0.8) 50%, rgba(5, 23, 36, 0.96) 100%);
}

/* ---------- Ảnh trên thẻ lĩnh vực / giá trị ---------- */
.card__media {
  display: block; position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-background-soft);
}
.on-dark .card__media { background: color-mix(in srgb, var(--color-white) 6%, transparent); }
.card__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.card:hover .card__media img { transform: scale(1.04); }

/* ---------- Dải ảnh không gian ---------- */
/* Mọi khung ảnh cùng tỉ lệ nên chú thích của các ảnh luôn bắt đầu cùng một dòng
   mà không cần subgrid. */
.photostrip__item { display: flex; flex-direction: column; gap: 1rem; margin: 0; }
.photostrip__frame {
  display: block; position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-background-soft);
}
.photostrip__frame img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.photostrip__item:hover .photostrip__frame img { transform: scale(1.05); }
.photostrip figcaption { font-size: 0.875rem; line-height: 1.6; }
.section--ink .photostrip__frame { background: color-mix(in srgb, var(--color-white) 6%, transparent); }

/* ---------- Dải logo thương hiệu ---------- */
.logowall__label { text-align: center; letter-spacing: 0.2em; }
.logowall__list {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: 1.75rem 3rem;
  margin-top: 1.5rem;
}
.logowall__list a, .logowall__list li > span { display: flex; align-items: center; justify-content: center; }
.logowall img {
  height: clamp(30px, 4.2vw, 46px);
  width: auto; max-width: 168px;
  object-fit: contain;
  opacity: 0.9;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.logowall a:hover img,
.logowall a:focus-visible img { opacity: 1; transform: translateY(-2px); }
.logowall__name { font-family: var(--display); font-size: 1.125rem; color: var(--color-text-muted); }

@media (max-width: 639px) {
  .logowall__list { gap: 1.25rem 2rem; }
  .card__media, .photostrip__frame { aspect-ratio: 3 / 2; }
}


/* =====================================================================
   TRANG THƯƠNG HIỆU
   ===================================================================== */

/* Bảng thông tin nhanh: lĩnh vực, địa điểm, website */
.factlist { margin-top: var(--space-block); border-top: 1px solid var(--color-border); }
.factlist > div {
  display: grid; gap: 0.25rem 2rem;
  padding-block: 1.125rem;
  border-bottom: 1px solid var(--color-border);
}
.factlist dt {
  font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--color-text-muted);
}
.factlist dd { margin: 0; font-size: 0.9375rem; line-height: 1.6; }

@media (min-width: 640px) {
  .factlist > div { grid-template-columns: 10rem 1fr; align-items: baseline; }
}

/* Danh sách kênh chính thức của thương hiệu */
.channels {
  display: flex; flex-wrap: wrap; gap: 0.75rem 2.5rem;
  margin-top: var(--space-block);
}
.channels a { font-size: 0.9375rem; }



/* Dải ảnh trên trang thương hiệu */
.gallery { display: grid; gap: 1.25rem; }
.gallery figure { margin: 0; }
.gallery figcaption { margin-top: 0.75rem; font-size: 0.8125rem; line-height: 1.5; }

@media (min-width: 640px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .gallery { grid-template-columns: repeat(3, 1fr); gap: 1.75rem; } }

/* Các bước trải nghiệm — bỏ số thứ tự mặc định của <ol> vì đã có số riêng */
.steps { list-style: none; padding: 0; margin: 0; counter-reset: none; }
.steps > li::marker { content: none; }

/* Câu hỏi thường gặp */
.faq { border-top: 1px solid var(--color-border); }
.faq details { border-bottom: 1px solid var(--color-border); }
.faq summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
  padding-block: 1.375rem;
  font-family: var(--font-display); font-size: 1.125rem; line-height: 1.45;
  cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: none;
  font-family: var(--font-body); font-size: 1.25rem; line-height: 1;
  color: var(--color-primary);
  transition: transform 0.3s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--color-primary); }
.faq summary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 4px; }
.faq__answer { padding-bottom: 1.5rem; max-width: 46rem; }
.faq__answer p { font-size: 0.9375rem; line-height: 1.7; }
.faq__answer p + p { margin-top: 0.875rem; }


/* =====================================================================
   WORDPRESS
   ===================================================================== */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.screen-reader-text:focus {
  position: fixed !important; top: 1rem; left: 1rem; z-index: 70;
  width: auto; height: auto; clip: auto; padding: 0.75rem 1.25rem;
  background: var(--color-midnight); color: var(--color-white);
}

.admin-bar .header { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar .header { top: 46px; } }

/* Nội dung soạn trong trình soạn thảo WordPress (trang Tin tức, bài viết) */
.entry-content { max-width: 46rem; display: grid; gap: 1.5rem; }
.entry-content > * { margin: 0; }
.entry-content p, .entry-content li { font-size: 1.0625rem; line-height: 1.75; color: color-mix(in srgb, var(--color-text-muted) 85%, transparent); }
.entry-content h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); margin-top: 1rem; }
.entry-content h3 { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem); margin-top: 0.5rem; }
.entry-content ul { list-style: none; display: grid; gap: 0.5rem; }
.entry-content ul li { display: flex; gap: 0.75rem; }
.entry-content ul li::before { content: ""; flex: none; width: 1rem; height: 1px; margin-top: 0.85rem; background: color-mix(in srgb, var(--color-accent) 70%, transparent); }
.entry-content ol { list-style: decimal; padding-left: 1.25rem; display: grid; gap: 0.5rem; }
.entry-content a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }
.entry-content img, .entry-content figure { max-width: 100%; height: auto; }
.entry-content blockquote {
  border-left: 1px solid var(--color-accent); padding-left: 1.5rem;
  font-family: var(--display); font-size: 1.25rem; line-height: 1.5;
}
.entry-content table { width: 100%; border-collapse: collapse; }
.entry-content table th, .entry-content table td { border-bottom: 1px solid var(--color-border); padding: 0.75rem 0; text-align: left; }
.entry-content .wp-block-table { overflow-x: auto; }

/* Ảnh thật khi đã có asset — thay cho block màu fallback */
.visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.visual:has(img)::after { display: none; }
.brandcard:hover .visual img, .row:hover .visual img { transform: scale(1.04); }

/* Danh sách bài viết */
.postcard { border-top: 1px solid var(--color-border); padding-top: 1.5rem; display: grid; gap: 1rem; }
.postcard time { font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-text-muted); }
.pagination { display: flex; gap: 0.75rem; margin-top: 3rem; }
.pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.75rem; height: 2.75rem; padding: 0 0.75rem;
  border: 1px solid var(--color-border); font-size: 0.875rem;
}
.pagination .page-numbers.current, .pagination .page-numbers:hover { border-color: var(--color-text); background: var(--color-midnight); color: var(--color-white); }

/* Thông báo form */
.form__note[data-state="success"] { border-color: color-mix(in srgb, var(--color-accent) 45%, transparent); }
.form__note[data-state="error"] { border-color: color-mix(in srgb, var(--color-accent) 45%, transparent); }