/* ============================================================
   Cantaloupe - Trang chủ mới (thư mục DUALUOI_WEB, làm 02/11/2026)
   Lấy Ý TƯỞNG bố cục, màu, kiểu chữ, cách bo góc từ 2 mẫu Wix người dùng chọn (wh-1198 "tuyển dụng",
   wh-1197 "nhân sự"); tự làm lại bằng code, ảnh và chữ của nhóm, không chép ảnh, chữ hay code của Wix.
   Chỉ áp cho trang chủ (body class="tc-moi"). Hiệu ứng khi lướt ở js/trang-chu-moi.js.
   ============================================================ */

.tc-moi {
  --tc-den: #1d1d1f;
  --tc-chu: #3d3d3f;
  --tc-kem: #f6f1e7;          /* nền kem (mẫu 1) */
  --tc-be: #e8e0d6;           /* nền be phần "Vì sao chọn" (mẫu 2) */
  --tc-kem-hong: #faf6f1;     /* thẻ kem hồng (mẫu 2) */
  --tc-cam: #ea7317;          /* điểm nhấn: cam dưa của web (mẫu 2 dùng đỏ cam) */
  --tc-dao: #f7a46d;
  --tc-xam: #cbc6be;
  --tc-xam-dam: #4a4a4a;
  --tc-dam: 'Be Vietnam Pro', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  --tc-serif: 'Lora', Georgia, 'Times New Roman', serif;
  background: var(--tc-kem);
  font-family: var(--tc-dam);
  color: var(--tc-den);
}
.tc-serif { font-family: var(--tc-serif); font-weight: 500; letter-spacing: -0.01em; }

