/* =========================
   VARIABLES (TỐI ƯU TAI THỎ & MÀN TRÀN VIỀN)
========================= */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

/* =========================
   RESET + BASE
========================= */
*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  background: #f4f5f7; /* Màu nền hai bên khi xem trên PC */
  color: #111;
  overscroll-behavior-y: none; /* Chặn hiệu ứng nảy trang quá đà trên iOS */
  display: flex; /* Dùng để căn giữa app trên màn hình máy tính */
  justify-content: center;
}

a { 
  color: inherit; 
  text-decoration: none; 
}

img { 
  max-width: 100%; 
  height: auto; 
  display: block; 
}

/* =========================
   LAYOUT WRAP (ÉP KHUNG MOBILE CHUẨN)
========================= */
.wrap {
  width: 100%;
  max-width: 480px; /* Ép cứng kích thước điện thoại trên PC */
  min-height: 100vh;
  background: #ffffff; /* Nền của App */
  margin: 0 auto;
  box-shadow: 0 0 20px rgba(0,0,0,.08);
  position: relative;
  overflow-x: hidden;
  
  /* Đẩy padding dựa trên vùng an toàn (tai thỏ, thanh home) + padding gốc 12px */
  padding-top: calc(12px + var(--safe-top));
  padding-bottom: calc(12px + var(--safe-bottom));
  padding-left: calc(12px + var(--safe-left));
  padding-right: calc(12px + var(--safe-right));
}

/* Ẩn thanh cuộn dọc nhưng vẫn vuốt mượt */
.wrap::-webkit-scrollbar {
  display: none;
}

/* =========================
   TOPBAR
========================= */
.topbar {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 16px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 6px 18px rgba(0,0,0,.05);
  gap: 10px; /* FIX LỖI: Chống đè logo và nút */
}

.brand { 
  display: flex; 
  align-items: center; 
  gap: 10px; 
  min-width: 0; 
}

.brand img { 
  height: 28px; 
}

.brand .text { 
  font-weight: 900; 
  letter-spacing: .5px; 
  font-size: 18px; 
  /* FIX LỖI TEXT LOGO TRÀN VIỀN */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.brand-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.brand-247 { 
  color: #e11d48; 
  font-weight: 900; 
}

/* =========================
   BUTTONS / ICONS
========================= */
.iconbtn {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: #f0f2f5; /* Nền xám nhạt */
  border: none; /* Bỏ viền */
  color: #1c1e21;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  font-weight: 900;
  user-select: none;
  -webkit-user-select: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  transition: all 0.2s ease;
}

.iconbtn:active { 
  transform: scale(.92); 
}

/* Nền riêng biệt cho Avatar chữ C */
.avatar-user {
  border-radius: 999px;
  background: #fff; /* Nền trắng bên trong */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  /* Đổi viền xám nhạt (#eee) sang màu hồng đậm thương hiệu */
  border: 2px solid #e11d48; 
  /* Chỉnh lại kích thước chữ C cho vừa vặn */
  color: #e11d48; /* Chữ C cũng màu hồng luôn cho tone-sur-tone */
  font-size: 16px; 
}

/* Khối bọc nút thông báo và avatar ép thẳng hàng */
.right {
  display: flex;
  align-items: center; /* Quan trọng nhất: Ép thẳng hàng dọc */
  gap: 12px; /* Khoảng cách giữa nút chuông và nút avatar */
  flex-shrink: 0; /* FIX LỖI: BẢO VỆ CỤM NÚT BÊN PHẢI KHÔNG BỊ BÓP MÉO */
}

/* Thông báo đỏ nổi bật có viền trắng và nhịp đập */
.noti-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #ff3b30;
  color: #fff;
  font-size: 11px;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  border: 2px solid #fff; 
  animation: pulse-noti 2s infinite; 
}

@keyframes pulse-noti {
  0% { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.65); }
  70% { box-shadow: 0 0 0 6px rgba(255, 59, 48, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0); }
}

.btn-auth {
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 14px;
  border: 1px solid #eee;
  background: #fff;
  cursor: pointer;
  user-select: none;
  /* FIX LỖI NÚT KHỔNG LỒ & RỚT DÒNG TRÊN TRÌNH DUYỆT IN-APP */
  white-space: nowrap; 
  flex-shrink: 0; 
}

.btn-auth:active { 
  transform: scale(.95); 
  transition: transform 0.1s ease; 
}

.btn-register {
  background: #e11d48;
  color: #fff;
  border-color: #e11d48;
}

/* =========================
   DROPDOWN MENU
========================= */
.menu { 
  position: relative; 
  display: flex; 
  gap: 8px; 
}

.dropdown {
  position: absolute;
  top: 48px;
  right: 0;
  width: 200px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
  overflow: hidden;
  display: none;
  z-index: 50;
}

.dropdown a {
  display: block;
  padding: 12px;
  font-weight: 800;
  border-top: 1px solid #f2f2f2;
}

