/*
 * assets/css/site.css
 * Giao diện công khai theo docs/phucloi-design-handoff (DESIGN_HANDOFF.md).
 * Mọi class mới dùng tiền tố "pl-" để không đụng tiện ích Tailwind
 * (Tailwind CDN còn được giữ cho tới khi mọi trang chuyển xong).
 *
 * Thứ tự: (token ở tokens.css) → nền tảng → component dùng chung → header → khối liên hệ +
 * footer → nút gọi nổi → phần riêng từng trang (cuối file).
 */

/* ══ 1. Token: xem assets/css/tokens.css (nạp trước file này) ══════════ */

/* ══ 2. Nền tảng ═══════════════════════════════════════════════════════ */
html { scroll-padding-top: calc(var(--header-h) + 16px); }

/* body.pl: trang đã chuyển sang giao diện mới */
body.pl {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}
:where(.pl) a { color: var(--wood); }
:where(.pl) a:hover { color: var(--wood-hover); }

.pl-wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  box-sizing: border-box;
}
.pl-serif { font-family: var(--font-serif); }

.pl-label {
  margin: 0 0 14px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--wood);
}
.pl-h1 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(44px, 6vw, 80px);
  line-height: 1.04;
  letter-spacing: -.02em;
  color: var(--ink);
}
.pl-h1 em { font-style: italic; color: var(--wood); }
.pl-h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.18;
  letter-spacing: -.005em;
  color: var(--ink);
}
.pl-h3 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(21px, 2vw, 28px);
  line-height: 1.3;
  color: var(--ink);
}
.pl-lead { margin: 0; font-size: 17px; line-height: 1.7; color: var(--muted); }

/* Viền focus rõ cho bàn phím, dùng chung toàn site mới */
.pl :focus-visible,
.pl-header :focus-visible,
.pl-mnav :focus-visible,
.pl-footer :focus-visible,
.pl-cta :focus-visible {
  outline: 2px solid var(--wood);
  outline-offset: 3px;
  border-radius: 4px;
}
.pl-cta :focus-visible,
.pl-footer :focus-visible { outline-color: var(--on-deep-accent); }

/* Bấm nhanh trên cảm ứng; giảm chuyển động khi người dùng yêu cầu */
.pl-btn, .pl-menubtn, .pl-mnav__row, .pl-mnav__toggle, .pl-float a { touch-action: manipulation; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .pl-header *, .pl-mnav *, .pl-cta *, .pl-footer *, .pl * { transition: none !important; animation: none !important; }
}

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

/* ══ 3. Component dùng chung ═══════════════════════════════════════════ */

/* Nút: chính nền gỗ, phụ viền mảnh */
.pl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 15px 24px;
  box-sizing: border-box;
  border-radius: var(--r-btn);
  border: 1px solid transparent;
  background: var(--wood);
  color: var(--paper) !important;
  font: inherit;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.pl-btn:hover { background: var(--wood-hover); }
.pl-btn--ghost {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--ink) !important;
}
.pl-btn--ghost:hover { background: var(--tint); }
.pl-btn svg { flex: none; }

/* Liên kết chữ gạch chân mảnh */
.pl-textlink {
  display: inline-block;
  padding: 8px 0;
  font-weight: 600;
  color: var(--wood);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-color: var(--line-strong);
}
.pl-textlink:hover { text-decoration-color: currentColor; }

/* Ô ảnh: nền be khi ảnh chưa tải */
.pl-media {
  display: block;
  width: 100%;
  background: var(--img-ph);
  border-radius: var(--r-media);
  object-fit: cover;
  overflow: hidden;
}

/* Link bỏ qua tới nội dung – chỉ hiện khi focus bằng bàn phím */
.pl-skip {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 200;
  padding: 12px 18px;
  border-radius: var(--r-btn);
  background: var(--wood);
  color: var(--paper);
  font-family: var(--font-sans);
  font-weight: 600;
  text-decoration: none;
}
.pl-skip:focus { top: 12px; color: var(--paper); }