/* ---------- Thanh menu trên ảnh bìa: chữ đen, nút đen (mẫu 1) ---------- */
.tc-moi .site-header:not(.scrolled) .brand,
.tc-moi .site-header:not(.scrolled) .nav-links a,
.tc-moi .site-header:not(.scrolled) .menu-toggle { color: var(--tc-den); }
.tc-moi .site-header:not(.scrolled) .nav-links a:hover { background: rgba(29,29,31,.07); color: var(--tc-den); }
.tc-moi .site-header:not(.scrolled) .nav-links a.active { background: rgba(29,29,31,.09); color: var(--tc-den); }
.tc-moi .site-header .btn-ghost,
.tc-moi .site-header:not(.scrolled) .btn-ghost { color: var(--tc-den); border-color: var(--tc-den); border-radius: 6px; }
.tc-moi .site-header .btn-ghost:hover { background: rgba(29,29,31,.06); }
.tc-moi .site-header .btn-primary { background: var(--tc-den); border-radius: 6px; }
.tc-moi .site-header .btn-primary:hover { background: #000; }
.tc-moi .site-header.scrolled { background: var(--tc-kem); box-shadow: 0 1px 0 rgba(29,29,31,.08); }
/* Menu trải hết bề ngang: logo thẳng hàng với tiêu đề lớn của ảnh bìa (như mẫu 1) */
.tc-moi .site-header .container { max-width: none; padding: 0 clamp(20px, 3.2vw, 56px); }

/* ---------- Nút ---------- */
.tc-nut { display: inline-flex; align-items: center; gap: 8px; font-family: var(--tc-dam); font-weight: 600; font-size: 15px;
  padding: 13px 22px; text-decoration: none; transition: background .2s, color .2s, transform .15s; }
.tc-nut:hover { text-decoration: none; transform: translateY(-1px); }
.tc-nut .ic-svg { width: 18px; height: 18px; }
.tc-nut-vien { border: 1.5px solid var(--tc-den); color: var(--tc-den); border-radius: 6px; }
.tc-nut-vien:hover { background: var(--tc-den); color: #fff; }
.tc-nut-den { background: var(--tc-den); color: #fff; border-radius: 6px; }
.tc-nut-den:hover { background: #000; color: #fff; }
.tc-nut-xam { background: var(--tc-xam-dam); color: #fff; border-radius: 999px; padding: 13px 34px; }
.tc-nut-xam:hover { background: #2f2f2f; color: #fff; }
.tc-nut-cam { background: var(--tc-cam); color: #fff; border-radius: 999px; padding: 14px 34px; }
.tc-nut-cam:hover { background: #cf640f; color: #fff; }
.tc-cuoi-phan { margin-top: 56px; }

/* ---------- 1. Ảnh bìa (kiểu mẫu 1): ảnh tràn, lớp kem mờ bên trái, tiêu đề chữ đen rất to.
   Người dùng không thích ô vuông xanh xám nên bỏ; lời giới thiệu + 2 nút đặt ngay dưới tiêu đề như bố cục ảnh bìa cũ ---------- */
.tc-bia { position: relative; min-height: max(640px, 100vh); overflow: hidden; display: flex; align-items: center; }
.tc-bia-anh { position: absolute; inset: 0; }
.tc-bia-anh img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 55%; transform: scale(1.08);
  animation: tcBiaVao 1.8s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes tcBiaVao { to { transform: scale(1); } }
/* Lớp kem mờ bên trái và phía trên để chữ đen đọc rõ trên nền lá; quả dưa bên phải vẫn rõ */
.tc-bia-anh::after { content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(246,241,231,.75) 0, rgba(246,241,231,0) 140px),
    linear-gradient(90deg, rgba(246,241,231,.95) 0%, rgba(246,241,231,.85) 32%, rgba(246,241,231,.35) 54%, rgba(246,241,231,0) 66%); }
.tc-bia-chu { position: relative; z-index: 1; padding: 110px clamp(20px, 3.2vw, 56px) 60px; }
.tc-bia h1 { font-family: var(--tc-dam); font-weight: 700; font-size: clamp(40px, 4.7vw, 86px); line-height: 1.08;
  letter-spacing: -0.035em; color: var(--tc-den); margin: 0 0 24px; max-width: min(900px, 62vw); }
.tc-bia h1 .tc-nhan-manh { color: #1f5a37; white-space: nowrap; }
.tc-bia-loi { font-size: clamp(17px, 1.3vw, 21px); line-height: 1.6; font-weight: 500; color: var(--tc-chu); max-width: 600px; margin: 0 0 30px; }
.tc-bia-nut { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- Tiêu đề phần căn giữa, chữ có chân (mẫu 2) ---------- */
.tc-dau-giua { text-align: center; max-width: 1100px; margin: 0 auto 64px; }   /* rộng để tiêu đề nằm dài, ít dòng */
.tc-nhan { display: inline-block; font-family: var(--tc-dam); font-size: 13px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tc-cam); margin-bottom: 14px; }
.tc-dau-giua h2 { font-size: clamp(34px, 4.4vw, 66px); line-height: 1.14; color: var(--tc-den); margin: 0 0 18px; text-wrap: balance; }
.tc-dau-giua p { font-size: 18px; line-height: 1.65; color: var(--tc-chu); max-width: 860px; margin: 0 auto; text-wrap: pretty; }   /* dòng dài, không để 1-2 chữ rớt xuống dòng cuối */

/* ---------- 2. Vì sao chọn (mẫu 2: thẻ kem bo góc lớn, ô biểu tượng cam, so le) ---------- */
.tc-vi-sao { background: var(--tc-be); padding: 130px 0 120px; }
.tc-ba-cot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1120px; margin: 0 auto; align-items: start; }
.tc-cot { display: flex; flex-direction: column; gap: 22px; }
.tc-cot.lech { margin-top: 120px; }
.tc-cot-nhan { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #74695e; padding-left: 8px; }
.tc-the { background: var(--tc-kem-hong); border-radius: 30px; padding: 26px 28px 30px; min-height: 290px; display: flex; flex-direction: column;
  transition: translate .3s, box-shadow .3s; }
/* Dùng "translate" riêng (không đụng "transform" của hiệu ứng hiện dần) */
.tc-the:hover { translate: 0 -4px; box-shadow: 0 18px 40px rgba(60,45,30,.10); }
.tc-o-ic { width: 54px; height: 54px; border-radius: 15px; background: var(--tc-cam); color: #fff; display: grid; place-items: center; font-size: 24px; }
.tc-o-ic .ic-svg { width: 26px; height: 26px; color: #fff; stroke-width: 1.9; }
.tc-the h3 { font-family: var(--tc-serif); font-weight: 500; font-size: 26px; line-height: 1.22; color: var(--tc-den); margin: auto 0 10px; padding-top: 44px; }
.tc-the p { font-size: 15.5px; line-height: 1.62; color: var(--tc-chu); margin: 0; }

/* ---------- 3. 6 giai đoạn (mẫu 2 "The Aetherium Method": các ô ghép so le). Khung ảnh nằm ngang 16:10
   cho khớp ảnh giai đoạn (1200x750), người dùng yêu cầu 02/11/2026 ---------- */
.tc-giai-doan { background: #fff; padding: 130px 0 120px; }
.tc-ghep { --gd-mau: #ec4899; position: relative; width: min(900px, 100%); height: 480px; margin: 0 auto; }
.tc-ghep > * { position: absolute; }
.gh-khoi { left: 0; top: 110px; width: 310px; height: 280px; border-radius: 34px;
  background: color-mix(in srgb, var(--gd-mau) 30%, #fff); transition: background .7s ease; }
.gh-anh { left: 30px; top: 60px; width: 470px; height: 294px; border-radius: 34px; overflow: hidden; background: #ececec;
  box-shadow: 0 20px 50px rgba(0,0,0,.10); }
.gh-anh img { width: 100%; height: 100%; object-fit: cover; transition: opacity .45s ease, transform 1.2s ease; }
.gh-anh img.dang-doi { opacity: 0; transform: scale(1.04); }
.gh-xam { left: 530px; top: 0; width: 140px; height: 125px; border-radius: 26px; background: var(--tc-xam); display: grid; place-items: center;
  color: #3a3a3a; font-size: 50px; }
.gh-xam .ic-svg { width: 64px; height: 64px; stroke-width: 1.6; }
.gh-the { left: 574px; top: 96px; width: 326px; border-radius: 28px; background: var(--tc-kem-hong); padding: 24px 24px 26px;
  box-shadow: 0 10px 30px rgba(60,45,30,.06); z-index: 1; }
.gh-tron { display: flex; flex-wrap: wrap; margin-bottom: 18px; }
.gh-tron button { width: 48px; height: 48px; border-radius: 50%; border: 3px solid var(--tc-kem-hong); margin-left: -10px; padding: 0;
  overflow: hidden; cursor: pointer; background: #ddd; position: relative; transition: transform .2s, box-shadow .2s; }
.gh-tron button:first-child { margin-left: 0; }
.gh-tron button:hover { transform: translateY(-4px); z-index: 2; }
.gh-tron button.dang-chon { transform: translateY(-6px); box-shadow: 0 0 0 3px var(--tc-cam); z-index: 3; }
.gh-tron button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gh-ten { display: block; font-size: 19px; font-weight: 600; color: #2a2a2a; }
.gh-nhom { font-size: 15px; color: #6b6b6b; }
.gh-toi { left: 470px; top: 268px; width: 400px; border-radius: 28px; background: var(--tc-xam-dam); color: #fff; padding: 28px 30px 30px;
  font-size: 17px; line-height: 1.6; z-index: 2; min-height: 150px; }
.gh-toi i { font-family: var(--tc-serif); font-size: 19px; }
.gh-cam { left: -22px; top: 350px; width: 125px; height: 110px; border-radius: 24px; background: var(--tc-dao); display: grid; place-items: center;
  color: #3a3a3a; font-size: 44px; z-index: 1; }
.gh-cam .ic-svg { width: 58px; height: 58px; stroke-width: 1.8; }
/* Ghi nguồn nhỏ ở góc ảnh, chỉ hiện với 2 ảnh lấy từ bộ dữ liệu Roboflow (giấy phép CC BY 4.0 bắt buộc ghi nguồn).
   Thay dòng ghi chú dưới ô ghép mà người dùng bỏ 03/11/2026 */
.gh-nguon { position: absolute; top: 12px; right: 12px; padding: 3px 10px; border-radius: 999px;
  background: rgba(0,0,0,.45); color: #fff; font-size: 11.5px; line-height: 1.5; }

/* ---------- 4. Phần cứng (mẫu 2 "Voices of Our Partners": thẻ trắng chữ to + ảnh lớn, chấm đứng) ---------- */
.tc-phan-cung { background: var(--tc-kem-hong); padding: 130px 0 120px; }
.tc-phan-cung .tc-dau-giua { margin-bottom: 56px; }
.tc-chieu { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 1360px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 60px);
  min-height: 580px; }
.tc-chieu-trai { position: relative; background: #fff; border-radius: 34px; overflow: hidden; }
.tc-slide { position: absolute; inset: 0; margin: 0; display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; padding: 48px clamp(28px, 5vw, 90px); opacity: 0; transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease; pointer-events: none; }
.tc-slide.dang-hien { opacity: 1; transform: none; pointer-events: auto; }
.tc-slide p { font-size: clamp(28px, 2.8vw, 46px); line-height: 1.22; color: var(--tc-den); margin: 0 0 34px; text-wrap: balance; }
.tc-slide figcaption { display: flex; flex-direction: column; gap: 4px; }
.tc-slide b { font-size: 14px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: #2a2a2a; }
.tc-slide span { font-size: 15px; color: #5a5a5a; }
.tc-chieu-phai { position: relative; border-radius: 34px; overflow: hidden; background: #ddd; min-height: 580px; }
.tc-chieu-phai img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06);
  transition: opacity .8s ease, transform 1.4s ease; }
.tc-chieu-phai img.dang-hien { opacity: 1; transform: scale(1); }
.tc-cham { position: absolute; right: 26px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 12px; z-index: 2; }
.tc-cham button { width: 10px; height: 10px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: rgba(255,255,255,.75);
  box-shadow: 0 0 0 1px rgba(0,0,0,.18); transition: background .2s, transform .2s; }
.tc-cham button.dang-chon { background: #6b1d12; transform: scale(1.3); }

/* ---------- 5. Cách hoạt động (mẫu 1 "Voices of Our Partners": tiêu đề đậm to bên trái, 4 cột có đường kẻ) ---------- */
.tc-cach { background: var(--tc-kem); padding: 130px 0 110px; }
.tc-cach-dau { max-width: 760px; margin-bottom: 72px; }
.tc-cach-dau h2 { font-family: var(--tc-dam); font-weight: 700; font-size: clamp(36px, 4.2vw, 64px); line-height: 1.08; letter-spacing: -0.03em; margin: 0; }
.tc-bon-cot { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.tc-buoc { border-top: 1px solid rgba(29,29,31,.22); padding-top: 26px; display: grid; grid-template-columns: 52px 1fr; column-gap: 12px; }
.tc-buoc .so { font-weight: 700; font-size: 19px; }
.tc-buoc p { font-size: 17px; line-height: 1.5; margin: 0 0 24px; color: var(--tc-den); }
.tc-buoc b { font-weight: 500; font-size: 16px; color: var(--tc-chu); }
.tc-cach .tc-cuoi-phan { margin-top: 64px; }

/* ---------- Chân trang (ý tưởng chân trang mẫu 2): thẻ trắng bo góc lớn trên nền kem, tên Cantaloupe chữ có chân
   rất to, đường kẻ cam, 3 cột liên kết; thay cho chân trang xanh đậm cũ (chân trang dùng chung ở js/common.js,
   chữ màu ghi thẳng trong code nên phải dùng !important) ---------- */
.tc-moi .site-footer { background: #fff; color: var(--tc-chu); border-radius: 34px; margin: 0 clamp(14px, 2vw, 28px) 28px;
  padding: 56px 0 46px; }
.tc-moi .site-footer > .container { max-width: none; padding: 0 clamp(24px, 4vw, 64px); }
.tc-moi .footer-grid { grid-template-columns: repeat(3, 1fr); gap: 28px 40px; }
.tc-moi .footer-grid > div:first-child { grid-column: 1 / -1; display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px 40px; flex-wrap: wrap; padding-bottom: 28px; margin-bottom: 6px; border-bottom: 1.5px solid var(--tc-cam); }
.tc-moi .site-footer .brand { color: var(--tc-den) !important; margin: 0 !important; font-family: var(--tc-serif); font-weight: 600;
  font-size: clamp(54px, 8.6vw, 140px); line-height: .95; letter-spacing: -0.02em; gap: .16em; }
.tc-moi .site-footer .brand .logo { font-size: 1em; width: .56em; height: .56em; border-radius: .2em; align-self: center; }
.tc-moi .site-footer .brand .logo .ic-svg { width: 56%; height: 56%; }
.tc-moi .footer-grid > div:first-child p { color: var(--tc-chu) !important; font-size: 16px !important; max-width: 360px !important; margin: 0; line-height: 1.6; }
.tc-moi .site-footer h4 { color: var(--tc-den); font-family: var(--tc-dam); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 12px; }
.tc-moi .site-footer a { color: var(--tc-den); font-size: 15.5px; padding: 4px 0; }
.tc-moi .site-footer a:hover { color: var(--tc-cam); text-decoration: none; }
.tc-moi .site-footer a .ic-svg { color: var(--tc-cam); }

/* ---------- Hiệu ứng khi lướt (bật bằng js/trang-chu-moi.js, class "co-js" trên <html>) ---------- */
.co-js .tc-moi .lo-dan { opacity: 0; transform: translateY(34px);
  transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); transition-delay: var(--tre, 0ms); }
/* Phần tử đang khuất phía trên (lướt lên mới gặp lại): chờ ở trên, trượt từ trên xuống */
.co-js .tc-moi .lo-dan.tu-tren { transform: translateY(-34px); }
.co-js .tc-moi .lo-dan.hien { opacity: 1; transform: none; }
/* Tiêu đề hiện dần từ xám nhạt sang đen khi lướt tới (như mẫu 1) */
.co-js .tc-moi .chu-mo { color: rgba(29,29,31,.14); transition: color 1.2s ease; }
.co-js .tc-moi .chu-mo.hien { color: var(--tc-den); }
@media (prefers-reduced-motion: reduce) {
  .co-js .tc-moi .lo-dan { opacity: 1; transform: none; transition: none; }
  .co-js .tc-moi .chu-mo { color: var(--tc-den); }
  .tc-bia-anh img { animation: none; transform: none; }
}

/* ---------- Màn hình vừa và nhỏ ---------- */
@media (max-width: 1000px) {
  .tc-ba-cot { grid-template-columns: 1fr; max-width: 720px; }
  .tc-cot { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  .tc-cot-nhan { grid-column: 1 / -1; }
  .tc-cot.lech { margin-top: 18px; }
  .tc-the { min-height: 250px; }
  .tc-bon-cot { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  /* Ô ghép 6 giai đoạn: gom thành MỘT thẻ liền: ảnh trên, hàng ảnh tròn đè mép ảnh, tên giai đoạn, lời kết luận
     nền xanh đậm ở đáy; nền thẻ ánh màu giai đoạn. Bỏ 2 ô biểu tượng trang trí cho khỏi rời rạc (người dùng chê 03/11/2026) */
  .tc-ghep { --gh-nen: color-mix(in srgb, var(--gd-mau) 12%, #fff);
    height: auto; display: flex; flex-direction: column; max-width: 620px; border-radius: 30px; overflow: hidden;
    background: var(--gh-nen); transition: background .7s ease;
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 14px 34px rgba(15,23,42,.08); }
  .tc-ghep > * { position: static; width: auto; height: auto; }
  .gh-khoi, .gh-xam, .gh-cam { display: none; }
  .gh-anh { position: relative; inset: auto; aspect-ratio: 16 / 10; border-radius: 0; box-shadow: none; }
  /* inset: auto bỏ vị trí left/top của bản máy tính, không thì "relative" đẩy cả khối ra ngoài thẻ (bị cắt mất) */
  body.tc-moi .tc-ghep .gh-the { position: relative; inset: auto; margin-top: -32px; padding: 0 22px 20px; text-align: center;
    background: none; border: 0; border-radius: 0; box-shadow: none; }
  .gh-tron { margin-bottom: 14px; justify-content: center; }
  .gh-tron button { width: 54px; height: 54px; margin-left: -8px; border-color: var(--gh-nen);
    transition: transform .2s, box-shadow .2s, border-color .7s; }
  .gh-toi { border-radius: 0; padding: 22px 22px 24px; }
  /* Cả thẻ hiện dần MỘT lần; các mảnh bên trong luôn hiện, khỏi có lúc thẻ trống một khúc
     (người dùng gặp chỗ tên + ảnh tròn chưa hiện, 03/11/2026) */
  .co-js .tc-moi .tc-ghep.lo-dan { transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1), background .7s ease; }
  .co-js .tc-moi .tc-ghep .lo-dan { opacity: 1; transform: none; transition: none; }
  /* Phần cứng: gom thành MỘT thẻ: ảnh trên (chấm chọn nằm ngang ở đáy ảnh), chữ dưới: tên thông số, câu mô tả, dòng phụ.
     Các trang chữ chồng lên nhau trong cùng một ô lưới nên thẻ cao đúng bằng trang dài nhất, đổi trang không giật
     (người dùng yêu cầu xếp lại bố cục điện thoại 03/11/2026) */
  .tc-chieu { grid-template-columns: 1fr; gap: 0; min-height: 0; width: min(620px, calc(100% - 40px)); padding: 0;
    background: #fff; border: 1px solid rgba(15,23,42,.07); border-radius: 30px; overflow: hidden;
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 14px 34px rgba(15,23,42,.08); }
  .tc-chieu-phai { order: -1; min-height: 0; aspect-ratio: 4 / 3; border-radius: 0; }
  body.tc-moi .tc-chieu .tc-chieu-trai { display: grid; min-height: 0; border: 0; border-radius: 0; box-shadow: none; }
  .tc-slide { position: relative; inset: auto; grid-area: 1 / 1; justify-content: flex-start; align-items: flex-start;
    text-align: left; padding: 26px 26px 28px; }
  .tc-slide figcaption { display: contents; }
  .tc-slide b { order: -1; margin-bottom: 10px; color: var(--tc-xam-dam); }
  .tc-slide p { font-size: 26px; margin: 0 0 12px; }
  .tc-cham { top: auto; right: auto; bottom: 14px; left: 50%; transform: translateX(-50%); flex-direction: row; gap: 10px;
    padding: 7px 11px; border-radius: 999px; background: rgba(0,0,0,.3); }
  .tc-cham button { box-shadow: none; background: rgba(255,255,255,.55); transition: background .2s, width .25s; }
  body.tc-moi .tc-chieu .tc-cham button.dang-chon { width: 24px; border-radius: 999px; background: #fff; transform: none; }
}
/* Máy tính: ô ghép là khung chứa các ô so le, từng ô tự hiện dần nên khung thì luôn hiện */
@media (min-width: 1001px) {
  .co-js .tc-moi .tc-ghep.lo-dan { opacity: 1; transform: none; transition: none; }
}
@media (max-width: 700px) {
  .tc-bia { min-height: 0; align-items: flex-start; }
  .tc-bia-chu { padding: 110px 20px 280px; }
  .tc-bia h1 { font-size: 40px; max-width: none; }
  .tc-bia h1 .tc-nhan-manh { white-space: normal; }
  .tc-bia-anh::after { background: linear-gradient(to bottom, rgba(246,241,231,.94) 0%, rgba(246,241,231,.85) 55%, rgba(246,241,231,.15) 85%, rgba(246,241,231,0) 100%); }
  .tc-bia-nut .tc-nut { flex: 1; justify-content: center; }
  .tc-vi-sao, .tc-giai-doan, .tc-phan-cung, .tc-cach { padding: 80px 0 72px; }
  .tc-dau-giua { margin-bottom: 40px; }
  .tc-dau-giua p { font-size: 16px; }
  .tc-cot { grid-template-columns: 1fr; }
  .tc-the { min-height: 0; }
  .tc-the h3 { padding-top: 26px; font-size: 23px; }
  .tc-bon-cot { grid-template-columns: 1fr; row-gap: 28px; }
  .tc-ghep { border-radius: 26px; }
  body.tc-moi .tc-ghep .gh-the { padding: 0 18px 18px; }
  .gh-tron button { width: 50px; height: 50px; }
  .gh-ten { font-size: 20px; }
  /* Chừa sẵn chỗ cho lời kết luận dài nhất, đổi giai đoạn thì thẻ không co giãn làm trang giật */
  .gh-toi { font-size: 16px; padding: 20px 20px 22px; min-height: 178px; }
  .gh-toi i { font-size: 18px; }
  .tc-chieu { border-radius: 26px; }
  .tc-slide { padding: 22px 20px 24px; }
  .tc-slide p { font-size: 22px; line-height: 1.3; }
  .tc-slide b { font-size: 13px; }
  .tc-cuoi-phan { margin-top: 40px; }
  .tc-moi .site-footer { padding-top: 40px; border-radius: 26px; }
  .tc-moi .footer-grid { grid-template-columns: 1fr; }
  .tc-moi .site-footer .brand { font-size: 48px; }
}

/* ---------- Màn hình máy tính rộng (từ 1200px): các ô, chữ, khoảng cách to hơn cho đã mắt, trông sang hơn
   (người dùng chê các phần phía dưới "nhỏ nhỏ"). Màn hình hẹp hơn vẫn dùng cỡ ở trên. ---------- */
@media (min-width: 1200px) {
  .tc-moi .tc-vi-sao .container, .tc-moi .tc-giai-doan .container, .tc-moi .tc-phan-cung .container, .tc-moi .tc-cach .container {
    max-width: 1480px; padding: 0 clamp(24px, 3.2vw, 56px); }
  .tc-vi-sao, .tc-giai-doan, .tc-phan-cung, .tc-cach { padding: 160px 0 150px; }
  .tc-dau-giua { max-width: 1440px; margin-bottom: 80px; }
  .tc-nhan { font-size: 14px; margin-bottom: 18px; }
  .tc-dau-giua h2 { font-size: clamp(48px, 4.6vw, 80px); }
  .tc-dau-giua p { font-size: 20px; max-width: 1320px; }
  .tc-nut { font-size: 16.5px; padding: 16px 28px; }
  .tc-nut-xam, .tc-nut-cam { padding: 17px 42px; }
  .tc-cuoi-phan { margin-top: 72px; }

  /* Vì sao chọn: 3 cột rộng hơn, thẻ cao hơn, chữ to hơn. Đã thu lại khoảng 1/8 so với lần phóng đầu
     (người dùng thấy mở toàn màn hình "hơi bự quá", 03/11/2026) */
  .tc-vi-sao .tc-dau-giua { margin-bottom: 68px; }
  .tc-vi-sao .tc-dau-giua h2 { font-size: clamp(44px, 4vw, 68px); }
  .tc-vi-sao .tc-dau-giua p { font-size: 18.5px; max-width: 1180px; }
  .tc-ba-cot { max-width: 1240px; gap: 28px; }
  .tc-cot { gap: 24px; }
  .tc-cot.lech { margin-top: 124px; }
  .tc-cot-nhan { font-size: 13.5px; }
  .tc-the { min-height: 312px; padding: 30px 32px 34px; border-radius: 32px; }
  .tc-o-ic { width: 58px; height: 58px; border-radius: 17px; }
  .tc-o-ic .ic-svg { width: 28px; height: 28px; }
  .tc-the h3 { font-size: 28px; padding-top: 46px; margin-bottom: 12px; }
  .tc-the p { font-size: 16.5px; line-height: 1.62; }

  /* 6 giai đoạn: ô ghép to hơn khoảng 1,2 lần */
  .tc-ghep { width: min(1100px, 100%); height: 590px; }
  .gh-khoi { top: 134px; width: 379px; height: 342px; border-radius: 40px; }
  .gh-anh { left: 37px; top: 73px; width: 574px; height: 359px; border-radius: 40px; }
  .gh-xam { left: 648px; width: 171px; height: 153px; border-radius: 30px; }
  .gh-xam .ic-svg { width: 78px; height: 78px; }
  .gh-the { left: 700px; top: 117px; width: 398px; border-radius: 32px; padding: 30px 30px 32px; }
  .gh-tron button { width: 58px; height: 58px; margin-left: -12px; }
  .gh-ten { font-size: 22px; }
  .gh-nhom { font-size: 17px; }
  .gh-toi { left: 574px; top: 328px; width: 489px; border-radius: 32px; padding: 34px 36px 36px; font-size: 19.5px; min-height: 180px; }
  .gh-toi i { font-size: 22px; }
  .gh-cam { left: -27px; top: 428px; width: 153px; height: 134px; border-radius: 28px; }
  .gh-cam .ic-svg { width: 70px; height: 70px; }

  /* Phần cứng: khung trình chiếu cao và rộng hơn, chữ to hơn */
  .tc-chieu { max-width: 1520px; min-height: 680px; gap: 26px; }
  .tc-chieu-trai, .tc-chieu-phai { border-radius: 40px; }
  .tc-chieu-phai { min-height: 680px; }
  .tc-slide { padding: 60px clamp(40px, 5vw, 110px); }
  .tc-slide p { font-size: clamp(36px, 3.1vw, 56px); margin-bottom: 40px; }
  .tc-slide b { font-size: 15px; }
  .tc-slide span { font-size: 17px; }
  .tc-cham { right: 32px; gap: 14px; }
  .tc-cham button { width: 12px; height: 12px; }

  /* Cách hoạt động: tiêu đề to hơn, 4 cột rộng hơn, chữ to hơn */
  .tc-cach-dau { max-width: 960px; margin-bottom: 88px; }
  .tc-cach-dau h2 { font-size: clamp(48px, 4.6vw, 80px); }
  .tc-bon-cot { gap: 40px; }
  .tc-buoc { padding-top: 32px; grid-template-columns: 64px 1fr; }
  .tc-buoc .so { font-size: 23px; }
  .tc-buoc p { font-size: 20px; line-height: 1.5; margin-bottom: 30px; }
  .tc-buoc b { font-size: 18px; }
}

/* Màn hình rất rộng (từ 1440px, ví dụ màn 1920px): phóng thêm một nấc cho 3 cột thẻ và ô ghép 6 giai đoạn */
@media (min-width: 1440px) {
  .tc-moi .tc-vi-sao .container, .tc-moi .tc-giai-doan .container, .tc-moi .tc-cach .container { max-width: 1680px; }
  .tc-ba-cot { max-width: 1380px; gap: 32px; }
  .tc-the { min-height: 340px; padding: 34px 36px 38px; }
  .tc-the h3 { font-size: 30px; padding-top: 54px; }
  .tc-the p { font-size: 17px; }

  .tc-ghep { width: 1224px; height: 655px; }
  .gh-khoi { top: 150px; width: 422px; height: 381px; border-radius: 44px; }
  .gh-anh { left: 41px; top: 82px; width: 640px; height: 400px; border-radius: 44px; }
  .gh-xam { left: 721px; width: 190px; height: 170px; border-radius: 32px; }
  .gh-xam .ic-svg { width: 86px; height: 86px; }
  .gh-the { left: 780px; top: 131px; width: 443px; padding: 32px 32px 36px; }
  .gh-tron button { width: 62px; height: 62px; }
  .gh-ten { font-size: 24px; }
  .gh-nhom { font-size: 18px; }
  .gh-toi { left: 640px; top: 365px; width: 540px; padding: 38px 40px 40px; font-size: 21px; min-height: 200px; }
  .gh-toi i { font-size: 24px; }
  .gh-cam { left: -30px; top: 476px; width: 170px; height: 150px; border-radius: 30px; }
  .gh-cam .ic-svg { width: 76px; height: 76px; }

  .tc-bon-cot { gap: 48px; }
  .tc-buoc p { font-size: 21px; }
}

/* ---------- Vì sao chọn, 6 thẻ (05/11/2026, người dùng yêu cầu): ô biểu tượng to hơn và nằm giữa thẻ, tên thẻ căn giữa,
   chữ mô tả to hơn 2px ở mọi cỡ màn hình (đoạn mô tả vẫn canh trái như cũ) ---------- */
.tc-o-ic { align-self: center; width: 66px; height: 66px; border-radius: 18px; }
.tc-o-ic .ic-svg { width: 32px; height: 32px; }
.tc-the h3 { text-align: center; }
.tc-the p { font-size: 17.5px; }
@media (min-width: 1200px) {
  .tc-o-ic { width: 74px; height: 74px; border-radius: 21px; }
  .tc-o-ic .ic-svg { width: 36px; height: 36px; }
  .tc-the p { font-size: 18.5px; }
}
@media (min-width: 1440px) {
  .tc-the p { font-size: 19px; }
}
/* Đoạn mô tả trong 6 thẻ căn đều hai bên (người dùng yêu cầu 05/11/2026); dòng cuối vẫn canh trái */
.tc-the p { text-align: justify; }

/* ---------- Chữ thường trên trang chủ to hơn 4px so với ban đầu (người dùng yêu cầu 05/11/2026: tăng 2px, rồi tăng thêm 2px nữa),
   trừ 6 thẻ "Vì sao chọn" đã tăng riêng ở trên.
   Gồm: lời giới thiệu ở ảnh bìa, lời dưới tiêu đề các phần, phần 6 giai đoạn (dòng "Giai đoạn x/6", lời kết luận), dòng phụ
   phần cứng, 4 bước "Cách hoạt động", chữ ở chân trang. Tiêu đề, nhãn nhỏ in hoa, menu, nút giữ nguyên.
   Khung lời kết luận cao thêm cho vừa câu dài nhất, đổi giai đoạn không giật trang; các khung chữ nới rộng theo cỡ chữ ---------- */
.tc-bia-loi { font-size: clamp(21px, calc(1.3vw + 4px), 25px); max-width: 690px; }
.tc-dau-giua p { font-size: 22px; }
.gh-nhom { font-size: 19px; }
.gh-toi { font-size: 21px; min-height: 190px; }
.gh-toi i { font-size: 23px; }
/* máy tính 1001–1199px: nhích khung kết luận lên để câu dài nhất không lòi khỏi khung ghép */
@media (min-width: 1001px) and (max-width: 1199px) { .gh-toi { top: 250px; } }
.tc-slide span { font-size: 19px; }
.tc-buoc p { font-size: 21px; }
.tc-buoc b { font-size: 20px; }
.tc-moi .footer-grid > div:first-child p { font-size: 20px !important; max-width: 440px !important; }
.tc-moi .site-footer a { font-size: 19.5px; }
@media (max-width: 700px) {
  .tc-dau-giua p { font-size: 20px; }
  .gh-toi { font-size: 20px; min-height: 236px; }
  .gh-toi i { font-size: 22px; }
}
@media (min-width: 1200px) {
  .tc-dau-giua p { font-size: 24px; }
  .tc-vi-sao .tc-dau-giua p { font-size: 22.5px; }
  .gh-nhom { font-size: 21px; }
  .gh-toi { font-size: 23.5px; min-height: 216px; }
  .gh-toi i { font-size: 26px; }
  .tc-slide span { font-size: 21px; }
  .tc-buoc p { font-size: 24px; }
  .tc-buoc b { font-size: 22px; }
}
@media (min-width: 1440px) {
  .gh-nhom { font-size: 22px; }
  .gh-toi { font-size: 25px; min-height: 236px; }
  .gh-toi i { font-size: 28px; }
  .tc-buoc p { font-size: 25px; }
}

/* Tiêu đề ảnh bìa trang chủ đúng 3 hàng (người dùng yêu cầu 05/11/2026):
   "Giám sát tự động" / "giai đoạn sinh trưởng" / "của cây dưa lưới" — xuống hàng bằng <br> trong index.html.
   Bỏ giới hạn bề ngang để hàng 2 (dài nhất) không bị tách; trên điện thoại thu chữ vừa đủ để mỗi hàng nằm gọn một dòng.
   (Đã thử đổi thành "Theo dõi vườn dưa lưới của bạn chỉ bằng một cú click" rồi người dùng cho về bản này, 05/11/2026.) */
.tc-bia h1.tc-ba-dong { max-width: none; }
@media (max-width: 700px) {
  .tc-bia h1.tc-ba-dong { font-size: min(40px, calc((100vw - 40px) / 12)); }
}
/* Lời giới thiệu dưới tiêu đề ảnh bìa trang chủ: căn đều hai bên */
body.trang-chu:not(.trang-con) .tc-bia-loi { text-align: justify; }

/* ---------- Cách hoạt động: mỗi bước thành một ô (người dùng yêu cầu 05/11/2026) ----------
   Số bước phóng to, căn giữa; tên bước (trước là dòng cuối) đưa lên làm tiêu đề: phông tiêu đề, in hoa, chữ xanh.
   BẢN THỬ (05/11/2026): khung màu xanh lá / cam xen kẽ (màu sẵn của web: --green-100 / --melon-100) bọc TIÊU ĐỀ;
   lời mô tả không còn khung, căn đều hai bên. (Bản trước: khung bọc lời mô tả .tc-buoc-hop, padding 20px 18px 22px, bo 22px.)
   subgrid: 4 khung tiêu đề cao bằng nhau, 4 đoạn mô tả bắt đầu thẳng hàng (máy cũ không hỗ trợ thì vẫn xếp dọc bình thường). */
.tc-buoc { grid-template-columns: 1fr; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; text-align: center; }
.tc-buoc .so { font-family: var(--tc-serif); font-weight: 500; font-size: 44px; line-height: 1; margin-bottom: 14px; }
.tc-buoc-ten { font-family: var(--tc-serif); font-weight: 500; font-size: 21px; line-height: 1.2; letter-spacing: .01em;
  text-transform: uppercase; color: var(--green-800); margin: 0 0 18px;
  background: var(--green-100); border-radius: 18px; padding: 14px 16px; display: flex; align-items: center; justify-content: center; }
.tc-buoc:nth-child(even) .tc-buoc-ten { background: var(--melon-100); }
.tc-buoc-hop p { margin: 0; text-align: justify; }
@media (max-width: 700px) {
  .tc-buoc .so { font-size: 40px; }
  .tc-buoc-ten { font-size: 20px; }
}
@media (min-width: 1200px) {
  .tc-buoc .so { font-size: 52px; margin-bottom: 16px; }
  .tc-buoc-ten { font-size: 24px; margin-bottom: 20px; padding: 16px 18px; border-radius: 20px; }
}
@media (min-width: 1440px) {
  .tc-buoc .so { font-size: 58px; }
  .tc-buoc-ten { font-size: 26px; padding: 18px 20px; }
}

/* Mũi tên giữa các khung tiêu đề (người dùng yêu cầu 05/11/2026): chỉ hướng bước 1 → 2 → 3 → 4.
   Máy tính 4 cột: mũi tên nằm giữa khe hai khung tiêu đề. Màn 701–1000px (2 cột): chỉ 1→2 và 3→4 (bước 2 và 3 nằm khác hàng).
   Điện thoại 1 cột: mũi tên chỉ xuống, nằm giữa hai bước. Mũi tên vẽ bằng mặt nạ SVG nên đổi màu được theo chế độ sáng/tối. */
.tc-buoc, .tc-buoc-ten { position: relative; }
.tc-buoc:not(:last-child) .tc-buoc-ten::after, .tc-buoc:not(:last-child)::after {
  content: ""; position: absolute; width: 22px; height: 22px; background: var(--green-700); pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h17M14 5l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h17M14 5l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
.tc-buoc:not(:last-child) .tc-buoc-ten::after { top: 50%; right: -25px; transform: translateY(-50%); }   /* giữa khe 28px */
.tc-buoc:not(:last-child)::after { display: none; }   /* mũi tên chỉ xuống: chỉ dùng trên điện thoại */
@media (max-width: 1000px) {
  .tc-buoc:nth-child(2) .tc-buoc-ten::after { display: none; }
}
@media (max-width: 700px) {
  .tc-bon-cot { row-gap: 52px; }
  .tc-buoc:not(:last-child) .tc-buoc-ten::after { display: none; }
  .tc-buoc:not(:last-child)::after { display: block; left: 50%; bottom: -38px; width: 24px; height: 24px; transform: translateX(-50%) rotate(90deg); }
}
@media (min-width: 1200px) {
  .tc-buoc:not(:last-child) .tc-buoc-ten::after { width: 28px; height: 28px; right: -34px; }   /* giữa khe 40px */
}
@media (min-width: 1440px) {
  .tc-buoc:not(:last-child) .tc-buoc-ten::after { width: 32px; height: 32px; right: -40px; }   /* giữa khe 48px */
}

/* Cách hoạt động: lời mô tả 4 bước nhỏ lại 1px (người dùng yêu cầu 05/11/2026): 21 → 20, 24 → 23, 25 → 24 */
.tc-buoc p { font-size: 20px; }
@media (min-width: 1200px) { .tc-buoc p { font-size: 23px; } }
@media (min-width: 1440px) { .tc-buoc p { font-size: 24px; } }

/* Nút "Trải nghiệm Dashboard →" cuối phần Cách hoạt động: căn giữa (class text-center trong index.html) và to hơn (05/11/2026) */
.tc-nut.tc-nut-to { font-size: 18px; padding: 18px 38px; border-radius: 10px; gap: 10px; }
@media (max-width: 700px) { .tc-nut.tc-nut-to { font-size: 17px; padding: 17px 30px; } }
@media (min-width: 1200px) { .tc-nut.tc-nut-to { font-size: 20px; padding: 21px 46px; border-radius: 12px; } }
@media (min-width: 1440px) { .tc-nut.tc-nut-to { font-size: 21px; padding: 22px 52px; } }

/* ---------- Phần cứng: sắp lại chữ mô tả cạnh ảnh cho dễ đọc (người dùng yêu cầu 12/11/2026) ----------
   Trước: câu mô tả dài viết rất to (bản phông thử còn in hoa cả câu), tên thông số lại bé xíu bên dưới -> khó đọc.
   Nay, từ trên xuống: số thứ tự "01 / 04" -> TÊN THÔNG SỐ (phông tiêu đề, in hoa, xanh) -> gạch cam ngắn
   -> dòng tóm tắt (đậm vừa) -> câu mô tả (chữ thường, căn đều hai bên). Thứ tự giống nhau trên máy tính và điện thoại.
   Đổi thứ tự bằng order (figcaption để display: contents); trong index.html chỉ bỏ class tc-serif ở câu mô tả. */
.tc-slide { align-items: center; text-align: center; }
.tc-slide figcaption { display: contents; }
.tc-slide b { order: -2; font-family: var(--tc-serif); font-weight: 500; font-size: clamp(28px, 2.6vw, 34px); line-height: 1.2;
  letter-spacing: .01em; text-transform: uppercase; color: var(--green-800); margin: 0; text-wrap: balance; }
.tc-slide b::after { content: ""; display: block; width: 56px; height: 4px; border-radius: 4px; background: var(--melon-600); margin: 18px auto 20px; }
.tc-slide span { order: -1; font-size: 19px; font-weight: 600; line-height: 1.45; color: var(--tc-den); margin: 0 0 12px; }
.tc-slide p { order: 0; font-size: 19px; line-height: 1.65; font-weight: 400; letter-spacing: 0; color: var(--tc-chu); margin: 0;
  max-width: 520px; text-align: justify; text-align-last: center; text-wrap: wrap; }   /* căn đều hai bên, dòng cuối nằm giữa cho cân với tiêu đề */
@media (max-width: 700px) {
  .tc-slide b { font-size: 24px; }
  .tc-slide b::after { width: 48px; margin: 14px auto 16px; }
  .tc-slide span { font-size: 18px; margin-bottom: 10px; }
  .tc-slide p { font-size: 18px; line-height: 1.6; }
}
@media (min-width: 1200px) {
  .tc-slide b { font-size: clamp(38px, 3.1vw, 54px); }
  .tc-slide b::after { width: 72px; height: 5px; margin: 24px auto 28px; }
  .tc-slide span { font-size: 22px; margin-bottom: 16px; }
  .tc-slide p { font-size: 21px; max-width: 560px; }
}
@media (min-width: 1440px) {
  .tc-slide span { font-size: 23.5px; }
  .tc-slide p { font-size: 22.5px; max-width: 620px; }
}

/* ---------- Ảnh bìa TRANG CHỦ giống ảnh bìa các trang con Nhận diện, Đặt trước (12/11/2026, người dùng yêu cầu:
   "có khung trắng mờ, tràn viền"). Cùng cách làm với .tc-bia-con trong css/trang-con-moi.css (trang chủ không tải file đó):
   nền sáng dưới ảnh; ảnh nằm bên phải, cao bằng khung, đúng tỉ lệ ảnh (không phóng to nên nét), mép trái mờ dần vào nền;
   mép dưới mờ dần vào nền phần "Vì sao chọn" nên không lộ đường viền. Ảnh dừng cách mép dưới 30px và đứng yên
   (bỏ trôi chậm data-truot ở index.html) vì ảnh chạm mép dưới thì điện thoại vẽ ra một đường viền mảnh. ---------- */
.tc-moi .tc-bia-mo { background: #d2dfd6; }
.tc-bia-mo .tc-bia-anh { bottom: 30px; }
.tc-bia-mo .tc-bia-anh img { position: absolute; top: 0; right: 0; width: auto; min-width: 60%; max-width: none; height: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 40%); mask-image: linear-gradient(to right, transparent 0%, #000 40%); }
.tc-bia-mo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 200px; pointer-events: none;
  background: linear-gradient(to bottom, transparent 0%, color-mix(in srgb, var(--tc-be) 65%, transparent) 45%, var(--tc-be) 62%, var(--tc-be) 100%); }
@media (max-width: 700px) {
  .tc-bia-mo::after { height: 90px; }
  .tc-bia-mo .tc-bia-anh img { width: 100%; min-width: 0; -webkit-mask-image: none; mask-image: none; }
}

/* A9 (12/11/2026). Điện thoại: chấm chuyển ảnh ở Phần cứng vẫn nhỏ như cũ nhưng vùng bấm quanh mỗi chấm rộng ra (24x40px) */
@media (max-width: 1000px) {
  .tc-cham { gap: 14px; }
  .tc-cham button { position: relative; }
  .tc-cham button::before { content: ""; position: absolute; inset: -15px -7px; }
}

/* 12/11/2026 (người dùng yêu cầu): bỏ số thứ tự "01 / 04" ở các trang chữ Phần cứng (đã xoá các luật .tc-slide::before).
   Tên giai đoạn nằm trong ô kết luận xanh đậm của phần 6 giai đoạn ("Gặp giai đoạn TẠO NGỌT. ...") cũng in hoa. */
.gh-toi i { text-transform: uppercase; letter-spacing: .01em; }