/* =====================================================================
   NguyenMinhLuan CMS — Frontend styles
   Thương hiệu: vàng #ffdd00, đen #333132. Font: Poppins (SVN, Việt hoá).
   ===================================================================== */

/* ---- Font Poppins (Việt hoá), self-host woff2, nhẹ & tải nhanh ---- */
@font-face {
  font-family: 'Poppins';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/poppins-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/poppins-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/poppins-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal; font-weight: 800; font-display: swap;
  src: url('../fonts/poppins-800.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: italic; font-weight: 600; font-display: swap;
  src: url('../fonts/poppins-600i.woff2') format('woff2');
}

:root {
  --black:     #333132;   /* Đen thương hiệu */
  --yellow:    #ffdd00;   /* Vàng thương hiệu */
  --bg:        #111111;   /* Nền tối trang (near-black, khớp mockup) */
  --bg-alt:    #161616;
  --surface:   #1b1b1b;
  --border:    #262626;
  --text:      #ffffff;
  --text-dim:  #b4b4b4;
  --text-mute: #7d7d7d;
  --accent:    #ffdd00;   /* alias vàng */
  --maxw:      1400px;
  --gap:       24px;
  --header-h:  84px;
  --logo-h:    calc(var(--sidebar-w) * 1.5);  /* = chiều cao ô logo, để header/toolbar ngang với ô logo */
  --sidebar-w: 86px;      /* Bề rộng thanh bên desktop */
  --mbar-h:    64px;      /* Chiều cao thanh trên mobile/tablet */
  --font:      'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Dải tan dần dùng cho lớp quầng sáng của nền hạt (xem .fx-dots__glow) */
  --fx-fade: linear-gradient(to bottom,
              #000 0%, #000 46%, rgba(0,0,0,.62) 62%, rgba(0,0,0,.22) 72%, transparent 80%);
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  font-size: 16px;
  /* clip cắt tràn ngang giống hidden NHƯNG không biến body thành khung cuộn
     -> position: sticky của <main> mới hoạt động (hidden thì bị vô hiệu).
     Dòng hidden giữ lại làm dự phòng cho trình duyệt quá cũ. */
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--accent); }
h1,h2,h3,h4,h5,h6 { margin: 0 0 .5em; font-weight: 700; line-height: 1.2; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }

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

/* Chừa chỗ cho thanh bên (desktop). Tablet/mobile reset ở phần responsive. */
body { padding-left: var(--sidebar-w); }
main { padding-top: 30px; }

/* ---- Skip link (a11y) ---- */
.skip-link {
  position: absolute; left: -9999px; top: 0; background: var(--accent);
  color: #111; padding: 10px 16px; z-index: 1000; border-radius: 0 0 4px 0;
}
.skip-link:focus { left: 0; }

/* =====================================================================
   THANH BÊN (SIDEBAR) — chỉ hiện ở desktop
   ===================================================================== */
.side-rail {
  position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-w);
  background: var(--yellow); color: var(--black); z-index: 200;
  display: flex; flex-direction: column; align-items: stretch;
}

/* --- Ô logo: cao ~1.5x, logo bên trong giữ nguyên --- */
.side-rail .rail-logo {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: var(--logo-h);
  border-bottom: 1px solid rgba(51,49,50,.22); /* hairline mỏng thay cho 2px */
  border-right: 1px solid rgba(51,49,50,.28);  /* viền phải: chỉ các ô VÀNG có, ô đen thì không */
  transition: background-color .35s cubic-bezier(.22,1,.36,1);
}
.side-rail .rail-logo svg { width: 42px; height: auto; display: block; }
.side-rail .rail-logo:hover { background: rgba(51,49,50,.05); }

/* --- 3 nút social --- */
.rail-social {
  display: flex; flex-direction: column; align-items: stretch; width: 100%;
}
.rail-social a {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: var(--sidebar-w); color: var(--black); /* ô vuông: cao = rộng sidebar */
  border-bottom: 1px solid rgba(51,49,50,.22); /* hairline mỏng */
  border-right: 1px solid rgba(51,49,50,.28);  /* viền phải cho ô vàng */
  transition: color .3s ease, background-color .3s ease;
}
.rail-social a svg { transition: transform .35s cubic-bezier(.22,1,.36,1); }
.rail-social a:hover { color: var(--yellow); background: var(--black); }
.rail-social a:hover svg { transform: scale(1.12); }
.rail-social a:last-child { border-bottom: 0; } /* nút đen bên dưới KHÔNG có viền */

/* --- Khối CTA "Let's build up..." : nền đen tuyền, chữ vàng, chiếm trọn vùng còn lại --- */
.rail-cta {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
  align-items: center;      /* căn giữa ngang */
  justify-content: center;  /* căn giữa dọc trong vùng còn lại */
  gap: 18px; width: 100%;
  background: #000000; color: var(--yellow);   /* đen tuyền #000000 */
  padding: 24px 0; text-decoration: none; cursor: pointer;
  position: relative; overflow: hidden;
  transition: background-color .45s cubic-bezier(.22,1,.36,1);
}
/* icon SẴN CÓ trong nút (con cá) — tự float nhẹ liên tục */
.rail-cta > svg, .rail-cta > img, .rail-cta > i,
.rail-cta svg, .rail-cta img {
  flex: 0 0 auto;
  transform-origin: center;
  animation: railIcoFloat 2.8s ease-in-out infinite;
  transition: filter .4s ease;
  will-change: transform;
}
@keyframes railIcoFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-5px) rotate(-6deg); }
}
/* khi hover: cá "bơi" nhanh & mạnh hơn + phát sáng nhẹ */
.rail-cta:hover > svg, .rail-cta:hover > img, .rail-cta:hover > i,
.rail-cta:hover svg, .rail-cta:hover img,
.rail-cta:focus-visible svg, .rail-cta:focus-visible img {
  animation: railIcoSwim 1.1s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(255,221,0,.6));
}
@keyframes railIcoSwim {
  0%   { transform: translateY(0)    rotate(0deg)   scale(1); }
  25%  { transform: translateY(-7px) rotate(-10deg) scale(1.12); }
  50%  { transform: translateY(0)    rotate(0deg)   scale(1.12); }
  75%  { transform: translateY(-4px) rotate(9deg)   scale(1.12); }
  100% { transform: translateY(0)    rotate(0deg)   scale(1); }
}
/* CTA thanh dọc — hiệu ứng "lật chữ" giống footer: chữ cuộn đi, bản sao cuộn vào */
.rail-cta .rail-roll {
  display: inline-block; overflow: hidden;
  transform: rotate(-90deg);                 /* ngang -> dọc, đọc từ dưới lên (giống cũ) */
  white-space: nowrap;
  font-weight: 700; font-size: 15px; line-height: 1.3;
  letter-spacing: .04em;
}
.rail-cta .rail-roll__in {
  display: inline-block; position: relative;
  transition: transform .55s cubic-bezier(.76,0,.24,1);
  will-change: transform;
}
.rail-cta .rail-roll__in::after {
  content: attr(data-text);
  position: absolute; left: 0; top: 100%; white-space: nowrap;
}
.rail-cta:hover, .rail-cta:focus-visible { background: #0d0d0d; }
.rail-cta:hover .rail-roll__in,
.rail-cta:focus-visible .rail-roll__in { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) {
  .rail-cta .rail-roll__in { transition: none; }
}

/* =====================================================================
   THANH TRÊN (TOP BAR) + NÚT MENU
   ===================================================================== */
.site-header {
  position: fixed; top: 0; right: 0; left: var(--sidebar-w); z-index: 210;
  display: flex; align-items: center; justify-content: flex-end;
  height: var(--logo-h); padding: 0 30px;
  pointer-events: none;                 /* để click xuyên qua vùng trống */
  transition: opacity .3s ease, transform .35s cubic-bezier(.22,1,.36,1), visibility .3s;
}
body.menu-open { overflow: hidden; }

/* Khi cuộn tới gần chân trang: ẩn nút MENU nổi để không đè lên footer (chỉ ở desktop,
   nơi nút là pill vàng nổi — mobile giữ nguyên thanh trên) */
@media (min-width: 1025px) {
  .site-header.is-hidden {
    opacity: 0; visibility: hidden; transform: translateY(-14px); pointer-events: none;
  }
}
.site-header > * { pointer-events: auto; }

/* Logo chữ — chỉ dùng cho tablet/mobile (ẩn ở desktop) */
.topbar-logo { display: none; }
.topbar-logo svg { height: 20px; width: auto; display: block; }

/* Nút MENU (desktop): mặc định nền tối + viền/chữ/icon vàng;
   hover HOẶC khi đang mở (đang chọn) -> đảo thành nền vàng, chữ/icon đen */
.menu-btn {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--bg); color: var(--yellow);
  border: 0.5px solid var(--yellow);
  padding: 20px 30px; border-radius: 9px; font-family: var(--font);
  transition: background-color .3s ease, color .3s ease, border-color .3s ease,
              transform .3s cubic-bezier(.22,1,.36,1),
              box-shadow .3s ease;
}
.menu-btn:hover,
.menu-btn.open {
  background: var(--yellow); color: var(--black); border-color: var(--yellow);
}
.menu-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(255,221,0,.28); }
.menu-btn.open { transform: none; box-shadow: none; }
.menu-btn:active { transform: translateY(0); box-shadow: none; }
/* Chữ MENU canh giữa theo cả chiều dọc (line-height:1) lẫn icon/box */
.menu-btn-label { display: inline-flex; align-items: center; line-height: 1; font-weight: 700; font-size: 14px; letter-spacing: .5px; transform: translateY(2px); }
.menu-btn-ico { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 18px; }
.menu-btn-ico i {
  display: block; height: 1.5px; width: 100%; background: currentColor; border-radius: 2px;
  transition: width .32s cubic-bezier(.22,1,.36,1), transform .3s ease, opacity .2s ease;
}
/* hover: 3 thanh canh giữa, ngắn dần từ trên/dưới vào giữa */
.menu-btn:not(.open):hover .menu-btn-ico i:nth-child(1),
.menu-btn:not(.open):hover .menu-btn-ico i:nth-child(3) { width: 70%; }
.menu-btn:not(.open):hover .menu-btn-ico i:nth-child(2) { width: 40%; }
.menu-btn.open .menu-btn-ico i:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.menu-btn.open .menu-btn-ico i:nth-child(2) { opacity: 0; }
.menu-btn.open .menu-btn-ico i:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* =====================================================================
   MENU OVERLAY (gom trong hamburger, mọi kích thước màn hình)
   Bố cục: [ô tìm kiếm — ngang hàng nút MENU]  ->  [danh mục chữ lớn]
   ===================================================================== */
.menu-overlay {
  --ms-h: 54px;                       /* chiều cao ô tìm kiếm */
  position: fixed; inset: 0; z-index: 190; background: var(--black);
  display: flex; flex-direction: column;
  /* Lề phải = 30px để mũi tên danh mục thẳng hàng với nút MENU ở thanh trên */
  padding: 0 30px 40px;
  padding-left: calc(var(--sidebar-w) + clamp(30px, 7vw, 110px));
  overflow: hidden auto; overscroll-behavior: contain;
  /* Cả khối menu (nền đen + chữ) là 1 tấm đổ từ trên xuống. Chữ nằm bên trong
     nên khi đóng nó "cuốn" lên cùng nền -> không bao giờ lòi chữ đè lên trang. */
  transform: translateY(-100%);
  visibility: hidden;
  will-change: transform;
  /* ĐÓNG: rời đi dịu rồi nhanh dần, hạ êm ở cuối (không giật) */
  transition: transform .58s cubic-bezier(.4, 0, .25, 1),
              visibility 0s linear .58s;
}
/* Quầng sáng vàng rất nhẹ ở góc trên -> nền bớt phẳng, hợp tông thương hiệu */
.menu-overlay::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 12% -10%, rgba(255,221,0,.09), transparent 58%);
}
.menu-overlay.open {
  transform: translateY(0);
  visibility: visible;
  /* MỞ: đầu đẩy nhẹ, giữa mạnh, cuối hạ cánh êm (mượt, không phanh gấp) */
  transition: transform .72s cubic-bezier(.62, 0, .2, 1),
              visibility 0s;
}

/* Đệm trên = canh TÂM ô tìm kiếm trùng TÂM nút MENU (nút nằm giữa dải cao --logo-h) */
.menu-inner {
  position: relative; z-index: 1;
  width: 100%; max-width: none; margin: 0;
  padding-top: calc((var(--logo-h) - var(--ms-h)) / 2);
  display: flex; flex-direction: column; gap: clamp(30px, 4vw, 58px);
}

/* Nội dung menu: chỉ hiện SAU khi tấm đen đã phủ đầy (nhịp 2) */
.menu-search,
.mnav__item {
  opacity: 0; transform: translateY(20px);
  /* ĐÓNG: chữ mờ dịu, cuốn lên cùng nền (đồng thời biến mất) */
  transition: opacity .34s ease, transform .34s ease;
}
.menu-overlay.open .menu-search,
.menu-overlay.open .mnav__item {
  opacity: 1; transform: none;
  /* MỞ: chớm hiện khi tấm đen đang lắng xuống -> chuyển động liền mạch, êm */
  transition: opacity .5s ease, transform .62s cubic-bezier(.16, 1, .3, 1);
}
.menu-overlay.open .menu-search              { transition-delay: .44s; }
.menu-overlay.open .mnav__item:nth-child(1)  { transition-delay: .52s; }
.menu-overlay.open .mnav__item:nth-child(2)  { transition-delay: .57s; }
.menu-overlay.open .mnav__item:nth-child(3)  { transition-delay: .62s; }
.menu-overlay.open .mnav__item:nth-child(4)  { transition-delay: .67s; }
.menu-overlay.open .mnav__item:nth-child(5)  { transition-delay: .72s; }
.menu-overlay.open .mnav__item:nth-child(6)  { transition-delay: .77s; }
.menu-overlay.open .mnav__item:nth-child(n+7){ transition-delay: .82s; }

@media (prefers-reduced-motion: reduce) {
  .menu-overlay,
  .menu-overlay.open { transition: visibility 0s; transform: none; }
  .menu-search, .mnav__item,
  .menu-overlay.open .menu-search,
  .menu-overlay.open .mnav__item { transition: none; }
  .mnav__sub, .mnav__sublist a { transition: none; }
}

/* ---------------------------------------------------------------------
   THANH TÌM KIẾM — kiểu gạch chân, gọn và nhẹ (không phải khối viên thuốc)
   ------------------------------------------------------------------- */
/* Kéo dài hết cột nội dung, chỉ chừa chỗ cho nút MENU ở góc phải */
.menu-search { position: relative; width: 100%; padding-right: 175px; }

.menu-search__field {
  position: relative; display: flex; align-items: center; gap: 14px;
  height: var(--ms-h); padding: 0 2px;
  border-bottom: 1px solid rgba(255,255,255,.20);
  transition: border-color .3s ease;
}
.menu-search__field:hover { border-bottom-color: rgba(255,255,255,.38); }
/* Vạch vàng chạy từ trái sang khi đang gõ */
.menu-search__field::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1.5px;
  background: var(--yellow); transform: scaleX(0); transform-origin: left center;
  transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.menu-search.is-focus .menu-search__field::after { transform: scaleX(1); }

.menu-search__ico { display: flex; color: var(--text-mute); transition: color .3s ease; }
.menu-search__ico svg { width: 19px; height: 19px; display: block; }
.menu-search.is-focus .menu-search__ico { color: var(--yellow); }

.menu-search__input {
  flex: 1; min-width: 0; height: 100%;
  background: none; border: 0; outline: none; padding: 0;
  font-family: var(--font); font-size: 17px; font-weight: 500;
  color: #fff; letter-spacing: .1px;
}
.menu-search__input::placeholder { color: var(--text-mute); }
/* Bỏ nút "x" mặc định của trình duyệt (đã có nút xoá riêng) */
.menu-search__input::-webkit-search-decoration,
.menu-search__input::-webkit-search-cancel-button,
.menu-search__input::-webkit-search-results-button { -webkit-appearance: none; appearance: none; }

.menu-search__clear {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex: 0 0 auto;
  background: rgba(255,255,255,.08); border: 0; border-radius: 50%;
  color: var(--text-dim); transition: background-color .25s ease, color .25s ease;
}
.menu-search__clear[hidden] { display: none; }
.menu-search__clear svg { width: 12px; height: 12px; }
.menu-search__clear:hover { background: rgba(255,255,255,.18); color: #fff; }

.menu-search__go {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: 0 0 auto;
  background: none; border: 0; border-radius: 50%;
  color: var(--text-mute);
  transition: color .25s ease, transform .35s cubic-bezier(.22,1,.36,1);
}
.menu-search__go svg { width: 20px; height: 20px; }
.menu-search__go:hover { color: var(--yellow); transform: translateX(3px); }
.menu-search.is-focus .menu-search__go { color: var(--yellow); }

/* --- Bảng gợi ý --- */
.menu-search__panel {
  position: absolute; left: 0; right: 0; top: calc(100% + 14px); z-index: 5;
  background: #1c1a1b;
  border: 1px solid rgba(255,255,255,.12); border-radius: 16px;
  box-shadow: 0 26px 60px rgba(0,0,0,.5);
  padding: 8px; max-height: min(56vh, 430px); overflow-y: auto;
  animation: msPanelIn .26s cubic-bezier(.16,1,.3,1);
}
@keyframes msPanelIn { from { opacity: 0; transform: translateY(-8px); } }
.menu-search__panel[hidden] { display: none; }

.ms-item {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 12px; border-radius: 12px;
  color: var(--text-dim); transition: background-color .2s ease, color .2s ease;
}
.ms-item:hover, .ms-item.is-active { background: rgba(255,255,255,.07); color: #fff; }
.ms-item__thumb {
  width: 52px; height: 40px; flex: 0 0 auto; border-radius: 8px; overflow: hidden;
  background: linear-gradient(135deg, rgba(255,221,0,.16), rgba(255,255,255,.04));
}
.ms-item__thumb img { width: 100%; height: 100%; object-fit: cover; }
.ms-item__body { min-width: 0; flex: 1; }
.ms-item__title {
  display: block; font-size: 15px; font-weight: 600; color: #fff; line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ms-item__type {
  display: block; font-size: 11px; font-weight: 600; letter-spacing: .8px;
  text-transform: uppercase; color: var(--yellow); margin-top: 3px;
}
.ms-item__go { color: var(--text-mute); flex: 0 0 auto; }
.ms-item__go svg { width: 16px; height: 16px; display: block; }
.ms-item:hover .ms-item__go, .ms-item.is-active .ms-item__go { color: var(--yellow); }

.ms-note { padding: 16px 14px; font-size: 14px; color: var(--text-mute); }
.ms-all {
  display: block; margin-top: 4px; padding: 12px 14px;
  border-top: 1px solid rgba(255,255,255,.09);
  font-size: 13px; font-weight: 600; letter-spacing: .3px; color: var(--yellow);
}
.ms-all:hover { color: #fff; }

/* ---------------------------------------------------------------------
   DANH MỤC CHỮ LỚN + DANH MỤC CON (đẩy các mục xuống khi mở)
   ------------------------------------------------------------------- */
.mnav { display: flex; flex-direction: column; }
.mnav__item { position: relative; --row-pad: clamp(20px, 2.4vw, 32px); }
/* Đường kẻ phân cách CHẠY HẾT BỀ NGANG MÀN HÌNH (tràn khỏi cột nội dung).
   Mục cuối không có kẻ dưới. */
.mnav__item::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 200vw; height: 1px; background: rgba(255,255,255,.12);
}
/* Mục đầu tiên không có kẻ trên, mục cuối không có kẻ dưới */
.mnav__item:first-child::before { display: none; }

.mnav__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: var(--row-pad) 0;
}

.mnav__link {
  display: inline-flex; align-items: center; min-width: 0; color: #fff;
  transition: color .25s ease;
}

.mnav__text {
  display: block; line-height: 1;
  font-size: clamp(38px, 8vw, 76px); font-weight: 800;
  letter-spacing: -1.5px;
  transition: color .25s ease;
}
/* Cắt khoảng thừa phía trên (phần vượt chữ hoa) và phía dưới (phần chân chữ)
   -> hộp chữ bằng đúng dải chữ hoa, nên chữ nằm CHÍNH GIỮA hai đường kẻ. */
.mnav__text::before,
.mnav__text::after { content: ''; display: block; width: 0; height: 0; }
.mnav__text::before { margin-bottom: -0.099em; }
.mnav__text::after  { margin-top: -0.151em; }
.mnav__link:hover .mnav__text,
.mnav__link:focus-visible .mnav__text { color: var(--yellow); }

/* Mũi tên: luôn hiện để BÁO HIỆU có danh mục con */
.mnav__toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: clamp(38px, 3.6vw, 46px); height: clamp(38px, 3.6vw, 46px); flex: 0 0 auto;
  background: none; color: var(--text-dim);
  border: 1px solid rgba(255,255,255,.18); border-radius: 50%;
  transition: transform .45s cubic-bezier(.22,1,.36,1),
              border-color .3s ease, background-color .3s ease, color .3s ease;
}
.mnav__toggle svg { width: 18px; height: 18px; display: block; }
.mnav__toggle:hover { border-color: var(--yellow); color: var(--yellow); }
.mnav__item:hover > .mnav__row > .mnav__toggle,
.mnav__item.is-open > .mnav__row > .mnav__toggle {
  transform: rotate(180deg);
  background: var(--yellow); border-color: var(--yellow); color: var(--black);
}

/* Khối con: đóng = cao 0 (không chiếm chỗ) -> mở = đẩy các mục dưới xuống.
   --sub-h do JS đo và ghi vào; 520px chỉ là phương án dự phòng. */
.mnav__sub {
  max-height: 0; overflow: hidden; margin-top: 0;
  transition: max-height .55s cubic-bezier(.22,1,.36,1), margin-top .55s cubic-bezier(.22,1,.36,1);
}
/* Khi mở: kéo cả khối lên cho cách chữ cha ~10px. Kéo CẢ KHỐI (không phải nội
   dung bên trong) nên các nút không bị overflow:hidden cắt mất phần trên. */
.mnav__item.has-children:hover > .mnav__sub,
.mnav__item.has-children:focus-within > .mnav__sub,
.mnav__item.is-open > .mnav__sub { margin-top: calc(8px - var(--row-pad)); }
.mnav__sublist {
  display: flex; flex-wrap: wrap; gap: 12px;
  padding: 2px 0 clamp(24px, 2.8vw, 38px);
}
.mnav__sublist a {
  display: inline-block; padding: 11px 22px;
  border: 1px solid rgba(255,255,255,.16); border-radius: 999px;
  font-size: clamp(14px, 1.25vw, 17px); font-weight: 500; color: var(--text-dim);
  /* Từng mục con nhoè hiện lần lượt -> mở ra mềm, không "dính" vào mục cha */
  opacity: 0; transform: translateY(10px);
  transition: opacity .3s ease, transform .4s cubic-bezier(.22,1,.36,1),
              border-color .25s ease, color .25s ease, background-color .25s ease;
}
.mnav__sublist a:hover,
.mnav__sublist a:focus-visible {
  color: var(--black); background: var(--yellow); border-color: var(--yellow);
}

/* Mở bằng rê chuột (chỉ máy có chuột thật) */
@media (hover: hover) and (pointer: fine) {
  .mnav__item.has-children:hover > .mnav__sub,
  .mnav__item.has-children:focus-within > .mnav__sub { max-height: var(--sub-h, 520px); }
  .mnav__item.has-children:hover > .mnav__sub .mnav__sublist a,
  .mnav__item.has-children:focus-within > .mnav__sub .mnav__sublist a { opacity: 1; transform: none; }
}
/* Mở bằng chạm/bấm mũi tên (điện thoại, tablet) — và cũng dùng cho bàn phím */
.mnav__item.is-open > .mnav__sub { max-height: var(--sub-h, 520px); }
.mnav__item.is-open > .mnav__sub .mnav__sublist a { opacity: 1; transform: none; }

/* Độ trễ tăng dần cho từng mục con */
.mnav__sublist li:nth-child(1) a { transition-delay: .10s, .10s, 0s, 0s, 0s; }
.mnav__sublist li:nth-child(2) a { transition-delay: .16s, .16s, 0s, 0s, 0s; }
.mnav__sublist li:nth-child(3) a { transition-delay: .22s, .22s, 0s, 0s, 0s; }
.mnav__sublist li:nth-child(4) a { transition-delay: .28s, .28s, 0s, 0s, 0s; }
.mnav__sublist li:nth-child(5) a { transition-delay: .34s, .34s, 0s, 0s, 0s; }
.mnav__sublist li:nth-child(n+6) a { transition-delay: .40s, .40s, 0s, 0s, 0s; }

/* =====================================================================
   PAGE HEADING
   ===================================================================== */
.page-head { padding: 60px 0 20px; }
.page-head h1 { font-size: clamp(28px, 4vw, 46px); font-weight: 800; }
.page-head .breadcrumb { color: var(--text-mute); font-size: 13px; margin-bottom: 10px; }
.page-head .breadcrumb a:hover { color: var(--accent); }

