/* =========================================================
   PKG-LANDING -- RIENG trang goi phim 3M o che do landing (Dot 3).
   Nap boi phim_cach_nhiet.twig CHI khi pkg_landing, SAU newsroom.min.css.
   Giai doan 1b (28/09/2026): moi component than bai la component nr (UI kit):
   nr-steps--brand, nr-callout--answer/--warn/--expert, nr-faq--single, nr-card--info,
   nr-masonry + lightbox, nr-panel-dark, nr-datatable, nr-lead (popup), nr-sectionnav,
   nr-stickybar. File nay chi con bo cuc cua trang.
   Luat: chi lop pkg-* cua trang, khong the tran, khong lop cascade, khong uu tien cuong ep,
   khong dau ngoac nhon trong comment.
   ========================================================= */

/* Goc landing trong landing_html: <div class="landing-scope pkg"> */
.pkg {
  --pkg-gap: var(--nr-gap-section);

  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* cot lui duoc: khong co thi luoi con (vd dai so lieu) day panel rong hon man hinh 390 */
  gap: var(--pkg-gap);
  min-width: 0;
  color: var(--nr-text);
}

/* Ban phat hanh rieng 6 goi (30/09/2026): cac thay doi toan site o develop (nut phu nen trang,
   nut lien he co mau, bo goc 8px, dem UI Kit) chi ap cho trang goi qua BIEN -- trang khac tren
   production giu nguyen. Component doc bien, mac dinh = giao dien dang chay. */
.pkg-page {
  --nr-radius-md: 8px;
  --nr-radius-lg: 8px;
  --nr-radius-pill: 999px;
  --nr-panel-x: var(--nr-space-4);
  --nr-panel-y: var(--nr-space-4);
  --nr-pad-block: clamp(12px, 1.2vw, 16px);
  --nr-gap-section: var(--nr-space-5);
  --nr-btn-rest-bg: var(--nr-surface);
  --nr-btn-rest-shadow: var(--nr-shadow-sm);
  --nr-btn-primary-hover: var(--nr-primary-dark);
  --nr-btn-outline-bg: var(--nr-maps-soft);
  --nr-btn-outline-line: var(--nr-maps-line);
  --nr-btn-outline-ink: var(--nr-maps);
  /* Hoc CellphoneS (30/09/2026) */
  /* tieu de gon: H2 22px (mac dinh 30px) */
  --nr-section-head-title-size: 22px;
  --nr-section-title-base: 22px;
  /* nut 40px, goi xanh la dac, Zalo xanh dac, nut "Xem tat ca" vien dam */
  --nr-btn-size: 40px;
  --nr-btn-call-bg: var(--nr-call);
  --nr-btn-call-hover-bg: var(--nr-call-strong);
  --nr-btn-call-ink: var(--nr-text-invert);
  --nr-btn-call-line: var(--nr-call);
  --nr-btn-zalo-bg: var(--nr-zalo);
  --nr-btn-zalo-hover-bg: var(--nr-zalo-strong);
  --nr-btn-zalo-ink: var(--nr-text-invert);
  --nr-btn-zalo-line: var(--nr-zalo);
  --nr-btn-vien-line: var(--nr-ink);
  /* FAQ: o xam bo goc, khong vien, chu 14px */
  --nr-faq-gap: var(--nr-space-2);
  --nr-faq-line: transparent;
  --nr-faq-hover-line: var(--nr-border-strong);
  --nr-faq-bg: var(--nr-soft);
  --nr-faq-q-pad: var(--nr-space-3) var(--nr-space-4);
  --nr-faq-q-size: var(--nr-text-sm);
  /* bang: cot nhan nen xam */
  --nr-datatable-rowhead-bg: var(--nr-soft);
  /* "Xem chi tiet lap dat" trong the case: vien hong nhat */
  --nr-case-go-pad: 4px 10px;
  --nr-case-go-bg: var(--nr-maps-soft);
  --nr-case-go-radius: var(--nr-radius-pill);
  /* o tu van cuoi luoi ma phim: vien lien, nut nam ngang */
  --pcn-help-line-style: solid;
  --pcn-help-bg: var(--nr-surface);
  --pcn-help-actions-display: flex;
  /* the ma phim: anh 4:3 cat, thong so dang chip, bo thanh VLT */
  --pcn-card-img-ratio: 4 / 3;
  --pcn-card-img-fit: cover;
  --pcn-card-img-pos: 50% 20%;
  --pcn-card-vlt-bar: none;
  --pcn-card-specs-display: flex;
  --pcn-card-spec-gap: 4px;
  --pcn-card-spec-pad: 2px 8px;
  --pcn-card-spec-radius: 6px;
  --pcn-card-spec-bg: var(--nr-soft);
  --pcn-card-spec-size: 12px;
}

