/* ==================================================================
   LỚP GIAO DIỆN "TƯƠI" — site-v3.css
   Chồng lên site.css + site-v2.css. Không thay thế, không sửa hai tệp kia.
   Tắt bằng cách đổi ô "Giao diện" trong CMS về `song-dong`.

   Vì sao có lớp này — đo trên trang thật ngày 24/09/2026:

     · Ba sắc nền cũ (trắng · #F2FBFC · #E4F7FA) tương phản nhau chỉ 1,05–1,11.
       Mắt người bắt đầu phân biệt từ ~1,20. Nghĩa là công chia 15 khối thành
       ba sắc nền gần như VÔ HÌNH — người xem thấy một dải trắng dài liên tục.
     · Trắng chiếm 45,5% diện tích; hai sắc xanh nhạt cộng lại chỉ 6,2%.
     · Cam — màu nhấn của thương hiệu — chỉ xuất hiện ở 5,9% phần tử,
       gần như chỉ nằm trên nút. Tức là đang không nhấn gì cả.
     · 13/15 khối dùng y hệt một khuôn, khối chủ lực trông như khối phụ.
   ================================================================== */

/* ---------------- 1. Thang nền — tính bằng số, không chọn bằng mắt ----------------

   Mỗi bậc liền kề cách nhau đúng 1,25 lần. Đây là mức vừa đủ để mắt thấy ranh
   giới khối mà không thành sọc vằn.

     trắng  #FFFFFF
       ↓ 1,25
     nhạt   #D4EAEE     ← nhịp chính, xen kẽ với trắng
       ↓ 1,25
     nhấn   #B1D5DE     ← khối cần dừng mắt. 1,56 so với trắng
     cam    #FFECCA     ← bậc riêng: bảng giá và lời mời cuối trang

   ⚠️ Chữ phụ cũ #5E7378 chỉ đạt 4,00:1 trên nền nhạt mới — DƯỚI chuẩn AA.
   Nên phải đổi cùng lúc, không thể chỉ đổi nền. Màu mới #445A6A đạt 7,20 trên
   trắng · 5,76 trên nhạt · 4,61 trên nhấn — qua hết. */
.t-v3 {
  --v3-nen-1: #ffffff;
  --v3-nen-2: #d4eaee;
  --v3-nen-3: #b1d5de;
  --v3-nen-cam: #ffecca;

  --text-3: #445a6a;          /* thay #5E7378 — xem lý do ở trên */

  --v3-vien-2: #b8dbe1;
  --v3-vien-3: #93c3ce;
  --v3-vien-cam: #f5d9a4;
}

/* Nhịp chính chạy theo VỊ TRÍ chẵn/lẻ, không theo tên lớp.

   Lần đầu tôi gán cả `--paper` lẫn `--tint` về cùng một nền mới. Sai: trên
   trang chủ có chỗ hai khối loại đó đứng liền nhau, thành ra hai mảng cùng
   màu dính vào nhau và ranh giới biến mất — đo được 1,00 đúng ở hai chỗ.

   Đếm theo vị trí thì hai khối liền kề LUÔN khác bậc, kể cả khi anh Thịnh
   đổi thứ tự khối trong CMS hay bật/tắt một khối nào đó. Khối có nền riêng
   (đậm, cam, mở đầu) được loại ra rồi tự khai nền của mình. */
.t-v3 main > section:not(.hero):not(.section--deep):not(.section--cam):not(.section--nhan):nth-of-type(odd) {
  background: var(--v3-nen-1);
}
.t-v3 main > section:not(.hero):not(.section--deep):not(.section--cam):not(.section--nhan):nth-of-type(even) {
  background: var(--v3-nen-2);
  border-top: 1px solid var(--v3-vien-2);
  border-bottom: 1px solid var(--v3-vien-2);
}

