/* ==========================================================================
   LÁT 1 · PRJ-045 · 19/10/2026 — lớp áp CHUNG mọi trang (KE_HOACH_CHINH_GIAO_DIEN_1910 mục 0).
   Nạp CUỐI (functions.php) nên thắng cùng độ ưu tiên. Giao diện SÁNG (data-giao-dien="sang") là chuẩn;
   mọi luật dùng token nên giao diện tối vẫn đúng. Chuyển động: chỉ transform/opacity (trừ màu nền, nét icon).
   ========================================================================== */
:root {
  --dur-fast: .15s; --dur-base: .32s; --dur-slow: .56s;
  --ease-out: cubic-bezier(.2, .7, .3, 1); --ease-io: cubic-bezier(.72, 0, .28, 1);
  --lat1-vien: #645c50;            /* tối: viền 1px trung tính */
  --lat1-gach: var(--o-400);       /* gạch chân / nhấn: không dùng cam sáng #ff8a2b làm chữ */
}
html[data-giao-dien="sang"] { --lat1-vien: #d8cfbf; --lat1-gach: #b54b07; }

/* ---------- Nền: không blob, không bóng đổ, tách lớp bằng viền ---------- */
.pd-nen, .pd-blob, .pd .pd-keu__blob, .pd .pd-m9__blob, .pd .pd-chan-dung__nen, .pd .pd-m7__nen { display: none !important; animation: none !important; }
.pd .pd-chan-dung__khung, .pd .pd-hinh__khung, .pd .pd-m2__dau, .pd .pd-cd__so, .pd .pd-bl-the__so, .pd .pd-chip-p { animation: none !important; }
.pd, .pd *, .pd *::before, .pd *::after { box-shadow: none !important; }
/* thẻ: viền 1px #d8cfbf (tối: #645c50) */
.pd :is(.pd-bl-the, .pd-bl-noi__the, .pd-tc-the, .pd-th-bac, .pd-hang, .pd-cd, .pd-tc-chon, .pd-luong, .pd-ss__the, .pd-bv-ml) { border: 1px solid var(--lat1-vien); }

/* Thẻ bài: nghỉ #d8cfbf (kể cả .is-san, bài nổi), rê viền --o-500 */
.pd .pd-bl-the.is-san, .pd .pd-bl-noi__the { border-color: var(--lat1-vien); }
.pd .pd-bl-the.is-san:hover, .pd .pd-bl-noi__the:hover, .pd .pd-bl-the:hover { border-color: var(--o-500); }
/* Mảng cam phẳng: không gradient */
.pd .pd-skip, .pd .pd-cd--3, .pd .pd-bl-chip.is-chon:not(.pd-bl-chip--cd), .pd .pd-rb__nut { background: var(--o-500) !important; background-image: none !important; }
.pd .pd-rb__nut { color: #2e1103; }
.pd .pd-skip { display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box; }
.pd .pd-man__goi-y .pd-ic, .pd .pd-rb__dong .pd-ic { width: 18px; height: 18px; }
/* Vùng bấm >= 44px: dấu vết (breadcrumb) trên bài */
.pd .pd-bv-dau__vet { min-height: 44px; }
.pd .pd-bv-dau__vet a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }

/* Lát 1 sửa 2 (staging): thang 5 bậc không morph vô hạn */
.pd .pd-th-bac__so { animation: none !important; }

/* ---------- Menu: 1 khung bo tròn mảnh, chỉ chữ, 5 mục ---------- */
.pd .pd-nav {
  width: fit-content; max-width: calc(100% - 24px); margin-inline: auto; justify-content: center; gap: 6px;
  padding: 5px 8px 5px 14px; background: var(--color-neutral-900); border: 1px solid var(--lat1-vien);
  transition: transform var(--dur-base) var(--ease-out);
}
.pd .pd-nav.is-an { transform: translateY(calc(-100% - 24px)); }
.pd .pd-nav__brand img { height: 32px; }
.pd .pd-nav__cuon { display: flex; align-items: center; gap: 2px; position: relative; }
.pd .pd-nav__link, .pd .pd-nav__dangnhap, .pd .pd-nav--deck .pd-nav__link {
  position: relative; background: none !important; border: 0 !important; border-radius: 999px; transform: none !important;
  padding: 0 14px; min-height: 40px; display: inline-flex; align-items: center; font-size: 15px; font-weight: 600;
  color: var(--color-neutral-300); transition: color var(--dur-fast) linear;
}
.pd .pd-nav__dangnhap::before { display: none !important; }
.pd .pd-nav__link:hover, .pd .pd-nav__link[aria-current="page"], .pd .pd-nav__dangnhap.pd-nav__dangnhap--da-vao { color: var(--color-bg) !important; }
.pd .pd-nav__gach {
  position: absolute; left: 0; bottom: 3px; width: 1px; height: 2px; background: var(--lat1-gach); border-radius: 2px;
  transform-origin: 0 0; transition: transform var(--dur-base) var(--ease-out); pointer-events: none;
}
.pd .pd-nav__doi-hang { display: contents; }
.pd .pd-nav__doi-mau { width: 40px; height: 40px; min-height: 0; padding: 0; margin-left: 2px; border: 0 !important; background: none; color: var(--color-neutral-300); border-radius: 50%; display: inline-grid; place-items: center; transform: none !important; }
.pd .pd-nav__doi-mau:hover { color: var(--color-bg); background: var(--color-neutral-800); }
.pd .pd-nav__doi-mau svg { grid-area: 1 / 1; width: 20px; height: 20px; stroke-width: 1.75; transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); }
@media (min-width: 768px) { .pd .pd-nav__hamburger { display: none; } }
@media (max-width: 767px) {
  .pd .pd-nav__gach { display: none; }
  .pd .pd-nav { width: calc(100% - 24px); justify-content: space-between; }
}