/* Dai hero trang tran vien -- noi dung trong .nr-container nen thang mep header site. */
.pkg-hero-band {
  padding-block-start: var(--nr-space-3);   /* breadcrumb dang dinh sat day header (do 30/09/2026: 0px) */
  background: var(--nr-surface);
}

/* Khung duoi hero: luoi ma phim, than bai, danh gia xep doc, cach nhau mot nhip section. */
.pkg-main {
  display: flex;
  flex-direction: column;
  gap: var(--nr-gap-section);
  padding-block-start: var(--nr-gap-section);
}

/* Than bai landing: muc luc (nr-panel) + cac panel nr cua landing_html nam thang tren nen xam. */
.pkg-body {
  --nr-ssr-slot-space: 0px;   /* khoi SSR trong luoi: nhip do gap lo (newsroom/layout/layout.css) */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--nr-gap-section);
  min-width: 0;
}

/* Neo nhay tru them thanh muc dinh: nut 44 + dem nr-tabs 2 x 8 + 2 vien. Chi khi thanh that su
   duoc in (>= 2 muc, phim_cach_nhiet.twig dat data-sectionnav="on"). */
.pkg-page[data-sectionnav="on"] { --nr-anchor-extra: calc(var(--nr-control-h) + var(--nr-space-2) * 2 + 2px); }

/* ---- Than bai trang goi (giai doan 2, 28/09/2026): lop RIENG trang, component chung la nr ---- */
/* Doan van trong panel (nr khong style the tran). */
.pkg-text {
  --pkg-text-size: var(--nr-text-base);
  --pkg-text-color: var(--nr-text);
  margin: 0;
  color: var(--pkg-text-color);
  font-size: var(--pkg-text-size);
  line-height: var(--nr-leading-normal);
}
/* Ghi chu / nguon duoi bang: chu nho hon doan than bai (doi bien, khong khai lai font-size). */
.pkg-text.pkg-text--note { --pkg-text-size: var(--nr-text-sm); --pkg-text-color: var(--nr-text-muted); }
/* Link trong doan chu cua trang goi: CSS cu cua site dat "a" 12-14px -> link nho hon chu xung quanh. */
.pkg-link {
  --pkg-link-color: var(--nr-link);
  color: var(--pkg-link-color);
  font-size: inherit;
}
/* Link trong gia tri (vd ma phim trong bang cau hinh): cung mau chu, gach chan mo -- khong nhay
   xanh giua mot dong dam. */
.pkg-link.pkg-link--quiet {
  --pkg-link-color: inherit;
  text-decoration: none;
}
.pkg-list {
  display: grid;
  gap: var(--nr-space-1);
  margin: 0;
  padding-inline-start: var(--nr-space-5);
  color: var(--nr-text);
  font-size: var(--nr-text-base);   /* bang doan van quanh no (Owner 29/09/2026: list nho hon chu) */
  line-height: var(--nr-leading-normal);
}
/* Danh sach loi ich trong the goi: dau tick thay cham tron cua trinh duyet. */
.pkg-list.pkg-list--check { padding-inline-start: 0; list-style: none; }
.pkg-list.pkg-list--check > li {
  position: relative;
  padding-inline-start: calc(var(--nr-space-4) + var(--nr-space-2));
}
.pkg-list.pkg-list--check > li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.35em;
  width: var(--nr-space-4);
  height: var(--nr-space-4);
  border-radius: 50%;
  background: color-mix(in srgb, var(--nr-success) 14%, transparent);
}
.pkg-list.pkg-list--check > li::after {
  content: "";
  position: absolute;
  inset-inline-start: 5px;
  top: calc(0.35em + 3px);
  width: 5px;
  height: 8px;
  border: solid var(--nr-success);
  border-width: 0 2px 2px 0;
  rotate: 45deg;
}
/* Anh minh hoa mot tam (anh thi cong / eWarranty). */
/* Bo anh thi cong / chung nhan: dai truot ngang, 3 anh o desktop, man hep ~1,3 anh (the toi thieu
   260px nen khong can moc breakpoint). nr-rail-auto (newsroom-rail.js) them nut truoc/sau. */