/* ══ 4. Header ═════════════════════════════════════════════════════════ */
.pl-topbar {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  background: var(--cream);
  border-bottom: 1px solid var(--line);
}
.pl-topbar__in {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 28px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.pl-topbar__group { display: flex; flex-wrap: wrap; gap: 6px 28px; }
.pl-topbar a { color: inherit; text-decoration: none; }
.pl-topbar a:hover { color: var(--wood); }
.pl-topbar__strong { color: var(--ink); font-weight: 600; }
@media (max-width: 767.98px) {
  .pl-topbar { display: none; }
}

.pl-header {
  position: sticky;
  top: 0;
  z-index: 50;
  font-family: var(--font-sans);
  color: var(--ink);
  background: rgba(252, 250, 248, .95); /* --cream 95% */
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.pl-header__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 32px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.pl-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  text-decoration: none;
  flex: none;
}
.pl-brand:hover { color: var(--ink); }
.pl-brand__logo { width: 48px; height: 48px; object-fit: contain; flex: none; }
.pl-brand__name {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.1;
}
.pl-brand__tag {
  font-size: 13px;
  color: var(--muted);
  border-left: 1px solid var(--line);
  padding-left: 12px;
  align-self: center;
}

/* Menu desktop */
.pl-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 30px;
  font-size: 15px;
  font-weight: 500;
}
.pl-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 10px 0;
  color: var(--ink);
  text-decoration: none;
  background: none;
  border: 0;
  font: inherit;
  cursor: pointer;
}
.pl-nav__link:hover { color: var(--wood); }
.pl-nav__link[aria-current="page"] {
  color: var(--wood);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--wood);
}
.pl-dd__trigger svg { transition: transform .15s ease; }
.pl-dd:hover .pl-dd__trigger svg,
.pl-dd:focus-within .pl-dd__trigger svg { transform: rotate(180deg); }

.pl-dd { position: relative; }
.pl-dd__panel {
  position: absolute;
  top: 48px;
  left: -28px;
  z-index: 60;
  width: 540px;
  max-width: 86vw;
  box-sizing: border-box;
  padding: 10px 28px 18px;
  display: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 28px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 24px 48px -24px rgba(43, 38, 34, .3);
}
/* Hiện khi rê chuột hoặc focus bàn phím vào bên trong; Esc đóng tạm (is-dismissed, xem main.js) */
.pl-dd:hover .pl-dd__panel,
.pl-dd:focus-within .pl-dd__panel { display: grid; }
.pl-dd.is-dismissed .pl-dd__panel { display: none; }
/* Cầu nối vô hình để rê chuột từ nút xuống panel không bị đóng */
.pl-dd__panel::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -14px;
  height: 14px;
}
.pl-dd__link {
  display: block;
  padding: 13px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 15px;
  font-weight: 400;
  color: var(--ink);
  text-decoration: none;
}
.pl-dd__link:hover { color: var(--wood); }

.pl-hotline {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.2;
  color: var(--ink);
  text-decoration: none;
  flex: none;
}
.pl-hotline__k { font-size: 13px; color: var(--muted); }
.pl-hotline__v { font-size: 19px; font-weight: 700; color: var(--wood); white-space: nowrap; }
.pl-hotline:hover .pl-hotline__v { color: var(--wood-hover); }

/* Nút "Gọi" trên header – chỉ hiện dưới 1024px (thay chỗ khối Hotline) */
.pl-callbtn {
  display: none;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin-left: auto;
  padding: 0 16px;
  border-radius: var(--r-btn);
  background: var(--wood);
  color: var(--paper);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  touch-action: manipulation;
}
:where(.pl) .pl-callbtn, .pl-callbtn:hover { color: var(--paper); }
.pl-callbtn:hover { background: var(--wood-hover); }

