/* ============================================================
   Cantaloupe - Kiểu mới cho các TRANG CON công cộng (thư mục DUALUOI_WEB), cùng kiểu với trang chủ mới:
   phông Be Vietnam Pro + Lora, màu cũ (css/mau-cu.css), thẻ bo góc lớn, tiêu đề chữ có chân, hiện dần khi lướt.
   Dùng cùng css/trang-chu-moi.css; body thêm class "tc-moi mau-cu" (chỉ ở trang công cộng, trong Dashboard giữ kiểu cũ).
   Làm đầu tiên cho trang Nhận diện (03/11/2026): "khoác kiểu mới, giữ bố cục" theo người dùng chọn.
   ============================================================ */

/* ---------- Ảnh bìa trang con: như ảnh bìa trang chủ, chữ nhỏ hơn một nấc. Cao đủ một màn hình để lúc mới mở trang
   không ló các khung bên dưới (người dùng yêu cầu 03/11/2026, cả máy tính lẫn điện thoại) ---------- */
.tc-bia.tc-bia-con { min-height: max(600px, 100vh); }
.tc-bia-con .tc-nhan { margin-bottom: 18px; }
button.tc-nut { border: 0; cursor: pointer; }
.tc-moi .tc-bia-con { background: #d2dfd6; }   /* nền dưới ảnh, bớt chói hơn trắng (người dùng yêu cầu 2 lần, 03/11/2026) */
/* Rộng đủ để "Chụp ảnh, biết ngay cây dưa" nằm một dòng (hẹp quá thì chữ "dưa" rớt xuống đứng một mình) */
.tc-bia-con h1 { font-size: clamp(36px, 4vw, 72px); max-width: min(1000px, 62vw); }
/* Ảnh Nhận diện (1620x1080): KHÔNG phóng to, phóng là mờ (người dùng chê 03/11/2026). Ảnh chỉ nằm bên phải, cao bằng
   khung ảnh bìa, ngang theo đúng tỉ lệ ảnh (màn 1920: khoảng 1150px, nhỏ hơn ảnh gốc nên nét); mép trái ảnh mờ dần
   vào nền nên không lộ cạnh. Nụ hoa nằm giữa ảnh nên lệch hẳn sang phải, không bị lớp mờ bên trái che. */
.tc-bia-anh .anh-lech-phai { position: absolute; top: 0; right: 0; width: auto; min-width: 60%; max-width: none; height: 100%;
  object-position: 50% 50%;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 40%); mask-image: linear-gradient(to right, transparent 0%, #000 40%); }
/* Mép ảnh bìa mượt (người dùng chê "lộ viền", 03/11/2026): mép dưới mờ dần vào nền xanh bạc hà của phần kế tiếp.
   Ảnh dừng cách mép dưới 30px (khúc đó lớp mờ đã phủ kín màu nền): nếu ảnh chạm đúng mép dưới thì điện thoại vẽ
   khúc giáp ranh thành một đường viền mảnh. Vì vậy ảnh bìa trang con không trôi chậm theo trang (trôi là ảnh chạm mép). */
.tc-bia-con .tc-bia-anh { bottom: 30px; }
.tc-bia-con::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%); }

