/* ==========================================================================
   TIỆM CẦM ĐỒ DW — Bảng màu & kiểu chữ dùng chung
   Trang thông tin điện tử giới thiệu doanh nghiệp (siteMode: brand)
   Không phụ thuộc bên thứ ba: không webfont ngoài, không CDN, không iframe.
   Đổi màu chủ đạo: chỉ cần sửa khối :root bên dưới.
   ========================================================================== */

:root {
  /* --- Màu thương hiệu: mực xanh đậm + điểm vàng đồng --- */
  --brand-900: #0a1827;
  --brand-800: #102438;
  --brand-700: #16314b;
  --brand-600: #1f4a70;
  --brand-500: #33628f;
  --brand-300: #9db6cd;
  --brand-100: #e5ecf3;
  --brand-050: #f2f6f9;

  --accent-700: #7c581c;
  --accent-600: #97702a;
  --accent-500: #b3893c;
  --accent-300: #d8bd87;
  --accent-100: #f3e9d6;

  /* --- Bề mặt & chữ --- */
  --paper: #fbfaf7;
  --surface: #ffffff;
  --surface-alt: #f6f4ef;
  --line: #e2e0d9;
  --line-strong: #cdc9bf;
  --text: #152230;
  --muted: #55677a;

  /* --- Trạng thái --- */
  --focus: #15518c;
  --ok: #2c6e50;

  /* --- Hình khối & nhịp --- */
  --radius: 3px;
  --radius-lg: 5px;
  --shadow-sm: 0 1px 2px rgba(10, 24, 39, 0.05);
  --shadow-md: 0 10px 30px -18px rgba(10, 24, 39, 0.35);
  --shell: 1200px;
  --gutter: clamp(18px, 4vw, 40px);
  --section-y: clamp(56px, 8vw, 104px);

  /* --- Kiểu chữ ---
     Georgia đứng đầu sẽ hỏng dấu tiếng Việt: nó có "ê" nhưng thiếu các dạng
     dựng sẵn "ế ề ể ễ ệ", nên trình duyệt ghép "ê" với dấu rời và chữ bị hở.
     Cambria và Times New Roman đều có đủ bộ ký tự tiếng Việt, vẫn là chân phương. */
  --serif: Cambria, "Times New Roman", Georgia, "Noto Serif", "Songti SC", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
  --tracking-cap: 0.14em;
}

/* ==========================================================================
   Nền tảng
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.75;
  letter-spacing: 0.002em;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.25;
  color: var(--brand-800);
  margin: 0 0 0.6em;
  letter-spacing: -0.01em;
}

h1 {
  font-size: clamp(2rem, 4.4vw, 3.25rem);
}
h2 {
  font-size: clamp(1.5rem, 3vw, 2.15rem);
}
h3 {
  font-size: clamp(1.15rem, 2vw, 1.4rem);
}
h4 {
  font-size: 1.06rem;
}

p {
  margin: 0 0 1.1em;
}

a {
  color: var(--brand-600);
  text-decoration-color: var(--accent-300);
  text-underline-offset: 3px;
}

a:hover {
  color: var(--accent-700);
}

img,
svg {
  max-width: 100%;
}

ul,
ol {
  margin: 0 0 1.1em;
  padding-left: 1.25em;
}

li {
  margin-bottom: 0.4em;
}

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

address {
  font-style: normal;
}

button {
  font: inherit;
  color: inherit;
}

/* ==========================================================================
   Trợ năng (WCAG 2.1 AA)
   ========================================================================== */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--brand-800);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 var(--radius) 0;
  font-size: 0.95rem;
}

.skip-link:focus {
  left: 0;
}

:where(a, button, [tabindex]):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Bố cục chung
   ========================================================================== */

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

/* Cột chữ hẹp cho trang văn bản dài (điều khoản, chính sách dữ liệu) */
.shell--narrow {
  max-width: 880px;
}

.section {
  padding-block: var(--section-y);
}

.section--alt {
  background: var(--surface);
  border-block: 1px solid var(--line);
}

.section--tint {
  background: var(--surface-alt);
}

/* Khối chỉ còn một hai dòng (ví dụ phần ghi chú liên hệ) thì dùng nhịp dọc
   hẹp hơn, tránh khoảng trống lớn trên dưới một dòng chữ. */