/* Nút "Menu" chỉ hiện dưới 1024px */
.pl-menubtn {
  display: none;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 4px;
  background: none;
  border: 0;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

@media (min-width: 1024px) and (max-width: 1199.98px) {
  .pl-brand__tag { display: none; }
  .pl-nav { flex-wrap: nowrap; gap: 4px 22px; }
  .pl-header__in { gap: 12px 24px; }
}
@media (max-width: 1023.98px) {
  .pl-header__in { padding-top: 10px; padding-bottom: 10px; gap: 12px; }
  .pl-nav,
  .pl-hotline,
  .pl-brand__tag { display: none; }
  .pl-menubtn,
  .pl-callbtn { display: inline-flex; }
  .pl-brand { min-height: 44px; }
  .pl-brand__logo { width: 40px; height: 40px; }
  .pl-brand__name { font-size: 24px; }
}

/* Điện thoại rất hẹp: chỉ giữ logo để nút Gọi + Menu vẫn vừa một hàng */
@media (max-width: 359.98px) {
  .pl-header .pl-brand__name { display: none; }
}

/* Menu mobile toàn màn hình (MobileMenu.dc.html) */
.pl-mnav {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--cream);
  font-family: var(--font-sans);
  color: var(--ink);
}
.pl-mnav[hidden] { display: none; }
.pl-mnav .pl-menubtn { display: inline-flex; }
.pl-mnav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px var(--gutter);
}
.pl-mnav__list { flex: 1; padding: 12px var(--gutter) 0; }
.pl-mnav__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-height: 58px;
  padding: 0;
  box-sizing: border-box;
  background: none;
  border: 0;
  border-top: 1px solid var(--line);
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  text-align: left;
  cursor: pointer;
}
.pl-mnav__row:hover,
.pl-mnav__row[aria-current="page"],
.pl-mnav__toggle[aria-expanded="true"] { color: var(--wood); }
.pl-mnav__row:last-child { border-bottom: 1px solid var(--line); }
.pl-mnav__sign { font-family: var(--font-sans); font-size: 22px; font-weight: 400; }
.pl-mnav__group { border-top: 1px solid var(--line); }
.pl-mnav__split { display: flex; align-items: stretch; }
.pl-mnav__split .pl-mnav__row { flex: 1; border-top: 0; border-bottom: 0; }
.pl-mnav__toggle {
  flex: none;
  width: 58px;
  min-height: 58px;
  margin-right: -12px;
  background: none;
  border: 0;
  color: var(--ink);
  cursor: pointer;
}
.pl-mnav__toggle:hover { color: var(--wood); }
.pl-mnav__sub {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 16px;
  padding: 0 0 12px 2px;
}
.pl-mnav__sub[hidden] { display: none; }
.pl-mnav__sub a {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: 15px;
  line-height: 1.35;
  color: var(--ink-2);
  text-decoration: none;
}
.pl-mnav__sub a:hover { color: var(--wood); }
.pl-mnav__sub a:last-child:nth-child(odd) { grid-column: span 2; }
.pl-mnav__foot {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px var(--gutter) 28px;
}
.pl-mnav__foot p { margin: 0; text-align: center; font-size: 13px; color: var(--muted); }
body.pl-noscroll { overflow: hidden; }