/* Category filter bar */
.cat-filter { display: flex; flex-wrap: wrap; gap: 10px 26px; padding: 10px 0 30px; }
.cat-filter a {
  font-size: 13px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--text-dim); font-weight: 600;
  transition: color .25s ease;
}
.cat-filter a.active, .cat-filter a:hover { color: var(--accent); }

/* Toolbar Works: bộ lọc nằm NGANG nút MENU, có line mỏng ngăn cách phần dưới.
   Bar này ở trong luồng trang → CUỘN THEO trang (nút MENU cố định vẫn bám theo cuộn). */
.works-topbar {
  margin-top: -30px;                       /* huỷ padding-top của <main> để lên sát đỉnh, ngang nút MENU */
  min-height: var(--logo-h);               /* cao bằng ô logo → line dưới trùng mép dưới ô logo */
  display: flex; align-items: center;
  border-bottom: 1px solid var(--border);  /* line mỏng ngăn cách */
}
.works-topbar > .container { display: flex; align-items: center; width: 100%; }
.works-topbar .cat-filter {
  padding: 0; margin: 0;
  padding-right: 210px;                    /* chừa chỗ cho nút MENU cố định bên phải */
}

/* =====================================================================
   PORTFOLIO GRID — gallery gọn: hình đại diện + tên bên dưới
   ===================================================================== */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--gap) / 2);   /* khoảng cách còn phân nửa (24px -> 12px) */
  padding: 34px 0 70px;        /* padding trên thay cho phần tiêu đề đã bỏ */
}
.portfolio-card {
  position: relative;
  background: transparent; border: 0; overflow: visible;
}
.portfolio-card .thumb {
  position: relative; overflow: hidden; display: block;
  background: #0d0d0d; aspect-ratio: 4 / 3;
  border: 1px solid var(--border); border-radius: 14px;
}
.portfolio-card .thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s cubic-bezier(.22,1,.36,1);
}
.portfolio-card:hover .thumb img { transform: scale(1.05); }
.portfolio-card .meta { padding: 12px 2px 4px; }
.portfolio-card .cat {
  font-size: 11px; letter-spacing: .8px; text-transform: uppercase;
  color: var(--text-mute); margin-bottom: 3px; display: block;
}
.portfolio-card .title {
  font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--text);
  transition: color .25s ease;
}
.portfolio-card:hover .title { color: var(--accent); }

.empty-note { color: var(--text-mute); padding: 40px 0; text-align: center; }

/* Pagination — số trang + nút trước/sau, có dấu … khi nhiều trang */
.pagination { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 30px 0 80px; }
.pagination a, .pagination .current {
  min-width: 42px; height: 42px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); font-size: 14px; color: var(--text-dim);
  border-radius: 8px; transition: border-color .25s ease, color .25s ease, background-color .25s ease;
}
.pagination a:hover { border-color: var(--accent); color: var(--accent); }
.pagination .current { background: var(--accent); color: #111; border-color: var(--accent); font-weight: 700; }
.pagination .pg-nav { font-size: 17px; }
.pagination .pg-gap {
  min-width: 30px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-mute); font-size: 14px;
}

/* =====================================================================
   PORTFOLIO DETAIL — chữ canh giữa, media tràn viền
   ===================================================================== */
.pf-detail { padding: 32px 0 90px; }

/* Breadcrumb */
.pf-detail .breadcrumb {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  color: var(--text-mute); font-size: 12.5px; letter-spacing: .01em; margin-bottom: 40px;
}
.pf-detail .breadcrumb span { opacity: .5; }
.pf-detail .breadcrumb .cur { color: var(--text-dim); opacity: 1; }
/* Hover: reveal-từng-ký-tự (JS, giống menu) + đổi màu vàng */
.pf-detail .breadcrumb a:hover,
.pf-detail .breadcrumb a:focus-visible { color: var(--accent); }

/* ---- Bố cục: tiêu đề + mô tả cùng bề rộng cột trái, thông tin ở cột phải ---- */
.pf-top {
  min-width: 0;
  --pf-aside: clamp(260px, 26vw, 360px);   /* bề rộng cột thông tin (phải) */
  --pf-lede-gap: clamp(48px, 6.5vw, 110px);/* khoảng cách 2 cột */
}
.pf-top-main { min-width: 0; }

/* Header */
.pf-detail .pf-cats { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.pf-detail .pf-cats a {
  font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--accent);
  border: 1px solid rgba(255,221,0,.35); padding: 5px 13px; border-radius: 100px; transition: .2s ease;
}
.pf-detail .pf-cats a:hover { background: var(--accent); color: #111; }
.pf-title {
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.16;
  margin: 0;
  /* Ngang bằng khung mô tả (cột trái), chừa cột thông tin bên phải */
  max-width: calc(100% - var(--pf-aside) - var(--pf-lede-gap));
}

/* Hàng dưới tiêu đề: mô tả ngắn (trái) + thông tin dự án (phải) — cùng một đường ngang */
.pf-lede {
  margin-top: clamp(28px, 3.2vw, 44px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--pf-aside);
  gap: var(--pf-lede-gap);
  align-items: start;
}
.pf-lede-main { min-width: 0; }
.pf-detail .pf-short {
  color: var(--text-dim);
  font-size: clamp(15.5px, 1.25vw, 18px);
  line-height: 1.8;
  max-width: none;   /* trải rộng bằng khung tiêu đề (cột trái) */
  margin: 0;
  text-align: justify;
  text-justify: inter-word;
}
/* Khi không có thông tin dự án: mô tả tự trải rộng, tiêu đề cũng full */
.pf-top--nometa .pf-lede { grid-template-columns: 1fr; }
.pf-top--nometa .pf-title { max-width: none; }

/* ---- Cột thông tin dự án (phải): danh sách nhãn + giá trị, gạch phân cách ---- */
.pf-meta { min-width: 0; }
.pf-meta-list { margin: 0; }
.pf-meta-item { padding: 17px 0; border-bottom: 1px solid var(--border); }
.pf-meta-item:first-child { padding-top: 4px; }
.pf-meta-item:last-child { border-bottom: 0; }
.pf-meta-item .label {
  margin: 0 0 7px; font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 1.5px; color: var(--text-mute);
}
.pf-meta-item .value { margin: 0; font-size: 15.5px; font-weight: 600; color: var(--text); line-height: 1.5; }
.pf-meta-item .value a { color: var(--text); text-decoration: none; }
.pf-meta-item .value a:hover { color: var(--accent); }

/* ---- THÂN BÀI: chiếm full chiều ngang vùng nội dung (phải của sidebar) ---- */
.pf-body { width: 100%; margin-top: 56px; }

/* Nội dung từ trình soạn thảo: CHỮ trải rộng bằng khung tiêu đề (căn trái, cùng lề với tiêu đề) */
.pf-content { width: 100%; color: var(--text-dim); font-size: 17px; line-height: 1.85; }
.pf-content > * {
  max-width: var(--maxw); margin-left: auto; margin-right: auto;
  padding-left: clamp(18px, 4vw, 30px); padding-right: clamp(18px, 4vw, 30px);
}
.pf-content > h1, .pf-content > h2, .pf-content > h3, .pf-content > h4 { color: var(--text); margin-top: 1.5em; line-height: 1.25; }
.pf-content > p { margin: 0 0 1.1em; }
.pf-content a { color: var(--accent); text-decoration: none; }
.pf-content a:hover, .pf-content a:focus-visible { color: var(--accent); opacity: 1; }
.pf-content ul, .pf-content ol { margin: 0 auto 1.2em; }

/* ---- PHẦN NỔI BẬT (blockquote): khung callout canh ĐÚNG bằng cột chữ ---- */
.pf-content > blockquote {
  position: relative; z-index: 0;
  margin: clamp(26px, 3vw, 40px) auto;
  /* ngang = đúng lề cột chữ + đệm trong khung; dọc = đệm trong khung */
  padding: clamp(20px, 2.2vw, 26px) calc(clamp(18px, 4vw, 30px) + clamp(20px, 2.4vw, 32px));
  color: var(--text);
  font-style: italic;
  font-weight: 500;
  font-size: 1em;          /* nhỏ như chữ thường */
  line-height: 1.7;
}
/* Nền khung: canh trùng mép trái/phải của cột chữ (dùng cùng lề với đoạn văn) */
.pf-content > blockquote::before {
  content: "";
  position: absolute; top: 0; bottom: 0;
  left: clamp(18px, 4vw, 30px); right: clamp(18px, 4vw, 30px);
  background: linear-gradient(180deg, rgba(255,221,0,.06), rgba(255,221,0,.015));
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.26);
  z-index: -1;
}
.pf-content > blockquote > :first-child { margin-top: 0; }
.pf-content > blockquote > :last-child  { margin-bottom: 0; }
.pf-content > blockquote cite,
.pf-content > blockquote footer {
  display: block; margin-top: 10px; font-style: normal; font-weight: 500;
  font-size: .8em; letter-spacing: .03em; color: var(--text-mute);
}