/* ---------- Các phần: phần ngay dưới ảnh bìa nền xanh bạc hà (section-nen, cùng màu mép mờ của ảnh bìa), phần sau nền trắng ---------- */
.tc-moi .section { padding: 110px 0; }
.tc-moi .section-nen { background: var(--tc-be); }     /* nền xanh bạc hà rất nhạt, như phần "Vì sao chọn" */
.tc-moi .section-alt { background: #fff; }

/* Tên thẻ: chữ có chân như trang chủ (cỡ chữ giữ theo từng loại thẻ) */
.tc-moi .section .card h3 { font-family: var(--tc-serif); font-weight: 500; letter-spacing: -0.01em; color: var(--green-900); }
.tc-moi .field input, .tc-moi .field textarea, .tc-moi .field select { border-radius: 12px; }
.tc-moi .loc-btn { font-family: var(--tc-dam); }

/* Tri thức */
.tc-moi .bai h3 { font-size: 21px; }
.tc-moi .bai-noi-bat h3 { font-size: 30px; }
.tc-moi .bai-gon h3 { font-size: 18px; }
.tc-moi .bai-ngang h3 { font-size: 30px; }
.tc-moi .bai-tag { letter-spacing: .12em; font-weight: 700; }
.tc-moi .tt-dau, .tc-moi .tt-ben { gap: 32px; }
.tc-moi .tt-dau { margin-bottom: 32px; }

/* Cộng đồng */
.tc-moi .cd-item { padding: 22px 28px; margin-bottom: 16px; }
.tc-moi .cd-item h3 { font-size: 21px; }
.tc-moi .bao-mau { border-radius: 18px; }

/* Đặt trước */
.tc-moi .ds-goi li { font-size: 15.5px; }
.tc-moi .cam-ket div { border-radius: 14px; }
.tc-moi .section .card h3 + .gia { margin-top: 6px; }

/* Tiêu đề phần: nhãn cam chữ in hoa + tiêu đề chữ có chân, như trang chủ */
.tc-moi .section-head { max-width: 980px; margin-bottom: 56px; }
.tc-moi .section-head .eyebrow { display: inline-block; font-family: var(--tc-dam); font-size: 13px; font-weight: 700; letter-spacing: .14em; color: var(--tc-cam); }
.tc-moi .section-head h2 { font-family: var(--tc-serif); font-weight: 500; letter-spacing: -0.01em; font-size: clamp(32px, 3.6vw, 56px);
  line-height: 1.14; color: var(--green-900); margin: 14px 0 0; text-wrap: balance; }

/* Thẻ: trắng, bo góc lớn, viền mảnh, bóng nhẹ (như thẻ trang chủ màu cũ) */
.tc-moi .card { border-radius: 28px; border: 1px solid rgba(15,23,42,.07); box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 10px 30px rgba(15,23,42,.06); }
.tc-moi #congCu .card { padding: 30px 32px 32px; }
.tc-moi #congCu .card > h3 { display: flex; align-items: center; gap: 10px; font-size: 26px; }
.tc-moi #congCu h4 { font-size: 16px; font-weight: 700; }
.tc-moi .upload-box { border-radius: 22px; padding: 30px 24px; }
.tc-moi .stage-photo { border-radius: 20px; }
.tc-moi #pageBody .btn { border-radius: 999px; font-weight: 600; }
.tc-moi .det-steps, .tc-moi .det-row { font-size: 15px; }

/* 6 thẻ giai đoạn */
.tc-moi .stage-card { border-radius: 26px; }
.tc-moi .stage-card .stage-photo { border-radius: 0; }
.tc-moi .stage-card .sc-body { padding: 20px 24px 26px; }
.tc-moi .stage-card .sc-num { letter-spacing: .1em; font-weight: 700; }
.tc-moi .stage-card h3 { font-family: var(--tc-serif); font-weight: 500; font-size: 22px; color: var(--green-900); margin: 8px 0; }
.tc-moi .stage-card p { font-size: 15px; line-height: 1.6; }
.tc-moi .grid-3 { gap: 28px; }

/* ---------- Màn hình máy tính rộng: to hơn một nấc như trang chủ ---------- */
@media (min-width: 1200px) {
  .tc-moi #pageBody .container { max-width: 1320px; }
  .tc-moi .section { padding: 130px 0; }
  .tc-moi .section-head { margin-bottom: 64px; }
  .tc-moi .section-head .eyebrow { font-size: 14px; }
  .tc-moi #congCu .card { padding: 34px 36px 36px; }
  .tc-moi #congCu .card > h3 { font-size: 28px; }
  .tc-moi .grid-3 { gap: 32px; }
}

/* ---------- Điện thoại ---------- */
@media (max-width: 700px) {
  .tc-bia.tc-bia-con { min-height: 100vh; }
  .tc-bia-con::after { height: 90px; }
  .tc-bia-con h1 { font-size: 34px; max-width: none; }
  .tc-bia-anh .anh-lech-phai { width: 100%; min-width: 0; -webkit-mask-image: none; mask-image: none; }
  .tc-moi .section { padding: 64px 0; }
  .tc-moi .section-head { margin-bottom: 36px; }
  .tc-moi .card { border-radius: 24px; }
  .tc-moi #congCu .card { padding: 22px 20px 24px; }
  .tc-moi #congCu .card > h3 { font-size: 23px; }
}

/* ---------- Đăng nhập (03/11/2026): giữ bố cục nửa ảnh nửa biểu mẫu, đổi sang kiểu mới.
   Chữ trên ảnh nằm trên lớp loang sáng như ảnh bìa các trang (bản tối ở css/anh-bia-toi.css);
   mép phải ảnh mờ dần vào nền biểu mẫu (màn hẹp: mép dưới) nên không lộ đường cắt giữa hai nửa ---------- */
.tc-moi.trang-dn { background: var(--tc-kem); }
.tc-moi .dn-anh { background: #d2dfd6; }
.tc-moi .dn-anh::after { background: linear-gradient(to top, rgba(222,233,226,.92) 0%, rgba(222,233,226,.76) 22%,
  rgba(222,233,226,.3) 40%, rgba(222,233,226,.08) 50%, rgba(222,233,226,0) 56%); }
.tc-moi .dn-anh::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to right, transparent 80%, color-mix(in srgb, var(--tc-kem) 60%, transparent) 92%, var(--tc-kem) 100%); }
.tc-moi .dn-chu { z-index: 2; max-width: max(500px, 34vw); }
.tc-moi .dn-chu .brand { color: var(--green-800); }
.tc-moi .dn-chu h2 { font-family: var(--tc-dam); font-weight: 700; letter-spacing: -0.03em; color: var(--green-900);
  font-size: clamp(34px, 3vw, 54px); line-height: 1.12; margin: 0 0 14px; }