/* ══ 5. Khối liên hệ (trên footer) + Footer ════════════════════════════ */
.pl-cta,
.pl-footer {
  font-family: var(--font-sans);
  background: var(--deep);
  color: var(--on-deep);
}
.pl-cta__in {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 40px 72px;
  padding-top: 88px;
  padding-bottom: 72px;
}
.pl-cta__text { flex: 2 1 480px; min-width: 0; }
.pl-cta__label { margin: 0 0 14px; font-size: 13px; font-weight: 600; color: var(--on-deep-accent); }
.pl-cta__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(30px, 3.6vw, 48px);
  font-weight: 700;
  line-height: 1.15;
  color: var(--on-deep);
}
.pl-cta__desc { margin: 18px 0 0; max-width: 520px; font-size: 16.5px; line-height: 1.7; color: var(--on-deep-2); }
.pl-cta__act { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.pl-cta__phone { display: flex; flex-direction: column; gap: 2px; color: var(--on-deep); text-decoration: none; }
.pl-cta__phone:hover { color: var(--on-deep-accent); }
.pl-cta__phone-k { font-size: 13.5px; color: var(--on-deep-muted); }
.pl-cta__phone-v { font-family: var(--font-serif); font-size: clamp(34px, 4vw, 42px); font-weight: 700; line-height: 1.2; }
.pl-cta__btns { display: flex; flex-wrap: wrap; gap: 10px; }
.pl-cta__btn {
  flex: 1 1 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 15px 18px;
  box-sizing: border-box;
  border-radius: var(--r-btn);
  border: 1px solid rgba(243, 234, 223, .35);
  color: var(--on-deep);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: background-color .15s ease;
}
.pl-cta__btn:hover { background: var(--deep-2); color: var(--on-deep); }
.pl-cta__btn--solid { background: var(--on-deep); border-color: var(--on-deep); color: var(--deep); }
.pl-cta__btn--solid:hover { background: var(--on-deep-accent); color: var(--deep); }
.pl-cta__btn--wide { flex-basis: 180px; }

.pl-footer { border-top: 1px solid var(--line-on-deep); }
.pl-cta + .pl-footer { border-top-color: rgba(243, 234, 223, .14); }
.pl-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 40px;
  padding-top: 56px;
  padding-bottom: 40px;
}
.pl-footer__col { display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; line-height: 1.6; min-width: 0; }
.pl-footer__brand { display: flex; align-items: center; gap: 12px; }
.pl-footer__brand img { width: 56px; height: 56px; object-fit: contain; flex: none; }
.pl-footer__brand span { font-family: var(--font-serif); font-size: 26px; font-weight: 700; }
.pl-footer__blurb { margin: 0; color: var(--on-deep-2); line-height: 1.7; }
.pl-footer__social { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; }
.pl-footer__social a { display: inline-block; padding: 6px 0; color: var(--on-deep); text-decoration: underline; text-underline-offset: 3px; }
.pl-footer__social a:hover { color: var(--on-deep-accent); }
.pl-footer__h { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--on-deep); }
.pl-footer__list { display: flex; flex-direction: column; color: var(--on-deep-2); }
.pl-footer__list > * {
  padding: 10px 0;
  border-top: 1px solid rgba(243, 234, 223, .14);
  color: inherit;
  text-decoration: none;
}
.pl-footer__list a:hover { color: var(--on-deep); }
.pl-footer__list .is-strong { color: var(--on-deep); font-weight: 600; }
.pl-footer__map {
  height: 150px;
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  background: var(--deep-2);
}
.pl-footer__map iframe { display: block; width: 100%; height: 100%; border: 0; }
.pl-footer__more { color: var(--on-deep); }
.pl-footer__more:hover { color: var(--on-deep-accent); }
.pl-footer__nav a {
  display: inline-block;
  padding: 3px 0;
  color: var(--on-deep-2);
  text-decoration: none;
}
.pl-footer__nav a:hover { color: var(--on-deep); }
.pl-footer__copy {
  padding-top: 18px;
  padding-bottom: 26px;
  border-top: 1px solid rgba(243, 234, 223, .14);
  font-size: 13px;
  color: var(--on-deep-muted);
}
.pl-footer__copy p { margin: 0; }
.pl-footer__copy a { color: inherit; text-decoration: none; cursor: text; }

/* Vùng bấm ≥ 44px trên màn hình cảm ứng (dưới 1024px) cho link trong footer */
@media (max-width: 1023.98px) {
  .pl-footer__social { gap: 0 8px; }
  .pl-footer__social a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 4px; }
  .pl-footer__list a { display: flex; align-items: center; min-height: 44px; padding-top: 0; padding-bottom: 0; }
  .pl-footer__more { display: inline-flex; align-items: center; min-height: 44px; }
  .pl-footer__nav { gap: 0; }
  .pl-footer__nav a { display: flex; align-items: center; min-height: 44px; padding: 0; }
  .pl-footer__nav .pl-footer__h { margin-bottom: 4px; }
}

/* ══ 6. Nút nổi Facebook / Zalo / Gọi (giữ như bản cũ, có ở mọi trang) ═══ */
.pl-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Màu theo token, không nhún: Gọi = gỗ trầm, Facebook/Zalo = nâu đậm.
   Viền kem mảnh để nút vẫn tách khỏi nền khi trôi qua khối tối. */