.section--tight {
  padding-block: clamp(30px, 4.2vw, 48px);
}

.section-head {
  max-width: 720px;
  margin-bottom: clamp(28px, 4vw, 48px);
}

.eyebrow {
  display: block;
  font-family: var(--sans);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: var(--tracking-cap);
  text-transform: uppercase;
  color: var(--accent-700);
  margin-bottom: 0.9em;
}

.lead {
  font-size: 1.1rem;
  color: var(--muted);
  max-width: 68ch;
}

.muted {
  color: var(--muted);
}

.small {
  font-size: 0.9rem;
}

.note {
  font-size: 0.9rem;
  color: var(--muted);
  border-left: 2px solid var(--accent-300);
  padding-left: 14px;
}

.grid {
  display: grid;
  gap: clamp(18px, 2.4vw, 30px);
}

.grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

.grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

/* Bốn thẻ: cố định hai cột. auto-fit ở bề rộng 1120px sẽ chia thành 3 + 1,
   để lại một ô trống bên phải hàng dưới. */
.grid--pair {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.split {
  display: grid;
  gap: clamp(26px, 5vw, 64px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
}

/* Cột phải là thẻ thông tin: canh theo mép trên để tiêu đề hai cột thẳng nhau */
.split--top {
  align-items: start;
}

/* ==========================================================================
   Nút
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: 0.97rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.btn--primary {
  background: var(--accent-500);
  color: #241a06;
}

.btn--primary:hover {
  background: var(--accent-300);
  color: #241a06;
}

.btn--ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
}

.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-color: #fff;
}

.btn--outline {
  background: transparent;
  color: var(--brand-700);
  border-color: var(--line-strong);
}

.btn--outline:hover {
  border-color: var(--accent-500);
  color: var(--accent-700);
  background: var(--accent-100);
}

.btn svg {
  width: 17px;
  height: 17px;
  flex: none;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}

.link-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border-bottom: 1px solid var(--accent-300);
  padding-bottom: 2px;
}

.link-more svg {
  width: 15px;
  height: 15px;
}

/* ==========================================================================
   Đầu trang
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(251, 250, 247, 0.94);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 76px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--brand-800);
}

/* Khối chữ cạnh logo: giữ đúng một cột chữ, cho phép co lại trong flex */
.brand-text {
  display: block;
  min-width: 0;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--accent-500);
  border-radius: var(--radius);
  background: var(--brand-800);
  color: var(--accent-300);
  font-family: var(--serif);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  flex: none;
}

.brand-name {
  display: block;
  font-family: var(--serif);
  font-size: 1.02rem;
  letter-spacing: 0.04em;
  line-height: 1.2;
  color: var(--brand-800);
}

.brand-sub {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.brand-en {
  display: block;
  font-size: 0.78rem;
  color: var(--muted);
}

.site-nav ul {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.8vw, 26px);
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: nowrap;
}

.site-nav li {
  margin: 0;
}

.site-nav a {
  display: inline-block;
  padding: 6px 0;
  font-size: 0.93rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--brand-700);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.site-nav a:hover {
  color: var(--accent-700);
  border-bottom-color: var(--accent-300);
}

.site-nav a[aria-current="page"] {
  color: var(--brand-900);
  border-bottom-color: var(--accent-500);
  font-weight: 700;
}

.header-tools {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
}

.lang-switch {
  display: inline-flex;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  overflow: hidden;
  flex: none;
}

.lang-switch button {
  background: transparent;
  border: 0;
  padding: 7px 11px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
}

.lang-switch button + button {
  border-left: 1px solid var(--line);
}

.lang-switch button[aria-pressed="true"] {
  background: var(--brand-800);
  color: #fff;
}

.lang-switch button:hover {
  color: var(--brand-800);
}

.lang-switch button[aria-pressed="true"]:hover {
  color: #fff;
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 40px;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  cursor: pointer;
}

.nav-toggle svg {
  width: 20px;
  height: 20px;
}

/* ==========================================================================
   Khối mở đầu (hero)
   ========================================================================== */

.hero {
  position: relative;
  background:
    radial-gradient(120% 90% at 12% 8%, rgba(51, 98, 143, 0.42) 0%, rgba(10, 24, 39, 0) 58%),
    linear-gradient(160deg, var(--brand-900) 0%, var(--brand-800) 52%, var(--brand-700) 100%);
  color: #eef3f8;
  overflow: hidden;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 84px 84px;
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.15) 100%);
  pointer-events: none;
}