/* ---- Media TRÀN VIỀN (ảnh lẻ / figure / <p> chứa ảnh) ---- */
.pf-content > .is-fb {
  max-width: none; width: 100%;
  margin: 0; padding: 0;                        /* bỏ margin mặc định để 0px là ghép liền mạch */
}
.pf-content > .is-fb img { width: 100%; height: auto; display: block; }
.pf-content > .is-fb video { width: 100%; height: auto; display: block; background: #000; }
.pf-content > .is-fb figcaption,
.pf-content .pf-cap { color: var(--text-mute); font-size: 13px; text-align: center; margin-top: 8px; }

/* Media đứng sau CHỮ / tiêu đề: luôn có khoảng thở cố định (áp cho cả ảnh & video/pdf) */
.pf-content > * + .is-fb,
.pf-content > * + .is-embed { margin-top: 1.6em; }
/* CHỮ đứng sau media: khoảng thở cố định */
.pf-content > .is-fb + :not(.is-fb):not(.is-embed),
.pf-content > .is-embed + :not(.is-fb):not(.is-embed) { margin-top: 1.6em; }
/* Media đứng sau media: KHOẢNG CÁCH CHỈNH ĐƯỢC (mặc định 4px) */
.pf-content > .is-fb + .is-fb,
.pf-content > .is-fb + .is-embed,
.pf-content > .is-embed + .is-fb,
.pf-content > .is-embed + .is-embed { margin-top: var(--pf-gap, 4px); }

/* ---- Hàng 2 / 3 ảnh: 1 hàng, sát mép, cách nhau theo --pf-gap ---- */
.pf-content .pf-row {
  display: grid; gap: var(--pf-gap, 4px); margin: 0;
}
.pf-content .pf-row.cols-1 { grid-template-columns: 1fr; }
.pf-content .pf-row.cols-2 { grid-template-columns: 1fr 1fr; }
.pf-content .pf-row.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.pf-content .pf-row > .pf-cell { margin: 0; overflow: hidden; background: #0d0d0d; }
.pf-content .pf-row .pf-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Video (nhúng YouTube & tải lên) + PDF: FULL màn hình giống ảnh ---- */
.pf-content > .is-embed { max-width: none; width: 100%; margin: 0; padding: 0; }
.pf-content .video-embed { position: relative; width: 100%; padding-top: 56.25%; margin: 0; overflow: hidden; background: #000; }
.pf-content .video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pf-content .pf-video { margin: 0; }
.pf-content .pf-video video { width: 100%; height: auto; display: block; background: #000; }
/* PDF nhúng: CHIẾM TRỌN 1 MÀN HÌNH — cuộn tới chỉ thấy mình nó.
   Thanh công cụ (số trang) của trình duyệt được ẩn để PDF to hơn; các nút
   điều khiển nằm ở THANH DƯỚI CÙNG (không bị nút MENU phía trên che). */
.pf-content .pf-pdf {
  max-width: none;          /* TRÀN VIỀN: bỏ giới hạn bề rộng cột chữ */
  margin: 0; padding: 0;
  width: 100%;
  height: 100vh;            /* fallback */
  height: 100svh;           /* PHỦ TRỌN 1 MÀN HÌNH (an toàn với thanh địa chỉ mobile) */
  display: flex; flex-direction: column;
  background: #525659;      /* nền xám như viewer để phần thừa trông chủ đích */
  overflow: hidden;
}
/* Vùng cuộn hiển thị các trang (PDF.js) — chiếm hết chiều cao còn lại */
.pf-content .pf-pdf__viewport {
  flex: 1 1 auto; min-height: 0;
  overflow: auto; -webkit-overflow-scrolling: touch;
  padding: 16px;
}
.pf-content .pf-pdf__pages { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.pf-content .pf-pdf__page { max-width: 100%; background: #fff; box-shadow: 0 6px 24px rgba(0,0,0,.4); }
.pf-content .pf-pdf__page canvas { display: block; max-width: 100%; height: auto; }
/* Fallback iframe khi PDF.js không dùng được */
.pf-content .pf-pdf > iframe { flex: 1 1 auto; min-height: 0; width: 100%; border: 0; background: #fff; }

/* THANH CÔNG CỤ PDF Ở DƯỚI CÙNG: chuyển trang + zoom */
.pf-content .pf-pdf .pf-pdfbar {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 10px;
  padding: 10px 16px;
  background: #141414; border-top: 1px solid var(--border);
}
.pf-content .pf-pdf .pf-pdfbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0;
  border: 1px solid var(--border); border-radius: 50%;
  background: var(--surface); color: var(--text-dim);
  cursor: pointer; text-decoration: none;
  transition: border-color .2s ease, color .2s ease, background .2s ease, transform .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.pf-content .pf-pdf .pf-pdfbtn svg { width: 18px; height: 18px; display: block; }
.pf-content .pf-pdf .pf-pdfbtn:hover { border-color: var(--accent); color: var(--accent); background: rgba(255,221,0,.06); }
.pf-content .pf-pdf .pf-pdfbtn:active { transform: scale(.92); }
.pf-content .pf-pdf .pf-pdfpage,
.pf-content .pf-pdf .pf-pdfzoom {
  color: var(--text-dim); font-size: 13px; font-weight: 600;
  font-variant-numeric: tabular-nums; min-width: 44px; text-align: center;
}
.pf-content .pf-pdf .pf-pdfpage .cur { color: var(--text); }
.pf-content .pf-pdf .pf-pdfsep { width: 1px; height: 22px; background: var(--border); margin: 0 4px; }
.pf-content .pf-pdf .pf-cap[hidden] { display: none; }
/* Toàn màn hình */
.pf-content .pf-pdf:fullscreen { height: 100vh; background: #525659; }
.pf-content .pf-pdf:-webkit-full-screen { height: 100vh; background: #525659; }

/* ---- Thanh tương tác: Tim (trái) — Copy + Share (phải) ---- */
.pf-actions {
  margin-top: 40px;
  padding-top: 0;
  /* Khớp CHÍNH XÁC với khung chữ nội dung: rộng 720px (= --read-w của .article-body)
     và cùng lề trái với cột đọc (giống padding-left của .article-grid). Nhờ vậy nút
     Thích thẳng mép trái chữ, nút Copy/Share thẳng mép phải chữ — không lòi ra ngoài. */
  max-width: var(--read-w, 720px);
  margin-left: calc((100% - 860px) / 2);
  margin-right: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.pf-actions__left,
.pf-actions__right { display: flex; align-items: center; gap: 10px; }

/* Tag danh mục cạnh nút Thích — pill đồng bộ + hiệu ứng "mực" khi hover (giống tag bài viết) */
.pf-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.pf-tag {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center;
  height: 38px; padding: 0 15px;
  border: 1px solid var(--border); border-radius: 100px;
  background: var(--surface); color: var(--text-dim);
  font: inherit; font-size: 13px; font-weight: 600; line-height: 1;
  text-decoration: none; white-space: nowrap;
  transition: color .25s ease, border-color .25s ease;
  -webkit-tap-highlight-color: transparent;
}
a.pf-tag:hover { border-color: rgba(255,255,255,.35); }
/* Vòng tròn "mực" nở ra từ chỗ chuột rồi phủ kín nút */
.pf-tag .cf-ink {
  position: absolute; left: 0; top: 0; width: 2px; height: 2px;
  margin: -1px 0 0 -1px; border-radius: 50%; background: var(--accent);
  transform: translate(-50%, -50%) scale(0); transform-origin: center;
  transition: transform .5s cubic-bezier(.22,.61,.36,1);
  pointer-events: none; z-index: 0;
}
.pf-tag.is-inking .cf-ink { transform: translate(-50%, -50%) scale(var(--cf-d, 240)); }
.pf-tag .cf-label { position: relative; z-index: 1; display: inline-flex; align-items: center; line-height: 1; transition: color .3s ease; }
.pf-tag.is-inking .cf-label { color: #111; }  /* chữ tối trên nền vàng */
@media (prefers-reduced-motion: reduce) { .pf-tag .cf-ink { transition-duration: .01ms; } }

.pf-act {
  display: inline-flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 15px;
  border: 1px solid var(--border); border-radius: 100px;
  background: var(--surface); color: var(--text-dim);
  font: inherit; font-size: 13px; font-weight: 600; line-height: 1;
  cursor: pointer; text-decoration: none;
  transition: border-color .2s ease, background .2s ease, color .2s ease, transform .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.pf-act:hover { border-color: var(--text-mute); color: var(--text); }
.pf-act:active { transform: scale(.96); }
.pf-act svg { width: 16px; height: 16px; display: block; flex: none; }
.pf-act__count {
  min-width: 8px; text-align: left;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

/* Nút Tim — nổi bật hơn (nhãn "Thích" ẩn trên mobile để gọn) */
.pf-like { padding-left: 16px; padding-right: 16px; }
.pf-like__word { color: var(--text-mute); font-weight: 600; }
.pf-like svg { transition: transform .2s ease; }
.pf-like .pf-like__fill { fill: transparent; stroke: currentColor; stroke-width: 1.8px; transition: fill .18s ease, stroke .18s ease; }
.pf-like:hover { border-color: rgba(255,90,110,.5); color: #ff6b7f; }
.pf-like:hover .pf-like__word { color: #ff6b7f; }
.pf-like.is-liked { border-color: rgba(255,90,110,.55); background: rgba(255,90,110,.12); color: #ff5a6e; }
.pf-like.is-liked .pf-like__fill { fill: #ff4d63; stroke: #ff4d63; }
.pf-like.is-liked .pf-like__word { color: #ff5a6e; }
.pf-like.is-animating svg { animation: pfHeartPop .34s ease; }
@keyframes pfHeartPop {
  0% { transform: scale(1); }
  35% { transform: scale(1.32); }
  60% { transform: scale(.9); }
  100% { transform: scale(1); }
}

/* Copy / Share icon-only trên mobile */
.pf-copy.is-copied { border-color: rgba(255,221,0,.5); color: var(--accent); }
.pf-copy.is-copied .pf-copy__label { color: var(--accent); }

/* Hiệu ứng "mực" khi hover cho Copy link & Chia sẻ — giống tag danh mục / tag bài viết */
.pf-copy, .pf-share { position: relative; overflow: hidden; isolation: isolate; }
.pf-copy:hover, .pf-share:hover { border-color: rgba(255,255,255,.35); }
.pf-copy .cf-ink, .pf-share .cf-ink {
  position: absolute; left: 0; top: 0; width: 2px; height: 2px;
  margin: -1px 0 0 -1px; border-radius: 50%; background: var(--accent);
  transform: translate(-50%, -50%) scale(0); transform-origin: center;
  transition: transform .5s cubic-bezier(.22,.61,.36,1);
  pointer-events: none; z-index: 0;
}
.pf-copy.is-inking .cf-ink, .pf-share.is-inking .cf-ink { transform: translate(-50%, -50%) scale(var(--cf-d, 240)); }
.pf-copy .cf-label, .pf-share .cf-label {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 7px; line-height: 1;
  transition: color .3s ease;
}
.pf-copy.is-inking .cf-label, .pf-share.is-inking .cf-label { color: #111; }  /* icon + chữ tối trên nền vàng */
@media (prefers-reduced-motion: reduce) { .pf-copy .cf-ink, .pf-share .cf-ink { transition-duration: .01ms; } }

/* Toast nhỏ báo đã copy */
.pf-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(14px);
  background: var(--accent); color: #111; font-size: 13.5px; font-weight: 700;
  padding: 10px 18px; border-radius: 100px; box-shadow: 0 12px 30px rgba(0,0,0,.45);
  opacity: 0; pointer-events: none; z-index: 3000; transition: opacity .22s ease, transform .22s ease;
}
.pf-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .pf-like.is-animating svg { animation: none; }
}

@media (max-width: 560px) {
  .pf-actions { gap: 10px; }
  .pf-act { padding: 0 13px; font-size: 12.5px; }
  /* Gọn trên mobile: CHỈ ẩn chữ của Copy/Share, luôn giữ icon (kể cả khi JS bọc .cf-label) */
  .pf-copy .pf-copy__label,
  .pf-share .pf-share__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pf-copy, .pf-share { padding: 0 14px; gap: 0; }
  .pf-copy .cf-label, .pf-share .cf-label { gap: 0; }
}

/* Điều hướng bài trước / bài sau — thumbnail vuông + tiêu đề, KHÔNG đóng box */
.pf-nav {
  margin-top: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 48px;
}
.pf-nav__item {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  text-decoration: none;
  min-width: 0;
}
.pf-nav__next { flex-direction: row-reverse; }

/* Thumbnail vuông */
.pf-nav__thumb {
  flex: none;
  width: 78px;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  transition: border-color .2s ease;
}
.pf-nav__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
a.pf-nav__item:hover .pf-nav__thumb { border-color: var(--accent); }
a.pf-nav__item:hover .pf-nav__thumb img { transform: scale(1.05); }
.pf-nav__thumb--all { display: grid; place-items: center; color: var(--accent); }
.pf-nav__thumb--all svg { width: 30px; height: 30px; }

.pf-nav__text { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.pf-nav__next .pf-nav__text { align-items: flex-end; text-align: right; }

.pf-nav__dir {
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-mute); font-weight: 600; display: inline-flex; align-items: center; gap: 6px;
}
.pf-nav__title {
  font-size: clamp(16px, 1.6vw, 19px); font-weight: 700; color: var(--text); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
a.pf-nav__item:hover .pf-nav__title { color: var(--accent); }
.pf-nav__arrow { font-size: 15px; color: var(--accent); transition: transform .2s ease; }
a.pf-nav__prev:hover .pf-nav__arrow, a.pf-nav__back:hover .pf-nav__arrow { transform: translateX(-4px); }
a.pf-nav__next:hover .pf-nav__arrow { transform: translateX(4px); }
.pf-nav__empty { display: none; }

@media (max-width: 680px) {
  .pf-nav { grid-template-columns: 1fr; gap: 20px; margin-top: 48px; }
  .pf-nav__next { flex-direction: row; }
  .pf-nav__next .pf-nav__text { align-items: flex-start; text-align: left; }
}

/* Đường kẻ ngang TRÀN toàn bộ chiều ngang nội dung — cách thanh tim/share thêm ~100px */
.pf-fullsep {
  border: 0; height: 1px; width: 100%;
  background: var(--border);
  margin: 172px 0 0;
}

/* Related — đồng bộ style danh sách blog (.j-item), không đường kẻ phía trên */
.pf-related { margin-top: 56px; }
.related-head {
  font-size: clamp(21px, 2.4vw, 30px); font-weight: 800; letter-spacing: -.015em;
  margin: 0 0 12px;
}
/* Dùng lại toàn bộ style .j-item của blog; chỉ chỉnh khoảng cách cho khớp ngữ cảnh dự án */
.pf-related__feed { margin: 0; }

/* ---- Lightbox ảnh (mở to + mũi tên qua lại) ---- */
.pf-lightbox {
  position: fixed; inset: 0; z-index: 2000; background: rgba(8,8,8,.94);
  display: none; align-items: center; justify-content: center; padding: 30px;
  opacity: 0; transition: opacity .22s ease;
}
.pf-lightbox.show { display: flex; opacity: 1; }
.pf-lightbox .pf-lb-img { max-width: 88vw; max-height: 88vh; width: auto; height: auto; border-radius: 4px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.pf-lb-close {
  position: absolute; top: 18px; right: 22px; width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255,255,255,.1); border: 0; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; transition: .2s ease; z-index: 2;
}
.pf-lb-close:hover { background: var(--accent); color: #111; }

/* Mũi tên trái / phải */
.pf-lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.1); border: 0; color: #fff; cursor: pointer;
  transition: background .2s ease, color .2s ease, transform .12s ease; z-index: 2;
  -webkit-tap-highlight-color: transparent;
}
.pf-lb-nav svg { width: 26px; height: 26px; display: block; }
.pf-lb-nav:hover { background: var(--accent); color: #111; }
.pf-lb-nav:active { transform: translateY(-50%) scale(.92); }
.pf-lb-prev { left: 22px; }
.pf-lb-next { right: 22px; }

/* Chú thích + bộ đếm ảnh */
.pf-lb-cap {
  position: absolute; left: 50%; bottom: 58px; transform: translateX(-50%);
  max-width: 88vw; text-align: center; color: rgba(255,255,255,.82);
  font-size: 13.5px; line-height: 1.5; z-index: 2;
}
.pf-lb-count {
  position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%);
  color: rgba(255,255,255,.6); font-size: 13px; font-variant-numeric: tabular-nums; z-index: 2;
}
.pf-lb-count .cur { color: #fff; font-weight: 600; }

@media (max-width: 560px) {
  .pf-lb-nav { width: 44px; height: 44px; }
  .pf-lb-nav svg { width: 22px; height: 22px; }
  .pf-lb-prev { left: 12px; }
  .pf-lb-next { right: 12px; }
  .pf-lightbox .pf-lb-img { max-width: 94vw; }
}

/* Mobile: hàng 2-3 ảnh xếp chồng cho dễ xem */
@media (max-width: 680px) {
  .pf-content .pf-row.cols-2, .pf-content .pf-row.cols-3 { grid-template-columns: 1fr; }
  .pf-content .pf-row .pf-cell img { object-fit: contain; height: auto; }
}

/* =====================================================================
   HOME extra sections
   ===================================================================== */
.tagline {
  padding: 80px 0; text-align: center; border-top: 1px solid var(--border);
}
.tagline h2 {
  font-size: clamp(24px, 3.4vw, 40px); font-weight: 700; max-width: 1000px; margin: 0 auto;
  line-height: 1.3;
}

.services { padding: 20px 0 80px; }
.services-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--gap); }
.service-col h3 { font-size: 15px; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 16px; }
.service-col h3 a:hover { color: var(--accent); }
.service-col .lines { color: var(--text-dim); font-size: 13px; line-height: 2; }

.clients { padding: 60px 0; border-top: 1px solid var(--border); }
.clients h2 { text-align: center; font-size: 24px; margin-bottom: 40px; }
.clients-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 30px; align-items: center;
}
.clients-grid img { max-height: 70px; width: auto; margin: 0 auto; opacity: .85; filter: grayscale(1); transition: .3s; }
.clients-grid img:hover { opacity: 1; filter: grayscale(0); }

.cta {
  padding: 90px 0; text-align: center; border-top: 1px solid var(--border);
}
.cta a { font-size: clamp(26px, 4vw, 48px); font-weight: 800; color: var(--text); }
.cta a:hover { color: var(--accent); }

/* =====================================================================
   ABOUT page — award-style / interactive (motion + typography + scroll)
   ===================================================================== */

/* ---- Scroll-reveal utility (dùng chung) ---- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
  transition-delay: var(--rd, 0ms);
  will-change: opacity, transform;
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ---- INTRO (chiếm trọn 1 màn hình, xem đầu tiên) ---- */
.ab-intro {
  min-height: 100vh; min-height: 100svh;
  display: flex; position: relative; isolation: isolate;
  overflow: visible; overflow-x: clip;
}
.ab-intro__inner {
  flex: 1; display: flex; flex-direction: column;
  padding-top: clamp(26px, 5vh, 56px); padding-bottom: clamp(150px, 17vh, 230px);
}
.ab-intro__top {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 20px; flex-wrap: wrap;
}
.ab-hero__crumb { color: var(--text-mute); font-size: 13px; letter-spacing: .4px; }
.ab-hero__crumb span { margin: 0 6px; opacity: .5; }
.ab-hero__crumb:hover { color: var(--accent); }
.ab-hero__role {
  color: var(--accent); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 2px;
}

/* Khối nội dung căn giữa theo chiều dọc & ngang */
.ab-intro__center {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  text-align: center; width: 100%; max-width: 1080px; margin: 0 auto;
  padding: clamp(24px, 5vh, 56px) 0;
}
.ab-intro__eyebrow {
  color: var(--text-mute); font-size: 13px; font-weight: 400;
  text-transform: uppercase; letter-spacing: 3px;
  margin-bottom: clamp(16px, 3vh, 32px);
}
.ab-intro__title {
  font-weight: 600; line-height: 1.08; letter-spacing: -.015em;
  font-size: clamp(22px, 3.7vw, 50px);
  max-width: 20ch; margin: 0 auto;
}
.ab-intro__lead {
  color: var(--text-dim); font-size: 16px; line-height: 1.7;
  max-width: 720px; margin: clamp(22px, 4vh, 40px) auto 0;
}

/* Hàng NAME / AGE / CONTACT */
.ab-intro__facts {
  margin-top: clamp(34px, 6vh, 66px);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 48px);
  text-align: left;
}
.fact { border-top: 1px solid var(--border); padding-top: 16px; }
.fact__label {
  color: var(--text-mute); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 10px;
}
.fact__value {
  margin: 0;
  color: var(--text); font-size: 14px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .3px; line-height: 1.5;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
}
.fact__link { color: var(--text); }
.fact__link::after {
  content: "↗"; display: inline-block; margin-left: 8px; font-size: 12px;
  transition: transform .3s ease;
}
.fact__link:hover { color: var(--accent); }
.fact__link:hover::after { transform: translate(3px, -3px); }

/* Gợi ý cuộn XUỐNG — ghim cố định, cách mép dưới một khoảng */
.ab-intro__cue {
  position: absolute; left: 0; right: 0; bottom: clamp(110px, 13vh, 170px);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: var(--text-mute); font-size: 11px; text-transform: uppercase; letter-spacing: 2px;
}
.ab-intro__arrow {
  width: 10px; height: 10px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  animation: cueDown 1.6s ease-in-out infinite;
}
@keyframes cueDown {
  0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: .45; }
  50%      { transform: rotate(45deg) translate(3px, 3px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .ab-intro__arrow { animation: none; } }

@media (max-width: 720px) {
  .ab-intro { min-height: 92svh; }
  .ab-intro__inner { padding-top: 20px; padding-bottom: 40px; }
  .ab-intro__center { padding: 18px 0; }
  .ab-intro__cue { display: none; }
  .ab-intro__facts { grid-template-columns: 1fr; gap: 0; text-align: center; }
  .fact { border-top: 0; padding-top: 0; margin-top: 24px; }
  .fact:first-child { margin-top: 0; }
  .fact__value { align-items: center; }
  .ab-intro__title { font-size: clamp(28px, 8vw, 46px); max-width: none; }
  .ab-intro__lead { font-size: 15px; }
}

/* ---- Bố cục phần: rail dính bên trái + nội dung bên phải ---- */
.ab-section { padding: clamp(52px, 10vh, 116px) 0; border-bottom: 1px solid var(--border); }
.ab-grid { display: grid; grid-template-columns: 280px 1fr; gap: clamp(30px, 5vw, 80px); }

.ab-rail__sticky { position: sticky; top: 120px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.ab-rail__label {
  color: var(--accent); font-weight: 800; letter-spacing: -.01em;
  font-size: clamp(20px, 2.2vw, 30px); line-height: 1.05; text-transform: capitalize;
}
.ab-rail__progress { width: 60px; height: 2px; background: var(--border); overflow: hidden; }
.ab-rail__progress i { display: block; height: 100%; width: 100%; background: var(--accent);
  transform: scaleX(var(--p, 0)); transform-origin: left; transition: transform .1s linear; }

/* ---- Experience entries (căn trái, không số) ---- */
.xp { padding: clamp(26px, 4vh, 42px) 0; border-top: 1px solid var(--border); }
.xp:first-child { border-top: 0; padding-top: 0; }
.xp__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 24px; flex-wrap: wrap; }
.xp__title {
  font-size: clamp(16px, 1.5vw, 21px); font-weight: 700; line-height: 1.25; margin: 0;
  text-transform: uppercase; letter-spacing: -.005em; transition: color .3s ease;
  min-width: 0; overflow-wrap: break-word;
}
.xp:hover .xp__title { color: var(--accent); }
.xp__date { color: var(--text-mute); font-size: 13px; letter-spacing: .5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.xp__role { color: var(--text-mute); font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; margin: 3px 0 14px; }
.xp__list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.xp__list li { position: relative; padding-left: 20px; color: var(--text-dim); font-size: 15px; line-height: 1.6; }
.xp__list li::before {
  content: ""; position: absolute; left: 2px; top: 10px; width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-mute); transition: background .3s ease;
}
.xp:hover .xp__list li::before { background: var(--accent); }
.xp__list strong { color: var(--text); font-weight: 700; }

/* ---- Education rows (căn trái, không số) ---- */
.edu {
  display: grid;
  grid-template-columns: minmax(260px, 42%) minmax(0, 1fr) auto;
  align-items: center; gap: 28px;
  padding: clamp(20px, 3vh, 30px) 0; border-top: 1px solid var(--border);
  position: relative; color: var(--text);
}
.edu:first-child { border-top: 0; padding-top: 0; }
.edu:last-child { border-bottom: 0; }
.edu__title { font-size: clamp(15px, 1.6vw, 19px); font-weight: 700; text-transform: uppercase; letter-spacing: -.005em; transition: transform .35s cubic-bezier(.16,1,.3,1); }
.edu__school { color: var(--text-mute); font-size: 12.5px; text-transform: uppercase; letter-spacing: 1px; }
.edu__meta { display: inline-flex; align-items: center; gap: 16px; justify-self: end; text-align: right; }
.edu__date { color: var(--text-mute); font-size: 12.5px; letter-spacing: .5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.edu__cred { color: var(--text-dim); font-size: 13px; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; transition: color .3s ease; }
.edu__cred i { font-style: normal; transition: transform .3s ease; display: inline-block; }
.edu__cred:hover { color: var(--accent); }
.edu__cred:hover i { transform: translate(3px, -3px); }

/* ---- Success (numbered statements, gọn hơn + có điểm nhấn) ---- */
.wins { list-style: none; margin: 0; padding: 0; }
.win {
  display: block;
  padding: clamp(12px, 1.8vh, 18px) 0; border-top: 1px solid var(--border);
  position: relative;
}
.win:first-child { border-top: 0; padding-top: 0; }
.win__text { color: var(--text-dim); font-size: 15px; line-height: 1.6; }
.win__text strong { color: inherit; font-weight: 400; }
.win__text a { color: inherit; text-decoration: none; box-shadow: inset 0 -1px 0 var(--border); transition: box-shadow .3s ease, color .3s ease; }
.win__text a:hover { color: var(--text); box-shadow: inset 0 -1px 0 var(--text-mute); }

/* ---- Software (lưới icon, chỉ icon) ---- */
.ab-section--soft { border-bottom: 0; }
.sw-grid { display: grid; grid-template-columns: repeat(6, 1fr); align-items: center; justify-items: start; gap: clamp(22px, 2.6vw, 44px); }
.sw__item {
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .35s cubic-bezier(.16,1,.3,1), filter .35s ease;
}
/* Logo thật: hiển thị trần, không khung */
.sw__item--logo .sw__logo { height: clamp(61px, 7.2vw, 101px); width: auto; display: block; }
.sw__item--logo:hover { transform: translateY(-6px) scale(1.05); }
/* Fallback chip chữ (khi chưa có icon) */
.sw__item--mono {
  --size: clamp(74px, 8.5vw, 104px);
  width: var(--size); height: var(--size);
  border: 1px solid var(--border); border-radius: 20px; background: var(--bg-alt);
}
.sw__item--mono:hover { border-color: var(--accent); background: var(--surface); transform: translateY(-4px); }
.sw__mono {
  width: 62%; height: 62%; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 14px;
  background: var(--sw, #444); color: #fff; font-size: clamp(15px, 1.6vw, 20px); font-weight: 800; letter-spacing: .5px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}

/* =====================================================================
   BLOG
   ===================================================================== */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; padding-bottom: 60px; }
.blog-card { border: 1px solid var(--border); background: var(--bg-alt); overflow: hidden; }
.blog-card .thumb { aspect-ratio: 16/10; overflow: hidden; background: #0d0d0d; }
.blog-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.blog-card:hover .thumb img { transform: scale(1.05); }
.blog-card .body { padding: 20px 22px 26px; }
.blog-card .date { font-size: 12px; color: var(--text-mute); text-transform: uppercase; letter-spacing: .5px; }
.blog-card h3 { font-size: 18px; margin: 8px 0 10px; }
.blog-card:hover h3 { color: var(--accent); }
.blog-card p { color: var(--text-dim); font-size: 14px; }

.post-detail { max-width: 820px; margin: 0 auto; padding: 50px 0 70px; }
.post-detail h1 { font-size: clamp(28px,4vw,44px); font-weight: 800; }
.post-detail .post-meta { color: var(--text-mute); font-size: 13px; margin-bottom: 26px; }
.post-detail .post-thumb { margin: 24px 0 34px; border: 1px solid var(--border); }
.post-body { color: var(--text-dim); font-size: 17px; line-height: 1.6; }
.post-body img { margin: 24px auto; border: 1px solid var(--border); }
.post-body > *:first-child { margin-top: 0; }
.post-body p { margin: 0 0 1.05em; }
.post-body h2, .post-body h3, .post-body h4 {
  color: var(--text); line-height: 1.3; margin: 1.15em 0 .4em;
}
.post-body ul, .post-body ol { margin: 0 0 1.05em; }
.post-body li { margin-bottom: .35em; }
.post-body a { color: var(--accent); text-decoration: none; }
.post-body a:hover, .post-body a:focus-visible { color: var(--accent); opacity: 1; }
.post-body ul > li::marker { color: #ffffff; }
.post-body blockquote {
  border-left: 3px solid var(--accent); margin: 24px 0; padding: 6px 20px; color: var(--text);
  font-style: italic;
}

/* =====================================================================
   CONTACT
   ===================================================================== */
.contact-wrap { padding: 50px 0 70px; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.contact-info .row { margin-bottom: 20px; }
.contact-info .label { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--text-mute); }
.contact-info .val { font-size: 18px; font-weight: 600; margin-top: 3px; }
.contact-info .val a:hover { color: var(--accent); }

.form-field { margin-bottom: 18px; }
.form-field label { display: block; font-size: 13px; margin-bottom: 7px; color: var(--text-dim); }
.form-field input, .form-field textarea {
  width: 100%; background: var(--surface); border: 1px solid var(--border);
  color: var(--text); padding: 13px 15px; font-size: 15px; font-family: inherit;
}
.form-field input:focus, .form-field textarea:focus { outline: none; border-color: var(--accent); }
.form-field textarea { min-height: 150px; resize: vertical; }
.honeypot { position: absolute; left: -9999px; }
.btn-submit {
  background: var(--accent); color: #111; border: 0; padding: 14px 34px;
  font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
}
.btn-submit:hover { background: #fff; }
.alert { padding: 13px 16px; margin-bottom: 18px; font-size: 14px; border: 1px solid; }
.alert-success { border-color: #2e7d32; background: rgba(46,125,50,.15); color: #a5d6a7; }
.alert-error { border-color: #c62828; background: rgba(198,40,40,.15); color: #ef9a9a; }
.alert ul { padding-left: 18px; list-style: disc; }

/* =====================================================================
   FOOTER
   ===================================================================== */
/* Toàn bộ chân trang là MỘT MÀN HÌNH nền vàng, chữ đen — liền mạch với thanh bên.
   --foot-line1: khoảng cách từ đỉnh footer tới đường kẻ đầu tiên,
   ĐÚNG BẰNG cao ô logo + 3 nút social của thanh bên → line 1 trùng "line dưới icon email". */
:root { --foot-line1: calc(var(--logo-h) + var(--sidebar-w) * 3); --foot-pad-x: clamp(30px, 6.5vw, 90px); --foot-gap: 100px; }

.site-footer {
  position: relative; z-index: 1;    /* cuộn lên ĐÈ chồng lên nội dung phía trên */
  color: var(--black);
  min-height: 100vh;                 /* 1 màn hình */
  display: flex; flex-direction: column;
  /* Khoảng đệm TỐI phía trên footer — mọi trang không bao giờ đụng footer.
     Dùng margin (không padding) để khoảng trống mang màu nền trang, không phải màu vàng. */
  margin-top: var(--foot-gap);
  --flapH: 0px;                      /* chiều cao dải lật; desktop đặt lại bên dưới */
  background: transparent;           /* nền vàng do lớp ::after vẽ */
}
/* Mảng vàng của footer BẮT ĐẦU ngay dưới dải lật -> vùng dải lật trong suốt,
   nhìn xuyên thấy nội dung đang đứng yên phía sau, các thanh vàng lật đè lên đó. */
.site-footer::after {
  /* Lùi lên 2px cho chồng mép với thanh lật cuối cùng -> không hở ra khe nhìn
     xuyên được xuống nội dung phía sau (làm tròn nửa điểm ảnh). */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  top: max(0px, calc(var(--flapH) - 2px));
  background: var(--yellow); z-index: 0;
}
.footer-inner {
  position: relative; z-index: 3;   /* luôn nằm trên dải lật -> chữ không bao giờ bị che */
  flex: 1 1 auto; display: flex; flex-direction: column;
  padding: 0;                       /* KHÔNG padding ngang → các đường kẻ chạy hết bề ngang */
}
/* padding ngang đặt lên từng khối nội dung (không đặt lên viền) để LINE full-width */
:root { --foot-pad-r: clamp(24px, 4vw, 56px); }

/* ---------- HÀNG 1: CTA lớn + nút lên đầu trang ---------- */
.footer-hero {
  min-height: var(--foot-line1);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 40px;
  /* căn xuống đáy hàng → cụm CTA + nút lên đầu trang nằm sát đường kẻ LINE 1 */
  padding: 72px var(--foot-pad-r) 55px var(--foot-pad-x);
  border-bottom: 1px solid rgba(51,49,50,.28);   /* = LINE 1 (full-width) */
}

/* CTA — hiệu ứng "lật/đẩy chữ lên" theo từng dòng khi hover */
.footer-cta {
  display: inline-flex; flex-direction: column; align-items: flex-start;
  color: #1b1b1b; text-decoration: none;
  font-weight: 800; letter-spacing: -.01em;
  font-size: clamp(30px, 4.6vw, 60px); line-height: 1.12;
}
.footer-cta .fx-roll { display: block; overflow: hidden; }
.footer-cta .fx-roll__in {
  display: inline-block; position: relative;
  transition: transform .55s cubic-bezier(.76,0,.24,1);
  will-change: transform;
}
.footer-cta .fx-roll__in::after {
  content: attr(data-text);
  position: absolute; left: 0; top: 100%; white-space: nowrap;
}
.footer-cta .fx-roll:nth-child(2) .fx-roll__in { transition-delay: .06s; }
.footer-cta:hover .fx-roll__in,
.footer-cta:focus-visible .fx-roll__in { transform: translateY(-100%); }
/* Hover KHÔNG đổi màu chữ (đè mặc định a:hover -> vàng) */
.footer-cta:hover, .footer-cta:focus-visible { color: #1b1b1b; }

/* Nút lên đầu trang: chỉ 1 ô đen bo góc (không có mảng vàng phía sau) */
.footer-top-btn {
  flex: 0 0 auto; background: none; border: 0; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.footer-top-btn__box {
  width: clamp(96px, 9vw, 118px); height: clamp(96px, 9vw, 118px);
  display: flex; align-items: center; justify-content: center;
  background: #1b1b1b; color: var(--yellow); border-radius: 18px;
  transition: transform .42s cubic-bezier(.22,1,.36,1), background-color .3s ease;
}
.footer-top-btn__box svg { transition: transform .42s cubic-bezier(.22,1,.36,1); }
.footer-top-btn:hover .footer-top-btn__box { transform: translateY(-6px); }
.footer-top-btn:hover .footer-top-btn__box svg { transform: translateY(-4px); }
.footer-top-btn:focus-visible .footer-top-btn__box { outline: 2px solid var(--black); outline-offset: 3px; }

/* ---------- HÀNG 2: 4 ô thông tin ---------- */
.footer-cols {
  display: grid;
  /* 3 cột chữ ôm sát nội dung (gần nhau hơn), cột promo chiếm phần còn lại đẩy sang phải */
  grid-template-columns: auto auto auto 1fr;
  column-gap: 94px; row-gap: 30px; max-width: calc(1220px + var(--foot-pad-x));
  padding: 46px var(--foot-pad-r) 0 var(--foot-pad-x);
  align-items: start;
}
.footer-col li { margin-bottom: 8px; }
.footer-col a { color: var(--black); font-size: clamp(15px, 1.3vw, 18px); font-weight: 500; }
.footer-col a:hover { opacity: 1; color: var(--black); }
.footer-col--contact { display: flex; flex-direction: column; gap: 8px; }
.footer-contact-line { color: var(--black); font-size: clamp(15px, 1.3vw, 18px); font-weight: 500; }
.footer-contact-line:hover { opacity: 1; color: var(--black); }

/* ---------- Ô thứ 4: thẻ Prompt Gallery + JOS Creative (hộp tối, logo màu) ---------- */
.footer-col--promo { display: flex; flex-direction: column; align-items: stretch; justify-self: end; gap: 14px; }
.footer-col--promo .promo-card {
  display: inline-flex; align-items: center; gap: 12px;
  background: #1b1b1b; border-radius: 14px;
  padding: 10px 18px 10px 10px; text-decoration: none;
  transition: transform .4s cubic-bezier(.22,1,.36,1), background-color .35s ease, box-shadow .4s ease;
}
.footer-col--promo .promo-card:hover {
  opacity: 1; transform: translateY(-2px); background: #202020;
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
}
.footer-col--promo .promo-card__logo {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px;
  background: var(--yellow); display: flex; align-items: center; justify-content: center;
  transition: transform .4s cubic-bezier(.22,1,.36,1);
}
.footer-col--promo .promo-card:hover .promo-card__logo { transform: scale(1.06) rotate(-3deg); }
.footer-col--promo .promo-card__logo svg { width: 24px; height: auto; display: block; }
.footer-col--promo .promo-card__logo--jos { background: linear-gradient(90deg, #350cb2, #055dcb); }
.footer-col--promo .promo-card__logo--jos svg { width: 14px; }
.footer-col--promo .promo-card__text { display: flex; flex-direction: column; line-height: 1.12; }
.footer-col--promo .promo-card__title {
  color: #ffffff; font-weight: 700; font-size: clamp(15px, 1.1vw, 17px); letter-spacing: -.01em;
  white-space: nowrap;
}
.footer-col--promo .promo-card__by { color: #9a9a9a; font-weight: 500; font-size: 12px; margin-top: 2px; white-space: nowrap; }
.footer-col--promo .promo-card:hover .promo-card__title { color: #ffffff; }

/* Đẩy bản quyền xuống đáy màn hình */
.footer-spacer { flex: 1 1 auto; min-height: 40px; }

/* ---------- LINE 2 (full-width) + bản quyền (nhỏ, phụ) ---------- */
.footer-legal {
  border-top: 1px solid rgba(51,49,50,.28);      /* = LINE 2 (full-width) */
  padding: 16px var(--foot-pad-r) 18px var(--foot-pad-x);
  font-size: 12px; font-weight: 500; color: rgba(51,49,50,.6);
}

/* Back to top nổi (cũ) — giữ ẩn để không đè lên footer */
.to-top {
  position: fixed; right: 24px; bottom: 24px; width: 46px; height: 46px;
  background: var(--accent); color: #111; display: none; align-items: center; justify-content: center;
  font-size: 20px; z-index: 90; border: 0;
}
.to-top.show { display: flex; }

/* =====================================================================
   FOOTER — DẢI LẬT Ở MÉP TRÊN + NỘI DUNG PHÍA TRÊN ĐỨNG YÊN
   Nội dung chân trang HIỆN RÕ NGAY từ đầu (không mờ, không trượt). Hai thứ
   duy nhất chuyển động:
     1) Nội dung trang phía trên cuộn hết thì ĐỨNG YÊN (position: sticky),
        footer cuộn lên đè chồng lên nó.
     2) Khoảng trống ở mép trên footer là vùng TRONG SUỐT (nhìn xuyên thấy
        nội dung đang đứng yên), được lấp dần bằng các thanh vàng lật lần
        lượt từ dưới lên — cùng ngôn ngữ với hiệu ứng chuyển trang.
   JS ghi tiến trình cuộn 0 → 1 vào --fp trên .site-footer:
       0 = đỉnh footer vừa chạm mép DƯỚI màn hình
       1 = đỉnh footer đã lên tới mép TRÊN màn hình (footer chiếm trọn màn)
   Thanh trên cùng khép lại đúng lúc --fp = 1 -> lật tới đỉnh thì dừng.
   Không JS / tắt chuyển động: các thanh nằm phẳng sẵn, không có gì lạ.
   ===================================================================== */
.site-footer { --fp: 1; }
.js .site-footer { --fp: 0; }

/* Nội dung trang đứng yên khi footer bắt đầu trồi lên. Lớp .is-footer-over do
   JS bật/tắt: ngoài lúc đó <main> hoàn toàn bình thường, không tạo lớp xếp
   chồng nào (tránh làm kẹt lightbox / thanh đọc / toast bên trong nội dung).
   bottom = khoảng đệm trên footer -> mép dưới <main> bị ghim đúng tại chỗ nó
   đang đứng vào khoảnh khắc đỉnh footer chạm mép dưới màn hình (không nhảy). */
html.is-footer-over main {
  position: sticky; bottom: var(--foot-gap); z-index: 0;
}

.footer-flaps {
  position: absolute; left: 0; right: 0; z-index: 2;
  top: 0; height: var(--flapH);
  display: flex; flex-direction: column;
  perspective: 2600px; pointer-events: none;   /* xa -> ít méo hình thang ở hai mép */
}
.footer-flaps > i {
  display: block; width: 100%;
  flex: 1 1 0;                           /* các thanh cao bằng nhau */
  background: var(--yellow);
  margin-bottom: -1px;                   /* chồng mép 1px: lật xong không lộ khe */
  transform-origin: center top; backface-visibility: hidden;
  --d: 0;
  /* .30 = quãng chạy của riêng một thanh */
  --lp: clamp(0, calc((var(--fp) - var(--d)) / .30), 1);
  /* Chưa tới lượt (lp = 0) thì ẩn hẳn, không để lộ vạch ngang khi dựng nghiêng */
  opacity: clamp(0, calc(var(--lp) * 12), 1);
  transform: rotateX(calc((1 - var(--lp)) * -92deg));
}
.footer-flaps > i:last-child { margin-bottom: 0; }

/* Lật từ thanh DƯỚI CÙNG ngược lên: thanh trên cùng khép lại sau chót, đúng
   lúc footer chạm mép trên màn hình. */
.js .footer-flaps > i:nth-last-child(1) { --d: 0;   }
.js .footer-flaps > i:nth-last-child(2) { --d: .10; }
.js .footer-flaps > i:nth-last-child(3) { --d: .20; }
.js .footer-flaps > i:nth-last-child(4) { --d: .30; }
.js .footer-flaps > i:nth-last-child(5) { --d: .40; }
.js .footer-flaps > i:nth-last-child(6) { --d: .50; }
.js .footer-flaps > i:nth-last-child(7) { --d: .60; }
.js .footer-flaps > i:nth-last-child(8) { --d: .70; }

/* Chỉ bật dải lật từ desktop trở lên: mobile/tablet khoảng trống mép trên
   quá hẹp, --flapH = 0 -> mảng vàng phủ kín như cũ, không có gì đổi. */
@media (min-width: 1025px) {
  .site-footer {
    /* ~3/10 chiều cao footer, nhưng chốt trần theo hàng CTA để dải lật KHÔNG
       BAO GIỜ chạm tới chữ "Let's build up…", dù màn hình cao tới đâu. */
    --flapH: min(30%, calc(var(--foot-line1) * .45));
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .site-footer { --fp: 1; }
  html.is-footer-over main { position: static; }
  .footer-cta .fx-roll__in { transition: none; }
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1200px) {
  .services-grid, .clients-grid { grid-template-columns: repeat(3, 1fr); }
  .portfolio-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ===== TABLET & MOBILE (≤1024px): ẩn thanh bên, hiện thanh trên vàng ===== */
@media (max-width: 1024px) {
  body { padding-left: 0; }
  main { padding-top: var(--mbar-h); }

  .side-rail { display: none; }              /* ẩn thanh bên */

  /* Thanh trên: dải vàng, logo chữ trái + nút menu phải */
  .site-header {
    left: 0; height: var(--mbar-h); padding: 0 16px;
    background: var(--yellow); justify-content: space-between;
    pointer-events: auto; border-bottom: 2px solid var(--black);
  }
  .topbar-logo { display: block; }

  /* Nút MENU thu gọn thành ô đen bo góc (chỉ icon) — giữ nguyên kiểu cũ trên mobile */
  .menu-btn {
    background: var(--black); border: 0; padding: 0; border-radius: 8px;
    width: 46px; height: 40px; justify-content: center; gap: 0;
  }
  .menu-btn:hover,
  .menu-btn.open { background: var(--black); color: var(--yellow); border: 0; box-shadow: none; transform: none; }
  .menu-btn-label { display: none; }
  .menu-btn-ico { width: 22px; gap: 5px; }
  .menu-btn-ico i { background: var(--yellow); height: 2.5px; }
  /* Icon mobile to hơn desktop nên khoảng dịch của dấu X cũng lớn hơn cho khớp */
  .menu-btn.open .menu-btn-ico i:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .menu-btn.open .menu-btn-ico i:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

  .menu-overlay {
    padding: 0 clamp(20px, 6vw, 44px) 34px;
    padding-left: clamp(20px, 6vw, 44px);
    justify-content: flex-start;
  }
  .menu-inner {
    padding-top: calc(var(--mbar-h) + 22px);
    gap: clamp(24px, 4vw, 38px);
  }
  .menu-search { padding-right: 0; }
  /* Mũi tên là nút BẤM trên cảm ứng -> vùng chạm rộng hơn */
  .mnav__toggle { width: 44px; height: 44px; }

  /* Works toolbar trên tablet/mobile: về dạng thường, không kéo lên, cuộn ngang nếu cần */
  .menu-btn:hover { transform: none; box-shadow: none; }
  .works-topbar { margin-top: 0; min-height: 0; }
  .works-topbar > .container { display: block; }
  .works-topbar .cat-filter {
    padding: 12px 0; padding-right: 0;
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
  }

  .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }

  /* Chi tiết dự án: 2 cột -> 1 cột, cột thông tin xuống dưới mô tả */
  .pf-lede { grid-template-columns: 1fr; gap: 26px; }
  .pf-title { max-width: none; }
  .pf-meta { position: static; top: auto; }
  .pf-meta-list {
    display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px;
    border-top: 1px solid var(--border);
  }
  .pf-meta-item { padding: 16px 0; }
  .pf-meta-item:first-child { padding-top: 16px; }
  .pf-meta-item:nth-last-child(2):nth-child(odd) { border-bottom: 0; }

  /* About award-style: rail lên trên, nội dung xuống dưới */
  .ab-grid { grid-template-columns: 1fr; gap: 20px; }
  .ab-rail__sticky { position: static; top: auto; flex-direction: row; align-items: center;
    flex-wrap: wrap; gap: 12px 18px; }

  /* Footer trên tablet/mobile: canh lề đều, các đường kẻ vẫn full-width */
  .site-footer { min-height: auto; }
  .footer-inner { padding: 0; }
  .footer-hero { min-height: 0; flex-wrap: wrap; row-gap: 24px;
    padding: 48px clamp(20px, 6vw, 40px) 30px; }
  .footer-cols { grid-template-columns: 1fr 1fr; max-width: none;
    column-gap: 30px; padding: 34px clamp(20px, 6vw, 40px) 0; }
  .footer-col--promo { justify-self: start; }
  .footer-legal { padding-left: clamp(20px, 6vw, 40px); padding-right: clamp(20px, 6vw, 40px); }
  .footer-spacer { min-height: 46px; }
}

@media (max-width: 768px) {
  .container { padding: 0 18px; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .clients-grid { grid-template-columns: repeat(3, 1fr); }
  .blog-grid { grid-template-columns: 1fr; }
  .contact-wrap { grid-template-columns: 1fr; gap: 34px; }
  .footer-cols { grid-template-columns: 1fr; gap: 24px; }
  .footer-top-btn__box { width: 84px; height: 84px; }
  .mnav__text { letter-spacing: -1px; }
  .mnav__sublist { gap: 9px; }
  .mnav__sublist a { padding: 9px 16px; }
  .ms-item__thumb { width: 44px; height: 34px; }

  /* About award-style: dồn cột trên mobile */
  .sw-grid { grid-template-columns: repeat(4, 1fr); }
  .xp__head { flex-direction: column; gap: 4px; }
  .edu { grid-template-columns: 1fr auto; row-gap: 6px; }
  .edu__school { grid-column: 1 / -1; }
  .edu__meta { grid-column: 1 / -1; justify-self: start; text-align: left; }
}

@media (max-width: 480px) {
  .portfolio-grid { grid-template-columns: 1fr; }
  .sw-grid { grid-template-columns: repeat(3, 1fr); }
  .services-grid, .clients-grid { grid-template-columns: repeat(2, 1fr); }
  .page-head { padding: 36px 0 14px; }
  .topbar-logo svg { height: 17px; }

  /* Chi tiết dự án: cột thông tin về 1 cột trên điện thoại */
  .pf-meta-list { grid-template-columns: 1fr; column-gap: 0; }
  .pf-meta-item { border-bottom: 1px solid var(--border); }
  .pf-meta-item:last-child { border-bottom: 0; }
}

/* =====================================================================
   MÀN HÌNH TẢI DỮ LIỆU (loader)
   ===================================================================== */
#app-loader .loader-mark {
  clip-path: inset(0 100% 0 0);
  animation: loaderWipe 1.05s cubic-bezier(.65,0,.35,1) forwards, loaderBreathe 2.4s ease-in-out 1.05s infinite;
}
@keyframes loaderWipe {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes loaderBreathe {
  0%, 100% { opacity: 1; }
  50%      { opacity: .72; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  #app-loader .loader-mark { clip-path: none; }
}


/* =====================================================================
   CONTACT PAGE — Redesign "THE BRIEF"
   Ý tưởng: trang liên hệ = trang đầu tiên của bản brief dự án.
   Signature: bộ đếm + thanh tiến trình sống (feedback, không trang trí).
   Scope: .contact-page. Vàng --accent trên nền --bg. Poppins + Space Mono.
   Giữ nguyên hợp đồng JS: .rv/.clip (reveal), #message, select, #c-clock2,
   #faqAccordion/.faq-item/.faq-q/.open, [data-magnetic].
   ===================================================================== */
.contact-page{
  --pad:max(30px,calc((100% - 1340px) / 2));
  --mono:'Space Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --hair:rgba(255,255,255,.09);
  --hair-soft:rgba(255,255,255,.055);
  --ease:cubic-bezier(.19,1,.22,1);
  position:relative;
}

/* ---- Reveal primitives — chạy trên compositor, chỉ ẩn khi JS bật ---- */
.contact-page.js-motion .rv{opacity:0;transform:translateY(20px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.contact-page.js-motion .rv.is-in{opacity:1;transform:none}
.contact-page.js-motion .clip{overflow:hidden;display:block}
.contact-page.js-motion .clip > *{display:block;transform:translateY(110%);transition:transform .9s var(--ease)}
.contact-page.js-motion .clip.is-in > *{transform:none}

/* ---- Nhãn tiện ích dùng chung (giọng "spec sheet") ---- */
.c-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-mute);margin:0;display:inline-flex;align-items:center;gap:12px}
.c-eyebrow::before{content:"";width:26px;height:1px;background:var(--accent);flex:0 0 auto}

/* =============================== HERO =============================== */
/* Cụm chữ này chiếm trọn 1 màn hình đầu tiên, canh giữa theo chiều dọc */
.c-hero{min-height:calc(100vh - 30px);display:flex;flex-direction:column;
  justify-content:center;align-items:center;text-align:center;
  padding:clamp(60px,10vh,120px) var(--pad) calc(clamp(60px,10vh,120px) + 40px);
  position:relative;max-width:none;margin:0;isolation:isolate;overflow-x:clip}
/* Dòng nhỏ phía trên — in hoa, nhỏ hơn ~4px, KHÔNG bold */
.c-hero-over{max-width:52ch;margin:0 auto clamp(10px,1.3vw,16px);
  font-size:clamp(12px,0.95vw,14px);letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-dim);line-height:1.55;font-weight:400}
/* Tiêu đề — IN HOA, đậm; ánh sáng vàng theo CON TRỎ + tương tác 3D (JS tách .c-hero-ch) */
.c-hero-title{margin:0;font-weight:800;letter-spacing:-.01em;line-height:1.12;
  font-size:clamp(30px,4.6vw,54px);color:var(--text);text-transform:uppercase;
  position:relative;transform-style:preserve-3d}
.c-hero-ch{display:inline-block;white-space:pre;transform-origin:50% 100%;
  transition:transform .16s ease-out,color .18s ease-out,text-shadow .18s ease-out;
  will-change:transform;backface-visibility:hidden}
/* Hai dòng nhỏ phía dưới — canh giữa, cỡ chữ = body bài viết */
.c-hero-sub{max-width:64ch;margin:clamp(10px,1.4vw,18px) auto 0;
  font-size:clamp(16px,1.25vw,18px);line-height:1.6;color:var(--text-dim);font-weight:400}
/* Biểu tượng cuộn xuống (giống trang About) */
.c-hero-cue{position:absolute;left:0;right:0;bottom:clamp(44px,7vh,72px);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  color:var(--text-mute);font-size:11px;text-transform:uppercase;letter-spacing:2px}

/* ============================== INTAKE ============================== */
.c-intake{padding:clamp(28px,3.5vw,46px) var(--pad) clamp(40px,6vw,80px)}

/* -- Cột bối cảnh: sticky, tĩnh lặng -- */
.c-context{position:sticky;top:104px;display:flex;flex-direction:column;gap:clamp(22px,2.6vw,32px)}
.c-context-lead{font-size:clamp(18px,1.9vw,23px);line-height:1.5;color:var(--text);
  letter-spacing:-.015em;max-width:26ch;margin:0}
.c-channels{margin:clamp(10px,1.4vw,18px) 0 0;display:flex;flex-direction:column}
.c-channel{display:grid;grid-template-columns:96px 1fr;gap:18px;align-items:baseline;
  padding:16px 0;border-top:1px solid var(--hair-soft)}
.c-channel:last-child{border-bottom:1px solid var(--hair-soft)}
.c-channel dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-mute);margin:0}
.c-channel dd{margin:0;font-size:clamp(15px,1.4vw,17px);font-weight:500;line-height:1.4;letter-spacing:-.01em}
.c-channel dd a{transition:color .3s var(--ease)}
.c-channel dd a:hover{color:var(--accent)}
.c-channel dd.muted{font-size:clamp(14px,1.3vw,15.5px);font-weight:400;color:var(--text-dim)}
.c-email{display:inline-grid;max-width:100%;line-height:1.4;font-size:clamp(15px,1.4vw,17px)}
.c-email .swap{grid-area:1/1;overflow-wrap:anywhere;transition:opacity .4s var(--ease),transform .4s var(--ease)}
.c-email .swap.b{opacity:0;transform:translateY(6px);color:var(--accent);white-space:nowrap;align-self:center}
.c-email:hover .swap.a,.c-email:focus-visible .swap.a{opacity:0;transform:translateY(-6px)}
.c-email:hover .swap.b,.c-email:focus-visible .swap.b{opacity:1;transform:none}
.c-socials{display:flex;flex-wrap:wrap;gap:8px 20px}
.c-socials a{font-size:15px;font-weight:500;color:var(--text-dim);position:relative;padding-bottom:3px}
.c-socials a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.c-socials a:hover{color:var(--text)}
.c-socials a:hover::after{transform:scaleX(1);transform-origin:left}
.c-status{display:inline-flex;align-items:center;gap:11px;margin:clamp(6px,1vw,10px) 0 0;
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim)}
.c-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);position:relative;flex:0 0 auto}
.c-dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--accent);
  animation:cPing 2.4s var(--ease) infinite}
@keyframes cPing{0%{transform:scale(.6);opacity:.9}80%,100%{transform:scale(1.9);opacity:0}}

/* -- Form brief: thành phần chủ đạo -- */
.c-brief{position:relative;min-width:0}
.c-brief-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:14px}
.c-count{margin:0;font-family:var(--mono);font-size:13px;letter-spacing:.06em;color:var(--text-mute);
  font-variant-numeric:tabular-nums}
.c-count b{font-weight:700;font-size:20px;color:var(--text);transition:color .3s var(--ease)}
.c-count.is-complete b{color:var(--accent)}
/* Thanh tiến trình sống — signature */
.c-progress{position:relative;height:2px;background:var(--hair);overflow:hidden;margin-bottom:clamp(30px,4vw,48px)}
.c-progress-fill{position:absolute;inset:0;background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .55s var(--ease)}

.c-alert{border:1px solid var(--border);padding:16px 18px;margin-bottom:26px;font-size:14.5px;line-height:1.6}
.c-alert-ok{border-color:rgba(255,221,0,.5);background:rgba(255,221,0,.06)}
.c-alert-ok b{color:var(--accent)}
.c-alert-err ul{margin:0;padding-left:18px;color:#ffb4a8}
.c-honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* -- Form dạng BOX + dropdown xổ xuống -- */
.c-form{margin-top:clamp(24px,3vw,36px)}
.c-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.4vw,18px)}
.c-box{position:relative;display:flex;align-items:stretch;border:1px solid var(--border);border-radius:14px;
  background:rgba(255,255,255,.02);transition:border-color .3s var(--ease),background .3s var(--ease)}
.c-box.full{grid-column:1 / -1}
.c-box:focus-within{border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.04)}
.c-box input,.c-box textarea{flex:1;width:100%;background:transparent;border:0;outline:0;color:var(--text);
  font-family:inherit;font-size:clamp(15px,1.2vw,17px);letter-spacing:-.01em;caret-color:var(--accent);
  padding:clamp(15px,1.4vw,19px) clamp(16px,1.6vw,22px)}
.c-box textarea{resize:none;min-height:clamp(170px,24vh,260px);line-height:1.6;display:block;overflow:hidden}
.c-box input::placeholder,.c-box textarea::placeholder{color:var(--text-mute);opacity:1}
/* Dấu * cho trường bắt buộc */
.c-req{position:absolute;top:10px;right:14px;z-index:1;color:var(--accent);font-size:15px;line-height:1;pointer-events:none}
.c-box.full .c-req{top:14px;right:18px}

/* Dropdown tuỳ biến (JS dựng từ <select>) */
.c-dd .c-dd-trigger{flex:1;width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:transparent;border:0;outline:0;color:var(--text);font-family:inherit;text-align:left;cursor:pointer;
  font-size:clamp(15px,1.2vw,17px);letter-spacing:-.01em;padding:clamp(15px,1.4vw,19px) clamp(16px,1.6vw,22px)}
.c-dd .c-dd-trigger.is-empty .c-dd-value{color:var(--text-mute)}
.c-dd-arrow{flex:0 0 auto;width:9px;height:9px;border-right:1.5px solid var(--text-dim);
  border-bottom:1.5px solid var(--text-dim);transform:translateY(-2px) rotate(45deg);
  transition:transform .35s var(--ease),border-color .3s}
.c-dd.open .c-dd-arrow{transform:translateY(2px) rotate(-135deg);border-color:var(--accent)}
.c-dd-panel{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:40;
  background:#0d0d0d;border:1px solid var(--border);border-radius:14px;padding:6px;
  max-height:288px;overflow-y:auto;box-shadow:0 24px 60px rgba(0,0,0,.55);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s}
.c-dd.open .c-dd-panel{opacity:1;visibility:visible;transform:none}
.c-dd-opt{display:block;width:100%;text-align:left;background:transparent;border:0;border-radius:9px;cursor:pointer;
  color:var(--text-dim);font-family:inherit;font-size:clamp(14.5px,1.1vw,16px);letter-spacing:-.01em;
  padding:12px clamp(12px,1.2vw,16px);transition:background .2s,color .2s}
.c-dd-opt:hover{background:rgba(255,255,255,.05);color:var(--text)}
.c-dd-opt.is-sel{background:rgba(255,221,0,.1);color:var(--accent)}

/* Ô chứa nút gửi (nằm cạnh ô ngân sách) */
.c-submit-cell{display:flex}

.c-submit-wrap{margin-top:clamp(34px,4vw,52px)}
.c-submit{position:relative;width:100%;border:0;background:var(--accent);color:#171717;font-weight:800;
  font-size:clamp(15px,1.5vw,18px);letter-spacing:.02em;padding:26px 30px;display:flex;align-items:center;
  justify-content:center;gap:14px;overflow:hidden;text-transform:uppercase}
.c-submit .txt{position:relative;z-index:2;display:inline-flex;align-items:center;gap:14px;transition:color .4s var(--ease)}
.c-submit .arw{display:inline-block;transition:transform .45s var(--ease)}
.c-submit::before{content:"";position:absolute;inset:0;background:var(--text);transform:translateY(101%);
  transition:transform .5s var(--ease);z-index:1}
.c-submit:hover::before,.c-submit:focus-visible::before{transform:translateY(0)}
.c-submit:hover .arw{transform:translateX(8px)}
.c-note{margin:clamp(16px,2vw,22px) 0 0;font-size:13px;letter-spacing:0;color:var(--text-mute);text-align:left}

/* ===== KHỐI THÔNG TIN LIÊN HỆ (tách riêng, giống mẫu) ===== */
.c-connect{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,64px);
  padding:clamp(52px,7vw,100px) var(--pad)}
.c-connect__col{display:flex;flex-direction:column;gap:14px;align-items:flex-start;min-width:0}
.c-connect__h{margin:0 0 4px;font-size:clamp(24px,2.8vw,40px);font-weight:700;letter-spacing:-.02em;
  line-height:1.02;color:var(--text)}
.c-connect__text{margin:0;color:var(--text-dim);font-size:clamp(15px,1.2vw,17px);line-height:1.7;max-width:34ch}
.c-connect__meta{margin:0;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--text-mute);text-transform:uppercase}
.c-connect__link{color:var(--text-dim);transition:color .3s var(--ease)}
.c-connect__link:hover{color:var(--accent)}
.c-connect__mail{font-size:clamp(19px,1.9vw,26px);font-weight:600;letter-spacing:-.02em;color:var(--text);
  word-break:break-word;transition:color .3s var(--ease)}
.c-connect__mail:hover{color:var(--accent)}
/* Cột liên hệ: email/điện thoại xếp dọc; YouTube/Facebook/Zalo cùng 1 hàng.
   Hover: KHÔNG gạch chân, chỉ đổi màu vàng. Căn xuống ngang với đoạn mô tả cột "Kết nối". */
.c-connect__link{color:var(--text-dim);font-size:clamp(15px,1.2vw,17px);line-height:1.5;
  overflow-wrap:anywhere;transition:color .4s var(--ease)}
.c-connect__link:hover,.c-connect__link:focus-visible{color:var(--accent)}
.c-connect__social{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:2px}
.c-connect__h.is-ghost{visibility:hidden}

/* =============================== FAQ =============================== */
/* Bố cục theo mẫu: tiêu đề RẤT to canh trái, mô tả đẩy xuống dưới; danh
   sách câu hỏi bên phải, mũi tên ở mép phải (xuống = đóng, lên = mở). */
.c-faq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);
  gap:clamp(40px,7vw,120px);padding:clamp(56px,8vw,116px) var(--pad);border-top:1px solid var(--hair);
  margin-top:70px}
.faq-head{position:sticky;top:104px;align-self:start;display:flex;flex-direction:column}
.faq-heading{font-size:clamp(24px,2.8vw,38px);font-weight:700;letter-spacing:-.02em;line-height:1.08;margin:0}
.faq-subtitle{color:var(--text-dim);font-size:clamp(16px,1.25vw,18px);line-height:1.55;max-width:26ch;
  font-weight:400;margin:clamp(8px,1.1vw,14px) 0 0}

.faq-list{margin:0}
.faq-item{border-top:1px solid var(--border);transition:border-color .3s var(--ease)}
.faq-item:first-child{border-top:0}
.faq-q{width:100%;background:none;border:0;text-align:left;color:var(--text);
  display:grid;grid-template-columns:1fr auto;align-items:start;gap:clamp(20px,3vw,40px);
  padding:clamp(15px,1.9vw,20px) 0;font-family:inherit;cursor:pointer}
/* Câu hỏi đầu tiên: bỏ padding trên để ngang hàng với tiêu đề "Câu hỏi thường gặp" */
.faq-item:first-child .faq-q{padding-top:0}
.faq-qt{font-size:clamp(18px,1.4vw,20px);font-weight:700;letter-spacing:-.01em;line-height:1.3;
  transition:color .3s var(--ease)}
/* Mũi tên chỉ hướng — dùng ký tự, xoay khi mở */
.faq-ico{position:relative;width:18px;height:18px;flex:0 0 auto;align-self:start;margin-top:.15em;
  color:var(--text-dim);transition:color .3s var(--ease),transform .45s var(--ease)}
.faq-ico::before{content:"↓";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:16px;line-height:1}
.faq-item.open .faq-ico{transform:rotate(180deg);color:var(--accent)}
/* Câu hỏi đang mở + hover -> tô vàng cả chữ lẫn mũi tên */
.faq-item.open .faq-qt{color:var(--accent)}
.faq-q:hover .faq-qt{color:var(--accent)}
.faq-q:hover .faq-ico{color:var(--accent)}
/* Câu trả lời — xám, mở/đóng mượt; khi mở kéo sát câu hỏi hơn */
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-item.open .faq-q{padding-bottom:clamp(4px,.7vw,8px)}
.faq-a > .faq-a-inner{overflow:hidden;min-height:0}
.faq-a-inner{padding:0;color:var(--text-dim);
  font-size:clamp(16px,1.25vw,18px);line-height:1.7;max-width:60ch}
.faq-item.open .faq-a-inner{padding:0 0 clamp(18px,2.4vw,26px)}

/* ---- Focus-visible cho bàn phím (a11y) ---- */
.contact-page a:focus-visible,
.contact-page button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:1px}
.c-submit:focus-visible{outline-offset:4px}

/* ============================ RESPONSIVE ============================ */
@media (max-width:1080px){
  .c-faq{grid-template-columns:1fr;gap:clamp(40px,8vw,60px)}
  .faq-head{position:static}
}
@media (max-width:1024px){
  .c-hero{min-height:calc(100svh - var(--mbar-h))}
}
@media (max-width:860px){
  .c-connect{grid-template-columns:1fr;gap:clamp(30px,7vw,48px)}
}
@media (max-width:768px){
  .contact-page{--pad:18px}
}
@media (max-width:760px){
  .c-hero-cue{display:none}
  /* Điện thoại: bỏ chiều cao full-screen, kéo form lên gần cụm tiêu đề đầu trang */
  .c-hero{min-height:auto;padding-top:clamp(40px,9vh,72px);padding-bottom:clamp(20px,6vw,34px)}
  .c-intake{padding-top:clamp(4px,2.5vw,14px)}
  /* Tiêu đề xuống dòng theo TỪ, cân 2 dòng, không gãy giữa từ */
  .c-hero-title{font-size:clamp(27px,8.2vw,40px);
    word-break:keep-all;overflow-wrap:normal;text-wrap:balance}
}
@media (max-width:620px){
  .c-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .contact-page .rv{opacity:1!important;transform:none!important}
  .contact-page .clip > *{transform:none!important}
  .c-dot::after{animation:none}
  .ab-intro__arrow{animation:none}
}

/* =====================================================================
   CHUYỂN TRANG — các dải vàng lật che/mở (page transition)
   + logo loader chỉ hiện lần đầu vào site
   ===================================================================== */
html.has-visited #app-loader { display: none !important; }

.page-fx {
  position: fixed; top: 0; right: 0; bottom: 0; left: var(--sidebar-w); /* chỉ che vùng nội dung, chừa sidebar */
  z-index: 195; pointer-events: none;
  display: flex; flex-direction: column; overflow: hidden;
  perspective: 1600px; visibility: hidden;
  transform: translateY(100%);          /* mặc định nằm dưới màn hình, chưa che */
  will-change: transform;
}
.page-fx.show { visibility: visible; }
.page-fx > i {
  display: block; flex: 1 1 0; width: 100%;
  background: var(--yellow);
  margin-bottom: -1px;                  /* chồng mép 1px: khi che không lộ đường kẻ đen */
  transform-origin: center top; backface-visibility: hidden;
  transform: rotateX(0deg); opacity: 1; /* khi che: các dải phẳng, ghép thành mảng đặc */
  transition: transform .62s cubic-bezier(.66,0,.20,1), opacity .5s ease;
  will-change: transform, opacity;
}
.page-fx > i:last-child { margin-bottom: 0; }

/* CHE trang: cả TẤM vàng đặc (có nền vàng nên không hở) dâng từ dưới lên */
.page-fx.is-down,
.page-fx.is-covering,
.page-fx.is-revealing { transform: translateY(0); }
.page-fx.is-covering,
.page-fx.is-down { background: var(--yellow); }   /* nền vàng lấp mọi khe khi đang che */
.page-fx.is-covering { transition: transform .7s cubic-bezier(.16,1,.3,1); }
.page-fx.is-instant,
.page-fx.is-instant > i { transition: none; }

/* MỞ trang: từng dải lật biến mất, lộ trang mới phía sau */
.page-fx.is-revealing > i { transform: rotateX(-92deg); opacity: 0; }

/* Vào trang ở trạng thái đã che (điều hướng sau) — che ngay để không nhấp nháy */
html.fx-enter .page-fx { visibility: visible; transform: translateY(0); background: var(--yellow); }
html.fx-enter .page-fx > i { transform: rotateX(0deg); opacity: 1; transition: none; }
/* An toàn: nếu JS không chạy, tự bỏ lớp phủ sau 2s */
html.fx-enter .page-fx { animation: fxFailsafe 0s linear 2s forwards; }
@keyframes fxFailsafe { to { visibility: hidden; } }

/* Mobile/tablet: sidebar ẩn → lớp phủ chuyển trang che từ mép trái (đặt cuối file để thắng cascade) */
@media (max-width: 1024px) {
  .page-fx { left: 0; }
}

/* =====================================================================
   HOVER "REVEAL TỪNG KÝ TỰ" CHO TEXT (mô phỏng video mẫu)
   • Khi hover: chữ biến mất rồi từng ký tự nhoè hiện lại (ngẫu nhiên).
   • JS tách chữ thành .fx-ch và thêm .is-fx để chạy; delay đặt qua --d.
   • Áp dụng cho TEXT LINK toàn site; KHÔNG áp cho ảnh/box/nút, và
     KHÔNG áp cho text trong BÀI VIẾT (chọn selector trong app.js).
   ===================================================================== */
.fx-ch { display: inline; }            /* inline → không đổi layout/xuống dòng */
.fx-split.is-fx .fx-ch {
  animation: fxChar .24s cubic-bezier(.22,1,.36,1) both;
  animation-delay: var(--d, 0ms);
}
@keyframes fxChar {
  0%   { opacity: 0; filter: blur(5px); }
  60%  { opacity: 1; filter: blur(1.4px); }
  100% { opacity: 1; filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
  .fx-split.is-fx .fx-ch { animation: none; }
}

/* =====================================================================
   BLOG — EDITORIAL "JOURNAL" REDESIGN (award-style, matches About page)
   Overrides the legacy .blog-grid/.blog-card/.post-detail visuals.
   Motion rides the shared [data-reveal] system in app.js.
   ===================================================================== */

/* Neutralise legacy boxed blog styles (kept for safety, no longer emitted) */
.blog-grid { display: block; }
.blog-card { border: 0; background: transparent; }

/* Shared tiny separator dot */
.j-item__meta .dot, .feature__meta .dot, .article-meta .dot, .top-card__meta .dot {
  display: inline-block; width: 3px; height: 3px; border-radius: 50%;
  background: currentColor; opacity: .5; vertical-align: middle;
}

/* ---- Breadcrumb ---- */
.journal-crumb {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  font-size: 12px; letter-spacing: .3px; color: var(--text-mute);
}
.journal-crumb a { color: var(--text-mute); }
.journal-crumb a:hover { color: var(--accent); }
.journal-crumb span { opacity: .45; }
.journal-crumb em { font-style: normal; color: var(--text-dim);
  max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Masthead ---- */
.journal-hero { padding: clamp(24px, 5vh, 44px) 0 14px; }
/* Nền hạt tương tác (.fx-dots) cần khối cha có position + isolate để lớp
   z-index:-1 của nó nằm dưới chữ mà không chui xuống dưới nền trang. */
.blog-cover, .journal-hero--solo { position: relative; isolation: isolate; }
/* Khi không có ảnh bìa, tiêu đề đứng một mình -> cho khối cao hơn để nền hạt
   có chỗ hiển thị ra tấm ra món. */
.journal-hero--solo { padding-bottom: clamp(28px, 6vh, 56px); }
.journal-hero__title {
  margin: 0; font-weight: 600; line-height: 1; letter-spacing: -.025em;
  font-size: clamp(30px, 9vw, 56px); text-transform: none;
}

/* ---- Filter / index row (pill style + hover) ---- */
.journal-filter { border: 0; }   /* bỏ line trên & dưới danh mục */
.journal-filter .cat-filter {
  position: relative;
  padding: 4px 0 20px; gap: 10px; flex-wrap: wrap;
}
/* Đường kẻ full màn hình, cách các nút danh mục 30px (không dính vào khối bài viết phía trên) */
.journal-filter .cat-filter::before {
  content: ""; position: absolute; top: -30px; left: 50%;
  width: 100vw; margin-left: -50vw; height: 1px;
  background: var(--border); pointer-events: none;
}
/* Ẩn đường kẻ ngang ngay dưới tiêu đề "Bài viết" trên mobile & máy tính bảng */
@media (max-width: 1024px) {
  .journal-filter .cat-filter::before { display: none; }
}
.journal-filter .cat-filter a {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 14px 22px 12px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.02);
  font-size: 12.5px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase;
  line-height: 1;
  color: var(--text-mute);
  transition: color .25s ease, border-color .25s ease;
}

/* Vòng tròn "mực": tâm đặt tại chỗ chuột, nở ra phủ kín rồi thu về điểm rời chuột. */
.journal-filter .cat-filter a .cf-ink {
  position: absolute; left: 0; top: 0; width: 2px; height: 2px;
  margin: -1px 0 0 -1px;                 /* tâm trùng đúng toạ độ left/top */
  border-radius: 50%; background: var(--accent);
  transform: translate(-50%, -50%) scale(0); transform-origin: center;
  transition: transform .5s cubic-bezier(.22, .61, .36, 1);
  pointer-events: none; z-index: 0;
}
.journal-filter .cat-filter a.is-inking .cf-ink {
  transform: translate(-50%, -50%) scale(var(--cf-d, 240));
}
.journal-filter .cat-filter a .cf-label {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 5px; line-height: 1;
  transition: color .3s ease;
}
.journal-filter .cat-filter a:hover { border-color: rgba(255,255,255,.35); }
.journal-filter .cat-filter a.is-inking .cf-label { color: #111; } /* chữ tối trên nền vàng */

.journal-filter .cat-filter a.active {
  color: #111; background: var(--accent); border-color: var(--accent);
}
.journal-filter .cat-filter a.active .cf-ink { display: none; } /* nút đang chọn đã vàng sẵn */

@media (prefers-reduced-motion: reduce) {
  .journal-filter .cat-filter a .cf-ink { transition-duration: .01ms; }
}

/* Desktop: tiêu đề "Bài viết" ngang ô logo; hàng danh mục có LỀ DƯỚI trùng
   đường kẻ nằm dưới icon Zalo (= đáy ô logo + 1 ô social). */
@media (min-width: 1025px) {
  :root { --cf-shift: 30px; }
  .journal-hero__title { font-size: clamp(36px, 5vw, 66px); line-height: 1; }

  /* Trang DANH MỤC / trang >=2 (không có "cover"): giữ pills trùng vạch Zalo như cũ. */
  .blog-index:not(.has-cover) .journal-hero {
    margin-top: -30px;
    height: calc(var(--logo-h) + var(--cf-shift));
    padding: 0; display: flex; align-items: flex-end;
  }
  .blog-index:not(.has-cover) .journal-filter {
    display: flex; align-items: flex-end;
    height: calc(var(--sidebar-w) - var(--cf-shift));
  }
  .blog-index:not(.has-cover) .journal-filter > .container { width: 100%; }
  .blog-index:not(.has-cover) .journal-filter .cat-filter { padding: 0; }

  /* TRANG CHỦ BLOG: Tiêu đề + 2 bài nổi bật CHIẾM 1 MÀN HÌNH, canh xuống ĐÁY. */
  .has-cover .blog-cover {
    min-height: calc(100vh - 30px);      /* main có padding-top:30px */
    display: flex; flex-direction: column;
    justify-content: flex-end;           /* dồn tiêu đề + 2 card xuống đáy màn hình */
    padding-bottom: clamp(18px, 3.5vh, 44px);
  }
  .has-cover .journal-hero {
    flex: 0 0 auto; padding: 0 0 calc(clamp(12px, 2vh, 22px) + 35px);   /* tiêu đề nằm ngay trên 2 card */
  }
  .has-cover .blog-tops { flex: 0 0 auto; padding: 0; }
  .has-cover .blog-tops > .container { width: 100%; }
  .has-cover .blog-tops .top-card__media { aspect-ratio: auto; height: clamp(220px, 38vh, 400px); }
}

/* =====================================================================
   BLOG TOPS — 2 bài mới nhất, card lớn xếp ngang (ảnh trên, tiêu đề dưới)
   ===================================================================== */
.blog-tops { padding: clamp(22px, 4vh, 40px) 0 0; }
.tops-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px); }
.top-card { display: flex; flex-direction: column; color: var(--text); min-width: 0; }
.top-card__media {
  position: relative; overflow: hidden; border-radius: 16px;
  background: #0d0d0d; aspect-ratio: 16 / 10; display: block;
}
.top-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s cubic-bezier(.16,1,.3,1);
}
.top-card:hover .top-card__media img { transform: scale(1.05); }
.top-card__meta {
  display: flex; align-items: center; gap: 12px; margin: 16px 0 8px;
  font-size: 12px; letter-spacing: .4px; color: var(--text-mute);
  text-transform: uppercase; font-variant-numeric: tabular-nums;
}
.top-card__title {
  margin: 0; font-weight: 600; line-height: 1.2; letter-spacing: -.015em;
  font-size: clamp(22px, 2.2vw, 34px); transition: color .3s ease;
  /* Chừa khoảng trên để dấu tiếng Việt (ế, ị, ầ…) ở dòng đầu không bị cắt ngọn */
  padding-top: .12em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.top-card:hover .top-card__title { color: var(--accent); }

/* 2 bài nổi bật: chỉ hiện dạng "cover" ở desktop. Trên mobile ẩn khối này,
   dùng 2 dòng tương ứng đã chèn sẵn đầu danh sách bên dưới (.j-item--feat-mobile). */
.j-item--feat-mobile { display: none; }
@media (max-width: 720px) {
  .tops-grid { grid-template-columns: 1fr; gap: 28px; }
  .has-cover .blog-tops { display: none; }
  .j-item--feat-mobile { display: block; }
}
/* Trang cover: tách hàng danh mục khỏi khối featured khi cuộn xuống. */
.has-cover .journal-filter { padding-top: calc(clamp(20px, 4vh, 48px) + 150px); }

/* Đổi danh sách/phân trang tại chỗ (AJAX): mờ nhẹ trong lúc tải. */
#blog-stream { transition: opacity .15s ease; }
#blog-stream.is-loading { opacity: .5; pointer-events: none; }

/* ---- Empty ---- */
.journal-empty { padding: 60px 0 90px; }

/* =====================================================================
   FEATURED (latest) — asymmetric editorial split, not a card
   ===================================================================== */
.journal-feature { padding: clamp(34px, 6vh, 68px) 0 clamp(20px, 3vh, 34px); }
.feature {
  display: grid; grid-template-columns: 1.05fr 1fr;
  gap: clamp(28px, 4vw, 72px); align-items: center; color: var(--text);
}
.feature__media {
  position: relative; overflow: hidden; background: #0d0d0d; aspect-ratio: 16 / 11;
}
.feature__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1s cubic-bezier(.16,1,.3,1), filter .6s ease;
  filter: saturate(1.02);
}
.feature:hover .feature__media img { transform: scale(1.05); }
.feature__tag {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  background: var(--accent); color: #111; font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 1.4px; padding: 6px 11px;
}
.feature__meta {
  display: flex; align-items: center; gap: 12px;
  font-size: 12px; letter-spacing: .4px; color: var(--text-mute);
  text-transform: uppercase; margin-bottom: 18px; font-variant-numeric: tabular-nums;
}
.feature__title {
  font-weight: 800; line-height: 1.04; letter-spacing: -.015em;
  font-size: clamp(28px, 3.4vw, 52px); margin: 0 0 18px;
  transition: color .35s ease;
}
.feature:hover .feature__title { color: var(--accent); }
.feature__excerpt {
  color: var(--text-dim); font-size: clamp(15px, 1.15vw, 17px); line-height: 1.7;
  max-width: 52ch; margin: 0 0 26px;
}
.feature__cta {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.4px;
  color: var(--text);
}
.feature__cta i { transition: transform .4s cubic-bezier(.16,1,.3,1); font-style: normal; }
.feature:hover .feature__cta { color: var(--accent); }
.feature:hover .feature__cta i { transform: translateX(8px); }

/* =====================================================================
   CONTENTS LIST — numbered editorial rows, hairline dividers, no boxes
   ===================================================================== */
.journal-list { padding: clamp(20px, 3vh, 40px) 0 clamp(50px, 8vh, 96px); }

.j-feed { display: block; }
.j-item { border-top: 1px solid var(--border); }
.j-item:first-child { border-top: 0; }
.j-item:last-child { border-bottom: 1px solid var(--border); }

/* Row: text on the LEFT, thumbnail on the RIGHT */
.j-item__link {
  position: relative; display: grid; align-items: center;
  grid-template-columns: 1fr 260px;
  gap: clamp(18px, 2.4vw, 40px);
  padding: clamp(18px, 2.4vh, 28px) 0; color: var(--text);
}
/* growing yellow underline on hover (subtle, editorial) */
.j-item__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .55s cubic-bezier(.16,1,.3,1);
}
.j-item:hover .j-item__link::after { transform: scaleX(1); }

.j-item__body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.j-item__meta {
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-mute);
  font-variant-numeric: tabular-nums;
}
.j-item__title {
  font-size: clamp(19px, 1.9vw, 27px); font-weight: 700; line-height: 1.2;
  letter-spacing: -.01em; transition: color .35s ease;
  /* tối đa 2 dòng, quá thì cắt bằng dấu … */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.j-item:hover .j-item__title { color: var(--accent); }
.j-item__cat { color: var(--text-mute); }

.j-item__media {
  display: block; overflow: hidden; background: #0d0d0d; aspect-ratio: 16 / 10; width: 100%;
  border-radius: 10px;
}
.j-item__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .9s cubic-bezier(.16,1,.3,1);
}
.j-item:hover .j-item__media img { transform: scale(1.07); }

/* ---- Hover peek: popup nổi, bám theo con trỏ (JS đặt vị trí) ---- */
/* Quan trọng: [data-reveal] đặt will-change: opacity,transform lên .j-item.
   - 'transform' tạo containing-block -> popup fixed bị neo sai vị trí.
   - will-change (opacity/transform) còn tạo stacking-context -> popup của bài trên
     bị nội dung bài dưới đè lên.
   Bỏ hẳn will-change trên .j-item (sau khi hiện xong, transform=none) để popup
   vừa định vị đúng theo màn hình, vừa luôn nổi trên cùng nhờ z-index. */
.js .j-item[data-reveal] { will-change: auto; }
.js .top-card-wrap[data-reveal] { will-change: auto; }
.top-card-wrap { position: relative; min-width: 0; }
.j-peek {
  position: fixed; left: 0; top: 0; z-index: 500;
  width: min(400px, 92vw);
  opacity: 0; visibility: hidden; transform: translateY(6px) scale(.97);
  transform-origin: top left;
  transition: opacity .2s cubic-bezier(.16,1,.3,1), transform .24s cubic-bezier(.16,1,.3,1), visibility .2s;
  pointer-events: none; /* không chặn chuột khi đang ẩn */
}
.j-item.is-peeking .j-peek,
.top-card-wrap.is-peeking .j-peek {
  opacity: 1; visibility: visible; transform: none;
  pointer-events: auto; /* để bấm được nút Copy/Share */
}
.j-peek__inner { display: block; }

.j-peek__card {
  position: relative; overflow: hidden;
  padding: 18px 18px 16px;
  background: #171717;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 16px;
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset,
              0 28px 60px -18px rgba(0,0,0,.85),
              0 8px 24px -12px rgba(0,0,0,.6);
}
/* vệt sáng accent mảnh phía trên cho cảm giác hiện đại */
.j-peek__card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent 65%);
  opacity: .9;
}
.j-peek__kicker {
  display: inline-flex; align-items: center; gap: 7px; margin: 0 0 11px;
  font-size: 10px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--accent);
}
.j-peek__kicker::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 3px rgba(240,208,60,.15);
}

.j-peek__text-wrap { position: relative; }
.j-peek__text {
  margin: 0; color: var(--text-dim); font-size: 13.5px; line-height: 1.66;
  /* xem nhanh tối đa 4 dòng; quá thì cắt và thêm "…" (không làm mờ/hé dòng cuối) */
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}

.j-peek__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 14px; padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.07);
}
.j-peek__tags { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.j-tag {
  font-size: 11px; font-weight: 600; color: var(--text-mute); letter-spacing: .2px;
  padding: 4px 10px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px;
  transition: color .25s ease, background .25s ease, border-color .25s ease;
}
.j-tag:hover { color: #111; background: var(--accent); border-color: var(--accent); }

.j-peek__actions { display: flex; gap: 8px; flex-shrink: 0; }
.j-act {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; padding: 0 13px; border-radius: 10px; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 600; letter-spacing: .2px;
  border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: var(--text);
  transition: transform .2s ease, background .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.j-act svg { width: 15px; height: 15px; display: block; }
.j-act:hover { transform: translateY(-1px); }
.j-act--copy:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.28); }
.j-act--share {
  background: var(--accent); border-color: var(--accent); color: #111;
}
.j-act--share:hover { box-shadow: 0 8px 20px -6px rgba(240,208,60,.6); }
.j-act.is-done {
  background: var(--accent); border-color: var(--accent); color: #111; transform: none;
}

/* =====================================================================
   PAGINATION (journal)
   ===================================================================== */
.pagination--journal { display: block; padding: 0; }
.pagination--journal > .container {
  display: flex; align-items: center; justify-content: center; gap: 20px;
  padding-top: 8px; padding-bottom: clamp(60px, 9vh, 100px);
}
.pagination--journal .pg-nums { display: flex; align-items: center; gap: 6px; }
.pagination--journal a, .pagination--journal .current {
  min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; font-size: 13px; color: var(--text-mute); font-variant-numeric: tabular-nums;
  letter-spacing: .5px;
}
.pagination--journal .pg-nums a:hover { color: var(--accent); }
.pagination--journal .current { color: var(--accent); font-weight: 800; position: relative; }
.pagination--journal .current::after {
  content: ""; position: absolute; left: 30%; right: 30%; bottom: 6px; height: 2px; background: var(--accent);
}
.pagination--journal .pg-edge {
  font-size: 12px; text-transform: uppercase; letter-spacing: 1.4px; font-weight: 700; color: var(--text-dim);
}
.pagination--journal .pg-edge:hover { color: var(--accent); }

/* =====================================================================
   ARTICLE (detail)
   ===================================================================== */
.reading-bar {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 300;
  background: transparent; pointer-events: none;
}
.reading-bar > i {
  display: block; height: 100%; width: 100%; background: var(--accent);
  transform: scaleX(0); transform-origin: left; will-change: transform;
}
@media (max-width: 1024px) { .reading-bar { top: var(--mbar-h); } }

.article { padding-top: clamp(40px, 7vh, 84px); }
/* Hero căn lề trái, độ rộng chữ dễ đọc (không ép về giữa) */
.article-hero__inner { max-width: 920px; }

.article-cats { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.article-cats a {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center;
  font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px; font-weight: 600;
  color: var(--accent); border: 1px solid rgba(255,221,0,.45); padding: 7px 14px; border-radius: 999px;
  line-height: 1; -webkit-tap-highlight-color: transparent;
  transition: border-color .3s ease, color .3s ease;
}
.article-cats a:hover { border-color: rgba(255,221,0,.7); }
/* Vòng tròn "mực" nở ra từ chỗ chuột rồi phủ kín nút — giống nút danh mục trang blog */
.article-cats a .cf-ink {
  position: absolute; left: 0; top: 0; width: 2px; height: 2px;
  margin: -1px 0 0 -1px; border-radius: 50%; background: var(--accent);
  transform: translate(-50%, -50%) scale(0); transform-origin: center;
  transition: transform .5s cubic-bezier(.22,.61,.36,1);
  pointer-events: none; z-index: 0;
}
.article-cats a.is-inking .cf-ink { transform: translate(-50%, -50%) scale(var(--cf-d, 240)); }
.article-cats a .cf-label { position: relative; z-index: 1; display: inline-flex; align-items: center; line-height: 1; transition: color .3s ease; }
.article-cats a.is-inking .cf-label { color: #111; } /* chữ tối trên nền vàng */
@media (prefers-reduced-motion: reduce) { .article-cats a .cf-ink { transition-duration: .01ms; } }

/* Tiêu đề: nhẹ nhàng hơn (600), cỡ chữ vừa phải, khoảng cách chữ thoáng */
.article-title {
  font-weight: 600; line-height: 1.12; letter-spacing: -.015em;
  font-size: clamp(30px, 4.3vw, 58px); max-width: 22ch; margin: 0 0 22px;
  color: var(--text);
}
.article-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  color: var(--text-mute); font-size: 13px; letter-spacing: .5px;
  text-transform: uppercase; font-variant-numeric: tabular-nums;
}
.article-meta__cat { color: var(--text-dim); }

/* Mô tả ngắn dưới meta — kéo dài BẰNG khung tiêu đề (cả khối hero rộng 920px),
   không bị thụt vào / ngắn hơn tiêu đề. */
.article-lead {
  margin: 22px 0 0; max-width: none;
  color: var(--text-dim); font-size: clamp(15px, 1.15vw, 16.5px);
  line-height: 1.7; font-weight: 400;
  text-align: justify; text-justify: inter-word; hyphens: none;
}

/* Cover with mask (clip) reveal — overrides generic translate reveal */
.article-cover { margin: clamp(34px, 6vh, 70px) 0 0; }
.article-cover__frame { overflow: hidden; background: #0d0d0d; aspect-ratio: 16 / 8; }
.article-cover__frame img { width: 100%; height: 100%; object-fit: cover; }
.js .article-cover[data-reveal] { opacity: 0; transform: none; }
.js .article-cover[data-reveal].is-in { opacity: 1; }
.js .article-cover__frame img {
  clip-path: inset(0 0 100% 0); transform: scale(1.09);
  transition: clip-path 1.05s cubic-bezier(.16,1,.3,1), transform 1.25s cubic-bezier(.16,1,.3,1);
}
.js .article-cover.is-in .article-cover__frame img { clip-path: inset(0 0 0 0); transform: scale(1); }

/* Body shell: 2 cột — nội dung TRÁI (rộng), share + mục lục PHẢI (cột hẹp, gọn).
   Nội dung kéo dài gần tới cột share; cột share SÁT lề phải, thẳng dưới nút MENU,
   cách nội dung một khoảng vừa phải. */
.article-shell { padding: clamp(40px, 7vh, 80px) 0 clamp(30px, 5vh, 60px); }
.article-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  gap: clamp(44px, 4vw, 64px);
  /* Thụt cột nội dung sang phải cho thẳng lề trái với tiêu đề & mô tả (hero rộng 920px,
     căn giữa). Chỉ dời cột đọc; cột mục lục/chia sẻ vẫn dính sát lề phải dưới nút MENU. */
  padding-left: calc((100% - 860px) / 2);
  /* KHÔNG dùng align-items:start — ô cột phụ cần cao bằng nội dung thì
     position:sticky bên trong mới có khoảng để cuộn theo. */
}
/* Không có mục lục -> bỏ cột phụ, giữ nguyên lề trái để thẳng với tiêu đề/mô tả. */
.article-grid--single { grid-template-columns: minmax(0, 1fr); }

/* Nội dung: chiếm hết cột trái (rộng như mẫu duyệt); container đã cap 1400
   nên dòng không bị quá dài trên màn siêu rộng. */
.article-main { min-width: 0; max-width: none; width: 100%; }

/* Cột share bên phải: sát lề phải (thẳng dưới nút MENU), đẩy xuống ~150px
   để né nút MENU, rồi dính khi cuộn để luôn không bị che. */
.article-aside { min-width: 0; }
.article-aside__sticky {
  position: sticky; top: 150px;
  display: flex; flex-direction: column; gap: 30px;
  max-height: calc(100vh - 170px); overflow-y: auto;
  padding-right: 2px;
}
.article-aside__sticky::-webkit-scrollbar { width: 6px; }
.article-aside__sticky::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.article-aside__label {
  display: block; margin-bottom: 14px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.6px; color: var(--text-mute);
}

/* --- Mục lục --- */
.article-toc ul { list-style: none; margin: 0; padding: 0; }
.article-toc li { margin: 0; }
.article-toc a {
  display: block; position: relative;
  padding: 6px 0 6px 14px; margin-left: 1px;
  font-size: 13.5px; line-height: 1.45; color: var(--text-mute);
  border-left: 2px solid var(--border);
  transition: color .25s ease, border-color .25s ease;
}
.article-toc li.toc-lv3 a { padding-left: 28px; font-size: 13px; }
.article-toc a:hover { color: var(--text-dim); border-left-color: var(--text-mute); }
.article-toc a.is-active { color: var(--accent); border-left-color: var(--accent); font-weight: 600; }

/* Line phân cách giữa Mục lục và Chia sẻ (chỉ khi có mục lục ở trên) */
.article-toc + .article-share-wrap {
  border-top: 1px solid var(--border);
  padding-top: 26px;
}

/* --- Chia sẻ --- (hover dùng hiệu ứng letter-reveal như link ở footer) */
.article-share { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.article-share a {
  font-size: 13.5px; color: var(--text-dim);
  transition: color .25s ease;
}
.article-share a:hover { color: var(--accent); }
.share-copy.is-copied { color: var(--accent); }

/* Neo cuộn khớp với offset của mục lục để heading không bị nút MENU che */
.article-body :where(h2, h3)[id] { scroll-margin-top: 120px; }

/* Rich content typography (enhances CMS .post-body) */
.article-body { color: var(--text-dim); font-size: clamp(16px, 1.25vw, 18px); line-height: 1.6;
  max-width: var(--read-w, 720px); }  /* cùng khung với mô tả ngắn */
.article-body > *:first-child { margin-top: 0; }
.article-body p { margin: 0 0 1.05em; }
/* Khoảng cách tiêu đề: hở vừa phải phía trên, bám sát đoạn văn ngay bên dưới.
   (Đơn vị em tính theo cỡ chữ của chính thẻ h, nên h2 nhìn vẫn thoáng hơn h3.) */
.article-body h2 { color: var(--text); font-size: clamp(22px, 2.4vw, 30px); font-weight: 800;
  letter-spacing: -.01em; line-height: 1.25; margin: 1.15em 0 .4em; }
.article-body h3 { color: var(--text); font-size: clamp(19px, 1.9vw, 23px); font-weight: 700;
  line-height: 1.3; margin: 1.15em 0 .35em; }
.article-body h4 { color: var(--text); font-size: clamp(17px, 1.5vw, 19px); font-weight: 700;
  line-height: 1.35; margin: 1.1em 0 .35em; }
/* Tiêu đề đứng ngay sau tiêu đề thì không cần hở thêm. */
.article-body :where(h2, h3, h4) + :where(h2, h3, h4) { margin-top: .5em; }
/* Link trong bài: chỉ màu vàng, KHÔNG gạch chân — cả lúc thường lẫn khi rê chuột.
   Khi rê chuột, từng ký tự chớp tắt rồi hiện lại (hiệu ứng .fx-ch dùng chung
   với menu và chân trang, xem letterReveal trong app.js). Màu vàng giữ nguyên. */
.article-body a {
  color: var(--accent); text-decoration: none; box-shadow: none;
}
.article-body a:hover,
.article-body a:focus-visible { color: var(--accent); opacity: 1; }
/* Ảnh chèn trong bài: LUÔN to bằng khung chữ (không phụ thuộc kích thước gốc),
   bo tròn nhẹ 4 góc. !important để ghi đè width/height inline do trình soạn thảo chèn. */
.article-body img {
  display: block; width: 100% !important; height: auto !important;
  margin: 2em auto; border-radius: 10px;
}
.article-body figure { margin: 2em 0; }
.article-body figure img { margin: 0; }
.article-body figure figcaption {
  margin-top: .7em; font-size: .85em; line-height: 1.5;
  color: var(--text-mute); text-align: center;
}
.article-body ul, .article-body ol { margin: 0 0 1.05em; padding-left: 1.2em; }
.article-body li { margin-bottom: .35em; }
.article-body ul { list-style: none; padding-left: 0; }
.article-body ul > li { position: relative; padding-left: 22px; }
/* Dấu đầu dòng: chấm tròn trắng, giống trong trình soạn thảo, không đổi màu. */
.article-body ul > li::before {
  content: ""; position: absolute; left: 3px; top: .62em;
  width: 6px; height: 6px; border-radius: 50%; background: #ffffff;
}
.article-body blockquote {
  border: 0; border-left: 2px solid var(--accent); margin: 1.8em 0; padding: 4px 0 4px 26px;
  color: var(--text); font-size: clamp(19px, 2vw, 24px); font-weight: 500; font-style: normal;
  line-height: 1.5; letter-spacing: -.01em;
}
.article-body hr { border: 0; height: 1px; background: var(--border); margin: 2.4em 0; }
.article-body code { background: var(--surface); padding: 2px 7px; font-size: .9em; border: 1px solid var(--border); }
.article-body pre { background: var(--surface); border: 1px solid var(--border); padding: 18px 20px; overflow: auto; margin: 1.8em 0; }
.article-body pre code { border: 0; padding: 0; background: transparent; }

/* Video nhúng (YouTube) — khung 16:9 co giãn theo bề rộng nội dung */
.article-body .video-embed {
  position: relative; width: 100%; padding-top: 56.25%; margin: 2em 0;
  background: #000; overflow: hidden;
}
.article-body .video-embed iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
/* Iframe nhúng lẻ (không bọc .video-embed) vẫn hiển thị gọn gàng */
.article-body iframe { max-width: 100%; }
/* Bảng biểu từ trình soạn thảo */
.article-body table {
  width: 100%; border-collapse: collapse; margin: 1.8em 0; font-size: .95em;
}
.article-body th, .article-body td {
  border: 1px solid var(--border); padding: 10px 14px; text-align: left;
}
.article-body th { background: var(--surface); color: var(--text); font-weight: 600; }
/* Tôn trọng màu chữ / cỡ chữ inline do người viết đặt trong trình soạn thảo */
.article-body [style*="color"] { color: revert; }

.article-foot { margin-top: clamp(40px, 6vh, 66px); padding-top: 26px; border-top: 1px solid var(--border); }
.article-back {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.4px; color: var(--text);
}
.article-back i { font-style: normal; transition: transform .4s cubic-bezier(.16,1,.3,1); }
.article-back:hover { color: var(--accent); }
.article-back:hover i { transform: translateX(-8px); }

.article-more { border-top: 1px solid var(--border); }

/* =====================================================================
   BLOG REDESIGN — RESPONSIVE
   ===================================================================== */
@media (max-width: 1024px) {
  .article-grid { grid-template-columns: 1fr; gap: 30px; padding-left: 0; }
  /* Mục lục + share dồn lên TRÊN nội dung, không dính (không sticky) */
  .article-aside { order: -1; }
  .article-aside__sticky {
    position: static; top: auto; max-height: none; overflow: visible;
    flex-direction: column; gap: 22px;
    padding: 18px 20px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-alt);
  }
  .article-main { max-width: 760px; }
  /* Grid bỏ thụt lề ở đây → thanh nút cũng bám sát lề trái container cho khớp cột chữ */
  .pf-actions { margin-left: 0; }
  .article-share { flex-direction: row; flex-wrap: wrap; gap: 6px 18px; align-items: center; }
  /* Mục lục gọn hơn trên khối ngang */
  .article-toc a { padding-top: 5px; padding-bottom: 5px; }
}

@media (max-width: 900px) {
  .feature { grid-template-columns: 1fr; gap: 22px; }
  .feature__media { aspect-ratio: 16 / 10; }
  .j-item__link { grid-template-columns: 1fr 200px; gap: 24px; }
  .j-item__title { font-size: clamp(18px, 3.4vw, 24px); }
}

@media (max-width: 680px) {
  .journal-hero { padding-top: clamp(24px, 5vh, 44px); padding-bottom: 4px; }
  .journal-hero__title { font-size: clamp(30px, 9vw, 44px); letter-spacing: -.02em; }
  /* Danh mục: hiện HẾT, tự xuống hàng — không cuộn ngang trên mobile */
  .journal-filter .cat-filter {
    flex-wrap: wrap; overflow-x: visible;
    gap: 8px; padding: 8px 0 20px;
  }
  .journal-filter .cat-filter a {
    flex: 0 0 auto; white-space: nowrap;
    padding: 11px 16px 10px; font-size: 11.5px; letter-spacing: .3px;
  }
  /* Trang chủ blog: khối 2 bài nổi bật bị ẩn trên mobile -> bỏ khoảng đệm 150px thừa */
  .has-cover .journal-filter { padding-top: clamp(8px, 2vh, 18px); }
  .j-item__link { grid-template-columns: 1fr 150px; gap: 16px; padding: 20px 0; }
  .j-item__title { font-size: clamp(17px, 4.6vw, 22px); }
  .j-peek__card { padding: 14px 16px; }
  .j-peek__foot { gap: 12px; }
  .j-peek__actions { width: 100%; }
  .article-cats { gap: 8px; }
  .article-meta { font-size: 12px; gap: 10px; }
  .pagination--journal > .container { gap: 12px; }
}

/* =====================================================================
   BLOG — Nút Copy & Share:
   - DESKTOP (có hover): giữ nguyên trong popup "xem nhanh".
   - MOBILE / MÁY TÍNH BẢNG (không hover): ẩn hẳn popup + nút vì không dùng
     được bằng hover và gây lỗi hiển thị.
   ===================================================================== */
@media (hover: none), (max-width: 1024px) {
  .j-peek { display: none !important; }
}

/* =====================================================================
   BLOG REDESIGN — REDUCED MOTION
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .feature__media img, .j-item__media img, .feature__cta i, .j-item__arrow,
  .article-back i, .j-item__link::after { transition: none !important; }
  .js .article-cover__frame img { clip-path: none; transform: none; transition: none; }
  .reading-bar { display: none; }
}

/* =====================================================================
   TRANG CHỦ (HOME v2) — hero chào mừng + dự án + dịch vụ + khách hàng
   + about + bài viết. Tất cả class dùng tiền tố .hm- nên KHÔNG đụng
   tới giao diện các trang khác.
   ===================================================================== */

/* ---- Khối chung ---- */
.hm-sec { padding: clamp(70px, 10vh, 130px) 0; border-top: 1px solid var(--border); }
.hm-sec:first-of-type { border-top: 0; }

.hm-eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 700; letter-spacing: 2.4px; text-transform: uppercase;
  color: var(--text-mute); margin: 0 0 14px;
}
.hm-eyebrow span {
  color: var(--accent); font-variant-numeric: tabular-nums;
  padding-right: 10px; border-right: 1px solid var(--border);
}
.hm-title {
  font-size: clamp(28px, 4.4vw, 56px); font-weight: 800; line-height: 1.06;
  letter-spacing: -.02em; margin: 0;
}
.hm-head {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(18px, 4vw, 60px);
  align-items: end; padding-bottom: clamp(30px, 5vh, 54px);
}
.hm-head--center { grid-template-columns: 1fr; text-align: center; justify-items: center; }
.hm-head--center .hm-eyebrow { justify-content: center; }
.hm-head__sub { color: var(--text-dim); font-size: 15px; line-height: 1.7; margin: 0 0 14px; max-width: 46ch; }
.hm-head--center .hm-head__sub { margin: 14px auto 0; }
.hm-head__right { display: flex; flex-direction: column; align-items: flex-start; }

.hm-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 700; letter-spacing: .3px; color: var(--accent);
  padding-bottom: 3px; border-bottom: 1px solid rgba(255,221,0,.35);
  transition: gap .3s cubic-bezier(.22,1,.36,1), border-color .3s ease, color .3s ease;
}
.hm-link:hover { gap: 14px; color: var(--accent); border-color: var(--accent); }

/* ---- Nút ---- */
.hm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 26px; border-radius: 999px; font-size: 14.5px; font-weight: 700;
  letter-spacing: .2px; line-height: 1; position: relative; overflow: hidden;
  border: 1px solid transparent; will-change: transform;
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease,
              background-color .3s ease, color .3s ease, border-color .3s ease;
}
.hm-btn svg { transition: transform .35s cubic-bezier(.22,1,.36,1); }
.hm-btn:hover svg { transform: translateX(4px); }
.hm-btn--solid { background: var(--accent); color: #111; }
.hm-btn--solid:hover { color: #111; transform: translateY(-2px); box-shadow: 0 14px 32px rgba(255,221,0,.28); }
.hm-btn--ghost { border-color: rgba(255,255,255,.22); color: #fff; background: rgba(255,255,255,.02); }
.hm-btn--ghost:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
.hm-btn:active { transform: translateY(0); }

.hm-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
  display: inline-block; flex: 0 0 auto; box-shadow: 0 0 0 0 rgba(255,221,0,.55);
  animation: hmPulse 2.4s ease-out infinite;
}
@keyframes hmPulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,221,0,.5); }
  70%  { box-shadow: 0 0 0 10px rgba(255,221,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,221,0,0); }
}

/* =====================================================================
   1) HERO — trọn 1 màn hình.
   Hàng trên: tiêu đề bên trái, hai nút bên phải (ngang hàng nhau).
   Hàng dưới: logo vector cỡ lớn, mép phải thẳng hàng với nút MENU.
   Mép trái: chữ "Cuộn xuống" dựng đứng.
   ===================================================================== */
.hm-hero {
  position: relative; isolation: isolate;
  min-height: 100vh; min-height: 100svh;
  margin-top: -30px;                    /* huỷ padding-top của <main> để tràn lên đỉnh */
  display: flex; flex-direction: column;
  justify-content: center;
  padding: clamp(96px, 14vh, 132px) 0 clamp(20px, 3vh, 32px);
  /* Cho vòng tròn tràn mềm xuống khối giới thiệu, nhưng vẫn chặn tràn ngang
     (overflow-x: clip cắt mà không tạo thanh cuộn như hidden). */
  overflow: visible; overflow-x: clip;
}

/* ---- Nền: chỉ còn quầng sáng đi theo con trỏ ----
   Toàn khối nền được "che" mờ dần về phía đáy để ánh sáng tan hẳn trước khi
   chạm mép dưới, tránh bị cắt ngang thành một đường kẻ như trước. ---- */
.hm-hero__bg {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
}
/* Lưới hạt phản ứng theo con trỏ (JS vẽ) — nhạt dần khi tới gần logo */
.hm-hero__field {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  pointer-events: none;
}
.hm-hero__glow {
  position: absolute; inset: -20%;
  background: radial-gradient(480px circle at var(--mx, 72%) var(--my, 40%),
              rgba(255,221,0,.17), rgba(255,221,0,.05) 42%, transparent 70%);
  transition: background-position .2s ease;
  /* Tắt hẳn quầng sáng TRƯỚC khi chạm đáy khối -> không còn vệt cắt ngang ở
     chỗ giáp khối kế tiếp. Lớp này cao 140% khối cha (inset -20%), nên đáy
     khối cha rơi vào mốc ~85.7%; cho trong suốt từ 80% là an toàn. */
  mask-image: var(--fx-fade);
  -webkit-mask-image: var(--fx-fade);
}

/* =====================================================================
   NỀN HẠT TƯƠNG TÁC DÙNG CHUNG (.fx-dots)
   Cùng một hiệu ứng với hero trang chủ: lưới hạt sáng lên và bị đẩy ra
   theo con trỏ, kèm quầng sáng vàng. Gắn vào khối đầu trang bất kỳ bằng
   thuộc tính data-dots (JS tự nhận).
   ===================================================================== */
.fx-dots {
  /* Trồi lên trên 30px để bù padding-top của <main>: nền hạt phủ tới sát mép
     trên màn hình, không còn dải trống ở đầu trang. */
  position: absolute; inset: -30px 0 0 0; z-index: -1; pointer-events: none; overflow: hidden;
}
.fx-dots__c {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  pointer-events: none;
}
.fx-dots__glow {
  position: absolute; inset: -20%;
  background: radial-gradient(480px circle at var(--mx, 50%) var(--my, 40%),
              rgba(255,221,0,.17), rgba(255,221,0,.05) 42%, transparent 70%);
  mask-image: var(--fx-fade);
  -webkit-mask-image: var(--fx-fade);
}

/* Khung riêng của hero: KHÔNG giới hạn 1400px như .container, để mép phải
   luôn trùng đúng mép phải của nút MENU (header cũng padding 30px). */
.hm-hero__wrap { width: 100%; padding: 0 30px; }
.hm-hero__inner {
  position: relative; flex: 0 1 auto;
  display: flex; flex-direction: column; align-items: center; min-height: 0;
  text-align: center;
  /* Đẩy cả cụm (logo + tiêu đề + nút) lên trên 10% chiều cao của chính nó,
     để khoảng trống dồn xuống phía dưới. Sửa 1 chỗ này là đổi được độ nâng. */
  --hero-lift: 10%;
  transform: translateY(calc(var(--hero-lift) * -1));
}

/* ---- Hàng trên: lời chào / "Mình làm về" / hai nút, xếp dọc canh giữa ---- */
.hm-hero__top {
  display: flex; flex-direction: column; align-items: center;
  width: 100%; margin-top: clamp(40px, 5.6vh, 68px);
}
.hm-hero__title {
  font-size: clamp(28px, 4.2vw, 62px); font-weight: 800; line-height: 1.22;
  letter-spacing: -.035em; margin: 0; max-width: 32ch;
}
/* Khung che (overflow) phải chừa chỗ cho DẤU tiếng Việt ở phía trên:
   nới thêm padding rồi kéo ngược bằng margin âm -> dấu không bị cắt mà
   chiều cao dòng vẫn giữ nguyên. */
.hm-w {
  display: inline-block; overflow: hidden; vertical-align: bottom;
  padding-top: .28em; margin-top: -.28em; padding-bottom: .1em;
}
.hm-w > span { display: inline-block; }
/* Phần tên được tô vàng */
.hm-hero__title .hm-w--hl > span { color: var(--accent); }
.js .hm-w > span { transform: translateY(115%); opacity: 0; }
.js .hm-hero.is-ready .hm-w > span {
  transform: none; opacity: 1;
  transition: transform .95s cubic-bezier(.16,1,.3,1), opacity .7s ease;
  transition-delay: calc(var(--i) * 80ms);
}


.hm-hero__actions {
  display: flex; flex-wrap: wrap; gap: 14px;
  justify-content: center;
  margin-top: clamp(44px, 5.2vh, 60px);   /* cách dòng "Mình làm về" ~50-70px */
  flex: 0 0 auto;
}
.hm-hero__actions .hm-btn--ghost span {
  display: inline-block; max-width: 42ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Mặc định để trống. Rê chuột: vòng "mực" vàng nở ra từ đúng chỗ con trỏ rồi
   thu về chỗ rời chuột — giống hệt nút lọc danh mục ở trang bài viết. */
.hm-hero__actions .hm-btn {
  isolation: isolate;
  padding: 12px 22px; font-size: 13px; font-weight: 700; letter-spacing: .2px;
  border-color: rgba(255,255,255,.22); color: #fff; background: rgba(255,255,255,.02);
  transition: color .25s ease, border-color .25s ease;
}
.hm-hero__actions .hm-btn .cf-ink {
  position: absolute; left: 0; top: 0; width: 2px; height: 2px;
  margin: -1px 0 0 -1px;                 /* tâm trùng đúng toạ độ left/top */
  border-radius: 50%; background: var(--accent);
  transform: translate(-50%, -50%) scale(0); transform-origin: center;
  transition: transform .5s cubic-bezier(.22, .61, .36, 1);
  pointer-events: none; z-index: 0;
}
.hm-hero__actions .hm-btn.is-inking .cf-ink {
  transform: translate(-50%, -50%) scale(var(--cf-d, 240));
}
.hm-hero__actions .hm-btn .cf-label {
  position: relative; z-index: 1; display: inline-flex; align-items: center; line-height: 1;
  transition: color .3s ease;
}
.hm-hero__actions .hm-btn:hover,
.hm-hero__actions .hm-btn:focus-visible {
  border-color: rgba(255,255,255,.35); color: #fff; transform: none; box-shadow: none;
}
.hm-hero__actions .hm-btn.is-inking .cf-label { color: #111; }
@media (prefers-reduced-motion: reduce) {
  .hm-hero__actions .hm-btn .cf-ink { transition-duration: .01ms; }
}

/* Màn hình thấp (laptop 720p...): thu logo lại cho cả khối vừa đúng 1 màn */
@media (max-height: 800px) { .hm-mark { --markH: 28vh; } }
@media (max-height: 680px) { .hm-mark { --markH: 25.5vh; } }

/* ---- Gợi ý cuộn: chữ + mũi tên, dùng chung kiểu với các trang khác ---- */
.hm-scroll {
  /* Ghim gần đáy màn hình, đúng vị trí như gợi ý cuộn ở trang Liên hệ / Giới thiệu */
  position: absolute; left: 0; right: 0; bottom: clamp(44px, 7vh, 72px); z-index: 4;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: var(--text-mute);
  font-size: 11px; text-transform: uppercase; letter-spacing: 2px;
}
.hm-scroll:hover { color: var(--accent); }
.hm-scroll__arrow {
  width: 10px; height: 10px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  animation: cueDown 1.6s ease-in-out infinite;
}

/* ---- Hiện dần các thành phần của hero ---- */
.js .hm-hero__actions,
.js .hm-rotline--hero,
.js .hm-scroll { opacity: 0; transform: translateY(18px); }
.js .hm-hero__art { opacity: 0; transform: translateY(28px) scale(.97); }
.js .hm-hero.is-ready .hm-hero__actions,
.js .hm-hero.is-ready .hm-rotline--hero,
.js .hm-hero.is-ready .hm-scroll {
  opacity: 1; transform: none;
  transition: opacity .8s ease, transform .9s cubic-bezier(.16,1,.3,1);
}
.js .hm-hero.is-ready .hm-rotline--hero { transition-delay: .38s; }
.js .hm-hero.is-ready .hm-hero__art {
  opacity: var(--artO, 1); transform: none;
  transition: opacity .8s ease, transform .9s cubic-bezier(.16,1,.3,1);
}
.js .hm-hero.is-ready .hm-hero__actions { transition-delay: .45s; }
.js .hm-hero.is-ready .hm-hero__art     { transition-delay: .3s; }
.js .hm-hero.is-ready .hm-scroll        { transition-delay: .8s; }

/* =====================================================================
   HERO — KHỐI LOGO VECTOR (hàng dưới)
   Logo tự "vẽ" bằng nét, sau đó đổ màu; rê chuột thì chuyển sang chế độ
   "đang chỉnh vector": hiện khung chọn, điểm neo, nét sáng lên.
   ===================================================================== */
/* Bọc vừa khít logo -> mọi vòng tròn dùng "inset:0; margin:auto" là đồng tâm
   tuyệt đối với logo, không cần canh tay. */
.hm-hero__art {
  position: relative; z-index: 0; opacity: var(--artO, 1);
  flex: 0 0 auto; max-width: 100%;
  display: flex; justify-content: center;
  perspective: 1200px;
}
.hm-hero__orb {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(104%, 740px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(255,221,0,.16), transparent 62%);
  filter: blur(4px); pointer-events: none;
}

.hm-mark {
  position: relative;
  width: min(calc(var(--markH, 30.2vh) * 1.874), var(--markMaxW, calc(100vw - var(--sidebar-w) - 60px)));
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.22,1,.36,1);
  cursor: crosshair; outline: none;
}
.hm-mark__svg { width: 100%; height: auto; display: block; overflow: visible; }

/* 3 lớp chồng nhau: nét mờ nền — mảng đặc — nét vàng chạy vẽ */
.hm-mark__ghost { fill: none; stroke: rgba(255,255,255,.10); stroke-width: .8; }
.hm-mark__solid { fill: var(--accent); opacity: 1; transition: opacity .55s ease; }
.hm-mark__draw {
  fill: none; stroke: var(--accent); stroke-width: 1.15;
  stroke-linejoin: round; stroke-linecap: round; opacity: 0;
  filter: drop-shadow(0 0 7px rgba(255,221,0,.4));
}
.js .hm-mark__solid { opacity: 0; }
.js .hm-mark__draw { opacity: 1; stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .hm-hero.is-ready .hm-mark__draw { animation: hmDraw 2.3s cubic-bezier(.62,.02,.34,1) .35s forwards; }
.js .hm-hero.is-ready .hm-mark__solid { opacity: 1; transition-delay: 1.85s; }
@keyframes hmDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* Điểm neo — JS đặt đúng các đỉnh của path, kéo thả được để nắn logo */
.hm-mark__nodes .pt {
  fill: #111; stroke: var(--accent); stroke-width: .5;
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease, fill .2s ease, stroke-width .2s ease;
}
.hm-mark__nodes .hit { fill: transparent; cursor: grab; touch-action: none; }
/* Không rê chuột thì điểm neo ẩn hẳn */
.hm-mark:hover .hm-mark__nodes .pt,
.hm-mark:focus-visible .hm-mark__nodes .pt,
.hm-mark.is-editing .hm-mark__nodes .pt { opacity: 1; transition-delay: 0s; }
.hm-mark__nodes .nd.is-drag .pt { fill: var(--accent); stroke-width: 1.1; }
.hm-mark__nodes .nd.is-drag .hit { cursor: grabbing; }
/* Đang nắn: nét gốc mờ hiện lên làm mốc so sánh */
.hm-mark.is-warped .hm-mark__ghost { stroke: rgba(255,255,255,.16); }

/* Khung chọn kiểu phần mềm vector */
.hm-mark__box {
  position: absolute; inset: -14px -1px;
  border: 1px dashed rgba(255,221,0,.5);
  opacity: 0; transform: scale(.98);
  transition: opacity .3s ease, transform .4s cubic-bezier(.22,1,.36,1);
  pointer-events: none;
}
.hm-mark:hover .hm-mark__box,
.hm-mark:focus-visible .hm-mark__box,
.hm-mark.is-editing .hm-mark__box { opacity: 1; transform: none; }
.hm-mark__box i {
  position: absolute; width: 9px; height: 9px;
  background: #111; border: 1.5px solid var(--accent);
}
.hm-mark__box .tl { top: 0; left: 0; transform: translate(-50%, -50%); }
.hm-mark__box .tc { top: 0; left: 50%; transform: translate(-50%, -50%); }
.hm-mark__box .tr { top: 0; right: 0; transform: translate(50%, -50%); }
.hm-mark__box .ml { top: 50%; left: 0; transform: translate(-50%, -50%); }
.hm-mark__box .mr { top: 50%; right: 0; transform: translate(50%, -50%); }
.hm-mark__box .bl { bottom: 0; left: 0; transform: translate(-50%, 50%); }
.hm-mark__box .bc { bottom: 0; left: 50%; transform: translate(-50%, 50%); }
.hm-mark__box .br { bottom: 0; right: 0; transform: translate(50%, 50%); }
.hm-mark__tag {
  position: absolute; left: 0; top: -13px; transform: translateY(-100%);
  display: inline-flex; align-items: center; justify-content: center;
  height: 26px; padding: 0 13px; border-radius: 7px; white-space: nowrap;
  background: var(--accent); color: #111;
  font-size: 10.5px; font-weight: 700; line-height: 1; letter-spacing: .8px; text-transform: uppercase;
}

/* Lúc vẽ lại: giấu mảng màu để nét chạy trên nền trống như khi mới vào trang */
.hm-mark.is-redraw .hm-mark__solid,
.js .hm-hero.is-ready .hm-mark.is-redraw .hm-mark__solid { opacity: 0; transition: opacity .25s ease; }

/* Chế độ "đang chỉnh": mảng đặc mờ đi, chỉ còn lại nét vẽ.
   Cần đủ "nặng ký" để thắng rule hiện dần lúc mới vào trang. */
.hm-mark:hover .hm-mark__solid,
.hm-mark:focus-visible .hm-mark__solid,
.hm-mark.is-editing .hm-mark__solid,
.js .hm-hero.is-ready .hm-mark:hover .hm-mark__solid,
.js .hm-hero.is-ready .hm-mark:focus-visible .hm-mark__solid,
.js .hm-hero.is-ready .hm-mark.is-editing .hm-mark__solid { opacity: .13; transition-delay: 0s; }
.hm-mark:hover .hm-mark__draw,
.hm-mark:focus-visible .hm-mark__draw { stroke-width: 1.5; filter: drop-shadow(0 0 12px rgba(255,221,0,.55)); }

/* =====================================================================
   2) DỰ ÁN — thư viện cuộn ngang
   Desktop: ghim màn hình, cuộn dọc -> chạy ngang.
   Tablet/mobile: vuốt ngang tự nhiên có snap.
   ===================================================================== */
/* Khối dự án giờ nằm ngay sau hero (đã bỏ khối About ở trang chủ) nên bỏ
   lằn ngang, tránh có một đường kẻ chạy ngang ngay dưới logo. */
.hm-works { border-top: 0; }
.hm-hs { position: relative; }
.hm-hs__stage {
  display: flex; flex-direction: column; justify-content: flex-start;
  padding: 0 0 clamp(40px, 6vh, 70px);
}
/* chỉ khi JS bật chế độ ghim (desktop) */
.hm-hs.is-pinned .hm-hs__stage {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  padding: 0; overflow: hidden;
}

/* Tiêu đề cao đúng bằng ô logo -> mép trên các thẻ trùng đường kẻ
   dưới ô logo ở thanh bên. */
.hm-hs__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; height: calc(var(--logo-h) - 2px); padding-bottom: 29px;
}
.hm-hs__head .hm-title {
  font-size: clamp(22px, 2.9vw, 40px); font-weight: 800;
  letter-spacing: -.02em; line-height: 1.08;
}

.hm-hs__viewport {
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.hm-hs__viewport::-webkit-scrollbar { display: none; }
.hm-hs.is-pinned .hm-hs__viewport { overflow: hidden; scroll-snap-type: none; }

.hm-hs__track {
  display: flex; align-items: stretch; width: max-content;
  gap: clamp(12px, 1.3vw, 20px);
  /* căn mép trái trùng với .container ở mọi bề rộng màn hình */
  padding-left: max(30px, calc((100% - var(--maxw)) / 2));
  padding-right: max(30px, calc((100% - var(--maxw)) / 2));
  will-change: transform;
}
.hm-hs.is-pinned .hm-hs__track { padding-right: 30px; }

/* --- Thẻ dự án --- */
.hm-work {
  flex: 0 0 auto; position: relative;
  /* mỗi màn hình hiển thị khoảng 2 dự án */
  width: clamp(260px, 46vw, 660px);
  scroll-snap-align: center;
}
.hm-work__link { display: block; }
/* --- Khối ảnh nghiêng 3D theo con trỏ --- */
.hm-work__media {
  position: relative; display: block;
  border-radius: 18px; border: 1px solid var(--border); background: #0d0d0d;
  /* cao hết phần màn hình còn lại dưới ô logo, chừa chỗ cho tên dự án */
  height: clamp(280px, calc(100svh - var(--logo-h) - 122px), 760px);
  transform-style: preserve-3d;
  transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .7s cubic-bezier(.22,1,.36,1), box-shadow .5s ease, border-color .4s ease;
}
.hm-work.is-tilt .hm-work__media {
  transition: transform .12s linear, box-shadow .5s ease, border-color .4s ease;
  box-shadow: 0 34px 70px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(255,221,0,.18);
  border-color: rgba(255,221,0,.32);
}
.hm-work__inner {
  position: absolute; inset: 0; border-radius: inherit; overflow: hidden;
  transform: translateZ(0); transition: transform .7s cubic-bezier(.22,1,.36,1);
}
.hm-work.is-tilt .hm-work__inner { transform: translateZ(38px) scale(.965); }
.hm-work__inner img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.02);
  transition: transform .9s cubic-bezier(.22,1,.36,1);
}
.hm-work.is-tilt .hm-work__inner img { transform: scale(1.1); }
/* vệt sáng chạy theo con trỏ, nằm nổi phía trước */
.hm-work__glare {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.22), transparent 62%),
    radial-gradient(700px circle at var(--mx, 50%) var(--my, 50%), rgba(255,221,0,.16), transparent 70%);
  opacity: 0; transform: translateZ(60px);
  transition: opacity .45s ease; mix-blend-mode: screen;
}
.hm-work.is-tilt .hm-work__glare { opacity: 1; }
.hm-work__meta { display: block; padding: 16px 2px 0; }
.hm-work__title {
  display: block; font-size: clamp(14.5px, 1.15vw, 17px); font-weight: 700; line-height: 1.35;
  transition: color .3s ease;
}
.hm-work:hover .hm-work__title { color: var(--accent); }
.hm-work__cat {
  display: block; margin-top: 5px; font-size: 12px; letter-spacing: .8px;
  text-transform: uppercase; color: var(--text-mute);
}

/* --- Ô cuối "Xem tất cả" --- */
.hm-work--all .hm-work__media {
  border-style: dashed; border-color: rgba(255,255,255,.2);
  background: radial-gradient(120% 90% at 50% 45%, rgba(255,221,0,.09), rgba(255,255,255,.012) 62%);
  display: flex; align-items: center; justify-content: center;
}
.hm-work--all:hover .hm-work__media {
  border-style: solid; border-color: rgba(255,221,0,.5);
  box-shadow: 0 34px 70px -34px rgba(0,0,0,.9);
}
.hm-all {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 24px; perspective: 900px;
}
/* Ba lớp thẻ chồng nhau -> hover thì xoè đều sang 2 bên */
.hm-all__deck {
  position: relative; transform-style: preserve-3d;
  width: clamp(116px, 11.5vw, 162px); aspect-ratio: 4 / 5;
  margin-bottom: clamp(22px, 3vh, 38px);
}
.hm-all__deck i,
.hm-all__deck .l3 {
  position: absolute; inset: 0; border-radius: 16px;
  border: 1px solid rgba(255,221,0,.3);
  background: linear-gradient(158deg, rgba(255,221,0,.12), rgba(255,255,255,.02) 72%);
  transition: transform .7s cubic-bezier(.22,1,.36,1), opacity .5s ease, border-color .5s ease;
}
.hm-all__deck .l1 { transform: rotate(-5deg) translateX(-7px) scale(.965); opacity: .5; }
.hm-all__deck .l2 { transform: rotate(5deg)  translateX(7px)  scale(.965); opacity: .5; }
.hm-all__deck .l3 {
  display: flex; align-items: center; justify-content: center; color: var(--accent);
  background: linear-gradient(158deg, rgba(255,221,0,.16), rgba(17,17,17,.94) 70%);
}
.hm-all__deck .l3 svg { transition: transform .55s cubic-bezier(.22,1,.36,1); }
.hm-work--all:hover .hm-all__deck .l1 { transform: rotate(-17deg) translateX(-54px) translateY(8px); opacity: .85; }
.hm-work--all:hover .hm-all__deck .l2 { transform: rotate(17deg)  translateX(54px)  translateY(8px); opacity: .85; }
.hm-work--all:hover .hm-all__deck .l3 { transform: translateY(-12px) scale(1.05); border-color: var(--accent); }
.hm-work--all:hover .hm-all__deck .l3 svg { transform: translateX(7px); }
.hm-all__txt {
  font-size: clamp(16px, 1.5vw, 20px); font-weight: 700; line-height: 1.3;
  transition: color .35s ease;
}
.hm-work--all:hover .hm-all__txt { color: var(--accent); }
.hm-all__sub { margin-top: 8px; font-size: 12.5px; color: var(--text-mute); }

/* =====================================================================
   3) TUYÊN NGÔN + DỊCH VỤ
   Mặc định (không JS / máy nhỏ / giảm chuyển động): xếp dọc bình thường.
   Có JS + màn rộng: JS gắn .is-pinned -> ghim màn hình, chữ dính lại,
   các box trồi lên đè che chữ rồi xếp chồng thành thanh tiêu đề.
   ===================================================================== */
.hm-svc { padding-bottom: clamp(40px, 6vh, 80px); border-top: 0; }
.hm-svc__frame { position: relative; }
.hm-svc__stmt {
  font-size: clamp(30px, 4.3vw, 61px); font-weight: 800; line-height: 1.16;
  letter-spacing: -.02em; text-align: center;
  max-width: none; margin: 0 auto clamp(50px, 8vh, 96px);
}
.hm-stmt-line { display: block; }
.hm-sw { display: inline-block; opacity: .16; transition: opacity .25s linear; }
html:not(.js) .hm-sw { opacity: 1; }

.hm-scards {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 10px;
  --sbar: clamp(58px, 6.4vw, 78px);   /* chiều cao thanh tên = phần luôn nhìn thấy */
}
.hm-scard {
  position: relative;
  border: 1px solid var(--border); border-radius: 20px;
  background: linear-gradient(158deg, #1a1a1a 0%, #121212 64%);
  overflow: hidden; isolation: isolate;
  box-shadow: 0 -14px 34px -14px rgba(0,0,0,.9);
  transition: border-color .4s ease;
}
.hm-scard::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(680px circle at var(--mx, 50%) var(--my, 50%), rgba(255,221,0,.22), rgba(255,221,0,.06) 42%, transparent 70%);
  opacity: 0; transition: opacity .45s ease; pointer-events: none;
}
.hm-scard:hover { border-color: rgba(255,221,0,.42); }
.hm-scard:hover::after { opacity: 1; }

/* Thanh tên: phần "gáy thư mục" luôn thò ra khi bị thẻ sau đè lên */
.hm-scard__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; min-height: var(--sbar, 70px);
  padding: 0 clamp(20px, 2.6vw, 40px);
}
.hm-scard__name {
  margin: 0; font-size: clamp(19px, 2.3vw, 34px); font-weight: 800; line-height: 1.05;
  letter-spacing: -.02em; text-transform: uppercase;
  min-width: 0;
}
.hm-scard__name a {
  display: inline-block; color: inherit; text-decoration: none;
  transition: color .3s ease;
}
.hm-scard__name a:hover { color: var(--accent); }
.hm-scard__link {
  display: inline-flex; align-items: center; flex: 0 0 auto;
  font-size: 14px; font-weight: 500; letter-spacing: .2px; color: var(--text-dim);
  transition: color .3s ease;
}
.hm-scard__link:hover { color: var(--accent); }

.hm-scard__body {
  padding: 4px clamp(20px, 2.6vw, 40px) clamp(22px, 2.6vw, 34px);
  border-top: 1px solid rgba(255,255,255,.05);
  padding-top: clamp(18px, 2.2vw, 28px);
  transition: opacity .45s ease;
}
.hm-scard__list {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px clamp(20px, 3vw, 46px); align-content: start;
}
.hm-scard__list li {
  padding: 7px 2px; font-size: 15px; line-height: 1.5; color: var(--text-dim);
  transition: color .3s ease, padding-left .35s cubic-bezier(.22,1,.36,1);
}
.hm-scard__list li:hover { color: #fff; padding-left: 6px; }
/* xuất hiện lần lượt từng dòng khi thẻ lộ ra */
.js .hm-scard__list li { opacity: 0; transform: translateY(8px); }
.js .hm-scard.is-in .hm-scard__list li {
  opacity: 1; transform: none;
  transition: opacity .5s ease, transform .5s cubic-bezier(.22,1,.36,1), color .3s ease, padding-left .35s ease;
  transition-delay: calc(var(--j) * 55ms + .15s);
}

/* ---------------------------------------------------------------------
   CHẾ ĐỘ GHIM MÀN HÌNH (JS bật bằng class .is-pinned, chỉ desktop)
   --------------------------------------------------------------------- */
.hm-svc.is-pinned { padding: 0; }
.hm-svc.is-pinned .hm-svc__stage {
  position: sticky; top: 0;
  /* Chiều cao do JS đặt = vừa đủ chứa chồng thanh + một khoảng thở nhỏ,
     nhờ vậy khối Clients bên dưới không bị đẩy xa. */
  height: var(--stageh, 100vh);
}
.hm-svc.is-pinned .hm-svc__view,
.hm-svc.is-pinned .hm-svc__frame { height: 100%; }

/* Chữ tuyên ngôn: đứng yên một chỗ, nằm DƯỚI các box */
.hm-svc.is-pinned .hm-svc__stmt {
  position: absolute; left: 0; right: 0; top: var(--st, 0px);
  z-index: 0; margin: 0;
  opacity: var(--so, 1);
}
/* Vùng chứa box phủ kín sân khấu, nằm TRÊN chữ */
.hm-svc.is-pinned .hm-scards {
  position: absolute; inset: 0; z-index: 1;
  display: block; gap: 0;
}
/* Mỗi box tự trồi lên rồi khoá lại theo vị trí JS tính */
.hm-svc.is-pinned .hm-scard {
  position: absolute; left: 0; right: 0; top: 0;
  transform: translate3d(0, var(--ct, 100vh), 0);
  will-change: transform;
}

/* Gập lại còn đúng thanh tiêu đề.
   Co chiều cao CỦA THẺ (nội dung bên trong giữ nguyên, bị thẻ cắt bớt nhờ
   overflow:hidden) -> mỗi khung hình chỉ phải vẽ lại đúng cái khung, không
   bắt lưới nội dung tính lại -> mượt hơn hẳn cách co grid-template-rows. */
.hm-svc.is-pinned .hm-scard {
  height: var(--ch, auto);
  transition: height .9s cubic-bezier(.33, 1, .68, 1), border-color .4s ease;
}
.hm-svc.is-pinned .hm-scard.is-folded { height: var(--fh, auto); }
/* Lúc JS đo lại kích thước (tải xong / đổi cỡ màn) thì không chạy transition,
   tránh thẻ tự co giãn một cách vô cớ. */
.hm-svc.is-pinned.is-measuring .hm-scard,
.hm-svc.is-pinned.is-measuring .hm-scard__body { transition: none; }
.hm-scard.is-folded .hm-scard__body { opacity: 0; }

/* =====================================================================
   4) CLIENTS — bức tường logo tự lắp ráp
   - Cuộn tới: các ô bay từ ngoài vào (theo hướng toả ra từ tâm lưới),
     vừa xoay vừa thu nhỏ, rồi ghép khít lại thành lưới.
   - Rê chuột: ô nghiêng 3D theo con trỏ + hút nhẹ về phía con trỏ,
     logo lên màu, các ô còn lại mờ đi, tên hiện ở đầu khối.
   ===================================================================== */
.hm-clients { border-top: 0; }

.hm-clients__head {
  display: flex; align-items: center; gap: clamp(16px, 2.6vw, 30px);
  padding-bottom: clamp(24px, 3.6vh, 42px);
}
.hm-clients__title,
.hm-journal .hm-title {
  font-size: clamp(22px, 2.9vw, 40px); line-height: 1.08; letter-spacing: -.02em;
}
.hm-clients__title { flex: 0 0 auto; }

/* vạch mảnh tự "đổ đầy" khi khối lọt vào khung nhìn */
.hm-clients__rail {
  position: relative; flex: 1 1 auto; height: 1px; background: var(--border);
  overflow: hidden; border-radius: 2px;
}
.hm-clients__rail i {
  position: absolute; inset: 0 auto 0 0; display: block; width: 100%;
  background: linear-gradient(90deg, var(--accent), rgba(255,221,0,0));
  transform: scaleX(var(--p, 0)); transform-origin: left center;
  transition: transform .25s linear;
}

/* Tên thương hiệu đang trỏ tới */
.hm-cw__read {
  flex: 0 0 auto; white-space: nowrap;
  font-size: 11.5px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  color: var(--accent);
  opacity: 0; transform: translateY(7px);
  transition: opacity .3s ease, transform .45s cubic-bezier(.22,1,.36,1);
}
.hm-cw__read.is-on { opacity: 1; transform: none; }

/* ---- Bức tường ---- */
.hm-cw {
  --out: 0;                       /* 1 = đang tung ra, 0 = đã ghép khít (JS đặt) */
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(10px, 1.2vw, 18px);
}

.hm-cw__t {
  --dx: 0px; --dy: 0px; --dr: 0deg;      /* hướng bay vào (JS đặt theo vị trí ô) */
  --tx: 0px; --ty: 0px;                  /* hút theo con trỏ */
  --rx: 0deg; --ry: 0deg;                /* nghiêng 3D theo con trỏ */
  position: relative; display: flex; align-items: center; justify-content: center;
  aspect-ratio: 5 / 3; padding: 14px clamp(14px, 1.6vw, 24px);
  border-radius: 16px; border: 1px solid var(--border);
  background: linear-gradient(158deg, #1a1a1a 0%, #121212 70%);
  text-decoration: none; transform-style: preserve-3d;
  transform:
    perspective(900px)
    translate3d(calc(var(--dx) * var(--out) + var(--tx)), calc(var(--dy) * var(--out) + var(--ty)), 0)
    rotateX(var(--rx)) rotateY(var(--ry))
    rotate(calc(var(--dr) * var(--out)))
    scale(calc(1 - .17 * var(--out)));
  opacity: calc(1 - var(--out) * .88);
  transition: transform .55s cubic-bezier(.33, 1, .68, 1),
              opacity .6s cubic-bezier(.33, 1, .68, 1),
              border-color .45s ease, box-shadow .55s ease;
}

.hm-cw__in {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; transform: translateZ(20px);
}
.hm-cw__in img {
  max-width: 76%; max-height: 62%; width: auto; height: auto; object-fit: contain;
  opacity: .72; filter: grayscale(100%) brightness(1.45);
  transition: opacity .5s ease, filter .5s cubic-bezier(.33, 1, .68, 1);
}
.hm-cw__txt {
  font-size: clamp(12px, 1.2vw, 16px); font-weight: 700; letter-spacing: -.01em;
  text-align: center; line-height: 1.3; color: var(--text-mute);
  transition: color .35s ease;
}

/* quầng sáng vàng ở ô đang trỏ tới */
.hm-cw__glow {
  position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 0%, rgba(255,221,0,.16), transparent 62%);
  opacity: 0; transition: opacity .4s ease;
}

/* Dồn chú ý: ô đang trỏ tới nổi hẳn lên, các ô khác lùi lại.
   Khi rời chuột, các ô sáng trở lại lệch nhau một chút theo chỉ số -> mượt,
   không bị "bật" đồng loạt như một cú giật. */
.hm-cw:not(.is-hot) .hm-cw__t {
  transition: transform .55s cubic-bezier(.33, 1, .68, 1),
              opacity .7s cubic-bezier(.33, 1, .68, 1) calc(var(--i) * 26ms),
              border-color .5s ease, box-shadow .6s ease;
}
.hm-cw.is-hot .hm-cw__t { opacity: .34; }
.hm-cw.is-hot .hm-cw__t:hover {
  opacity: 1; z-index: 2;
  border-color: rgba(255,221,0,.5);
  box-shadow: 0 26px 60px -22px rgba(0,0,0,.95), 0 0 0 1px rgba(255,221,0,.18);
}
.hm-cw__t:hover .hm-cw__glow { opacity: 1; }
.hm-cw__t:hover .hm-cw__in img { opacity: 1; filter: grayscale(0%) brightness(1); }
.hm-cw__t:hover .hm-cw__txt { color: var(--accent); }

/* Logo tối màu -> ô nền sáng (bật trong Admin → Khách hàng) */
.hm-cw__t--light { background: #f3f3f3; border-color: #e2e2e2; }
.hm-cw__t--light .hm-cw__in img { filter: grayscale(100%) brightness(1); opacity: .82; }
.hm-cw__t--light .hm-cw__txt { color: #5a5a5a; }
.hm-cw__t--light:hover .hm-cw__txt { color: #111; }

/* Máy cảm ứng: không có hover -> hiện luôn logo cho rõ */
@media (hover: none) {
  .hm-cw__in img { opacity: .95; filter: grayscale(100%) brightness(1.5); }
}

@media (max-width: 1100px) { .hm-cw { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 820px)  { .hm-cw { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px)  {
  .hm-cw { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-clients__head { gap: 12px; }
  .hm-cw__read { display: none; }
}

/* =====================================================================
   5) ABOUT ME
   ===================================================================== */
.hm-about { border-top: 0; }      /* bỏ lằn ngang ngay dưới logo của hero */
.hm-about__grid {
  display: grid; grid-template-columns: .85fr 1.15fr;
  gap: clamp(28px, 5vw, 80px); align-items: center;
}
.hm-about__media {
  position: relative; border-radius: 22px; overflow: hidden;
  border: 1px solid var(--border); background: linear-gradient(160deg, #191919, #101010);
  aspect-ratio: 4 / 5;
}
.hm-about__media::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgba(255,221,0,.18), transparent 62%);
  opacity: 0; transition: opacity .45s ease; pointer-events: none;
}
.hm-about__media:hover::after { opacity: 1; }
.hm-about__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .9s cubic-bezier(.22,1,.36,1);
}
.hm-about__media:hover img { transform: scale(1.04); }
.hm-about__mark { height: 100%; display: flex; align-items: center; justify-content: center; }
.hm-about__mark svg { width: 46%; height: auto; opacity: .85; }
.hm-about__chip {
  position: absolute; left: 16px; bottom: 16px; z-index: 2;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 16px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  color: #fff; background: rgba(17,17,17,.72); border: 1px solid var(--border);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.hm-about__role {
  margin: 14px 0 0; font-size: 13px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--accent);
}

/* Dòng "Mình làm về ..." đổi chữ liên tục (chuyển từ hero xuống đây) */
.hm-rotline {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin: clamp(16px, 2.4vh, 24px) 0 0;
  font-size: clamp(15px, 1.5vw, 19px); color: var(--text-dim);
}
.hm-rotline__lead { font-weight: 500; line-height: 1.6; }

/* Dòng "Mình làm về …" ở hero — canh giữa, nằm sát ngay dưới dòng chữ lớn.
   Lề âm bù phần đệm sẵn có của ô chữ xoay (cao 2em).
   Đặt SAU .hm-rotline và thêm .hm-hero để chắc chắn không bị đè. */
.hm-hero .hm-rotline--hero {
  justify-content: center; text-align: center;
  /* Trước đây quy tắc gốc .hm-rotline áp lề trên ~22px; rút còn 2px tức là
     kéo cụm chữ lên sát tiêu đề thêm đúng 20px. */
  margin: 2px 0 0;
}
/* Ô chữ xoay: cao hơn một chút để DẤU không bị khung che cắt mất */
.hm-rot {
  position: relative; display: inline-block;
  height: 2em; line-height: 2em; overflow: hidden; vertical-align: middle;
  /* Bề rộng do JS đặt đúng bằng từ đang hiện; chuyển mềm để cụm chữ trượt
     về giữa chứ không giật. Chưa có JS thì tự co theo từ đầu tiên. */
  width: auto; min-width: 13ch;              /* dự phòng khi không có JS */
  transition: width .5s cubic-bezier(.16,1,.3,1);
}
.js .hm-rot { min-width: 0; }
.hm-rot__i {
  position: absolute; left: 0; top: 0; white-space: nowrap;
  line-height: 2em; color: var(--accent); font-weight: 700;
  opacity: 0; transform: translateY(100%);
  transition: opacity .45s ease, transform .55s cubic-bezier(.16,1,.3,1);
}
.hm-rot__i.is-on  { opacity: 1; transform: none; }
.hm-rot__i.is-out { opacity: 0; transform: translateY(-100%); }

.hm-about__text {
  margin: 20px 0 0; color: var(--text-dim); font-size: clamp(15px, 1.3vw, 17px); line-height: 1.8;
  max-width: 60ch;
}
.hm-about__intro {
  margin: 0 0 14px; color: var(--text); font-weight: 500;
  padding-left: 16px; border-left: 2px solid var(--accent);
}
.hm-stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 30px); margin: clamp(28px, 4vh, 40px) 0 clamp(28px, 4vh, 38px);
}
.hm-stats li { border-top: 1px solid var(--border); padding-top: 16px; }
.hm-stats__n {
  font-size: clamp(30px, 3.6vw, 46px); font-weight: 800; line-height: 1;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.hm-stats__plus { color: var(--accent); font-size: clamp(20px, 2.4vw, 30px); font-weight: 800; }
.hm-stats span { display: block; margin-top: 8px; font-size: 12.5px; color: var(--text-mute); line-height: 1.5; }

/* =====================================================================
   6) BÀI CHIA SẺ — danh sách kiểu "mục lục" tương tác
   - Rê chuột: ảnh xem trước trôi theo con trỏ, các dòng còn lại mờ đi.
   - Cuộn: từng dòng trượt lên lần lượt, vạch bên trái đổ đầy theo cuộn.
   ===================================================================== */
/* Bỏ vạch ngang phân cách phía trên khối bài chia sẻ */
.hm-journal { border-top: 0; }

.hm-jx { position: relative; }

/* Đầu khối: chỉ còn tiêu đề + link, bỏ mã số và mô tả */
.hm-head--tight {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 24px; margin-bottom: clamp(0px, 0.4vh, 5px);
}

/* Link chữ trơn, dùng chung kiểu với "Xem dự án" trong khối dịch vụ */
.hm-plainlink {
  display: inline-flex; align-items: center; flex: 0 0 auto;
  font-size: 14px; font-weight: 500; letter-spacing: .2px;
  color: var(--text-dim); text-decoration: none; border: 0;
  transition: color .3s ease;
}
.hm-plainlink:hover { color: var(--accent); }

/* ---- Vạch tiến trình bên trái ---- */
.hm-jx__rail {
  position: absolute; left: 0; top: 0; bottom: 0; width: 1px;
  background: var(--border); overflow: hidden; z-index: 2;
}
.hm-jx__rail i {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  background: linear-gradient(180deg, var(--accent), rgba(255,221,0,.15));
  transform: scaleY(var(--p, 0)); transform-origin: top center;
  transition: transform .2s linear;
}

/* ---- Danh sách ---- */
.hm-jx__list { list-style: none; margin: 0; padding: 0; }
.hm-jx__row { position: relative; border-bottom: 1px solid var(--border); }
.hm-jx__row:first-child { border-top: 1px solid var(--border); }

/* 2 cột: nội dung | cột phải (danh mục + ngày/phút đọc ở trên, nút ở dưới) */
.hm-jx__hit {
  position: relative; display: grid; align-items: start;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(20px, 3vw, 48px);
  padding: clamp(22px, 2.8vw, 36px) clamp(10px, 1.6vw, 24px) clamp(22px, 2.8vw, 36px) clamp(18px, 2vw, 30px);
  text-decoration: none; color: inherit;
  transition: padding-left .5s cubic-bezier(.22,1,.36,1), opacity .4s ease;
}

/* dải sáng quét ngang phía sau dòng đang trỏ tới */
.hm-jx__wipe {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(255,221,0,.07), rgba(255,221,0,0) 72%);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .6s cubic-bezier(.22,1,.36,1);
}
.hm-jx__row:hover .hm-jx__wipe { transform: scaleX(1); }
.hm-jx__row:hover .hm-jx__hit { padding-left: clamp(26px, 3.4vw, 52px); }

/* làm mờ các dòng KHÔNG được trỏ tới -> dồn chú ý vào 1 dòng.
   Đặt trên .hm-jx__hit (không phải .hm-jx__row) để không giành quyền
   điều khiển opacity với hiệu ứng đẩy-lên-theo-cuộn bên dưới. */
.hm-jx.is-hover .hm-jx__hit { opacity: .34; }
.hm-jx.is-hover .hm-jx__row:hover .hm-jx__hit { opacity: 1; }

/* nội dung luôn nằm trên dải sáng */
.hm-jx__thumb, .hm-jx__main, .hm-jx__side { position: relative; z-index: 1; }

/* ảnh nhỏ trong dòng — chỉ dùng cho màn hình nhỏ / thiết bị cảm ứng */
.hm-jx__thumb { display: none; }

.hm-jx__main { min-width: 0; display: block; }
.hm-jx__title {
  /* tối đa 2 dòng, dài hơn thì cắt bằng dấu ... ở cuối dòng 2 */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; text-overflow: ellipsis;
  /* cỡ chữ giảm 20% so với trước (19/2.5vw/34 -> 15.2/2vw/27.2) */
  font-size: clamp(15.2px, 2vw, 27.2px); font-weight: 700;
  line-height: 1.24; letter-spacing: -.02em;
  transition: color .35s ease;
}
.hm-jx__row:hover .hm-jx__title { color: var(--accent); }
.hm-jx__sum {
  display: block; margin-top: 10px; max-width: 62ch;
  font-size: 13.5px; line-height: 1.65; color: var(--text-dim);
}

/* ---- Cột phải: danh mục / ngày + phút đọc / nút mũi tên ----
   Căn trên trùng mép trên tiêu đề, nút căn xuống đáy phần mô tả. */
.hm-jx__side {
  display: flex; flex-direction: column; align-items: flex-end;
  justify-content: flex-start; gap: 10px; text-align: right;
}
.hm-jx__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.hm-jx__tag {
  font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--text-mute); border: 1px solid var(--border); border-radius: 999px;
  padding: 6px 14px; white-space: nowrap;
  transition: color .35s ease, border-color .35s ease;
}
.hm-jx__row:hover .hm-jx__tag { color: var(--accent); border-color: rgba(255,221,0,.45); }
.hm-jx__facts {
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
  font-size: 11.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-mute);
}
.hm-jx__facts span + span::before { content: '·'; margin-right: 8px; }

/* ---- Ảnh xem trước bám con trỏ (chỉ máy có chuột) ---- */
.hm-jx__peek {
  position: absolute; left: 0; top: 0; z-index: 6;
  width: clamp(230px, 22vw, 330px); aspect-ratio: 4 / 3;
  pointer-events: none; opacity: 0;
  border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(255,221,0,.28);
  background: #0d0d0d;
  box-shadow: 0 30px 70px rgba(0,0,0,.55);
  transition: opacity .35s ease;
  will-change: transform;
}
.hm-jx.is-hover .hm-jx__peek { opacity: 1; }
.hm-jx__card {
  position: absolute; inset: 0; opacity: 0;
  transform: scale(1.08); transition: opacity .45s ease, transform .7s cubic-bezier(.22,1,.36,1);
}
.hm-jx__card.is-on { opacity: 1; transform: none; }
.hm-jx__card img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* không có chuột / giảm chuyển động -> không dựng ảnh trôi */
@media (hover: none) { .hm-jx__peek { display: none; } }

/* ---- Từng bài đẩy lên / đẩy xuống theo con lăn (hai chiều) ----
   JS tính --p cho từng dòng theo vị trí của nó trong khung nhìn:
     --p = 0  -> dòng còn nằm dưới, bị đẩy xuống + trong suốt
     --p = 1  -> dòng đã vào đúng chỗ
   Cuộn xuống thì --p tăng dần (đẩy lên), cuộn ngược lên thì --p giảm dần
   (đẩy xuống lại) — giống cách khối logo Clients chạy.
   Cố ý KHÔNG đặt transition để chuyển động bám sát con lăn, không bị trễ. */
.js .hm-jx__row {
  --p: 0;
  /* Mở dần TRƯỚC: độ mờ chạy hết ở khoảng 55% quãng đường (nhân 1.8, quá 1
     thì trình duyệt tự cắt), phần còn lại chỉ còn trôi lên -> không bị
     "hiện cái bụp" rồi mới nhích. */
  opacity: calc(var(--p) * 1.8);
  /* Đẩy lên SAU: quãng ngắn hơn và scale gần như không đổi cho êm */
  transform: translate3d(0, calc((1 - var(--p)) * 54px), 0) scale(calc(.99 + var(--p) * .01));
  transform-origin: left center;
  will-change: opacity, transform;
}
/* opacity của dòng bao luôn đường kẻ viền -> viền cũng mờ/rõ theo, khỏi xử lý riêng */

/* =====================================================================
   HOME — RESPONSIVE
   ===================================================================== */
@media (max-width: 1200px) {
}
@media (max-width: 1024px) {
  .hm-hero { margin-top: 0; min-height: calc(100svh - var(--mbar-h)); padding: 40px 0 clamp(28px, 4vh, 48px); }
  .hm-hero__title { max-width: 24ch; }
  .hm-mark { --markH: 19.9vh; --markMaxW: calc(100vw - 60px); }
  .hm-head { grid-template-columns: 1fr; align-items: start; gap: 16px; }
  .hm-head__right { align-items: flex-start; }
  .hm-about__grid { grid-template-columns: 1fr; }
  .hm-about__media { aspect-ratio: 16 / 11; max-height: 420px; }
  .hm-work { width: clamp(250px, 62vw, 520px); }
  .hm-work__media { height: clamp(280px, 52vh, 520px); }
  .hm-hs__head { height: auto; padding: 10px 0 22px; }
  .hm-scards { --sbar: 56px; }
  .hm-scard__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Bài viết: bỏ ảnh trôi, đưa ảnh nhỏ vào từng dòng */
  .hm-jx__peek { display: none; }
  .hm-jx.is-hover .hm-jx__hit { opacity: 1; }
  .hm-jx__thumb {
    display: block; width: clamp(84px, 14vw, 132px); aspect-ratio: 4 / 3;
    border-radius: 12px; overflow: hidden; background: #0d0d0d; border: 1px solid var(--border);
  }
  .hm-jx__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .hm-jx__hit { grid-template-columns: auto minmax(0, 1fr) auto; }
}
@media (max-width: 768px) {
  .hm-sec { padding: 64px 0; }
  .hm-hero__wrap { padding: 0 18px; }
  .hm-hero__title { max-width: 18ch; font-size: clamp(24px, 6.4vw, 38px); }
  .hm-hero .hm-rotline--hero { margin-top: 8px; }   /* chữ nhỏ nên chừa lại chút hơi thở */
  .hm-hero__actions { gap: 10px; width: 100%; justify-content: center; }
  .hm-hero__actions .hm-btn { flex: 1 1 calc(50% - 5px); justify-content: center; }
  .hm-hero__actions .hm-btn--ghost span { max-width: 26ch; }
  .hm-mark { --markH: 16.7vh; --markMaxW: calc(100vw - 36px); }
  .hm-rotline { font-size: 15px; }
  .hm-stats { grid-template-columns: 1fr 1fr; }
  .hm-jx__hit {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start; gap: 14px;
    padding: 20px 4px 20px 16px;
  }
  .hm-jx__row:hover .hm-jx__hit { padding-left: 16px; }
  .hm-jx__thumb { width: 92px; }
  .hm-jx__title { font-size: 13.6px; }
  .hm-jx__sum { display: none; }
  .hm-jx__side {
    grid-column: 2; flex-direction: row; align-items: center;
    justify-content: flex-start; text-align: left; margin-top: 10px; gap: 12px;
  }
  .hm-jx__meta { flex-direction: row; align-items: center; gap: 10px; }
  .hm-jx__tag { padding: 4px 10px; font-size: 10px; }
  .hm-jx__facts { font-size: 10.5px; letter-spacing: .6px; }
  .hm-hs__stage { padding: 48px 0 40px; }
  .hm-work { width: min(84vw, 420px); }
  .hm-work__media { height: clamp(300px, 54vh, 460px); }
  .hm-scard__name { font-size: 17px; }
  .hm-svc__stmt { max-width: none; }
  .hm-scard { border-radius: 16px; }
  .hm-scard__list { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .hm-hero { padding-bottom: 26px; }
  .hm-hero__actions .hm-btn { flex: 1 1 100%; }
  .hm-mark { --markH: 15.1vh; }
  .hm-stats { grid-template-columns: 1fr; }
  .hm-hs__track { gap: 12px; padding-left: 20px; padding-right: 20px; }
  .hm-work { width: min(86vw, 380px); }
  .hm-work__media { height: clamp(280px, 50vh, 420px); }
}

/* ---- Giảm chuyển động ---- */
@media (prefers-reduced-motion: reduce) {
  .js .hm-w > span,
  .js .hm-hero__actions, .js .hm-rotline--hero,
  .js .hm-hero__art, .js .hm-scroll { opacity: 1; transform: none; transition: none; }
  .hm-scroll__arrow { animation: none; }
  .js .hm-mark__draw { animation: none; stroke-dashoffset: 0; }
  .js .hm-mark__solid { opacity: 1; }
  .hm-mark { transition: none; }
  .js .hm-sw { opacity: 1; }
  .hm-cw { --out: 0; }
  .hm-cw__t { transform: none; transition: none; opacity: 1; }
  .hm-cw__glow { display: none; }
  .hm-dot { animation: none; }
  .hm-work__media, .hm-work__inner, .hm-work__inner img,
  .hm-about__media img { transition: none; }
  .hm-jx__peek { display: none; }
  .hm-jx.is-hover .hm-jx__hit { opacity: 1; }
  .js .hm-jx__row { --p: 1; opacity: 1; transform: none; transition: none; }
  .hm-jx__wipe, .hm-jx__hit { transition: none; }
  .hm-work__media { transform: none; }
  .hm-work__glare { display: none; }
  .hm-sw { opacity: 1; }
  .js .hm-scard__list li { opacity: 1; transform: none; }
  .hm-scard__body { transition: none; }
}

/* =====================================================================
   TRANG KẾT QUẢ TÌM KIẾM (/search)
   ===================================================================== */
.srch-hero {
  --srch-form-h: 58px;
  /* Canh TÂM ô tìm trùng TÂM nút MENU (nút nằm giữa dải cao --logo-h;
     main đã có sẵn 30px đệm trên) */
  padding-top: calc((var(--logo-h) - var(--srch-form-h)) / 2 - 30px);
  padding-bottom: clamp(18px, 2.2vw, 28px);
}

/* --- Ô tìm: cùng kiểu gạch chân với ô trong menu, chừa chỗ cho nút MENU --- */
.srch-form {
  display: flex; align-items: center; gap: 14px;
  height: var(--srch-form-h); padding: 0 2px; position: relative;
  margin-right: 175px;
  border-bottom: 1px solid rgba(255,255,255,.20);
  transition: border-color .3s ease;
}
.srch-form:hover { border-bottom-color: rgba(255,255,255,.38); }
.srch-form::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1.5px;
  background: var(--yellow); transform: scaleX(0); transform-origin: left center;
  transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.srch-form:focus-within::after { transform: scaleX(1); }
.srch-form__ico { display: flex; color: var(--text-mute); transition: color .3s ease; }
.srch-form__ico svg { width: 20px; height: 20px; display: block; }
.srch-form:focus-within .srch-form__ico { color: var(--yellow); }
.srch-form__input {
  flex: 1; min-width: 0; height: 100%; padding: 0;
  background: none; border: 0; outline: none;
  font-family: var(--font); font-size: 18px; font-weight: 500; color: #fff;
}
.srch-form__input::placeholder { color: var(--text-mute); }
.srch-form__input::-webkit-search-decoration,
.srch-form__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.srch-form__go {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex: 0 0 auto;
  background: none; border: 0; color: var(--text-mute);
  transition: color .25s ease, transform .35s cubic-bezier(.22,1,.36,1);
}
.srch-form__go svg { width: 21px; height: 21px; }
.srch-form__go:hover { color: var(--yellow); transform: translateX(3px); }
.srch-form:focus-within .srch-form__go { color: var(--yellow); }

/* --- Dòng tóm tắt kết quả (thay cho tiêu đề khổ lớn) --- */
.srch-lede {
  margin: 18px 0 0;
  font-size: 13px; font-weight: 500; line-height: 1.5;
  color: var(--text-mute); letter-spacing: .2px;
}
.srch-lede__n { color: var(--yellow); font-weight: 700; }

/* --- Bộ lọc theo loại: nút giống danh mục ở trang Bài viết (có hiệu ứng mực) --- */
.srch-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 78px; }
.srch-tab {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 14px 22px 12px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.02);
  font-size: 12.5px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase;
  line-height: 1; color: var(--text-mute);
  transition: color .25s ease, border-color .25s ease;
}
.srch-tab__n { font-size: 11px; font-weight: 700; opacity: .72; }