.pl-float a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  color: var(--on-deep);
  background: var(--deep);
  box-shadow: 0 0 0 2px var(--paper);
  transition: background-color .15s ease;
}
.pl-float a:hover { color: var(--on-deep); background: var(--wood-hover); }
.pl-float a:focus-visible { outline: 2px solid var(--wood); outline-offset: 4px; }
.pl-float__call { background: var(--wood); }
.pl-float__call:hover { background: var(--wood-hover); }
@media (max-width: 480px) {
  .pl-float { right: 16px; bottom: 16px; gap: 10px; }
}

/* ══ 7. Bù cho markup Tailwind cũ ═════════════════════════════════════ */
/* Các trang giữ bố cục cũ (class Tailwind), màu lấy từ tailwind/tailwind.config.js
   (đọc thẳng tokens.css), build ra assets/css/tw.css. */
/* Khung trang trí lệch (translate) trong markup cũ không được gây cuộn ngang trên mobile.
   clip (không phải hidden) để header sticky vẫn hoạt động. */
main, #noi-dung { overflow-x: clip; }
/* Trong khối nền tối, các lớp chữ dành cho nền sáng (gray-400…600 = --muted,
   gold-500/600 = gỗ) đổi sang màu chữ-trên-nền-tối để đạt AA. */
:is(.bg-somber-900, .bg-somber-800, .bg-primary-900, .bg-primary-800, .bg-black) :is(.text-gray-400, .text-gray-500, .text-gray-600) { color: var(--on-deep-muted); }
:is(.bg-somber-900, .bg-somber-800, .bg-primary-900, .bg-primary-800, .bg-black) :is(.text-gold-500, .text-gold-600) { color: var(--on-deep-accent); }
:is(.bg-somber-900, .bg-somber-800, .bg-primary-900, .bg-primary-800) :is(.bg-white, .bg-gray-50) :is(.text-gray-400, .text-gray-500, .text-gray-600) { color: var(--muted); }
:is(.bg-somber-900, .bg-somber-800, .bg-primary-900, .bg-primary-800) :is(.bg-white, .bg-gray-50) :is(.text-gold-500, .text-gold-600) { color: var(--wood); }

/* Tiêu đề (font-serif/font-merri = Mulish): đậm 700, không lên 800/900 để giữ giọng trang nghiêm;
   khít chữ rất nhẹ như tiêu đề không chân thường cần. */
.font-serif.font-bold, .font-merri.font-bold, .font-serif.font-extrabold { font-weight: 700; }
:where(.font-serif, .font-merri) { letter-spacing: -0.01em; }
/* Ô nhập cũ dùng outline-none + ring nhạt gần như không thấy: thay bằng viền gỗ */
.pl :is(input, select, textarea, button):focus-visible,
.pl :is(input, select, textarea):focus {
  outline: 2px solid var(--wood);
  outline-offset: 2px;
}
.pl .bg-somber-900 :focus-visible,
.pl .bg-primary-900 :focus-visible { outline-color: var(--on-deep-accent); }
/* Ô nhập không ghi màu nền thì dùng nền Giấy thay cho trắng mặc định của trình duyệt.
   :where() giữ độ ưu tiên 0 nên lớp bg-* đặt trên ô nhập vẫn thắng. */
:where(.pl) :where(input:not([type=checkbox], [type=radio], [type=range]), select, textarea) {
  background-color: var(--paper);
}
/* Tiêu đề hai dòng chia đều, đoạn văn tránh một chữ lẻ ở dòng cuối (chỉ đổi chỗ xuống dòng) */
:where(.pl) :where(h1, h2, h3, h4) { text-wrap: balance; }
:where(.pl) :where(p, li, blockquote) { text-wrap: pretty; }
/* Dấu đầu dòng trung tính thay cho icon tích xanh (danh sách hạng mục trong gói) */
.pl-bullet {
  flex-shrink: 0;
  width: 10px;
  height: 1px;
  margin: .7em 10px 0 0;
  background: var(--line-strong);
}
/* Thông báo sau khi gửi form: không dùng xanh lá / đỏ, phân biệt bằng chữ và viền */
.pl-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 24px;
  padding: 14px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-input);
  background: var(--tint);
  color: var(--ink);
}
.pl-alert--error { border: 2px solid var(--wood); background: var(--paper); }
.pl-alert svg { flex-shrink: 0; margin-top: 2px; color: var(--wood); }