.tc-moi .dn-chu h2 .tc-nhan-manh { color: var(--melon-600); }
.tc-moi .dn-chu p { color: var(--tc-chu); font-weight: 500; }
.tc-moi .dn-hop h1 { font-family: var(--tc-serif); font-weight: 500; letter-spacing: -0.01em; color: var(--green-900);
  font-size: clamp(32px, 2.6vw, 44px); }
.tc-moi .dn-hop .btn { border-radius: 999px; font-weight: 600; padding-top: 13px; padding-bottom: 13px; }
@media (max-width: 900px) {
  .tc-moi .dn-anh { min-height: 340px; }
  .tc-moi .dn-anh::before { background: linear-gradient(to bottom, transparent 78%, color-mix(in srgb, var(--tc-kem) 60%, transparent) 90%, var(--tc-kem) 100%); }
}
@media (max-width: 620px) {
  .tc-moi .dn-anh { min-height: 300px; }
  .tc-moi .dn-chu h2 { font-size: 28px; }
}

/* ---------- Khung đăng nhập to hơn (người dùng yêu cầu 05/11/2026: "các chi tiết đang hơi nhỏ") ----------
   Khung rộng hơn; tiêu đề, dòng phụ, nhãn, ô nhập, 2 nút, chữ "hoặc", ghi chú và "Về trang chủ" đều to lên.
   Ô nhập ≥ 16px nên điện thoại không tự phóng to khi bấm vào. */
.tc-moi .dn-hop { max-width: clamp(440px, 36vw, 620px); }
.tc-moi .dn-hop h1 { font-size: clamp(36px, 3vw, 52px); margin-bottom: 10px; }
.tc-moi .dn-hop .muted { font-size: 18px; margin-bottom: 32px; }
.tc-moi .dn-hop .field { margin-bottom: 20px; }
.tc-moi .dn-hop .field label { font-size: 16.5px; margin-bottom: 8px; }
.tc-moi .dn-hop .field input { font-size: 17.5px; padding: 15px 18px; border-radius: 14px; }
.tc-moi .dn-hop .btn { font-size: 17.5px; padding-top: 18px; padding-bottom: 18px; }
.tc-moi .dn-hop form .btn { margin-top: 6px; }
.tc-moi .dn-hoac { font-size: 15px; margin: 24px 0; }
.tc-moi .dn-hop .form-note { font-size: 15px; line-height: 1.6; margin-top: 18px; }
.tc-moi .dn-ve { font-size: 16.5px; margin-top: 26px; }
@media (min-width: 1440px) {
  .tc-moi .dn-hop .muted { font-size: 19.5px; }
  .tc-moi .dn-hop .field label { font-size: 17.5px; }
  .tc-moi .dn-hop .field input { font-size: 18.5px; padding: 17px 20px; }
  .tc-moi .dn-hop .btn { font-size: 18.5px; padding-top: 20px; padding-bottom: 20px; }
  .tc-moi .dn-hop .form-note { font-size: 16px; }
  .tc-moi .dn-ve { font-size: 17.5px; }
}
@media (max-width: 600px) {
  .tc-moi .dn-hop { max-width: none; }
  .tc-moi .dn-hop h1 { font-size: 32px; }
  .tc-moi .dn-hop .muted { font-size: 17px; margin-bottom: 26px; }
  .tc-moi .dn-hop .field input { font-size: 17px; padding: 14px 16px; }
  .tc-moi .dn-hop .btn { font-size: 17px; padding-top: 16px; padding-bottom: 16px; }
}

/* Ảnh bìa Tri thức (người dùng yêu cầu 05/11/2026): tiêu đề "Hiểu hơn về cây dưa lưới của bạn" chia dòng cân đối,
   không để một chữ rớt xuống dòng riêng ("cây dưa lưới" luôn đi liền nhau); lời giới thiệu căn đều hai bên;
   nút "Đọc bài viết" dùng cỡ to (.tc-nut-to, định nghĩa trong trang-chu-moi.css). */
.tc-bia h1.tc-can-dong { text-wrap: balance; }
.tc-bia-loi.can-deu { text-align: justify; }

/* A9 (12/11/2026). Dòng "← Về trang chủ" ở trang Đăng nhập: thêm khoảng đệm trên dưới để vùng bấm cao khoảng 40px (trước 26px) */
.tc-moi .dn-ve { padding: 8px 0; margin-top: 18px; }