/* Trang /gioi-thieu (bản 3C, 10/09/2026) — nét riêng; phần nền lấy từ nen.css (Cozy Soft Bow).
   Giá trị chép đúng bản mẫu chủ dự án đã duyệt: var/2026-09-10-gioi-thieu-3C/mau/gioi-thieu-3C.duyet-10-09.html
   Mọi vùng bấm ≥ 44px (THIET-KE-VA-VAN-PHONG §B8). Màn 1 vừa khung 390×664 không cuộn. */

.the { padding: 20px 18px 22px; }
.phu { font-size: 15.5px; }
b { font-weight: 800; }

h1.tieu-de-chinh { font-size: 38px; line-height: 1.1; margin: 0 0 2px; }
h1.tieu-de-nho { font-size: 30px; line-height: 1.1; margin: 0 0 10px; }
h2 { font-family: var(--chu); font-size: 21px; line-height: 1.3; margin: 0 0 12px; font-weight: 800; color: var(--muc); letter-spacing: -.2px; }
h3 { font-size: 18px; margin: 8px 0 8px; font-weight: 800; }
.thuong { font-size: 18px; font-weight: 800; color: var(--dat-dam); margin: 0 0 14px; line-height: 1.4; }
.thuong b { font-size: 18px; white-space: nowrap; }
@media (min-width: 700px) { .thuong, .thuong b { font-size: 22px; } }

/* Nút: bản mẫu nâng nút nhỏ lên 44px và nút nhạt dùng màu đất đậm */
.nut-nho { min-height: 44px; padding: 8px 18px; font-size: 15.5px; }
.nut-nhat { background: transparent; color: var(--dat-dam); box-shadow: none; border: 1.5px solid var(--dat); }
.nut-nhat:hover { background: var(--cam-nhat); color: var(--muc); }
a.nut, a.nut:hover { text-decoration: none; }

/* Ô nhập */
.o-nhap { margin-bottom: 18px; }
.goi-y { line-height: 1.45; }
.loi-o { line-height: 1.45; }
.loi-chung { margin-top: 12px; }
#loi-chung-a { margin-bottom: 12px; }

/* Chip chọn một — mỗi chip cao từ 44px */
.hang-the { margin-top: 6px; }
.the-chon span { min-height: 44px; display: inline-flex; align-items: center; padding: 10px 16px; font-size: 16px; }

/* Hộp thông tin */
.hop { padding: 14px 18px; margin: 14px 0 0; line-height: 1.5; }

/* Đầu trang, chân trang */
.dau-trang { padding: 14px 0; }
@media (max-width: 480px) { .dau-trang span { display: none; } }
.chan-trang { padding: 20px 18px 30px; }
main { margin-top: 14px; }

/* Màn 1 */
.o-so { margin-bottom: 12px; }
.o-so .goi-y { margin-bottom: 6px; }

/* Màn 2: dòng số của bạn nổi trên nền, không đóng khung */
.xac-nhan-so { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 4px 0; margin-bottom: 8px; }
.xac-nhan-so .phu { font-size: 16px; }
.xac-nhan-so b { color: var(--muc); letter-spacing: .4px; font-size: 17px; }
.dan { font-size: 16.5px; line-height: 1.5; margin: 0 0 18px; padding: 0 4px; }
.dan b { color: var(--dat-dam); }

/* Hai khối là hai thẻ tách biệt, giữa là vạch "Hoặc" nổi trên nền */
.khoi { padding-top: 22px; }
.khoi h2 { margin-bottom: 14px; }
.hoac { display: flex; align-items: center; gap: 14px; margin: 4px 0 22px; color: var(--nau-nhat); font-weight: 800; font-size: 17px; text-transform: none; }
.hoac::before, .hoac::after { content: ""; flex: 1; height: 2px; border-radius: 2px; background: var(--vien); }
#xong-a { text-align: left; padding-top: 4px; }
#xong-a h3 { color: var(--xanh); margin-top: 0; }
#xong-a .nut { margin-top: 6px; }