/* ══ 8. Phần riêng từng trang ══════════════════════════════════════════ */

/* Mobile: dòng cuối footer chừa chỗ cho cụm nút nổi */
@media (max-width: 767.98px) {
  .pl-footer__copy { padding-right: calc(var(--gutter) + 72px); }
}

/* == index ============================================================== */
/* Dòng 2 tiêu đề hero (nhập trong admin bằng <span>) dùng màu nhấn trên ảnh tối */
.pl-hero-title span { color: var(--on-deep-accent); }
/* Dòng tên cơ sở dưới khẩu hiệu: nhỏ, chữ thường, màu nhạt — đọc như chữ ký, không thành nhãn */
.pl-hero-title .pl-hero-brand {
  display: block;
  margin-top: 1rem;
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
  font-weight: 600;
  line-height: 1.4;
  color: var(--on-deep-2);
}

/* Thẻ gói (trang chủ): dưới 768px chỉ hiện nhóm hạng mục đầu; nút mở phần còn lại */
.pl-more-btn { display: none; }
@media (max-width: 767.98px) {
  [data-pkg-more]:not(.is-open) .pl-more { display: none; }
  .pl-more-btn {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--wood);
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
  }
}

/* == Khối video YouTube (trang chủ + Video) ============================ */
/* Dùng chung cho index.php và video.php; trước đây là style inline chép ở hai nơi. */
.pl-yt-player {
  position: relative;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
  border-radius: 20px;
  background: var(--deep);
}
.pl-yt-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.pl-yt-card {
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid rgba(227, 201, 168, .25); /* --on-deep-accent 25% */
  background: var(--deep-2);
  cursor: pointer;
  transition: border-color .15s ease;
}
.pl-yt-card:hover,
.pl-yt-card:focus-visible { border-color: rgba(227, 201, 168, .6); }
.pl-yt-thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--deep); }
.pl-yt-thumb > img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Hiện khi ảnh YouTube lỗi (onerror đặt display:flex) */
.pl-yt-fallback {
  display: none;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  background: var(--deep);
}
.pl-yt-fallback img { width: 64px; height: 64px; opacity: .5; }
.pl-yt-shade { position: absolute; inset: 0; background: rgba(51, 38, 29, .25); }
.pl-yt-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.pl-yt-play span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--wood);
  color: var(--paper);
  box-shadow: 0 4px 20px rgba(51, 38, 29, .6);
}
.pl-yt-play svg { margin-left: 3px; }
.pl-yt-info { padding: 12px 14px 14px; }
.pl-yt-title {
  display: -webkit-box;
  margin: 0 0 8px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--on-deep);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}
.pl-yt-by { display: flex; align-items: center; gap: 8px; }
.pl-yt-by img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.pl-yt-by span { color: var(--on-deep-accent); font-size: 13px; }

/* Nút trượt: nhô ra mép khung trên màn hình rộng, nằm gọn trong khung trên mobile.
   button.… để thắng [type=button]{background:transparent} của tw.css (nạp sau). */
button.pl-yt-nav {
  position: absolute;
  top: 40%;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--deep);
  color: var(--on-deep);
  cursor: pointer;
  transform: translateY(-50%);
  transition: background-color .15s ease;
}
button.pl-yt-nav:hover { background: var(--wood); }
#yt-prev { left: -18px; }
#yt-next { right: -18px; }
@media (max-width: 639.98px) {
  #yt-prev { left: 4px; }
  #yt-next { right: 4px; }
}

/* Chấm chuyển nhóm video (main.js tạo): nút 44×44, chấm hiện tại kéo dài thành vạch gỗ */
.pl-yt-dots { display: flex; justify-content: center; margin-top: 24px; }
.pl-yt-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.pl-yt-dot span {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line-strong);
  transition: width .15s ease, background-color .15s ease, border-radius .15s ease;
}
.pl-yt-dot[aria-current="true"] span { width: 20px; border-radius: 4px; background: var(--wood); }