.pkg-photo-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, calc((100% - 2 * var(--nr-space-4)) / 3));
  gap: var(--nr-space-4);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding-block-end: var(--nr-space-2);
  scrollbar-width: thin;
  scrollbar-color: var(--nr-border-strong) transparent;
}
.pkg-photo-rail > .pkg-photo { scroll-snap-align: start; }

.pkg-photo { display: grid; gap: var(--nr-space-2); min-width: 0; margin: 0; }
.pkg-photo-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--nr-radius-md);
  background: var(--nr-soft);
}
.pkg-photo-cap {
  color: var(--nr-text-muted);
  font-size: var(--nr-text-xs);
  line-height: var(--nr-leading-snug);
}
/* Anh trang tri tran ngang (xuong, xe tai Pro Shop): cat khung thap, khong chiem ca man hinh
   (Owner 29/09/2026: anh 1262x710 "bi lon"). */
/* Anh minh hoa trong than bai: toi da 760px, can giua -- khong keo het khung 1262px (Owner 29/09/2026: "anh sai thumbs qua"). */
.pkg-photo.pkg-photo--banner { --pkg-photo-max: 760px; --pkg-photo-ratio: 16 / 9; inline-size: min(100%, var(--pkg-photo-max)); margin-inline: auto; }
.pkg-photo.pkg-photo--banner > .pkg-photo-img { aspect-ratio: var(--pkg-photo-ratio); object-fit: cover; }
/* Anh trong luoi thu vien (chung nhan, anh do kiem): khung 4:3 deu nhau. */
.pkg-photo.pkg-photo--thumb > .pkg-photo-img { aspect-ratio: 4 / 3; object-fit: cover; }
/* Anh co noi dung can doc tron (bang gia, ho so eWarranty): khong cat, chan chieu cao. */
.pkg-photo.pkg-photo--fit { --pkg-photo-max-h: 420px; justify-items: center; }
.pkg-photo.pkg-photo--fit > .pkg-photo-img { width: auto; max-width: 100%; max-height: var(--pkg-photo-max-h); }
/* Video YouTube nhung: khung 16:9. Bo loc a365content (Portal.php::lazyLoadContentIframes) doi
   iframe thanh facade .a365-yt (anh nen + nut phat); content.js gan iframe vao .a365-yt khi bam.
   CSS goc cua facade chi co trong .a365-content -- landing KHONG nam trong .a365-content nen
   truoc day facade/iframe khong co kich thuoc (iframe 300x150 goc trai khung den, Owner 28/09/2026).
   Khung .pkg-video la luoi 1 o: moi con (facade, iframe, noscript iframe) lap day khung. */