/* Vòng tròn "mực": tâm tại chỗ chuột, nở ra phủ kín rồi thu về chỗ rời chuột. */
.srch-tab .cf-ink {
  position: absolute; left: 0; top: 0; width: 2px; height: 2px;
  margin: -1px 0 0 -1px;
  border-radius: 50%; background: var(--accent);
  transform: translate(-50%, -50%) scale(0); transform-origin: center;
  transition: transform .5s cubic-bezier(.22, .61, .36, 1);
  pointer-events: none; z-index: 0;
}
.srch-tab.is-inking .cf-ink { transform: translate(-50%, -50%) scale(var(--cf-d, 240)); }
.srch-tab .cf-label {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 6px; line-height: 1;
  transition: color .3s ease;
}
.srch-tab:hover { border-color: rgba(255,255,255,.35); }
.srch-tab.is-inking .cf-label { color: #111; }
.srch-tab.is-active {
  color: #111; background: var(--accent); border-color: var(--accent);
}
.srch-tab.is-active .cf-ink { display: none; }
@media (prefers-reduced-motion: reduce) { .srch-tab .cf-ink { transition-duration: .01ms; } }

/* Đang nạp danh sách mới -> mờ nhẹ cho biết */
#srch-stream { transition: opacity .2s ease; }
#srch-stream.is-loading { opacity: .45; }

/* --- Trạng thái rỗng --- */
.srch-blank { padding: clamp(34px, 6vw, 76px) 0; color: var(--text-dim); }
.srch-blank p { margin: 0 0 10px; font-size: 16px; }
.srch-blank__big { font-size: clamp(20px, 2.4vw, 28px); font-weight: 700; color: #fff; }
.srch-blank__links { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 22px; }
.srch-blank__links a {
  font-size: 14px; font-weight: 600; color: var(--yellow);
  border-bottom: 1px solid transparent; padding-bottom: 2px;
  transition: border-color .25s ease;
}
.srch-blank__links a:hover { border-bottom-color: var(--yellow); }

/* --- Danh sách kết quả --- */
.srch-results { padding-bottom: clamp(40px, 6vw, 90px); }
.srch-list { display: flex; flex-direction: column; }
.srch-item + .srch-item { border-top: 1px solid var(--border); }

.srch-item__link {
  display: grid;
  grid-template-columns: clamp(96px, 11vw, 140px) 1fr auto;
  align-items: center; gap: clamp(14px, 2vw, 28px);
  padding: clamp(18px, 2.2vw, 26px) 0; color: inherit;
  transition: background-color .35s ease;
}
.srch-item__link:hover { color: inherit; }

.srch-item__media {
  aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden;
  background: var(--surface); position: relative;
}
.srch-item__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .55s cubic-bezier(.22,1,.36,1);
}
.srch-item__link:hover .srch-item__media img { transform: scale(1.07); }
.srch-item__ph {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; color: rgba(255,221,0,.5);
  background: linear-gradient(135deg, rgba(255,221,0,.14), rgba(255,255,255,.03));
}
.srch-item__ph svg { width: 26px; height: 26px; }

.srch-item__body { min-width: 0; }
.srch-item__meta {
  display: flex; align-items: center; gap: 12px; margin-bottom: 9px;
  font-size: 12px; color: var(--text-mute);
}
.srch-item__type {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .9px; text-transform: uppercase;
  color: var(--yellow); background: rgba(255,221,0,.12);
}
.srch-item__type--post { color: #8fd0ff; background: rgba(143,208,255,.12); }
.srch-item__type--page { color: var(--text-dim); background: rgba(255,255,255,.08); }

.srch-item__title {
  display: -webkit-box; font-size: clamp(19px, 2.1vw, 27px); font-weight: 700;
  line-height: 1.28; color: #fff; transition: color .25s ease;
  /* Dài mấy cũng chỉ 2 dòng, thừa thì cắt và thêm dấu ba chấm */
  overflow: hidden; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
}
.srch-item__link:hover .srch-item__title { color: var(--yellow); }
.srch-item__desc {
  display: -webkit-box; margin-top: 8px;
  font-size: 14px; line-height: 1.6; color: var(--text-dim);
  overflow: hidden; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
}

.srch-item__go {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.14); color: var(--text-mute);
  transition: transform .4s cubic-bezier(.22,1,.36,1),
              color .25s ease, border-color .25s ease, background-color .25s ease;
}
.srch-item__go svg { width: 19px; height: 19px; display: block; }
.srch-item__link:hover .srch-item__go {
  background: var(--yellow); border-color: var(--yellow); color: var(--black);
  transform: translateX(4px);
}

.srch-item mark {
  background: rgba(255,221,0,.2); color: var(--yellow);
  padding: 0 3px; border-radius: 3px;
}

@media (max-width: 900px) {
  .srch-item__link {
    grid-template-columns: clamp(84px, 22vw, 110px) 1fr;
    gap: 16px; align-items: start;
  }
  .srch-item__go { display: none; }
}
@media (max-width: 1024px) {
  .srch-hero { padding-top: 26px; }
  .srch-form { margin-right: 0; }
}
@media (max-width: 520px) {
  .srch-hero { --srch-form-h: 52px; }
  .srch-form__input { font-size: 16px; }
  .srch-tab { padding: 8px 15px; font-size: 13px; }
}