/* =========================================================================
   fcar.css — BANG CHUYEN TINH NANG (khu "Tính năng" o trang chu)

   Khac bang chuyen nhan xet (.rail trong pages.css) o ba diem, va ca ba
   deu do yeu cau: THE TO HAN (2 cai mot man hinh thay vi 3), CO HANG CHAM
   de nhay thang toi the bat ky, va MO TA BI CAT BOT kem nut "Xem thêm".

   Van dung cuon ngang + scroll-snap chu KHONG tu tinh toa do transform:
     · vuot bang ngon tay tren dien thoai / tablet chay san, khong viet them;
     · the cao thap khac nhau van dung;
     · tat JS thi van cuon tay duoc, chi mat hai nut va tu chay.
   ========================================================================= */

.fcar { position: relative; }

/* ── Cai cuon ────────────────────────────────────────────────────────────
   `data-zone` tro thang vao day: blocks.js xoa/ve lai ruot cua chinh phan
   tu nay, nen o day CHI duoc dat cach bay the, khong dat gi khac. */
.fcar__rail {
  display: grid;
  grid-auto-flow: column;
  /* Dien thoai: MOT the mot man hinh. Chia 2 tren man hinh nho thi chu con
     nho hon ca luoi cu — nguoc han y "cho to ra". */
  grid-auto-columns: 100%;
  gap: var(--gap);

  /* MAC DINH the cao bang nhau: hai the to nam canh nhau ma le cao le thap
     thi nhin nhu lam do. Rieng luc co the dang mo rong ("Xem thêm") thi doi
     sang `start` — xem `.fcar__rail.co-mo` ben duoi. */
  align-items: stretch;

  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;

  /* Cho bong do (--sh-glow) cua the khong bi cat cut o mep tren/duoi. */
  padding: 4px 2px 10px;

  /* An thanh cuon: da co hai nut, hang cham va cu vuot roi. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.fcar__rail::-webkit-scrollbar { display: none; }

.fcar__rail > * { scroll-snap-align: start; }

/* May dang bat "giam chuyen dong": bo cuon muot, nhay thang. */
@media (prefers-reduced-motion: reduce) {
  .fcar__rail { scroll-behavior: auto; }
}

/* ── The to ra ───────────────────────────────────────────────────────────
   Chi to trong bang chuyen, khong dung de len the .feature o cho khac. */
.fcar__rail .feature {
  padding: clamp(22px, 2.4vw, 34px);
  gap: 18px;
  height: 100%;              /* cao bang nhau khi chua mo cai nao */
}

/* 🔥 CO MOT THE DANG MO RA thi CA HANG chuyen sang "cao theo noi dung".
   Khong lam vay thi the vua bung ra keo cao ca hang, va the ben canh —
   von chi hai dong chu — thanh mot o rong hoac gap doi chieu cao, trong
   nhu bi loi. Bat duoc bang bai thu 03/09/2026. */
.fcar__rail.co-mo { align-items: start; }
.fcar__rail.co-mo .feature { height: auto; }
.fcar__rail .feature__ico {
  width: 62px; height: 62px;
  border-radius: 16px;
}
.fcar__rail .feature__ico svg { width: 28px; height: 28px; }
.fcar__rail .feature h3 { font-size: clamp(1.15rem, 1.5vw, 1.42rem); line-height: 1.3; }
.fcar__rail .feature p  { font-size: clamp(.92rem, 1.05vw, 1.02rem); line-height: 1.65; }

/* Tablet tro len: HAI the mot man hinh. */
@media (min-width: 720px) {
  .fcar__rail { grid-auto-columns: calc(50% - var(--gap) / 2); }
}

/* ── Cat bot mo ta + nut "Xem thêm" ──────────────────────────────────────
   Cat bang CSS (line-clamp) chu khong cat chuoi trong JS: cat chuoi thi
   moi co chu do rong hep khac nhau lai hong mot kieu, con day thi trinh
   duyet tu do dung so DONG that. Nut chi hien khi that su bi cat — JS do
   scrollHeight roi moi gan. */
.fcar__rail .feature p.fcar__mo {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
.fcar__rail .feature.is-mo p.fcar__mo {
  display: block;
  overflow: visible;
}

.fcar__more {
  align-self: start;
  margin: -6px 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.fcar__more:hover { text-decoration: underline; }
.fcar__more::after {
  content: "";
  width: 6px; height: 6px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--dur-fast) var(--ease);
}
.feature.is-mo .fcar__more::after { transform: translateY(1px) rotate(-135deg); }

/* ── Hang dieu khien ─────────────────────────────────────────────────────
   MAC DINH (may nho, uu tien dien thoai): hai nut nam ngay tren hang, kem
   hai ben hang cham. Man hinh rong moi day chung ra hai suon. */
.fcar__ctrl {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
}

/* ── Hai nut tien / lui ─────────────────────────────────────────────────── */
.fcar__nav {
  position: static;
  flex: none;
  z-index: 3;

  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: var(--hair) solid var(--border-strong);
  border-radius: 50%;
  background: var(--card);
  color: var(--text-muted);
  cursor: pointer;
  box-shadow: var(--sh-sm);
  transition: color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              opacity var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.fcar__nav:hover:not(:disabled) {
  color: var(--accent);
  border-color: var(--accent);
  transform: scale(1.06);
}
/* Het duong: mo han va khoa, khong de nguoi dung bam vao khoang khong. */
.fcar__nav:disabled { opacity: .3; cursor: default; }

/* 🔥 TU 720px TRO LEN moi day nut ra hai suon. Duoi nguong do man hinh chi
   vua MOT the, day ra suon la nut nam de thang len chu — tren may 390px no
   che dung chu dau moi dong. Bat duoc khi soi anh chup 03/09/2026.

   ⚠️ VA PHAI CHUA CHO CHO NUT, khong duoc de no de len the. Khung noi dung
   rong toi da 1180px (--maxw), nen o khoang 720–1239px hai ben KHONG con
   thua chox: bop `.fcar` vao 54px moi ben de nut co cho dung rieng. Lan dau
   viet dat `left:-10px` o moi be rong — the o 820px chi co 22px dem trong,
   nut thoc vao 34px nen an mat chu cai dau moi dong. */
@media (min-width: 720px) {
  .fcar { padding-inline: 54px; }
  .fcar__nav {
    position: absolute;
    top: calc(50% - 26px);
    transform: translateY(-50%);
  }
  .fcar__nav:hover:not(:disabled) { transform: translateY(-50%) scale(1.06); }
  .fcar__nav--prev { left: 0; }
  .fcar__nav--next { right: 0; }
}

/* Tu 1240px thi ngoai khung noi dung da du le: tra be ngang lai cho cai
   cuon, day nut han ra ngoai. Nut van thoc vao 18px nhung o be rong nay
   the co gan 30px dem, nen no nam tron trong phan dem — khong cham chu. */
@media (min-width: 1240px) {
  .fcar { padding-inline: 0; }
  .fcar__nav--prev { left: -26px; }
  .fcar__nav--next { right: -26px; }
}

/* ── Hang cham ───────────────────────────────────────────────────────────
   Vung bam RONG HON cham nhieu (44x28) — dau ngon tay khong nham duoc mot
   cham 8px. Cai nhin thay la ::before, con nut la vung bam that. */
.fcar__dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px;
}
.fcar__dot {
  width: 26px; height: 28px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.fcar__dot::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--border-strong);
  transition: background-color var(--dur-fast) var(--ease),
              width var(--dur) var(--ease-spring);
}
.fcar__dot:hover::before { background: var(--text-muted); }
.fcar__dot[aria-selected="true"]::before {
  width: 22px;
  border-radius: 4px;
  background: var(--accent);
}

/* Mot the mot cham thi khong con la dieu huong nua — an di. */
.fcar__dots:empty { display: none; }

/* ── Nut sua the cua SuperAdmin ──────────────────────────────────────────
   `.sb-add` (o Thêm thẻ) la mot con cua rail nen cung thanh mot o truot.
   Cho no cao bang the that de hang khong bi lech. */
.fcar__rail .sb-add { min-height: 190px; }