/* =========================================================
   COMPONENT: nr-rail  --  nut cuon truoc/sau cho hang the

   Boc quanh mot .nr-cards dang cuon. Nut CHI hien khi noi dung
   that su tran, va JS tu an o dien thoai (da co vuot).

   Nut nam TRONG khung, khong tho ra ngoai. Ban cu dat
   `right: -20px !important` -> tho ra mep phai va gay tran ngang;
   do that: hub tran 8px o 900px, va bi overflow-x:clip cat mat nen
   do o cap trang khong bat duoc.
   ========================================================= */

.nr-rail {
  position: relative;   /* moc cho nut dat tuyet doi -- VO DIEU KIEN */
  min-width: 0;
}

/* Nut nam trong LE RIENG hai ben, khong de len the. Truoc day nut cach mep
   8px va do duoc la nut prev nam DE LEN the dau tien -- che mat anh va chan
   vung bam cua the do. */
/* Nut nam TRONG PHAN DEM cua tam, khong khoet cho tren hang the.
   Ban truoc toi cho .nr-rail padding-inline 52px moi ben de nut khoi de len
   the -- ket qua la hang the thut vao 52px so voi tieu de section, mat 106px
   be ngang, va o nhung hang khong tran thi nut khong hien nen 106px do bi
   chua ra hoan toan vo ich. Do duoc tren trang.

   Dat nut lech ra ngoai dung bang phan dem cua tam: nut nam giua duong vien
   trong cua tam, mot nua de len mep the dau/cuoi. Hang the thang hang voi
   tieu de, khong mat be rong nao. */
/* Lech ra ngoai DU de khong phu len chu trong the. Y do ban dau (nut nam giua
   duong vien trong cua tam, nua de len mep the) van giu -- chi doi con so.
   Ly do doi: --nr-card-pad giam 16px -> 12px (07/09/2026), chu trong the tien
   sat mep hon, nen nut 40px lech -20px phu 20px vao the tuc de 7px LEN CHU
   (do live tren 3 rail: #vehicle-cases, #hub-topic-map, #hub-article-library).
   Lech mot nua chieu cao nut + dem the: nut cham mep chu, khong phu qua. */
/* 08/09/2026 -- do live tren CA 8 rail cua newsroom: nut nam ngoai mep tam
   trang 11px moi ben (tam 65..1361, nut 54..1372). Nut do ra nen xam, va o be
   ngang hep hon thi nut trai bi cat mat mot nua.

   Nguyen nhan la hai con so khong khop nhau, khong phai dat sai:
     lech = size/2 + card-pad = 40/2 + 12 = 32px
     nhung dem cua tam (--nr-panel-x) chi co 20px
   Nut 40px voi dem 20px thi chi co hai ket cuc: tho ra ngoai tam, hoac de len
   chu trong the. Ban truoc chon "tho ra ngoai" de tranh de len chu.

   Giai bang cach lay so tu chinh hai token do:
     lech = -(--nr-panel-x)  -> mep ngoai nut TRUNG mep tam, khong tho ra
     size = 32px             -> mep trong nut = 20 - 32 + ... = dung bang
                                --nr-card-pad, tuc cham mep CHU, khong de len
   Kiem lai: tam trai 65, rail trai 85. Nut trai 85-20=65 (dung mep tam),
   phai 65+32=97. Chu trong the bat dau 85+12=97. Cham nhau, khong chong. */
.nr-rail { --nr-rail-btn-size: 32px; }
/* scroll-padding 0 cho MOI rail (Owner 02/10/2026: moi rail giong nhau, bam qua DUNG 1 cot).
   Truoc la 40px "de the dung cach nut": ket hop scroll-snap thi lan bam dau chi di (cot - 40)
   va the dau bi lo 40px cua the truoc -- do 216/256 o rail video /tin-tuc, 280/320 o Xe thuc te,
   trong khi rail data-rail-auto (cam nang, bang) da la 0 -> hai kieu truot tren cung mot trang. */
.nr-rail > .nr-cards,
.nr-rail > .nr-cases,
.nr-rail--auto > [data-js="rail-auto"],
.nr-rail--auto > [data-rail-auto] { scroll-padding-inline: 0; }

.nr-rail-btn.nr-rail-btn--prev {
  left: calc(-1 * var(--nr-panel-x, 20px));
}
.nr-rail-btn.nr-rail-btn--next {
  right: calc(-1 * var(--nr-panel-x, 20px));
}