.dropdown a:first-child { border-top: none; }
.dropdown a:hover { background: #fafafa; }
.dropdown a:active { background: #f3f3f3; }

/* =========================
   BANNER
========================= */
.banner {
  margin-top: 10px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #eee;
  background: #fff;
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
}

/* =========================
   HERO (ĐÃ SỬA ĐỂ CHỮ TRÀN HẾT DÒNG)
========================= */
.ck247-hero {
  margin: 12px 0 16px;
  padding: 18px 16px;
  border-radius: 22px;
  background: linear-gradient(135deg, #ff4c92, #ff7a45);
  box-shadow: 0 14px 32px rgba(255,77,141,.3);
  color: #fff;
  position: relative;
  overflow: hidden;
  display: block; /* Đổi từ flex sang block để nội dung tự do chiếm hết hàng */
}

.ck247-hero:before {
  content: "";
  position: absolute;
  right: -60px;
  top: -60px;
  width: 220px;
  height: 220px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
}

.ck247-hero__left { 
  width: 100%; /* Giải phóng giới hạn, cho phép chữ chạy hết 100% */
  position: relative;
  z-index: 2; /* Đẩy chữ nổi lên trên hình nền */
}

.ck247-hero__title { font-size: 22px; font-weight: 900; }
.ck247-hero__subtitle { font-size: 30px; font-weight: 900; line-height: 1.15; margin-top: 4px; }
.ck247-hero__desc { font-size: 15px; opacity: .95; margin: 12px 0 16px; line-height: 1.4; }

.ck247-hero__btn {
  display: inline-block;
  background: #fff;
  color: #ff4c92;
  font-weight: 900;
  font-size: 14px;
  padding: 10px 16px;
  border-radius: 14px;
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
  user-select: none;
}
.ck247-hero__btn:active { 
  transform: scale(0.95); 
  transition: transform 0.1s ease; 
}

.ck247-hero__right { 
  position: absolute; /* Đưa hình vẽ thành phần nền chìm */
  right: -10px; 
  bottom: 0px; 
  z-index: 1; /* Cài hình chìm xuống dưới chữ */
  pointer-events: none; /* Không cản trở người dùng bấm vào nút Mua ngay */
  opacity: 0.8; /* Làm mờ ảnh đi một chút để chữ đè lên dễ đọc hơn */
}

.ck247-hero__svg {
  width: 170px;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.18));
}

@supports not (filter: drop-shadow(0 0 0 #000)) {
  .ck247-hero__svg { box-shadow: 0 10px 18px rgba(0,0,0,.18); }
}

@media(max-width: 480px) {
  .ck247-hero__subtitle { font-size: 26px; }
  .ck247-hero__svg { width: 150px; }
}

/* =========================
   GRID + CARD
========================= */
h2 { 
  margin: 16px 4px 10px; 
  font-size: 26px; 
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

@supports not (display: grid) {
  .grid { display: flex; flex-wrap: wrap; }
  .grid .card { width: calc(50% - 10px); }
}

.card {
  background: #fff;
  border-radius: 16px;
  padding: 12px;
  min-height: 82px;
  border: 1px solid #eee;
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
  position: relative;
  cursor: pointer;
  user-select: none;
}

.card:active { 
  transform: scale(.96); 
  transition: transform 0.1s ease; 
}

.left { 
  display: flex; 
  gap: 10px; 
  align-items: center; 
}

.logoBox {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: #f5f6f8;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logoBox img { 
  width: 28px; 
  height: 28px; 
  object-fit: contain; 
}

.title { font-weight: 900; font-size: 17px; }
.rightInfo { text-align: right; }
.pct { margin-top: 6px; font-weight: 900; color: #e91e63; }
.chev { position: absolute; right: 10px; bottom: 8px; color: #bbb; }

/* =========================
   ZALO – FINAL & CLEAN
========================= */
.zaloWrap {
  margin-top: 12px;
  background: linear-gradient(135deg, #ffe08a, #ffd58f, #f7b7c7);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
}

.zaloTitle {
  text-align: center;
  font-weight: 900;
  margin-bottom: 10px;
}

.zbtn {
  width: 100%;
  min-height: 48px;
  background: #1b74ff;
  color: #fff;
  border: none;
  border-radius: 14px;
  padding: 12px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

.zbtn:active { 
  transform: scale(.98); 
  transition: transform 0.1s ease; 
}

.zbtn img.zalo-icon {
  width: 22px !important;
  height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;
  flex: 0 0 22px !important;
  object-fit: contain;
  display: block;
}

/* Kích thước và màu sắc cho icon hình người */
.avatar-svg {
  width: 22px;
  height: 22px;
  color: #e11d48; /* Màu hồng đậm giống màu viền */
  margin-top: 2px; /* Đẩy nhẹ xuống một chút cho cân đối ở giữa */
}

/* Đảm bảo Avatar img thật (nếu sau này bạn cho user tải ảnh lên) sẽ bo tròn */
.avatar-user img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* =========================
   RESPONSIVE CHO MÀN HÌNH NHỎ (Fix cho in-app browser hẹp & che chữ)
========================= */
@media (max-width: 414px) {
  .topbar {
    padding: 8px 10px; /* Ép viền thanh topbar mỏng lại lấy không gian */
  }
  .brand .text {
    font-size: 14px; /* Giảm cỡ chữ logo xuống một chút */
  }
  .btn-auth {
    padding: 6px 10px; /* Giảm kích thước nút */
    font-size: 12px; /* Giảm cỡ chữ trong nút */
  }
  .right {
    gap: 6px; /* Đẩy 2 nút sát lại gần nhau hơn */
  }
}