/* Ảnh trong khối mở đầu nằm trên nền mực xanh đậm: nâng nhẹ độ sáng để tách khỏi nền */
.hero-media .media-canvas img {
  filter: brightness(1.08) contrast(1.02);
}

/* Chú thích ảnh trong khối mở đầu cũng nằm trên nền tối.
   Màu mặc định --muted (#55677a) chỉ đạt 2,1:1 trên nền hero, gần như không đọc được,
   nên đổi sang tông sáng cùng hệ với .hero-lead. */
.hero .media figcaption {
  color: #b3c6d6;
}

.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(30px, 5vw, 62px);
  align-items: center;
  padding-block: clamp(56px, 9vw, 116px);
}

.hero h1 {
  color: #fff;
}

.hero .eyebrow {
  color: var(--accent-300);
}

/* Dòng tên pháp lý nhỏ phía trên tiêu đề trang chủ.
   Nền khối hero là mực xanh đậm nên phải dùng màu sáng: --muted (#55677a)
   trên --brand-900 chỉ đạt ~3,1:1, không đủ ngưỡng AA 4,5:1. */
.hero-brand {
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #c9c2b1;
}

.hero-lead {
  color: #c8d6e3;
  font-size: 1.04rem;
  max-width: 56ch;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 0.86rem;
  color: #a9bccd;
}

.hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.hero-meta svg {
  width: 15px;
  height: 15px;
  color: var(--accent-300);
  flex: none;
}

/* Trang trong: khối mở đầu ngắn */
.page-head {
  background: linear-gradient(150deg, var(--brand-900) 0%, var(--brand-700) 100%);
  color: #eef3f8;
  padding-block: clamp(46px, 6vw, 78px);
}

.page-head h1 {
  color: #fff;
  margin-bottom: 0.35em;
}

.page-head .eyebrow {
  color: var(--accent-300);
}

.page-head p {
  color: #c2d1df;
  max-width: 62ch;
  margin-bottom: 0;
}

.breadcrumb {
  font-size: 0.82rem;
  color: #9fb3c6;
  margin-bottom: 18px;
}

.breadcrumb a {
  color: #d7e2ec;
  text-decoration: none;
}

.breadcrumb a:hover {
  color: #fff;
  text-decoration: underline;
}

.breadcrumb span {
  margin-inline: 8px;
  color: #8aa2b6;
}

/* ==========================================================================
   Thẻ
   ========================================================================== */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(20px, 2.6vw, 30px);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.card h3 {
  margin-bottom: 0.35em;
}

.card p {
  margin-bottom: 0;
  color: var(--muted);
}

/* Danh sách trong thẻ: bỏ lề cuối để đáy thẻ không bị hụt so với thẻ bên cạnh */
.card ul {
  margin-bottom: 0;
  color: var(--muted);
}

.card li:last-child {
  margin-bottom: 0;
}

.card--link {
  text-decoration: none;
  color: inherit;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.card--link:hover {
  border-color: var(--accent-300);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.card-icon {
  width: 40px;
  height: 40px;
  color: var(--accent-600);
  margin-bottom: 6px;
}

.card-kicker {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: var(--tracking-cap);
  text-transform: uppercase;
  color: var(--accent-700);
}

.card-foot {
  margin-top: auto;
  padding-top: 14px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--brand-600);
}

/* ==========================================================================
   Thẻ thông tin pháp lý (dl)
   ========================================================================== */

.legal-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent-500);
  border-radius: var(--radius-lg);
  padding: clamp(22px, 3vw, 34px);
  box-shadow: var(--shadow-sm);
}

.legal-card h2,
.legal-card h3 {
  font-size: 1.24rem;
  margin-bottom: 0.5em;
}

.legal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 18px 32px;
  margin: 22px 0 0;
}

