/* Khối FarmMax — port style scoped của ProductFarm.vue. Mọi selector bọc dưới [data-ex-section="farm"] (thay data-v của Vue). */

/* ───── Xếp dọc, không ghim: dưới 992px + màn dọc mọi cỡ (ngược PIN_MQ) ─────
   Hộp máy thấp + thẻ gọn để PHẦN MÁY ĐANG DIỄN và THẺ ĐANG CHỌN cùng nằm trong một màn (rà 21/10). */
[data-ex-section="farm"] .ex-farm-photo {
  position: relative;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 4 / 3;
  padding: 0 20px 28px;
}
/* Cao theo 16:9 nhưng không quá 460px (iPad dọc) — khai bằng height: aspect-ratio + max-height gộp lại thì trình duyệt co
   luôn BỀ NGANG ảnh. */
@media (min-width: 576px) { [data-ex-section="farm"] .ex-farm-photo { aspect-ratio: auto; height: min(56.25vw, 460px); padding: 0 32px 40px; } }
[data-ex-section="farm"] .ex-farm-brand {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px 20px 0;
}
@media (min-width: 576px) { [data-ex-section="farm"] .ex-farm-brand { padding: 36px 32px 0; } }
@media not all and (min-width: 992px) and (orientation: landscape) {
  /* Đủ bề ngang (≥480px) thì nút Tìm hiểu thêm lên cùng hàng logo, sát phải. */
  [data-ex-section="farm"] .ex-farm-brand { container-type: inline-size; }
  @container (min-width: 480px) {
    [data-ex-section="farm"] .ex-farm-copy { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px 24px; }
    [data-ex-section="farm"] .ex-farm-copy > .ex-farm-lead { display: contents; }
    [data-ex-section="farm"] .ex-farm-logo { grid-area: 1 / 1; margin-bottom: 0; }
    [data-ex-section="farm"] .ex-farm-intro { grid-area: 2 / 1 / 3 / 3; max-width: 640px; }
    [data-ex-section="farm"] .ex-farm-copy > a { grid-area: 1 / 2; margin-top: 0; }
  }
  /* Biểu tượng to ở đáy thẻ chỉ dùng khi ghim; xếp dọc dùng bản nhỏ ngang số. */
  [data-ex-section="farm"] .ex-farm-ico-lg { display: none; }
  [data-ex-section="farm"] .ex-farm-card button > :nth-last-child(2) { margin-bottom: 0; }
}
[data-ex-section="farm"] .ex-farm-phonebox {
  position: relative;
  height: 340px;
  margin-top: 28px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: flex-start; /* máy giữ đúng tỉ lệ 9:19,5 và bị mép đáy hộp cắt */
  background: linear-gradient(180deg, #ffffff 0%, #f2f6ef 100%);
  border-bottom: 1px solid rgba(11, 31, 29, 0.08);
}
[data-ex-section="farm"] .ex-farm-phonebox .ex-phone { width: 270px; margin-top: 24px; }
@media (min-width: 576px) {
  [data-ex-section="farm"] .ex-farm-phonebox { height: 420px; margin-top: 28px; }
  [data-ex-section="farm"] .ex-farm-phonebox .ex-phone { width: 290px; margin-top: 28px; }
}
@media (min-width: 768px) {
  [data-ex-section="farm"] .ex-farm-phonebox { height: 470px; }
  [data-ex-section="farm"] .ex-farm-phonebox .ex-phone { width: 330px; }
}
[data-ex-section="farm"] .ex-farm-cards {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 16px 20px 44px;
  scroll-padding-inline: 20px;
}
[data-ex-section="farm"] .ex-farm-cards::-webkit-scrollbar { display: none; }
@media (min-width: 576px) { [data-ex-section="farm"] .ex-farm-cards { padding: 20px 32px 56px; scroll-padding-inline: 32px; } }
[data-ex-section="farm"] .ex-farm-card {
  position: relative;
  flex: 0 0 min(320px, 86%); /* vẫn ló mép thẻ kế để biết vuốt được */
  scroll-snap-align: start;
  border: 3px solid transparent; /* chừa chỗ cho viền màu chạy vòng của thẻ đang diễn */
  border-radius: 20px;
  background: linear-gradient(180deg, #f1f3f3 0%, #fafbfb 100%) padding-box;
  padding: 20px 22px 22px;
  opacity: 0.45;
  transition: opacity 0.3s ease;
}
/* Thẻ đang diễn: nền trắng + viền gradient 3px CHẠY VÒNG (conic-gradient xoay theo `--ex-ang`), không bóng (user 19/10). */
@property --ex-ang {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
[data-ex-section="farm"] .ex-farm-card::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  padding: 3px;
  background: conic-gradient(from var(--ex-ang), #2a886f, #74c043, #c8f533, #4f8fe8, #1866d3, #2a886f);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
[data-ex-section="farm"] .ex-farm-card.is-on {
  opacity: 1;
  background: #ffffff padding-box;
}
[data-ex-section="farm"] .ex-farm-card.is-on::before { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  [data-ex-section="farm"] .ex-farm-card.is-on::before { animation: ex-border-spin-farm 4s linear infinite; }
}
@keyframes ex-border-spin-farm { to { --ex-ang: 360deg; } }
[data-ex-section="farm"] .ex-farm-num {
  font-size: 48px;
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: rgba(11, 31, 29, 0.14);
  transition: color 0.4s ease;
}
[data-ex-section="farm"] .ex-farm-rule {
  display: block;
  width: 100%;
  height: 1px;
  margin: 16px 0 14px;
  background: rgba(11, 31, 29, 0.1);
}
[data-ex-section="farm"] .ex-farm-ico-sm { flex-shrink: 0; }
[data-ex-section="farm"] .ex-farm-ico {
  /* Màu ĐẶC, không alpha: nét SVG chồng nhau sẽ cộng độ mờ thành vệt đậm (user 19/10). */
  color: #c6cdcb;
}
/* Thẻ đang diễn: số thứ tự tô xanh chuyển màu. */
[data-ex-section="farm"] .ex-farm-card.is-on .ex-farm-num {
  background-image: linear-gradient(100deg, #8fcf45 0%, #45b57a 50%, #279240 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding: 0.18em 0.04em;
  margin: -0.18em -0.04em;
}

/* ───── Từ 992px + màn nằm ngang (PIN_MQ): sân khấu ghim, đặt theo % bề ngang (số đo từ bản phác user, khung 1920) ───── */
@media (min-width: 992px) and (orientation: landscape) {
  [data-ex-section="farm"] .ex-farm-stage {
    /* Mức cao tối thiểu ≤ phần màn dưới header của laptop thấp (1366×768 ≈ 601px). */
    --h: 540px;
    --pw: 40vw;   /* bề ngang cột ảnh */
    --tl: 40px;   /* lề tít — thẳng logo header (.ex-fluid) */
    --phx: 31vw;  /* mép trái điện thoại */
    --phw: 24vw;  /* bề ngang điện thoại */
    --pht: 26%;   /* đỉnh điện thoại so với khối */
    --cx: 57.5vw; /* ô đầu của dải thẻ */
    --cw: 27vw;
    --cw-c: 30vw; /* bề ngang thẻ khi is-wide */
    /* Bề ngang thẻ THẬT: --cw, thu lại theo --cw-fit (JS) để thẻ 05 nằm trọn bên phải thẻ 04. */
    --cwe: min(var(--cw), var(--cw-fit, 100vw));
    --cg: 2vw;
    --ct: 38%;
    position: sticky;
    height: max(var(--h), calc(100vh - 56px)); /* 56 = HEADER_PX trong farm.js */
    overflow: hidden;
  }
  [data-ex-section="farm"] .ex-farm-photo {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--pw);
    aspect-ratio: auto;
    height: auto;
    align-items: flex-start;
    padding: 56px 0 0 var(--tl);
  }
  /* Tít không lấn sang điện thoại. */
  [data-ex-section="farm"] .ex-farm-title { max-width: calc(var(--phx) - var(--tl) - 24px); }
  [data-ex-section="farm"] .ex-farm-brand {
    position: absolute;
    top: 52px;
    left: var(--cx); /* thẳng mép trái dải thẻ */
    right: 40px;
    flex-direction: row;
    align-items: center;
    padding: 0;
    gap: 24px;
  }
  /* Giới thiệu trái + nút phải cùng hàng; không đủ chỗ thì nút tự xuống dưới chữ, vẫn sát phải. */
  [data-ex-section="farm"] .ex-farm-copy {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 32px;
  }
  [data-ex-section="farm"] .ex-farm-copy > .ex-farm-lead { flex: 0 1 520px; min-width: 300px; }
  [data-ex-section="farm"] .ex-farm-copy > a { flex-shrink: 0; margin-top: 0; }
  /* Cột hẹp: nút lên CÙNG HÀNG LOGO, vẫn sát phải — cụm thấp đi ~70px (21/10). */
  [data-ex-section="farm"] .ex-farm-brand { container-type: inline-size; }
  @container (max-width: 759px) {
    [data-ex-section="farm"] .ex-farm-copy { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px 24px; }
    [data-ex-section="farm"] .ex-farm-copy > .ex-farm-lead { display: contents; }
    [data-ex-section="farm"] .ex-farm-logo { grid-area: 1 / 1; margin-bottom: 0; }
    [data-ex-section="farm"] .ex-farm-intro { grid-area: 2 / 1 / 3 / 3; max-width: 600px; }
    [data-ex-section="farm"] .ex-farm-copy > a { grid-area: 1 / 2; }
  }
  [data-ex-section="farm"] .ex-farm-phonebox {
    position: absolute;
    left: var(--phx);
    top: var(--pht);
    bottom: 0;
    width: max(min(var(--phw), 300px), min(var(--phw), var(--fit, 9999px))); /* 300 = PHONE_MIN_W */
    height: auto;
    margin: 0;
    overflow: visible;
    display: block;
    background: none;
    border: 0;
    z-index: 2;
  }
  [data-ex-section="farm"] .ex-farm-phonebox .ex-phone { width: 100%; margin: 0; }
  [data-ex-section="farm"] .ex-farm-cards {
    position: absolute;
    inset: 0;
    display: block;
    overflow: visible;
    padding: 0;
    pointer-events: none;
  }
  [data-ex-section="farm"] .ex-farm-num { font-size: 56px; }
  [data-ex-section="farm"] .ex-farm-rule { margin: 22px 0 18px; }
  [data-ex-section="farm"] .ex-farm-ico-sm { display: none; }
  [data-ex-section="farm"] .ex-farm-card {
    position: absolute;
    left: var(--cx);
    top: var(--ct);
    bottom: var(--cb, 40px); /* đáy thẳng đáy điện thoại, xem layoutDesktop */
    width: var(--cwe);
    padding: 30px 30px 28px;
    pointer-events: auto;
    opacity: 1;
    /* transform + opacity chạy theo cuộn (inline) nên KHÔNG chuyển động. */
    transition: none;
    will-change: transform, opacity;
  }
}
/* Màn thấp: tag "Và nhiều tính năng…" thu gọn để không lòi khỏi đáy thẻ. */
@media (min-width: 992px) and (orientation: landscape) and (max-height: 820px) {
  [data-ex-section="farm"] .ex-farm-card .ex-more-label { gap: 8px; padding: 6px 12px; font-size: 14px; }
}
/* Màn quá thấp cho nội dung thẻ (layoutDesktop gắn): thẻ gọn lại, biểu tượng lên ngang số — chữ giữ nguyên cỡ. */
[data-ex-section="farm"] .ex-farm-stage.is-compact .ex-farm-card { padding: 24px 26px 22px; }
[data-ex-section="farm"] .ex-farm-stage.is-compact .ex-farm-num { font-size: 44px; }
[data-ex-section="farm"] .ex-farm-stage.is-compact .ex-farm-rule { margin: 16px 0 14px; }
[data-ex-section="farm"] .ex-farm-stage.is-compact .ex-farm-ico-lg { display: none; }
[data-ex-section="farm"] .ex-farm-stage.is-compact .ex-farm-ico-sm { display: block; }
[data-ex-section="farm"] .ex-farm-stage.is-compact .ex-farm-card button > :nth-last-child(2) { margin-bottom: 0; }
[data-ex-section="farm"] .ex-farm-stage.is-wide { --cwe: var(--cw-c); }
[data-ex-section="farm"] .ex-farm-stage.is-tight { --cwe: calc(100vw - var(--cx) - 24px); }

/* Thẻ 05 (tóm tắt): sáng (`is-lit`) cùng lúc thẻ 04 diễn — nền trắng, viền xám nhạt, KHÔNG viền màu chạy vòng. */
[data-ex-section="farm"] .ex-farm-card.is-lit {
  opacity: 1;
  background: #ffffff padding-box;
  border-color: #e3e9e7;
}
[data-ex-section="farm"] .ex-farm-rule--more { margin-top: 18px; }
[data-ex-section="farm"] .ex-farm-more-list { display: flex; flex-direction: column; gap: 12px; }
/* đủ mạnh để thắng quy tắc "bỏ lề đáy phần tử áp chót" của thẻ 01–04 */
[data-ex-section="farm"] .ex-farm-card.ex-farm-card--more button > .ex-farm-more-list { margin-bottom: 24px; }
[data-ex-section="farm"] .ex-farm-stage.is-compact .ex-farm-card.ex-farm-card--more button > .ex-farm-more-list { margin-bottom: 18px; }
[data-ex-section="farm"] .ex-farm-more-item { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.45; color: #29403d; }
[data-ex-section="farm"] .ex-farm-more-check { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; color: #3d9f37; }
[data-ex-section="farm"] .ex-farm-more-tag { margin-top: auto; align-self: flex-start; }
@media (min-width: 1600px) { [data-ex-section="farm"] .ex-farm-more-item { font-size: 16px; } }
[data-ex-section="farm"] .ex-farm-stage.is-compact .ex-farm-more-list { gap: 9px; }
@media (min-width: 1200px) and (orientation: landscape) {
  [data-ex-section="farm"] .ex-farm-stage {
    --h: 560px;
    --pw: 38vw;
    --phx: 29vw;
    --phw: 23vw;
    --cx: 54.5vw;
    --cw: 22vw;
    --cw-c: 26vw;
    --cg: 2vw;
  }
}
@media (min-width: 1600px) and (orientation: landscape) {
  [data-ex-section="farm"] .ex-farm-stage {
    --h: 720px;
    --pw: 39vw;
    --tl: 64px;
    --phx: 27.3vw;
    --phw: min(23.5vw, 420px);
    --pht: 25%;
    --cx: 53.3vw;
    --cw: 18.1vw;
    --cw-c: 21vw;
    --cg: 1.8vw;
  }
  [data-ex-section="farm"] .ex-farm-photo { padding-top: 64px; }
  [data-ex-section="farm"] .ex-farm-brand { top: 60px; right: 64px; }
  [data-ex-section="farm"] .ex-farm-num { font-size: 68px; }
}

/* Khung điện thoại dựng bằng CSS (không ảnh) — tỉ lệ 9:19,5 như máy thật. */
[data-ex-section="farm"] .ex-phone {
  aspect-ratio: 9 / 19.5;
  border-radius: 46px;
  background: #0b1220;
  padding: 12px;
  box-shadow:
    0 0 0 1.5px #2a3446,
    0 50px 90px -30px rgba(11, 31, 29, 0.55),
    0 18px 36px -18px rgba(11, 31, 29, 0.35);
}
@media (min-width: 1200px) { [data-ex-section="farm"] .ex-phone { border-radius: 54px; } }
[data-ex-section="farm"] .ex-phone-screen {
  --b: 240px;
  --s: 1;
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 36px;
  background: #fff;
}
@media (min-width: 1200px) { [data-ex-section="farm"] .ex-phone-screen { border-radius: 44px; } }
/* Màn dựng ở bề rộng gốc `--b` rồi phóng `--s` (JS đo — fitScreen). Cao = cao màn / hệ số. */
[data-ex-section="farm"] .ex-phone-canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--b);
  height: calc(100% / var(--s));
  transform: scale(var(--s));
  transform-origin: 0 0;
}

[data-ex-section="farm"] .ex-screen {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(10px) scale(0.985);
  transition: opacity 0.45s ease, transform 0.45s ease;
  pointer-events: none;
}
[data-ex-section="farm"] .ex-screen.is-on {
  opacity: 1;
  transform: none;
}
[data-ex-section="farm"] .ex-screen { overflow: hidden; }
[data-ex-section="farm"] .ex-wave { height: 3px; }
/* Ô AI vừa điền: chữ bật lên. */
[data-ex-section="farm"] .ex-pop { animation: ex-pop-farm 0.35s cubic-bezier(.3, 1.5, .6, 1) both; }
@keyframes ex-pop-farm {
  from { opacity: 0; transform: translateY(3px) scale(0.92); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  [data-ex-section="farm"] .ex-wave { animation: ex-wave-farm 0.9s ease-in-out infinite alternate; }
  [data-ex-section="farm"] .ex-scanline { animation: ex-scan-farm 1.6s ease-in-out infinite alternate; }
}
@keyframes ex-wave-farm { to { height: 14px; } }
@keyframes ex-scan-farm {
  from { top: 8%; }
  to { top: 90%; }
}