.pkg-video {
  display: grid;
  inline-size: min(100%, 880px);
  margin-inline: auto;   /* khong phu ca khung 1262px: video 710px cao "bi lon" (Owner 29/09/2026) */
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: var(--nr-radius-md);
  background: var(--nr-surface-dark);
}
.pkg-video > * { grid-area: 1 / 1; min-width: 0; min-height: 0; }
.pkg-video .a365-yt {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.pkg-video .a365-yt > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pkg-video .a365-yt > iframe,
.pkg-video-frame { display: block; width: 100%; height: 100%; border: 0; }
.pkg-video .a365-yt-play {
  position: absolute;
  inset: 0;
  width: 68px;
  height: 48px;
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--nr-radius-md);
  background: color-mix(in srgb, var(--nr-surface-dark) 62%, transparent);
  cursor: pointer;
}
.pkg-video .a365-yt-play::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 0;
  height: 0;
  margin: auto;
  border-style: solid;
  border-width: 10px 0 10px 17px;
  border-color: transparent transparent transparent var(--nr-text-invert);
}
.pkg-video .a365-yt:hover .a365-yt-play,
.pkg-video .a365-yt-play:focus-visible { background: var(--nr-primary-btn); }
/* Cau hinh theo vi tri kinh: nhan | ma phim. */
.pkg-cfg {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--nr-space-1) var(--nr-space-3);
  margin: 0;
  font-size: var(--nr-text-sm);
}
.pkg-cfg-k { margin: 0; color: var(--nr-text-muted); }
.pkg-cfg-v { margin: 0; color: var(--nr-text); font-weight: var(--nr-weight-semibold); }
/* FilmMatch: nhom cau hoi = fieldset + legend, lua chon = nr-chip (pkg-landing.js). */
.pkg-fm-group {
  display: grid;
  gap: var(--nr-space-2);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.pkg-fm-q {
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
  color: var(--nr-text);
  font-size: var(--nr-text-base);
  font-weight: var(--nr-weight-semibold);
  line-height: var(--nr-leading-snug);
}

/* FilmMatch tren nen toi (nr-panel-dark): hai the sang -- cau hoi va ket qua. The sang keo
   mau chu ve --nr-ink (tokens.css: mat phang toi ghi de --nr-text). */
.pkg-fm-card {
  --nr-text: var(--nr-ink);
  --nr-text-muted: var(--nr-ink-muted);
  --nr-border: var(--nr-border-strong);
  color: var(--nr-text);
}
.pkg-body.pkg-fm-card {
  padding: var(--nr-space-5);
  border-radius: var(--nr-radius-lg);
  background: var(--nr-surface);
}
/* Lua chon dang the: ten dam + mo ta nho, xep luoi deu. Trang thai chon doc tu aria-pressed. */
.pkg-fm-opts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: var(--nr-space-2);
}
.pkg-fm-opt {
  --pkg-fm-opt-line: var(--nr-border);
  --pkg-fm-opt-bg: var(--nr-surface);
  display: grid;
  align-content: center;
  gap: var(--nr-space-1);
  min-height: var(--nr-control-h);
  padding: var(--nr-space-3) var(--nr-space-4);
  border: 1px solid var(--pkg-fm-opt-line);
  border-radius: var(--nr-radius-md);
  background: var(--pkg-fm-opt-bg);
  box-shadow: inset 3px 0 0 var(--pkg-fm-opt-bar, transparent);
  color: var(--nr-text);
  font: inherit;
  font-size: var(--nr-text-sm);
  line-height: var(--nr-leading-snug);
  text-align: start;
  cursor: pointer;
}
.pkg-fm-opt:hover { --pkg-fm-opt-line: var(--nr-text-muted); }
.pkg-fm-opt[aria-pressed="true"] {
  --pkg-fm-opt-line: var(--nr-primary);
  --pkg-fm-opt-bar: var(--nr-primary);
  --pkg-fm-opt-bg: color-mix(in srgb, var(--nr-primary) 5%, var(--nr-surface));
}
.pkg-fm-opt > small { color: var(--nr-text-muted); font-size: var(--nr-text-xs); }

/* Gia noi bat trong the goi / ket qua FilmMatch: so do lon, tien to va ghi chu nho. */
.pkg-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--nr-space-1) var(--nr-space-2);
  margin: 0;
  color: var(--nr-text-muted);
  font-size: var(--nr-text-sm);
}
.pkg-price-v {
  color: var(--nr-primary-btn);
  font-size: var(--nr-text-3xl);
  font-weight: var(--nr-weight-bold);
  line-height: var(--nr-leading-tight);
}
/* O so lieu: nhan nho tren, gia tri dam duoi, chia deu hang. */
.pkg-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 88px), 1fr));
  gap: var(--nr-space-2);
  margin: 0;
}
.pkg-stat {
  display: grid;
  gap: var(--nr-space-1);
  padding: var(--nr-space-2) var(--nr-space-3);
  border: 1px solid var(--nr-border);
  border-radius: var(--nr-radius-md);
}
.pkg-stat-k { margin: 0; color: var(--nr-text-muted); font-size: var(--nr-text-xs); }
.pkg-stat-v { margin: 0; color: var(--nr-text); font-size: var(--nr-text-lg); font-weight: var(--nr-weight-bold); line-height: var(--nr-leading-tight); }

/* Tieu de phu trong than bai (h3/h4 chuyen tu CKEditor, giu id muc luc). */
.pkg-h {
  --pkg-h-size: var(--nr-text-lg);   /* 20 -> 18px: tieu de gon kieu CellphoneS (30/09/2026) */
  margin: 0;
  color: var(--nr-text);
  font-size: var(--pkg-h-size);
  font-weight: var(--nr-weight-bold);
  line-height: var(--nr-leading-tight);
}
.pkg-h.pkg-h--h4 { --pkg-h-size: var(--nr-text-base); }
/* Dai keu goi hanh dong giua bai: nen do rat nhat, vien trai do, nut o cuoi. */
.pkg-cta {
  display: grid;
  gap: var(--nr-space-3);
  padding: var(--nr-space-5);
  border: 1px solid color-mix(in srgb, var(--nr-primary) 22%, var(--nr-border));
  border-inline-start: 4px solid var(--nr-primary);
  border-radius: var(--nr-radius-md);
  background: color-mix(in srgb, var(--nr-primary) 4%, var(--nr-surface));
}