.legal-grid > div {
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

/* Ngành, nghề đăng ký: trải hết chiều ngang để câu tuyên bố không bị bó trong một cột hẹp */
.legal-grid > .legal-wide {
  grid-column: 1 / -1;
}

.legal-grid dt {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}

.legal-grid dd {
  margin: 0;
  font-size: 0.98rem;
  color: var(--brand-800);
  font-weight: 500;
  overflow-wrap: break-word;
}

.legal-grid dd a {
  overflow-wrap: anywhere;
}

/* ==========================================================================
   Khung hình / minh hoạ nội tuyến
   ========================================================================== */

.media {
  margin: 0;
}

.media-open {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--brand-800);
  cursor: zoom-in;
  overflow: hidden;
  position: relative;
}

.media-open:hover .media-canvas {
  transform: scale(1.015);
}

.media-canvas {
  display: block;
  position: relative;
  aspect-ratio: 16 / 10;
  transition: transform 0.35s ease;
}

.media-canvas svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Ảnh thật: phủ kín khung theo tỉ lệ thiết kế, không làm biến dạng ảnh */
.media-canvas img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
  background: var(--brand-800);
}

.media-zoom {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius);
  background: rgba(10, 24, 39, 0.62);
  color: #fff;
  pointer-events: none;
}

.media-zoom svg {
  width: 16px;
  height: 16px;
}

.media figcaption {
  margin-top: 12px;
  font-size: 0.86rem;
  color: var(--muted);
  line-height: 1.6;
}

/* ==========================================================================
   Lightbox
   ========================================================================== */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  place-items: center;
  background: rgba(8, 18, 30, 0.88);
  padding: clamp(16px, 4vw, 48px);
}

.lightbox[data-open="true"] {
  display: grid;
}

.lightbox-figure {
  margin: 0;
  max-width: 1000px;
  width: 100%;
}

.lightbox-stage {
  background: var(--brand-800);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.lightbox-stage svg,
.lightbox-stage img {
  display: block;
  width: 100%;
  height: auto;
}

.lightbox-caption {
  color: #d5dfe9;
  font-size: 0.92rem;
  margin-top: 14px;
  text-align: center;
}

.lightbox-close {
  position: absolute;
  top: clamp(12px, 3vw, 26px);
  right: clamp(12px, 3vw, 26px);
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  cursor: pointer;
}

.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

.lightbox-close svg {
  width: 20px;
  height: 20px;
}

/* ==========================================================================
   Bài viết (knowledge)
   ========================================================================== */

.article {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3.4vw, 42px);
  box-shadow: var(--shadow-sm);
}

.article + .article {
  margin-top: clamp(24px, 3vw, 38px);
}

.article h2 {
  margin-bottom: 0.3em;
}

.article h3 {
  font-size: 1.06rem;
  margin-top: 1.6em;
}

.article-body {
  max-width: 74ch;
  color: var(--text);
}

.article-body > :last-child {
  margin-bottom: 0;
}

.article-meta {
  font-size: 0.82rem;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 1.2em;
}

.toc {
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(18px, 2.4vw, 26px);
}

.toc h2 {
  font-size: 1.06rem;
  margin-bottom: 0.8em;
}

.toc ol {
  counter-reset: toc;
  list-style: none;
  padding: 0;
  margin: 0;
}

.toc li {
  counter-increment: toc;
  border-top: 1px solid var(--line);
  padding: 9px 0;
  margin: 0;
}

.toc li:first-child {
  border-top: 0;
}

.toc a {
  text-decoration: none;
  color: var(--brand-700);
  font-weight: 500;
  display: flex;
  gap: 10px;
  align-items: baseline;
}

.toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--serif);
  font-size: 0.85rem;
  color: var(--accent-600);
  flex: none;
}

.toc a:hover {
  color: var(--accent-700);
}

/* Bố cục hai cột: mục lục bên trái, nội dung bên phải */
.layout-aside {
  display: grid;
  gap: clamp(26px, 4vw, 52px);
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  align-items: start;
}

.toc--sticky {
  position: sticky;
  top: 96px;
}

@media (max-width: 960px) {
  .layout-aside {
    grid-template-columns: minmax(0, 1fr);
  }

  .toc--sticky {
    position: static;
  }
}

/* ==========================================================================
   Danh sách việc làm
   ========================================================================== */

