/* Hai ảnh anh Thanh chọn: ảnh 2 cho xác thực, ảnh 1 cho đầu trang trò chuyện.
   Chỉ trình bày; giữ nguyên DOM, dữ liệu và xử lý đăng nhập/đăng ký. */
:root {
  --naloo-nen-song: url('/anh/naloo-nen-song-binh-minh.webp?v=1');
}

/* Ảnh 2 đã có logo và khẩu hiệu: không chèn thêm ảnh 1 lên trên. */
.man-xanh {
  --naloo-rong-anh: min(100cqw, 440px);
  container-type: inline-size;
  background: #062343;
}
.man-xanh::before {
  position: absolute; inset: 0 auto 0 50%; width: min(100%, 440px); transform: translateX(-50%);
  -webkit-mask-image: none; mask-image: none;
  background-image: linear-gradient(180deg,transparent 58%,rgba(6,35,67,.72) 76%,#062343 100%),var(--naloo-nen-song);
  background-size: var(--naloo-rong-anh) calc(var(--naloo-rong-anh) * 1672 / 941);
  background-position: center top; background-repeat: no-repeat;
}
@media (min-width: 480px) {
  .man-xanh::before {
    -webkit-mask-image: linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
    mask-image: linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  }
}
/* Giữ tên ứng dụng và khẩu hiệu cho trình đọc màn hình. */
.man-xanh .ten-app, .man-xanh .khau-hieu {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.man-xanh-giua { max-width: 380px; padding: 0 24px max(20px, env(safe-area-inset-bottom)); }
.man-xanh .man-xanh-giua::before {
  flex: 1 0 calc(var(--naloo-rong-anh) * 1.14); max-height: none;   /* chừa logo + khẩu hiệu của ảnh; còn dư thì đẩy chữ + ô xuống sát dưới cho dễ bấm */
}
/* Dòng "tạo tài khoản là đồng ý…": chữ chảy 1 đoạn, không vỡ cột */
.man-xanh .chan-trang { display: block; }
.man-xanh .chan-trang a { display: inline; padding: 0; }
.man-xanh .o > span:not(.o-mat-khau), .man-xanh .tieu-de, .man-xanh .loi-chao {
  text-shadow: 0 1px 5px #031426, 0 1px 12px #031426;
}
.man-chao .chao-nut { margin-top: auto; }
.man-chao .day { margin-top: 0; }

/* Cụm xác thực nhỏ gọn hơn, vẫn giữ vùng bấm tối thiểu 44px. */
.man-xanh .o { margin-bottom: 10px; }
.man-xanh .o > span:not(.o-mat-khau) { font-size: .82rem; margin-bottom: 5px; }
.man-xanh .o input, .man-xanh .o-so-email .ma-nuoc {
  min-height: 44px; padding-top: 9px; padding-bottom: 9px; font-size: 16px; border-radius: 22px;
}
.man-xanh .nut { min-height: 46px; padding: 10px 14px; font-size: 1rem; border-radius: 23px; }
.man-xanh .tieu-de { font-size: 1.05rem; }
.man-xanh .lien-ket { min-height: 44px; margin-top: 2px; padding: 10px 4px; font-size: .9rem; }
/* Trên ảnh sóng: chữ liên kết (cả "Gửi lại mã (… giây)" đang chờ) vẫn rõ – có bóng tối, không mờ quá */
.man-xanh .lien-ket { text-shadow: 0 1px 4px #031426, 0 0 10px #031426; }
.man-xanh .lien-ket:disabled { opacity: .8; }
.man-xanh .ngan { margin: 8px 0; }
.man-xanh .chao-nut { gap: 10px; }
/* Trong app: ảnh ngang kín từ trái sang phải ở trên cùng. Bản sáng (anh Thanh 25.10.2026): chữ logo giữ nguyên,
   nước phía dưới nhạt dần thành màu nền (chỉ còn dáng sóng), góc trên phải sáng dần sang trắng – vẽ bằng scripts/ve-anh-dau-sang.py.
   Tên người dùng nằm ở mép dưới đã sáng → chữ xanh đậm; chế độ tối dùng bản hoà vào nền tối, chữ trắng. */
/* Ảnh trải liền từ đầu trang xuống dưới thanh "Trò chuyện / Bạn bè" và tan dần đúng màu nền → nhìn như 1 tấm, không ranh giới */
#cot-tc {
  container-type: inline-size;
  background: url('/anh/naloo-dai-sang.webp?v=6') center top / 100% auto no-repeat var(--nen);
}
#cot-tc > .dau {
  position: relative; align-items: flex-end;
  min-height: calc(100cqw * 941 / 1672 - 26px); padding-bottom: 4px;   /* tên nằm dưới logo, thanh tab nằm trên phần ảnh đang tan */
  background: transparent; box-shadow: none;
}
#cot-tc > .the-tab, #cot-tc > #nhac-tb { background: transparent; }
#cot-tc .dau .logo-chu, #cot-tc .dau .vach-dau { display: none; }
#cot-tc .dau .dau-logo, #cot-tc .dau .dau-logo .phu { color: #0e3552; }
#cot-tc .dau .dau-logo .phu {
  flex: 0 1 auto; width: auto; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 1.1rem; font-weight: 800; opacity: 1; text-shadow: 0 0 6px rgba(255,255,255,.9), 0 0 2px #fff;
}
#cot-tc .dau > .cham { align-self: flex-end; margin-bottom: 10px; }
#cot-tc .dau .nut-tron { background: var(--nen-tron-xanh); color: #fff; border-color: transparent; box-shadow: 0 2px 8px rgba(8,60,100,.3); }
@media (prefers-color-scheme: dark) {
  #cot-tc { background-image: url('/anh/naloo-dai-toi.webp?v=6'); }
  #cot-tc .dau .dau-logo, #cot-tc .dau .dau-logo .phu { color: #fff; }
  #cot-tc .dau .dau-logo .phu { text-shadow: 0 1px 3px #031426, 0 0 8px #031426; }
}

/* Nền các cột menu: xanh nhạt như trước (màu của menu B), không lặp ảnh. */
.cot-ds { background: var(--nen); }
.cot-ds > .ds, .cot-ds > .ca-nhan, .cot-ds > .nhat-ky { background: transparent; }
.khung-chinh:not(.dang-chat) .cot-chat { background: var(--nen); }