/* ---------------- 2. Khối nhấn — bậc nền thứ ba ----------------
   ⚠️ Bậc này CHỈ dùng cho khối ít chữ. Chữ thân bài --text-2 (#4E6A70) chỉ đạt
   3,71:1 ở đây, dưới chuẩn. Khối nhấn phải dùng --text (8,66) hoặc --text-3
   (4,61). Đừng đặt đoạn văn dài lên nền này. */
.t-v3 .section--nhan {
  background: linear-gradient(170deg, var(--v3-nen-3), var(--v3-nen-2) 72%);
  border-top: 1px solid var(--v3-vien-3);
  border-bottom: 1px solid var(--v3-vien-3);
}
.t-v3 .section--nhan p { color: var(--text); }

/* ---------------- 3. Bậc cam — dành cho tiền và lời mời ----------------
   Cam là màu hành động của thương hiệu. Trước đây nó chỉ nằm trên nút nên
   không dẫn được mắt đi đâu. Cho nó mang cả một khối, đúng hai chỗ khách cần
   dừng lại: bảng giá và lời mời cuối trang. */
.t-v3 .section--cam {
  background: linear-gradient(168deg, var(--v3-nen-cam), #fff8ec 78%);
  border-top: 1px solid var(--v3-vien-cam);
  border-bottom: 1px solid var(--v3-vien-cam);
}

/* ---------------- 4. Điểm nhấn cam, có kỷ luật ----------------
   Trần tự đặt: cam không vượt ~15% diện tích. Quá tay là rẻ tiền chứ không
   sinh động. Nên chỉ ba chỗ: số liệu lớn, từ khoá trong tiêu đề, vạch khối. */

/* 4a. Số liệu lớn — thứ khách nhớ được sau khi rời trang */
.t-v3 .statstrip .v,
.t-v3 .roi-num,
.t-v3 .big-num {
  background: linear-gradient(135deg, var(--brand-700), var(--brand));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 800;
}
/* Trình duyệt không hiểu background-clip:text thì chữ thành trong suốt =
   mất hẳn. Lùi về màu đặc — đậm hơn cam gốc để đạt chuẩn trên nền sáng. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .t-v3 .statstrip .v,
  .t-v3 .roi-num,
  .t-v3 .big-num { color: var(--brand-700); background: none; }
}

/* 4b. Từ khoá trong tiêu đề — gạch chân mềm, không phải bút dạ chói */
.t-v3 .section-head h2 em,
.t-v3 .hero h1 em {
  font-style: normal;
  background: linear-gradient(180deg, transparent 64%, rgba(255, 143, 0, .38) 64%);
  padding: 0 .06em;
}

/* 4c. Vạch dọc mở đầu khối — thay nhãn chữ nhỏ vốn dễ trôi qua mắt */
.t-v3 .section-head { position: relative; }
.t-v3 .section-head .eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  /* KHÔNG dùng --brand-700 (#B96400): đo ra 4,30:1 trên nền trắng, thiếu 0,2
     so với chuẩn AA cho chữ nhỏ 12px. #A05010 đạt 5,75 trên trắng và 4,60
     trên nền nhạt mới — qua cả hai bậc nền mà vẫn còn ra sắc cam. */
  color: #a05010;
}
.t-v3 .section-head .eyebrow::before {
  content: ''; width: 26px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--brand), var(--teal));
}

/* Khối trên nền đậm giữ nhãn sáng — cam #B96400 trên nền gần đen chỉ 2,4:1 */
.t-v3 .section--deep .section-head .eyebrow { color: var(--brand-200); }

/* ---------------- 5. Phân hạng khối ----------------
   Đo được: 13/15 khối dùng y hệt một khuôn (nhãn → tiêu đề → câu dẫn → lưới
   thẻ). Khối bảng giá và khối phụ trông giống nhau, nên người lướt nhanh không
   biết chỗ nào đáng dừng. Ba hạng, khác nhau ở ĐỘ NẶNG chứ không ở màu mè. */

/* Hạng 1 — khối chủ lực: tiêu đề to hơn, có khoảng thở rộng hơn */
.t-v3 .section--cam .section-head h2,
.t-v3 .section--deep .section-head h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  letter-spacing: -.028em;
}
.t-v3 .section--cam,
.t-v3 .section--deep { padding-block: clamp(58px, 7vw, 104px); }