.job {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(22px, 3vw, 32px);
  box-shadow: var(--shadow-sm);
}

.job + .job {
  margin-top: 22px;
}

.job-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 20px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
  margin-bottom: 18px;
}

.job-head h3 {
  margin: 0;
}

.job-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag {
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--brand-600);
  background: var(--brand-100);
  border-radius: 999px;
  padding: 4px 12px;
}

.job-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 20px 34px;
}

.job-cols h4 {
  margin-bottom: 0.5em;
}

.job-cols ul {
  margin: 0;
  padding-left: 1.1em;
  color: var(--muted);
  font-size: 0.97rem;
}

/* ==========================================================================
   Liên hệ
   ========================================================================== */

.contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.contact-list li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  margin: 0;
}

.contact-list li:first-child {
  border-top: 0;
}

.contact-list svg {
  width: 20px;
  height: 20px;
  color: var(--accent-600);
  margin-top: 4px;
}

.contact-list dt,
.contact-label {
  display: block;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.contact-value {
  font-size: 1.04rem;
  color: var(--brand-800);
  overflow-wrap: anywhere;
}

.contact-value a {
  text-decoration: none;
  border-bottom: 1px solid var(--accent-300);
}

.directions {
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand-500);
  border-radius: var(--radius);
  padding: 18px 22px;
  font-size: 0.96rem;
  color: var(--muted);
}

.directions p:last-child {
  margin-bottom: 0;
}

/* Biểu mẫu liên hệ — mặc định TẮT (DW_CONFIG.contactForm = false) */
.contact-form {
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  padding: clamp(20px, 3vw, 30px);
  background: var(--surface-alt);
}

.field {
  margin-bottom: 16px;
}

.field label {
  display: block;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--brand-800);
  margin-bottom: 6px;
}

.field input,
.field textarea {
  width: 100%;
  font: inherit;
  font-size: 0.97rem;
  padding: 11px 13px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
}

.field textarea {
  min-height: 130px;
  resize: vertical;
}

.field--check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.9rem;
  color: var(--muted);
}

.field--check input {
  width: 18px;
  height: 18px;
  margin-top: 4px;
  flex: none;
}

.field--check label {
  font-weight: 400;
  color: var(--muted);
  margin: 0;
}

/* ==========================================================================
   Dải liên hệ cố định cuối trang
   ========================================================================== */

.band {
  background: var(--brand-800);
  color: #dbe5ee;
  border-top: 3px solid var(--accent-500);
}

.band-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 30px;
  padding-block: 20px;
  font-size: 0.94rem;
}

.band-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #c9d7e3;
}

.band-item svg {
  width: 18px;
  height: 18px;
  color: var(--accent-300);
  flex: none;
}

.band-item a {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}

.band-item a:hover {
  border-bottom-color: var(--accent-300);
}

/* ==========================================================================
   Chân trang
   ========================================================================== */

.site-footer {
  background: var(--brand-900);
  color: #b9c8d6;
  font-size: 0.92rem;
  padding-block: clamp(38px, 5vw, 60px) 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 30px 40px;
  padding-bottom: 34px;
}

.footer-h {
  font-family: var(--sans);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: var(--tracking-cap);
  text-transform: uppercase;
  color: var(--accent-300);
  margin-bottom: 1em;
}

.footer-brand {
  font-family: var(--serif);
  font-size: 1.06rem;
  color: #fff;
  letter-spacing: 0.03em;
  margin-bottom: 0.7em;
}

.footer-line {
  margin: 0 0 0.55em;
  line-height: 1.65;
}

.footer-line strong {
  color: #e6eef5;
  font-weight: 600;
}

.footer-resp {
  color: #e2d6bb;
  border-left: 2px solid var(--accent-500);
  padding-left: 12px;
  margin-top: 14px;
}

.footer-note {
  color: #8fa3b5;
  font-size: 0.82rem;
  line-height: 1.6;
}

.footer-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-list li {
  margin-bottom: 0.55em;
}

.site-footer a {
  color: #d3e0ea;
  text-decoration: none;
  border-bottom: 1px solid rgba(211, 224, 234, 0.3);
}

.site-footer a:hover {
  color: #fff;
  border-bottom-color: var(--accent-300);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.13);
  padding-block: 20px 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 24px;
  font-size: 0.83rem;
  color: #8fa3b5;
}

