/* ============================================================
   4bds.vn · VỎ GIAO DIỆN DÙNG CHUNG
   ------------------------------------------------------------
   Nền ảnh · thẻ kính · khối chữ hero · thanh nav trong suốt.
   MỌI trang app dùng chung file này — không trang nào được chép lại.
   Bài học FnB: 23 trang mỗi trang tự viết style, sửa một thứ rà 17 file.

   Cách dùng trong trang:
     <link rel="stylesheet" href="vo.css?v=...">
     <div class="nen-anh" id="nen-anh"></div><div class="nen-phu"></div>
     <div class="giua"><div class="cot1 dau1">…</div><div class="cot1">…</div></div>
     JS: đặt ảnh nền + đo chiều cao thanh nav (xem vo.js)

   Hai lớp kính:
     .k-trong — nhìn xuyên qua, chữ TRẮNG   (khối tóm tắt, nút)
     .k-duc   — đục, chữ NÂU như giấy       (khối đọc nội dung dài)
   ============================================================ */
  /* ============================================================
     LỚP VỎ — ĐO TỪ ẢNH MẪU (poster Sri Lanka bạn gửi 04/09/2026)
     ------------------------------------------------------------
     Đọc từ ảnh (ước lượng bằng mắt — không có file gốc để lấy pixel):
       · nút icon:  nền RẤT TRONG, nhìn xuyên thấy cây phía sau  ≈ 15–20% trắng
       · viền:      TRẮNG MẢNH RÕ NÉT, ~1.5px, gần đục          ≈ 80–85% trắng
       · bo góc:    NHỎ ~11px (không phải bo tròn kiểu iOS 22px)
       · icon+chữ:  TRẮNG, nét mảnh, nhãn cỡ nhỏ
       · bóng:      rất nhẹ, chỉ đủ tách khỏi ảnh
     ⚠ Mẫu chỉ có nút nhỏ chữ trắng. Khung chat của Ái có chữ nâu + ô nhập,
       để trong 18% là không đọc nổi. Nên: NÚT và KHỐI THU GỌN theo đúng mẫu,
       KHUNG CHAT giữ đục nhưng lấy đúng viền/bo góc/độ bóng của mẫu.
     ============================================================ */
  :root{
    --k-trong:rgba(255,255,255,.17);   /* nền kính trong — theo nút icon của mẫu */
    --k-duc:rgba(255,253,248,.93);     /* nền kính đục — cho khối nhiều chữ */
    --k-vien:rgba(255,255,255,.82);    /* viền trắng mảnh, đặc trưng nhất của mẫu */
    --k-bo:11px;                       /* bo góc nhỏ như mẫu */
    --k-bong:0 4px 18px rgba(20,14,8,.22);
    --k-blur:blur(14px) saturate(140%);
  }
  .nen-anh{position:fixed;inset:0;z-index:-2;background:#2E211A center/cover no-repeat}
  /* Bạn chốt 04/09: BỎ lớp phủ tối, để ảnh nền hiện đúng màu thật.
     Giữ lại phần tử nhưng trong suốt — vẫn cần một lớp rất mờ ở ĐỈNH cho dòng
     tiêu đề trắng khỏi chìm vào mảng sáng của ảnh. Không phủ toàn trang nữa. */
  .nen-phu{position:fixed;inset:0;z-index:-1;
    background:linear-gradient(rgba(24,17,11,.30),transparent 26%)}
  body{background:transparent}

  /* Canh giữa theo CHIỀU DỌC (bạn chốt 04/09): bọc cả tiêu đề lẫn khung chat
     vào một khối, cao bằng màn hình TRỪ ĐI thanh nav, rồi dồn vào giữa.
     `--nav-cao` do JS đo thanh thật rồi bơm vào — thanh cao khác nhau giữa máy tính
     (một hàng) và điện thoại (menu xuống dòng riêng), gõ số cứng là lệch.
     Dùng 100dvh chứ không phải 100vh: trên điện thoại thanh địa chỉ co giãn
     làm 100vh nhảy, nội dung giật theo. */
  .giua{display:flex;flex-direction:column;justify-content:center;
    min-height:calc(100dvh - var(--nav-cao,60px));padding-bottom:20px}
  /* Card GIỮ NGUYÊN KÍCH THƯỚC — chỉ dồn cả cụm vào giữa màn (bạn nói rõ 04/09).
     Bản trước tôi cho khung giãn hết chỗ trống, thành ra nó lấp đầy màn và
     không còn khoảng trống trên–dưới để thấy là đã canh giữa. */
  /* width:100% là BẮT BUỘC. Trong flex theo cột, `margin:0 auto` của .cot1 thắng
     stretch nên nó co về bề rộng nội dung (427px), kéo khung chat từ 560 xuống 395px.
     Lỗi này lọt vào lúc bọc khối .giua để canh giữa dọc. */
  .giua > .cot1{flex:0 0 auto;width:100%}
  .cot1{max-width:760px;margin:0 auto;padding:0 16px}
  /* Khung chat hẹp hơn phần còn lại để mắt dồn vào chỗ đang phải làm việc */
  .cot1 .khung,.cot1 #xong,.cot1 .can-khoi{max-width:560px;margin-left:auto;margin-right:auto}
  /* ============================================================
     KHỐI CHỮ HERO — dựng lại 04/09 theo yêu cầu "làm cho wow"
     ------------------------------------------------------------
     Nhịp bốn tầng, mượn từ mấy mẫu bạn gửi (AURA · Arif Castles · Hoiana):
       ① nhãn nhỏ chữ hoa giãn cách rất rộng
       ② dòng chính serif contrast cao, cỡ lớn, kerning âm
       ③ dòng hai IN NGHIÊNG màu kem vàng — chỗ tạo nhịp, mẫu nào cũng có
       ④ gạch mảnh rồi mới tới dòng phụ
     Đổi serif: Source Serif 4 → Playfair Display. Cùng là serif nhưng Playfair
     có nét thanh–đậm chênh nhau nhiều hơn hẳn, cỡ lớn mới ra "chất".
     (Đã đo Playfair CÓ bộ chữ tiếng Việt, xem mục font ở trên.)
     ============================================================ */
  .dau1{padding:8px 0 22px;text-align:center;color:#fff}
  .eb{font:600 10.5px/1 Inter,sans-serif;letter-spacing:.34em;text-transform:uppercase;
    color:#E0BC63;margin-bottom:16px;   /* cùng vàng đồng với dòng "dùng cho mọi thứ" */
    text-shadow:0 1px 2px rgba(0,0,0,.8),0 2px 14px rgba(0,0,0,.85)}
  .dau1 h1{font-family:'Playfair Display',Georgia,serif;font-weight:600;
    font-size:clamp(31px,6.6vw,56px);line-height:1.06;letter-spacing:-.022em;color:#fff}
  /* dòng hai in nghiêng, nhạt hơn một bậc — mắt đọc thành hai nhịp, không thành một khối */
  /* màu đậm hơn theo yêu cầu 04/09: kem nhạt #EDD9B0 → vàng đồng #E0BC63 */
  .dau1 h1 i{display:block;font-style:italic;font-weight:400;color:#E0BC63;
    letter-spacing:-.012em;margin-top:.06em}
  .gach{width:52px;height:1px;background:rgba(255,255,255,.6);margin:20px auto 0;
    box-shadow:0 0 8px rgba(0,0,0,.6)}
  /* Bỏ lớp phủ tối rồi nên chữ nằm thẳng trên ảnh — ảnh nội thất có mảng tường
     trắng, bóng nhẹ là chìm. Bóng phải đủ dày, xếp hai lớp: một lớp sát để tách nét,
     một lớp toả rộng để tạo nền mờ sau chữ. */
  .dau1 .phu{color:rgba(255,255,255,.95);max-width:440px;margin:18px auto 0;
    font-size:14.5px;line-height:1.68;
    text-shadow:0 1px 2px rgba(0,0,0,.8),0 2px 10px rgba(0,0,0,.85),0 4px 30px rgba(0,0,0,.8)}
  /* Bóng ba lớp (bạn thấy chữ khó đọc, 04/09):
     lớp 1 sát để tách nét · lớp 2 vừa để dày viền · lớp 3 toả rộng làm nền mờ sau chữ.
     Cách này ăn đứt việc chỉ tăng độ đậm một lớp — một lớp đậm thì thành viền đen bệt. */
  .dau1 h1{text-shadow:0 1px 2px rgba(0,0,0,.7),0 3px 12px rgba(0,0,0,.8),0 6px 44px rgba(0,0,0,.9)}

  /* ---------- kính TRONG: theo đúng nút icon của mẫu ---------- */
  .k-trong{background:var(--k-trong);backdrop-filter:var(--k-blur);
    -webkit-backdrop-filter:var(--k-blur);
    border:1.5px solid var(--k-vien);border-radius:var(--k-bo);box-shadow:var(--k-bong);
    color:#fff}
  /* ---------- kính ĐỤC: cho khối nhiều chữ, vẫn giữ viền và bo góc của mẫu ---------- */
  .k-duc{background:var(--k-duc);backdrop-filter:var(--k-blur);
    -webkit-backdrop-filter:var(--k-blur);
    border:1.5px solid var(--k-vien);border-radius:var(--k-bo);box-shadow:var(--k-bong)}
  /* không có backdrop-filter thì kính TRONG thành không đọc được → đục hẳn */
  @supports not (backdrop-filter:blur(2px)){
    .k-trong{background:rgba(60,45,32,.62)}
    .k-duc{background:rgba(255,253,248,.98)}
  }

  /* Khung chat CAO — đây là khu chính của trang.
     Bỏ `margin-top:auto` (thứ đẩy tin xuống đáy): khung cao mà tin dồn đáy thì
     lộ mảng trống to phía trên. Chat bám ĐẦU, còn JS đã tự cuộn xuống đáy mỗi khi
     Ái nhả tin mới (dòng `thoai.scrollTop = thoai.scrollHeight`) nên tin mới vẫn luôn thấy. */
  /* Kích thước BẠN chốt 04/09: cao 600px, rộng 560px. Không tự đổi. */
  .cot1 .khung{height:560px}

  /* ---------- khối CĂN ĐÃ KHAI ----------
     Thu gọn: kính TRONG, chữ trắng — đúng mẫu.
     Sổ ra: có bảng và danh sách chữ nâu → phải đục, nếu không đọc không nổi. */
  .can-khoi{margin-top:12px;overflow:hidden;transition:background .2s}
  /* Sổ ra thì nền phải ĐỤC LẠI: bên trong là bảng chấm điểm và danh sách căn,
     chữ nâu trên nền trong 17% là không đọc nổi. Thu gọn mới để trong như mẫu. */
  .can-khoi.mo{background:var(--k-duc)}
  .can-dau{display:flex;align-items:center;gap:14px;padding:14px 18px;cursor:pointer;
    user-select:none;width:100%;border:0;background:0;text-align:left;font:inherit;color:#fff;
    text-shadow:0 1px 8px rgba(0,0,0,.35)}
  .can-khoi.mo .can-dau{color:var(--ink);text-shadow:none}
  .can-dau:hover{background:rgba(255,255,255,.10)}
  .can-khoi.mo .can-dau:hover{background:rgba(140,98,57,.06)}
  .can-dau .nhan-o{font:700 11px/1 inherit;letter-spacing:.14em;text-transform:uppercase;flex:0 0 auto}
  .can-khoi.mo .can-dau .nhan-o{color:var(--acc)}
  .can-so{display:flex;gap:16px;align-items:center;margin-left:auto;flex-wrap:wrap;justify-content:flex-end}
  .can-so b{font-size:19px;font-weight:700}
  .can-so span{font-size:12.5px;opacity:.85}
  .can-khoi.mo .can-so span{opacity:1;color:var(--muted)}
  .can-so .cham{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:7px;vertical-align:1px}
  .cham.cao{background:#8FD09E} .cham.vua{background:#F0C560} .cham.thap{background:#E88E7E}
  .can-khoi.mo .cham.cao{background:var(--grn)}
  .can-khoi.mo .cham.vua{background:var(--amb)}
  .can-khoi.mo .cham.thap{background:var(--red)}
  .can-mui{flex:0 0 auto;transition:transform .22s;font-size:13px;opacity:.8}
  .can-khoi.mo .can-mui{transform:rotate(180deg);color:var(--muted)}
  .can-than{display:none;padding:0 18px 16px;border-top:1px solid var(--line)}
  .can-khoi.mo .can-than{display:block}
  .can-than .the{background:0;border:0;box-shadow:none;padding:12px 0 0;margin:0}

  /* Điện thoại: chừa 50px hai mép trái phải (bạn chốt 04/09) */
  @media(max-width:560px){.cot1{padding-left:50px;padding-right:50px}
    .can-dau{flex-wrap:wrap;row-gap:8px;padding:13px 16px}
    .can-dau .nhan-o{order:1}
    .can-mui{order:2;margin-left:auto}
    .can-so{order:3;flex-basis:100%;justify-content:flex-start;gap:20px;margin-left:0}}

  /* ============================================================
     KHUNG CHAT — theo ảnh mẫu Arif Castles (bạn gửi 04/09)
     ------------------------------------------------------------
     Điểm cốt lõi của mẫu: khung KHÔNG có nền mờ. Nhìn xuyên thẳng qua
     thấy ảnh y như bên ngoài — chỉ VIỀN TRẮNG MẢNH và BO GÓC LỚN là thấy.
     Bên trong: ô nhập dạng viên thuốc viền trắng, chữ trắng.
     ⇒ Kéo theo: MỌI thứ trong khung phải đổi sang chữ trắng, vì nền
       giờ là ảnh chứ không còn là giấy kem.
     ============================================================ */
  :root{
    --tr-vien:rgba(255,255,255,.55);      /* viền trắng mảnh — thứ duy nhất thấy được */
    --tr-nen:rgba(255,255,255,.13);       /* nền rất nhẹ cho bong bóng, ô nhập */
    --tr-nen2:rgba(255,255,255,.22);      /* đậm hơn: tin của mình, chip đang chọn */
    --tr-chu:#fff;
    --tr-mo:rgba(255,255,255,.72);
  }
  /* ảnh nền phải tối hơn: giờ toàn bộ chữ là màu trắng */
  /* (lớp phủ tối toàn trang đã bỏ theo yêu cầu 04/09) */

  /* Nền khung LÀM MỜ ẢNH PHÍA DƯỚI (bạn chốt 04/09) — không phải phủ màu lên,
     mà làm nhoè chính ảnh nền, nên khung vẫn "trong" mà chữ vẫn nổi.
     Kèm một lớp tối rất nhẹ vì bỏ phủ toàn trang rồi. */
  .cot1 .khung{background:rgba(20,14,9,.22);
    backdrop-filter:blur(26px) saturate(135%);-webkit-backdrop-filter:blur(26px) saturate(135%);
    border:1.5px solid var(--tr-vien);border-radius:30px;box-shadow:0 12px 44px rgba(12,8,4,.34);
    color:var(--tr-chu)}
  @supports not (backdrop-filter:blur(2px)){.cot1 .khung{background:rgba(20,14,9,.62)}}
  .cot1 .khung .thoai{padding:22px 22px 8px}

  /* ===== THANH CUỘN TRONG KHUNG KÍNH =====
     Mặc định của trình duyệt là thanh xám dày, có rãnh trắng — nhìn như dán
     một mẩu giao diện Windows lên tấm kính. Ở đây làm mảnh, trong, bo tròn,
     không rãnh; đậm thêm một chút khi rê chuột vào. */
  .cot1 .khung .thoai{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.34) transparent}
  .cot1 .khung .thoai::-webkit-scrollbar{width:8px}
  .cot1 .khung .thoai::-webkit-scrollbar-track{background:transparent}
  .cot1 .khung .thoai::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.30);border-radius:99px;
    border:2px solid transparent;background-clip:content-box}
  .cot1 .khung .thoai::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.52);
    border:2px solid transparent;background-clip:content-box}
  /* Safari cũ vẫn vẽ nút mũi tên hai đầu nếu không dẹp */
  .cot1 .khung .thoai::-webkit-scrollbar-button{display:none;height:0;width:0}

  /* lời nhắc của Ái trên nền kính — vàng đồng, đọc rõ trên ảnh */
  .cot1 .khung .bong.nhac-ai{background:rgba(224,188,99,.22);
    border:1px solid rgba(224,188,99,.75);color:#FFE9BC}

  /* bong bóng chat */
  .cot1 .khung .bong{background:var(--tr-nen);border:1px solid rgba(255,255,255,.30);
    border-radius:18px;color:var(--tr-chu);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
  .cot1 .khung .d.toi .bong{background:var(--tr-nen2);border-color:rgba(255,255,255,.42);color:#fff}
  .cot1 .khung .bong .nho,.cot1 .khung .d.toi .bong .nho{color:var(--tr-mo)}
  .cot1 .khung .av{background:rgba(255,255,255,.16);border:1px solid var(--tr-vien);color:#fff}
  .cot1 .khung .ten-ai b{color:#fff}
  .cot1 .khung .ten-ai .nhan{background:var(--tr-nen);color:#fff;border:1px solid rgba(255,255,255,.3)}
  .cot1 .khung .go i{background:rgba(255,255,255,.75)}

  /* thẻ điền — vẫn phải nổi hơn bong bóng vì đây là chỗ làm việc */
  .cot1 .khung .the-dien{background:var(--tr-nen);border:1.5px solid var(--tr-vien);
    border-radius:22px;color:var(--tr-chu);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
  .cot1 .khung label,.cot1 .khung .nhom-ten{color:var(--tr-mo)}
  .cot1 .khung .goi-y,.cot1 .khung .trong{color:var(--tr-mo)}

  /* ô nhập kiểu VIÊN THUỐC như ô tìm kiếm trong mẫu.
     ⚠ Liệt kê THIẾU một type là ô đó rơi về nền trắng đục của nen.css, nằm cạnh
       ô kính trông như hai giao diện khác nhau — dính đúng 04/09 với input[type=tel]
       ở bước hỏi số điện thoại. Thêm ô mới thì nhớ thêm type vào đây. */
  .cot1 .khung input[type=text],.cot1 .khung input[type=number],
  .cot1 .khung input[type=tel],.cot1 .khung input[type=email],
  .cot1 .khung input[type=date],.cot1 .khung input[type=search],
  .cot1 .khung input:not([type]),.cot1 .khung select{
    background:var(--tr-nen);border:1px solid var(--tr-vien);border-radius:100px;
    color:#fff;padding:12px 18px}
  .cot1 .khung textarea{background:var(--tr-nen);border:1px solid var(--tr-vien);
    border-radius:20px;color:#fff;padding:13px 17px}
  .cot1 .khung input::placeholder,.cot1 .khung textarea::placeholder{color:rgba(255,255,255,.5)}
  .cot1 .khung input:focus,.cot1 .khung textarea:focus,.cot1 .khung select:focus{
    outline:0;border-color:#fff;background:rgba(255,255,255,.2)}
  /* mũi tên của select vẽ bằng nền nên phải đổi sang bản sáng */
  .cot1 .khung select{appearance:none;-webkit-appearance:none;
    background-image:linear-gradient(45deg,transparent 50%,#fff 50%),linear-gradient(135deg,#fff 50%,transparent 50%);
    background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;
    background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:40px}
  .cot1 .khung select option{background:#2E211A;color:#fff}

  /* chip chọn */
  .cot1 .khung .chip{background:var(--tr-nen);border:1px solid var(--tr-vien);color:#fff;border-radius:100px}
  .cot1 .khung .chip:hover{background:rgba(255,255,255,.24)}
  /* ⚠ PHẢI CÓ CẢ `.chon` LẪN `.on`. Trang dùng class `.chon`; bản đầu chỉ viết `.on`
     nên trong khung kính, chip ĐÃ CHỌN trông y hệt chưa chọn — bấm vẫn ăn nhưng
     không đổi hình, người dùng tưởng NÚT HỎNG. User báo hai lần 09-10/09/2026:
     "3 nút này vẫn không bấm được". Luật `.cot1 .khung .chip` có 3 class nên còn
     đè cả `.chip.chon` của nen.css (2 class) — im lặng gấp đôi. */
  .cot1 .khung .chip.chon,.cot1 .khung .chip.on{
    background:#fff;color:#2E211A;border-color:#fff;font-weight:600}

  /* khối nhắc */
  .cot1 .khung .nhac{background:var(--tr-nen);border:1px solid rgba(255,255,255,.3);color:#fff}
  .cot1 .khung .nhac b{color:#fff}

  /* chân khung: nút chính là khối trắng đặc cho nổi, đúng kiểu nút của mẫu */
  .cot1 .khung .chan{background:transparent;border-top:1px solid rgba(255,255,255,.28);padding:14px 20px}
  .cot1 .khung .buoc{color:var(--tr-mo)}
  .cot1 .khung .nut-phu{background:transparent;border:1px solid var(--tr-vien);color:#fff;border-radius:100px}
  .cot1 .khung .nut-phu:hover{background:rgba(255,255,255,.18)}
  .cot1 .khung .nut-chinh{background:#fff;color:#2E211A;border:0;border-radius:100px;font-weight:600}
  .cot1 .khung .nut-chinh:hover{background:rgba(255,255,255,.88)}
  .cot1 .khung .nut-nho{background:transparent;border:1px solid var(--tr-vien);color:#fff}

  /* ô ảnh */
  .cot1 .khung .o-anh{border-color:var(--tr-vien);color:var(--tr-mo)}
  .cot1 .khung .cho-anh{background:var(--tr-nen);border-color:var(--tr-vien);color:#fff}
  .cot1 .khung .cho-anh .cho-ten{color:var(--tr-mo)}

  /* thanh nav gỗ sẫm → kính trong cho hợp cả trang.
     thanh.js đọc --nav/--nav2 từ :root rồi bơm vào Shadow DOM, nên đổi ở đây là đủ,
     KHÔNG phải sửa file dùng chung. backdrop-filter đặt lên chính phần tử bọc. */
  :root{--nav:rgba(35,25,17,.42);--nav2:rgba(255,255,255,.16)}
  #thanh-4bds{position:sticky;top:0;z-index:50;display:block;
    backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%)}

/* ============================================================
   TRANG LÀM VIỆC (viet-bai · tin-dang) — thêm class "trang-app" vào <body>
   ------------------------------------------------------------
   Khác trang chủ ở một điểm quan trọng: đây là chỗ ĐỌC NỘI DUNG DÀI
   (bài fanpage, tin 600 chữ). Nên chia hai vai:
     · cột điều khiển bên trái → kính TRONG, chữ trắng (như trang chủ)
     · khu kết quả bên phải     → kính ĐỤC, chữ nâu như đọc trên giấy
   Chữ trắng trên ảnh mà đọc 600 chữ thì mỏi mắt — đó là lý do không
   dùng một kiểu cho cả trang.
   ============================================================ */
.trang-app{padding-bottom:60px}
.trang-app .cot{max-width:1120px;margin:0 auto;padding:0 20px;
  display:grid;grid-template-columns:320px 1fr;gap:20px;align-items:start}
@media(max-width:900px){.trang-app .cot{grid-template-columns:1fr}}
@media(max-width:560px){.trang-app .cot{padding:0 16px}}

/* ---------- cột trái: kính TRONG, chữ trắng ---------- */
.trang-app .trai{position:sticky;top:calc(var(--nav-cao,60px) + 14px)}
@media(max-width:900px){.trang-app .trai{position:static}}
.trang-app .trai .the{background:var(--k-trong);
  backdrop-filter:var(--k-blur);-webkit-backdrop-filter:var(--k-blur);
  border:1.5px solid var(--k-vien);border-radius:var(--k-bo);box-shadow:var(--k-bong);
  color:#fff;padding:18px}
@supports not (backdrop-filter:blur(2px)){.trang-app .trai .the{background:rgba(60,45,32,.72)}}
.trang-app .trai .the-dau{border-bottom-color:rgba(255,255,255,.28)}
.trang-app .trai .the-dau .so{color:#E0BC63}
.trang-app .trai label,.trang-app .trai .goi-y,.trang-app .trai .trong{color:var(--tr-mo)}
.trang-app .trai select,.trang-app .trai input,.trang-app .trai textarea{
  background:var(--tr-nen);border:1px solid var(--k-vien);border-radius:100px;color:#fff;padding:11px 16px}
.trang-app .trai textarea{border-radius:16px}
.trang-app .trai input::placeholder{color:rgba(255,255,255,.5)}
.trang-app .trai select{appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,#fff 50%),linear-gradient(135deg,#fff 50%,transparent 50%);
  background-position:calc(100% - 19px) 50%,calc(100% - 13px) 50%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:38px}
.trang-app .trai select option{background:#2E211A;color:#fff}
.trang-app .trai .chip{background:var(--tr-nen);border:1px solid var(--k-vien);color:#fff;border-radius:100px}
.trang-app .trai .chip.chon,.trang-app .trai .chip.on{background:#fff;color:#2E211A;border-color:#fff;font-weight:600}
.trang-app .trai .nut-chinh{background:#fff;color:#2E211A;border:0;border-radius:100px;font-weight:600}
.trang-app .trai .nut-chinh:hover{background:rgba(255,255,255,.88)}
.trang-app .trai .nut-phu,.trang-app .trai .nut-nho{background:0;border:1px solid var(--k-vien);color:#fff;border-radius:100px}
.trang-app .trai .nhac{background:var(--tr-nen);border:1px solid rgba(255,255,255,.3);color:#fff}
.trang-app .trai .nhac b{color:#fff}
.trang-app .trai .nhan{background:var(--tr-nen);color:#fff;border:1px solid rgba(255,255,255,.3)}

/* ---------- khu kết quả: kính ĐỤC, chữ nâu, đọc như giấy ---------- */
.trang-app .phai .the,.trang-app .phai .khoi,.trang-app .phai .kq-o{
  background:var(--k-duc);
  backdrop-filter:var(--k-blur);-webkit-backdrop-filter:var(--k-blur);
  border:1.5px solid var(--k-vien);border-radius:var(--k-bo);box-shadow:var(--k-bong)}
@supports not (backdrop-filter:blur(2px)){
  .trang-app .phai .the,.trang-app .phai .khoi{background:rgba(255,253,248,.98)}}
.trang-app .phai .trong{color:rgba(255,255,255,.8);text-shadow:0 1px 8px rgba(0,0,0,.6)}
/* ô rỗng lúc chưa có kết quả: để trong suốt cho đỡ nặng, chỉ viền đứt */
.trang-app .phai .kq-trong{background:0;border:1px dashed rgba(255,255,255,.4);
  color:rgba(255,255,255,.85);text-shadow:0 1px 8px rgba(0,0,0,.55);border-radius:var(--k-bo)}

/* ---------- khu GIẤY toàn chiều rộng (logo · xem mẫu ảnh) ----------
   Trang không chia hai cột, cả trang là chỗ soi hình. Dùng lại đúng kính ĐỤC
   của khu kết quả để không đẻ thêm một kiểu thẻ thứ ba. */
.trang-app .giay .the{background:var(--k-duc);
  backdrop-filter:var(--k-blur);-webkit-backdrop-filter:var(--k-blur);
  border:1.5px solid var(--k-vien);border-radius:var(--k-bo);box-shadow:var(--k-bong);
  color:var(--ink)}
@supports not (backdrop-filter:blur(2px)){.trang-app .giay .the{background:rgba(255,253,248,.98)}}
.trang-app .giay .nut-chinh,.trang-app .giay button.chinh{background:#2E211A;color:#fff;border:0}
.trang-app .giay .trong{color:rgba(255,255,255,.85);text-shadow:0 1px 8px rgba(0,0,0,.55)}

/* ---------- vá ba chỗ lộ ra khi tự nhìn ảnh chụp 04/09 ---------- */

/* ① Nút trong khu kết quả bị XÁM MỜ. Nguyên nhân: trang nền ảnh ghi đè
   `--nav` sang rgba trong suốt để thanh nav thành kính — mà .nut-chinh của
   nen.css cũng lấy màu từ `--nav`. Khu kết quả nền đục nên phải trả màu đặc. */
.trang-app .phai .nut-chinh,.trang-app .phai .nut{background:#2E211A;color:#fff;border:0}
.trang-app .phai .nut-chinh:hover,.trang-app .phai .nut:hover{background:#463526}
.trang-app .phai .nut-phu,.trang-app .phai .nut-nho{background:0;border:1px solid var(--line2);color:var(--ink2)}
.trang-app .phai .nut-phu:hover,.trang-app .phai .nut-nho:hover{background:var(--panel);color:var(--ink)}

/* ⚠ CỬA THOÁT: nút nào là nút CHÍNH của trang thì thêm class `nut-nhan`.
   Bẫy dính 04/09→07/09: luật `.trang-app .phai .nut-nho{background:0}` ở TRÊN
   có 3 class, thắng luật `.ab-nut .ab-doi{background:var(--acc)}` của trang
   (2 class) → nút "Đổi ảnh" — nút môi giới bấm nhiều nhất — thành trong suốt.
   Không ai thấy, vì tôi không chạy bài kiểm ảnh bài suốt ba ngày. */
.trang-app .phai .nut-nhan,.trang-app .trai .nut-nhan{
  background:var(--acc);border:1px solid var(--acc);color:#fff;font-weight:700}
.trang-app .phai .nut-nhan:hover,.trang-app .trai .nut-nhan:hover{filter:brightness(1.08)}


/* ② Link trong dòng phụ của hero chìm vào ảnh — cho cùng màu vàng đồng với nhãn */
.dau1 .phu a{color:#E0BC63;text-decoration-color:rgba(224,188,99,.5);text-underline-offset:3px}
.dau1 .phu a:hover{text-decoration-color:#E0BC63}

/* ③ Link trong cột trái (kính trong, chữ trắng) cũng phải sáng */
.trang-app .trai a{color:#E0BC63;text-underline-offset:2px}