/* ---------- Icon Lucide (gom trong 1 khối <symbol>, dùng <use>) ---------- */
.pd .pd-ic { width: 1.1em; height: 1.1em; flex: none; vertical-align: -.18em; stroke-width: 2; }
.pd .pd-nav .pd-ic, .pd .pd-ic.pd-mt { stroke-width: 1.75; }
.pd .pd-ic.pd-mt { transition: transform var(--dur-fast) linear; margin-left: .3em; }
@keyframes pd-ve-net { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .pd :is(a, button):hover .pd-ic:not(.pd-dm-mt):not(.pd-dm-tr) { animation: pd-ve-net var(--dur-base) var(--ease-out); }
}

/* ---------- Nút: chính phẳng cam; phụ viền mảnh ---------- */
.pd .pd-nut {
  background: var(--o-500) !important; background-image: none !important; color: #2e1103 !important; border: 0;
  transform: none; transition: background-color var(--dur-fast) linear, transform .1s linear;
}
.pd .pd-nut.pd-nut:hover { background: var(--o-600) !important; color: #2e1103 !important; transform: none; }
.pd .pd-nut:hover .pd-mt, .pd .pd-nut-vien:hover .pd-mt, .pd a:hover > .pd-mt { transform: translateX(4px); }
.pd .pd-nut:active, .pd .pd-nut-vien:active { transform: scale(.97) !important; }
.pd .pd-nut-vien { border: 1px solid var(--color-neutral-600); background: transparent; color: var(--color-bg); transition: background-color var(--dur-fast) linear, border-color var(--dur-fast) linear, transform .1s linear; }
.pd .pd-nut-vien:hover { background: var(--color-neutral-800); border-color: var(--color-bg); color: var(--color-bg); }
.pd :is(.pd-nut, .pd-nut-vien, .pd-nut-toi, .pd-nut-toi-vien):focus-visible { outline: 2px solid var(--o-300); outline-offset: 2px; }
html[data-giao-dien="sang"] .pd :is(.pd-nut, .pd-nut-vien):focus-visible { outline-color: #2e1103; }

/* ---------- Liên kết trong bài: chữ đậm + gạch chân; gạch chân chạy trái → phải 320ms (nền, nên xuống dòng vẫn chạy) ---------- */
.pd :is(main, article) :is(p, li, blockquote, figcaption, dd) a:not([class]), .pd .pd-lien {
  color: var(--color-bg); font-weight: 700; text-decoration: none !important;
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(color-mix(in srgb, currentColor 30%, transparent), color-mix(in srgb, currentColor 30%, transparent));
  background-repeat: no-repeat; background-position: 0 100%, 0 100%; background-size: 0 1.5px, 100% 1px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; padding-bottom: 1px;
  transition: background-size var(--dur-base) var(--ease-out);
}
.pd :is(main, article) :is(p, li, blockquote, figcaption, dd) a:not([class]):hover, .pd .pd-lien:hover { color: var(--color-bg); background-size: 100% 1.5px, 100% 1px; }

/* ---------- Robot hỏi đáp: 48px, chỉ ở bài viết, trượt lên 8px khi qua 30% bài ---------- */
body.pd:not(.single-post) .pd-rb__nut { display: none !important; }
.pd .pd-rb__nut { width: 48px; height: 48px; }
html.js.pd-rb-cho .pd-rb__nut { opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
html.js.pd-rb-cho.pd-rb-hien .pd-rb__nut { opacity: 1; transform: none; pointer-events: auto; }

/* ---------- Sáng/tối: màu đổi 320ms ---------- */
html.pd-dang-doi-mau, html.pd-dang-doi-mau body, html.pd-dang-doi-mau .pd *, html.pd-dang-doi-mau .pd *::before, html.pd-dang-doi-mau .pd *::after {
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), fill var(--dur-base) var(--ease-out), stroke var(--dur-base) var(--ease-out) !important;
}
html.pd-dang-doi-mau .pd .pd-nav__doi-mau svg { transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out) !important; }

/* ---------- Chuyển trang (@view-transition khai ở nen.css): cũ mờ 150ms, mới mờ + trượt 8px 320ms ---------- */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: pd-vt-ra var(--dur-fast) linear both; mix-blend-mode: normal; }
  ::view-transition-new(root) { animation: pd-vt-vao var(--dur-base) var(--ease-out) .1s both; mix-blend-mode: normal; }
  @keyframes pd-vt-ra { to { opacity: 0; } }
  @keyframes pd-vt-vao { from { opacity: 0; transform: translateY(8px); } }
}

/* ---------- Giảm chuyển động: tắt hết, nội dung hiện đủ ---------- */
@media (prefers-reduced-motion: reduce) {
  .pd *, .pd *::before, .pd *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .pd .pd-nav.is-an { transform: none; }
  html.js.pd-rb-cho .pd-rb__nut { opacity: 1; transform: none; pointer-events: auto; }
}

/* ---------- Menu trang chủ (deck): đủ 5 mục, ẩn bằng transform ở MỌI bề rộng ---------- */
@media (min-width: 768px) { .pd .pd-nav--deck .pd-nav__cuon .pd-nav__link:first-child { display: inline-flex !important; } }
html.js .pd .pd-nav.pd-nav--deck.is-an { transform: translateY(calc(-100% - 24px)) !important; }
@media (prefers-reduced-motion: reduce) { html.js .pd .pd-nav.pd-nav--deck.is-an { transform: none !important; } }

/* Va 19/10: khổ 768–1279 menu xuống dòng, logo co mất */
@media (min-width: 768px) {
  .pd .pd-nav__link { white-space: nowrap; }
  .pd .pd-nav__brand { flex-shrink: 0; }
  .pd .pd-nav { width: max-content; max-width: calc(100% - 32px); }
}