/* ==========================================================================
   Tiện ích nhỏ
   ========================================================================== */

/* Bề rộng dòng đọc thoải mái cho khối văn xuôi (trùng với .article-body) */
.measure {
  max-width: 74ch;
}

.mt-lg {
  margin-top: clamp(26px, 4vw, 44px);
}

/* Nhãn trạng thái nhỏ đặt ngay trên tiêu đề thẻ */
.mt-sm {
  margin-top: 0.35em;
}

.mb-0 {
  margin-bottom: 0;
}

/* ==========================================================================
   Đáp ứng — ngắt tại 960px và 600px
   ========================================================================== */

/* ==========================================================================
   Đáp ứng — ngắt tại 1200px (điều hướng), 960px và 600px (bố cục)
   Ghi chú: bảy nhãn điều hướng tiếng Việt cùng tên doanh nghiệp và nút đổi
   ngôn ngữ không vừa trên một dòng dưới 1200px (đo được 1101px tràn 64px),
   nên điều hướng được thu gọn sớm hơn phần bố cục để tiêu đề trang không
   bao giờ bị ngắt dòng. Không hạ ngưỡng này khi chưa đo lại.
   ========================================================================== */

@media (max-width: 1200px) {
  .site-nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    padding: 12px var(--gutter) 20px;
  }

  .site-nav[data-open="true"] {
    display: block;
  }

  .site-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    flex-wrap: wrap;
  }

  .site-nav a {
    display: block;
    padding: 13px 0;
    border-bottom: 1px solid var(--line);
    font-size: 1rem;
  }

  .site-nav a[aria-current="page"] {
    border-bottom-color: var(--accent-500);
  }

  .nav-toggle {
    display: inline-flex;
  }

  .header-inner {
    position: relative;
  }
}

@media (max-width: 960px) {
  .hero-inner,
  .split {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-media {
    order: -1;
  }
}

@media (max-width: 600px) {
  body {
    font-size: 16px;
  }

  .grid--pair {
    grid-template-columns: minmax(0, 1fr);
  }

  .brand-sub {
    display: none;
  }

  /* Tên pháp lý dài 14 ký tự: ở 390px khối chữ chỉ còn ~140px nên cỡ 1.02rem
     gãy thành 3 dòng (TIỆM / CẦM ĐỒ / DW). Hạ cỡ chữ để giữ 1–2 dòng. */
  .brand-name {
    font-size: 0.94rem;
    letter-spacing: 0.02em;
  }

  /* Tên tiếng Anh dài 29 ký tự: dưới 600px khối thương hiệu chỉ còn ~140px
     cho phần chữ nên nó gãy thành 3–4 dòng và đẩy đầu trang cao gấp đôi.
     Ở đây giữ đúng tên pháp lý tiếng Việt, bỏ dòng phụ — không cắt bớt tên. */
  .brand-en {
    display: none;
  }

  .btn {
    width: 100%;
    justify-content: center;
  }

  .btn-row {
    flex-direction: column;
  }

  .band-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

}

/* ==========================================================================
   Tôn trọng thiết lập giảm chuyển động
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Hiệu ứng xuất hiện khi cuộn (tắt được bằng reduced-motion hoặc thiếu JS) */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* In ấn */
@media print {
  .site-header,
  .band,
  .lightbox {
    display: none !important;
  }

  body {
    background: #fff;
  }
}

/* ==========================================================================
   Ảnh giao diện ứng dụng (app.html)
   Khung điện thoại dọc: ba cột trên, một cột ở màn hình hẹp.
   ========================================================================== */

.shots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 18px;
}

.shot {
  margin: 0;
}

.shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: #0a1827;
  box-shadow: 0 24px 48px -32px rgba(8, 20, 32, 0.6);
}

.shot figcaption {
  margin-top: 12px;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--muted);
}

@media (max-width: 600px) {
  /* 六张竖版界面堆成一列要滚六屏，改横滑：一次看一张，右侧露出下一张的边缘 */
  .shots {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 74%;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 10px;
    -webkit-overflow-scrolling: touch;
  }

  .shot {
    max-width: none;
    margin: 0;
    scroll-snap-align: start;
  }
}