/* Thẻ trên nền cam: nền trắng đặc để nổi hẳn khỏi nền, viền ấm */
.t-v3 .section--cam .card,
.t-v3 .section--cam .plan {
  background: #fff;
  border-color: var(--v3-vien-cam);
  box-shadow: 0 14px 34px -18px rgba(185, 100, 0, .32);
}
.t-v3 .section--cam .plan--hot {
  box-shadow: 0 20px 46px -18px rgba(185, 100, 0, .5);
  border-color: var(--brand-200);
}

/* Hạng 2 — khối thường trên nền nhạt: thẻ trắng, viền theo sắc nền */
.t-v3 .section--paper .card,
.t-v3 .section--tint .card { background: #fff; border-color: var(--v3-vien-2); }

/* Hạng 3 — khối bổ trợ trên nền trắng: giữ nhẹ, không cần làm gì thêm */

/* ---------------- 6. Chuyển động có tiết chế ----------------
   Trang cao gần 60.000px. Hiệu ứng nặng ở đây là tự bắn vào chân: vừa chậm
   vừa mệt mắt. Chỉ giữ ba thứ rẻ và có ích. */

/* 6a. Vạch màu chạy ngang khi khối vào tầm mắt — báo "khối mới bắt đầu" */
.t-v3 .section-head .eyebrow::before {
  transform-origin: left;
  transform: scaleX(0);
  transition: transform .5s cubic-bezier(.22, 1, .36, 1) .1s;
}
.t-v3 .section-head.da-hien .eyebrow::before { transform: scaleX(1); }

/* 6b. Thẻ trong cùng lưới hiện lệch nhịp nhau, không ập vào cùng lúc */
.t-v3 .grid > .reveal { transition-delay: calc(var(--i, 0) * 70ms); }

/* 6c. Số liệu lớn: nảy nhẹ một nhịp khi vừa đếm xong */
@keyframes v3Nay { 0% { transform: scale(1); } 45% { transform: scale(1.07); } 100% { transform: scale(1); } }
.t-v3 .dem-xong { animation: v3Nay .42s cubic-bezier(.34, 1.56, .64, 1); }

/* Ai đã tắt hiệu ứng trong hệ điều hành thì tôn trọng — hiện thẳng, không động đậy */
@media (prefers-reduced-motion: reduce) {
  .t-v3 .section-head .eyebrow::before { transform: scaleX(1); transition: none; }
  .t-v3 .grid > .reveal { transition-delay: 0s; }
  .t-v3 .dem-xong { animation: none; }
}

/* ---------------- 7. Vá chỗ chữ tụt chuẩn vì nền đậm lên ----------------
   Nền nhạt mới tối hơn nền cũ, nên vài chỗ dùng màu chữ mờ phải chỉnh theo.
   Đo từng chỗ, không đoán. */
.t-v3 .section--paper .muted,
.t-v3 .section--tint .muted { color: var(--text-3); }   /* #445A6A — 5,76:1 trên nền nhạt */
.t-v3 .section--nhan .muted { color: var(--text); }     /* nền nhấn chỉ dùng mực đậm */

/* ---------------- 8. Vá lỗi tương phản có sẵn ----------------
   Nhãn "Phổ biến" trên thẻ gói: chữ trắng trên nền cam #FF8F00 chỉ đạt
   2,29:1 — hỏng sẵn từ trước, ở CẢ ba lớp giao diện, không phải do lớp này
   gây ra. Chữ 11px cần 4,5. Giữ nguyên nền cam sáng cho bắt mắt, đổi chữ
   sang nâu đậm: 4,64:1.
   ⚠️ Hai lớp `gon` và `song-dong` VẪN CÒN lỗi này — chưa vá vì đã hứa không
   đụng vào chúng. */
.t-v3 .plan-badge { color: #503a28; }