.nr-rail-btn {

  position: absolute;
  z-index: 2;
  /* Voi rail 2 hang, 50% roi dung ranh giua hai hang -> nhin ra nhu dang
     dieu khien "ca hai ma khong hang nao". Dat theo hang DAU. */
  /* translateY(-50%) chu KHONG phai tru --nr-rail-btn-size/2: duoi 768px nut
     to len 40px de du vung cham nhung bien van la 32, nen cong thuc cu dat nut
     lech 4px xuong duoi. Dich chuyen theo chinh chieu cao that thi khong bao
     gio lech. Do 11/09/2026. */
  top: var(--nr-rail-anchor, 50%);
  transform: translateY(-50%);

  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--nr-rail-btn-size);
  height: var(--nr-rail-btn-size);

  /* Nut nam NGOAI tam trang, tren nen xam #f2f4f7. Vien --nr-border (#e5e7eb)
     gan bang mau nen do nen nut nhin nhu mot ky tu tran, khong ra nut. Dung
     vien dam. */
  border: 1px solid var(--nr-border-strong);
  border-radius: 999px;
  background: var(--nr-surface);
  color: var(--nr-text);
  font: inherit;
  font-size: var(--nr-text-lg);
  line-height: 1;
  cursor: pointer;

  transition: border-color var(--nr-duration) var(--nr-ease),
              opacity var(--nr-duration) var(--nr-ease);
}

/* Bong nhe: nut nam DE LEN mep the (dung nhu Netflix/YouTube lam), nen phai
   tach khoi the ben duoi -- khong co bong thi nhin ra nhu mot o trang thung
   giua the (do 10/09/2026: nut > de len o "Jeep" va mep the hang giua). */
.nr-rail-btn { box-shadow: 0 1px 6px rgb(16 24 40 / 12%); }
.nr-rail-btn:hover { border-color: var(--nr-border-strong); box-shadow: 0 2px 10px rgb(16 24 40 / 18%); }

.nr-rail-btn:disabled {
  opacity: .35;
  cursor: default;
}

/* Dien thoai da co vuot ngang -- nut chi lam vuong cho */
/* Truoc day an han o dien thoai voi ly do "da vuot ngang duoc". Nhung thanh
   cuon cung da lam manh, nen tren dien thoai KHONG con tin hieu nao bao hang
   the cuon duoc. Giu nut, chi thu nho. */
@media (width <= 600px) {
  .nr-rail { --nr-rail-btn-size: 28px; }
}

/* Rail hai hang: neo nut vao giua khung */
.nr-rail:has(.nr-cards--rows-2) { --nr-rail-anchor: 50%; }

/* Khung cuon nhan tieu diem ban phim (newsroom-rail.js tu them tabindex) --
   phai co vien tieu diem nhin thay duoc, khong thi nguoi dung ban phim khong
   biet minh dang o dau. */
.nr-rail .nr-cards:focus-visible,
.nr-rail .nr-cases:focus-visible {
  outline: var(--nr-focus-width) solid var(--nr-primary);
  outline-offset: var(--nr-focus-offset);
}

/* Dai tu boc (newsroom-rail.js::boc) -- can lop dinh vi cho hai nut, va o
   desktop cac nhom nay van la LUOI nen nut se tu an (JS chi hien khi tran). */
.nr-rail--auto { position: relative; }

/* Cham dieu huong -- CSS Overflow 5. Chi Chromium tu 135 hieu; trinh duyet
   khac bo qua toan bo khoi nay, dai van cuon va van co nut, khong vo gi.
   Day la duong nang cap dung huong cho 2026: khi Safari/Firefox ho tro thi
   cham xuat hien ma khong phai them mot dong JS nao.
   Chi bat o dien thoai -- desktop da co nut hai ben va thay gan het the. */
@supports (scroll-marker-group: after) {
  @media (width <= 700px) {
    .nr-rail--auto > [data-js="rail-auto"],
    .nr-rail--auto > [data-rail-auto],
    .nr-rail > .nr-cards--rail {
      scroll-marker-group: after;
    }
    .nr-rail--auto > [data-js="rail-auto"]::scroll-marker-group,
    .nr-rail--auto > [data-rail-auto]::scroll-marker-group,
    .nr-rail > .nr-cards--rail::scroll-marker-group {
      display: flex;
      justify-content: center;
      gap: 6px;
      padding-top: var(--nr-space-3);
    }
    .nr-rail--auto > [data-js="rail-auto"] > *::scroll-marker,
    .nr-rail--auto > [data-rail-auto] > *::scroll-marker,
    .nr-rail > .nr-cards--rail > *::scroll-marker {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--nr-border-strong);
    }
    .nr-rail--auto > [data-js="rail-auto"] > *::scroll-marker:target-current,
    .nr-rail--auto > [data-rail-auto] > *::scroll-marker:target-current,
    .nr-rail > .nr-cards--rail > *::scroll-marker:target-current {
      background: var(--nr-primary-btn);
    }
  }
}