/* Đường dẫn ngắn */
.lien-ket-ngan { display: flex; align-items: center; justify-content: center; min-height: 58px; padding: 12px 16px;
  border: 2px dashed var(--dat); border-radius: var(--bo-goc); background: var(--nen); color: var(--dat-dam);
  font-weight: 800; font-size: 18px; letter-spacing: .2px; text-align: center;
  /* BC vai 2 vòng 3 §2.2: `word-break: break-all` cắt ngay giữa chữ ("…/tuyen-dun g/g/…") nên
     khách đọc ra một dãy ký tự lạ. Nay chỉ ngắt ở các điểm <wbr> mà mã lệnh chèn sau mỗi "/";
     `anywhere` chỉ còn là lưới đỡ khi một mẩu vẫn quá dài so với màn hình. */
  word-break: normal; overflow-wrap: anywhere;
  /* Gạch chân + màu liên kết: BC vai 2 vòng 3 §2.2 "nhìn cũng không biết là bấm được" */
  text-decoration: underline; text-underline-offset: 3px; margin-bottom: 14px; }
.lien-ket-ngan:hover { background: var(--cam-nhat); }
.o-qr { text-align: center; padding: 2px 0 0; margin-bottom: 18px; }
.o-qr img { width: 180px; height: 180px; max-width: 100%; display: block; margin: 0 auto 8px;
  background: #fff; border: 1px solid var(--vien); border-radius: var(--bo-goc); padding: 8px; }
.o-qr .phu { display: block; }
.hang-gui { display: grid; gap: 10px; margin-top: 14px; }
.hang-gui:empty { display: none; }
.hang-gui.ba .nut { padding-left: 12px; padding-right: 12px; font-size: 16.5px; min-height: 50px; }
@media (min-width: 480px) { .hang-gui.ba { grid-template-columns: 1fr 1fr 1fr; } }

/* Hộp gập: thẻ details của trình duyệt, nổi trên nền */
details.gon { border-top: 1px solid var(--vien); border-bottom: 1px solid var(--vien); padding: 2px 4px; margin: 0 0 6px; }
details.gon > summary { list-style: none; cursor: pointer; min-height: 54px; padding: 8px 0; display: flex; align-items: center; gap: 10px;
  font-size: 17px; font-weight: 700; color: var(--dat-dam); line-height: 1.3; }
details.gon > summary::-webkit-details-marker { display: none; }
details.gon > summary::before { content: "+"; font-size: 24px; line-height: 1; width: 26px; flex: none; text-align: center; }
details.gon[open] > summary::before { content: "\2212"; }
.the-le-ds { margin: 2px 0 12px; padding-left: 24px; }
.the-le-ds li { padding: 6px 0 6px 6px; font-size: 16.5px; line-height: 1.5; }

.lien-ket-phu { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 16px;
  border-radius: 999px; color: var(--dat-dam); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.lien-ket-phu:hover { background: var(--cam-nhat); }
.cuoi { margin: 10px 0 0; }

@media (min-width: 700px) { h1.tieu-de-chinh { font-size: 50px; } .the { padding: 30px 28px; } }

/* ===== Vòng sửa 11/09/2026 — sau test 3 vai (var/2026-09-11-test-3-vai/vong-1) ===== */

/* BC vai 2 lỗi #4: thanh nâu dính ở trên cùng đè lên ô đang báo lỗi khi trang tự nhảy tới ô đó.
   `scroll-margin-top` chừa sẵn chiều cao thanh + một khoảng thở. */
.o-nhap, .khoi, section { scroll-margin-top: 88px; }

/* BC vai 2 lỗi #6: chạm vào ảnh QR không có gì xảy ra ("Giữ tay vào ảnh để lưu" — mà mình đâu biết). */
.nut-anh-qr { display: block; margin: 0 auto; padding: 0; border: none; background: none; cursor: zoom-in; }
.nut-anh-qr:focus-visible { outline: 3px solid var(--dat); outline-offset: 4px; border-radius: 12px; }
#goi-y-qr { display: block; margin-top: 2px; }
.qr-to { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 20px; }
.qr-to-nen { position: absolute; inset: 0; width: 100%; height: 100%; border: none; background: rgba(91,70,54,.55); cursor: zoom-out; }
.qr-to-hop { position: relative; background: var(--giay, #FFFDFB); border-radius: 24px; padding: 20px; text-align: center; max-width: 92vw; }
.qr-to-hop img { width: min(72vw, 320px); height: auto; display: block; margin: 0 auto 10px; }

/* BC vai 2 §2.e: danh sách những người vừa gửi, chỉ nằm trên máy của khách. */
.ds-da-gui { list-style: none; margin: 6px 0 10px; padding: 0; text-align: left; }
.ds-da-gui li { font-size: 15.5px; line-height: 1.5; padding: 6px 0; border-bottom: 1px solid rgba(201,139,94,.25); }
.ds-da-gui li:last-child { border-bottom: none; }