/* Một mảnh của bộ áo. Tách 02/09/2026 từ `cay.css` (3.103 dòng).
   🪤 THỨ TỰ CÁC THẺ <link> LÀ THẬT: CSS quyết bằng thứ tự khi độ đặc hiệu
   bằng nhau. Đảo hai mảnh là đảo luôn luật nào thắng. */

/* =====================================================================
   Màn hình và thanh dưới
   =====================================================================
   Ứng dụng có bốn chỗ đến. Thanh dưới ở MỌI cỡ màn hình, không chỉ điện
   thoại: đây là kiến trúc điều hướng app native sẽ dùng lại, mà hai kiểu điều
   hướng cho hai cỡ màn hình là hai thứ phải giữ đồng bộ về sau. */

:root { --cao-duoi: 58px; }

/* MỌI màn hình đều cuộn được.
 *
 * 🪤 Đã mắc: chỉ `#trang-chu` có luật cuộn, nên màn hình "Tôi" và trang thông
 * tin bị cắt cụt ở mép dưới — nội dung dài hơn màn hình là mất hẳn phần còn
 * lại, không có thanh cuộn, không có gì báo. `html, body` đã `overflow: hidden`
 * để cây không kéo cả trang theo, nên KHÔNG có lớp nào cuộn thay được.
 *
 * Đặt luật ở `.man` chứ đừng liệt kê từng màn hình: thêm màn hình thứ năm mà
 * quên thêm tên vào danh sách thì lại đúng lỗi này.
 */
.man {
  position: fixed; inset: var(--cao-thanh) 0 var(--cao-duoi) var(--le-trai);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Trừ khung cây: nó là mặt phẳng kéo–chụm, tự lo việc di chuyển. Để nó cuộn
   thì kéo cây một cái là cả khung trôi theo. */
#man-cay { overflow: hidden; }

.thanh-duoi {
  position: fixed; inset: auto 0 0 0; z-index: 25;
  box-shadow: 0 -1px 0 var(--vien), 0 -6px 20px -14px rgba(33,28,22,.3);
  height: calc(var(--cao-duoi) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  display: flex;
  background: var(--giay);
  border-top: 1px solid var(--vien);
}

.mucd {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  border: 0; background: none; cursor: pointer;
  color: var(--muc-nhat);
  font: inherit; font-size: 11px;
  padding: 6px 2px;
}
.mucd-hinh { width: 21px; height: 21px; }
.mucd-chu { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mucd.dang { color: var(--son); font-weight: 600; }
/* Vạch chỉ mục đang mở — ở TRÊN, như thanh điều hướng của app.
   Chỉ đổi màu chữ thì trên màn hình nhỏ khó thấy, nhất là ngoài nắng. */
.mucd::before {
  content: ''; position: absolute; top: 0; left: 50%;
  width: 26px; height: 2.5px; border-radius: 0 0 3px 3px;
  background: var(--son); transform: translateX(-50%) scaleX(0);
  transition: transform .16s;
}
.mucd { position: relative; }
.mucd.dang::before { transform: translateX(-50%) scaleX(1); }
.mucd:focus-visible { outline: 2px solid var(--son); outline-offset: -2px; }

/* Thẻ nổi phải nằm TRÊN thanh dưới, không bị nó che mất hàng nút cuối. */
@media (max-width: 720px) {
  .the { bottom: calc(var(--cao-duoi) + env(safe-area-inset-bottom)); }
}
@media (min-width: 721px) {
  .the { bottom: calc(var(--cao-duoi) + 12px); }
}

/* ---- trang chủ ---- */

.tc-noi-dung { max-width: 760px; margin: 0 auto; padding: 22px 16px 32px; }

/* Thẻ dòng họ: con triện đỏ bên trái, tóm tắt ở giữa, hành động bên phải.
   Con triện là mỏ neo thị giác của cả trang — một khối đặc, đậm màu, có sức
   nặng. Không có nó thì đầu trang chỉ là chữ trên nền, và không gì giữ mắt. */
.the-cay {
  display: flex; align-items: center; gap: 16px;
  padding: 18px; border-radius: var(--bo-lon);
  border: 1px solid var(--vien);
  background: var(--giay-nang);
  box-shadow: var(--bong-3);
}

.tc-trien {
  flex: 0 0 auto;
  width: 64px; height: 64px; border-radius: 10px;
  display: grid; place-items: center;
  background: linear-gradient(158deg, var(--son-sang), var(--son-toi));
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.22), var(--bong-2);
  color: #fff;
}
.tc-trien span {
  font-size: 25px; font-weight: 700; line-height: 1;
  letter-spacing: -.01em;
}

.tc-than { min-width: 0; flex: 1 1 auto; }
.tc-nhan {
  display: block; font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--son);
  margin-bottom: 3px;
}
/* 🪤 Phải là `>` chứ không phải hậu duệ. `.tc-than b` bắt luôn thẻ <b> nằm
   trong `.tc-dong` bên dưới, nên tên thuỷ tổ bị phóng lên 19px và xuống dòng
   riêng — nhìn thành ba dòng rời rạc thay vì một câu tóm tắt. Đúng loại lỗi
   không có gì báo: CSS vẫn hợp lệ, chỉ là chọn nhầm phần tử. */
.tc-than > b { display: block; font-size: 19px; line-height: 1.25; letter-spacing: -.01em; }
.tc-dong { margin: 4px 0 0; font-size: 13.5px; color: var(--muc-nhat); }
.tc-dong b { font-weight: 600; color: var(--muc-dam); }
.tc-mo { flex: 0 0 auto; }

@media (max-width: 560px) {
  .the-cay { flex-wrap: wrap; }
  .tc-mo { width: 100%; justify-content: center; padding: 11px; }
}

/* ---- sắp tới: phần SỐNG của trang ---- */

.tc-sap { margin-top: 24px; }
/* 🪤 `min-width: 0` là thứ cho ô lưới CO LẠI ĐƯỢC. Mặc định ô lưới rộng tối
   thiểu bằng nội dung, nên một hàng dài đẩy cả khối tràn ra ngoài — ở 320px đo
   được 347px trong khung 288px, và cả trang trôi ngang. */
.tc-sap-ds { display: grid; gap: 8px; min-width: 0; }
.tc-sap-ds > * { min-width: 0; }
.o-sap .sap-chu, .o-sap .sap-ten { min-width: 0; overflow-wrap: anywhere; }

.o-sap {
  display: flex; align-items: center; gap: 12px; width: 100%;
  text-align: left; cursor: pointer; font: inherit;
  padding: 12px 14px; border-radius: var(--bo-vua);
  border: 1px solid var(--vien); background: var(--giay-nang);
  color: var(--muc); box-shadow: var(--bong-1);
  transition: border-color .12s, box-shadow .12s, transform .06s;
}
.o-sap:hover { border-color: var(--vien-dam); box-shadow: var(--bong-2); }
.o-sap:active { transform: translateY(1px); }
.o-sap:focus-visible { outline: 2px solid var(--son); outline-offset: 2px; }

.sap-hinh {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--son-nhat); color: var(--son);
}
.o-sap.sk .sap-hinh { background: var(--thep-nhat); color: var(--thep); }

.sap-chu { min-width: 0; flex: 1 1 auto; display: block; }
.sap-chu b { display: block; font-size: 15px; line-height: 1.3;
             white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sap-chu span { display: block; font-size: 12.5px; color: var(--muc-nhat); margin-top: 1px; }

/* Số ngày còn lại là thứ người ta liếc tìm — cho nó chữ số đều và một viên
   nhãn riêng, đừng để lẫn vào dòng mô tả. */
.sap-con {
  flex: 0 0 auto; font-size: 12px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 5px 9px; border-radius: 999px;
  background: var(--giay-sau); color: var(--muc-nhat);
  white-space: nowrap;
}
.sap-con.gan { background: var(--son); color: #fff; }

/* ---- công cụ: lưới ô vuông, không phải danh sách ---- */

.tc-de {
  margin: 26px 0 10px; font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muc-mo);
}

/* Hai cột trên điện thoại, ba cột khi đủ rộng.
   🪤 Đừng quay lại một cột kèm mô tả: sáu hàng giống hệt nhau ăn hết màn hình
   mà không hàng nào nổi hơn hàng nào — mắt phải ĐỌC mới biết đâu là đâu, trong
   khi biểu tượng thì nhận ra bằng hình dạng. */
.tc-luoi { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 620px) { .tc-luoi { grid-template-columns: repeat(3, 1fr); } }

.o-cong-cu {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 9px; min-height: 112px;
  text-align: center; cursor: pointer; font: inherit;
  padding: 16px 10px; border-radius: var(--bo-vua);
  border: 1px solid var(--vien); background: var(--giay-nang);
  color: var(--muc); box-shadow: var(--bong-1);
  transition: border-color .12s, box-shadow .12s, transform .06s, background .12s;
}
.o-cong-cu:hover {
  border-color: var(--son); box-shadow: var(--bong-2);
  background: var(--son-nhat);
}
.o-cong-cu:active { transform: translateY(1px); }
.o-cong-cu:focus-visible { outline: 2px solid var(--son); outline-offset: 2px; }

.cc-hinh {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 13px;
  display: grid; place-items: center;
  background: var(--son-nhat); color: var(--son);
}
.o-cong-cu:hover .cc-hinh { background: var(--giay-nang); }
.cc-hinh .bt { width: 25px; height: 25px; }

.o-cong-cu b { font-size: 14px; font-weight: 600; line-height: 1.3; }

/* Lưới MỘT cột dùng ở mục "Tôi", nơi mỗi mục là một dòng có chữ phụ. */
.tc-luoi.mot { grid-template-columns: 1fr; }
.tc-luoi.mot .o-cong-cu {
  flex-direction: row; align-items: center; justify-content: flex-start;
  min-height: 0; text-align: left; gap: 12px; padding: 12px 12px 12px 14px;
}
.tc-luoi.mot .cc-hinh { width: 40px; height: 40px; border-radius: 11px; }
.tc-luoi.mot .cc-hinh .bt { width: 21px; height: 21px; }
.cc-chu { min-width: 0; flex: 1 1 auto; display: block; }
.cc-chu b { display: block; font-size: 14.5px; line-height: 1.3; }
.cc-chu span { display: block; font-size: 12.5px; color: var(--muc-nhat); margin-top: 1px; }

/* ---- chưa thuộc dòng họ nào ---- */

.tc-mo h2 { margin: 6px 0 6px; }
.tc-mo > p { color: var(--muc-nhat); margin: 0 0 14px; }
.tc-lon { display: grid; gap: 10px; }

.the-lon {
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
  text-align: left; cursor: pointer;
  padding: 16px; border-radius: 12px; font: inherit;
  border: 1px solid var(--son); background: var(--son); color: #fff;
}
.the-lon b { font-size: 16px; }
.the-lon span { font-size: 13px; line-height: 1.4; opacity: .92; }
.the-lon.nhat { background: var(--giay); color: var(--muc); border-color: var(--vien); }
.the-lon.nhat span { color: var(--muc-nhat); opacity: 1; }

.tc-doi { margin-top: 14px; font-size: 14px; color: var(--muc-nhat); }
.tc-doi select { margin-left: 6px; font: inherit; padding: 5px 8px;
                 border: 1px solid var(--vien); border-radius: 8px;
                 background: var(--giay); color: var(--muc); }
.tc-nhac { margin-top: 18px; font-size: 13px; color: var(--muc-nhat); }


/* Mọi biểu tượng dùng chung một hình học Lucide: nét 2, không tô, đầu và góc
   bo tròn. Đặt ở MỘT chỗ để cả bộ không bao giờ lệch nhau. */
.bt { width: 22px; height: 22px; flex: 0 0 auto; }
.bt, svg[class*="-hinh"] {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* Ô tìm người chỉ thuộc về màn hình CÂY. Để nó chình ình trên trang chủ là
   chiếm nguyên một hàng của màn hình điện thoại cho thứ chưa dùng tới. */
.thanh-giua[hidden] { display: none !important; }

@media (max-width: 720px) {
  /* Số người và số đời đã có trong thẻ dòng họ ngay dưới — nhắc lại trên
     thanh là ăn thêm một hàng nữa của màn hình 844px. */
  .thanh-trai .phu { display: none; }

  /* Tên dòng họ CẮT BỚT chứ không xuống dòng. Tên họ Việt kèm quê quán thì
     hay dài, và dài là nó chiếm trọn hàng rồi đẩy hàng nút xuống dòng riêng.
     🪤 `max-width: 100%` KHÔNG cắt được: phần trăm tính theo ô cha, mà ô cha
     lại nở theo chính nội dung. Phải cho ô cha CO LẠI ĐƯỢC —
     `flex: 1 1 0` cộng `min-width: 0` — rồi phép cắt mới có chỗ bám. */
  .thanh-trai { flex: 1 1 0; min-width: 0; }
  .thanh h1 { max-width: 100%; }
}


/* Vạch "hoặc" giữa hai lối đăng nhập. Hai lối NGANG HÀNG — người cần đường
   thứ hai nhất là bác lớn tuổi không nhớ mật khẩu, mà đó cũng là người ít chịu
   đi tìm chữ nhỏ nhất. */
.hoac {
  display: flex; align-items: center; gap: 12px;
  margin: 16px 0 12px; color: var(--muc-nhat); font-size: 12.5px;
}
.hoac::before, .hoac::after {
  content: ''; flex: 1 1 auto; height: 1px; background: var(--vien);
}

/* Ô nhập mã: to, thưa chữ, dễ đọc lại từ thư trên một cái điện thoại khác. */
.o-ma-so {
  font-size: 26px; letter-spacing: .34em; text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ---- CHÂN TRANG: dấu hiệu, bản quyền, pháp nhân vận hành ----
   Đặt cuối mỗi màn hình dài. Cố ý NHẠT và NHỎ: nó là thứ người ta tìm khi cần,
   không phải thứ chen vào giữa việc đang làm. Nhưng cũng không quá nhạt —
   dòng "đang chạy thử nghiệm" là một lời cam kết, phải đọc được. */
.chan-trang {
  margin: 30px 0 8px; padding: 16px 0 8px;
  border-top: 1px solid var(--vien);
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  text-align: center;
}
.chan-logo { width: 148px; height: auto; opacity: .85; }

/* 🪤 CHÂN TRANG KHÔNG ĐƯỢC TO BẰNG NỘI DUNG. David gạt 30/08: "cho dòng tên
   công ty và vận hành bé xiu xíu thôi". Đúng — mấy dòng pháp lý là thứ phải
   CÓ chứ không phải thứ để đọc; chiếm chỗ ngang với việc của dòng họ là sai
   thứ bậc, mà đây lại là khối đóng lại mọi màn hình nên nó lặp đi lặp lại. */
.chan-cau {
  margin: 0; font-size: 10.5px; line-height: 1.6; color: var(--muc-mo);
  max-width: 44ch;
}
/* 🪤 Dòng "đang chạy thử nghiệm" đậm hơn hai dòng kia. Nó nói với người dùng
   rằng dữ liệu còn có thể thay đổi — chìm nghỉm giữa hai dòng pháp lý thì
   không ai đọc, mà đó lại là dòng duy nhất ảnh hưởng tới quyết định của họ. */
.chan-cau b { color: var(--muc-nhat); font-weight: 600; }

@media (prefers-color-scheme: dark) {
  /* Logo ngang là hình đỏ trên nền trong suốt — trên nền tối vẫn đọc được,
     nhưng nhạt đi một chút cho khỏi chói. */
  .chan-logo { opacity: .85; }
}

/* ---- dấu hiệu sản phẩm trên thanh trên ---- */

.dau-hieu {
  display: flex; align-items: center; gap: 9px;
  text-decoration: none; color: var(--muc); flex: 0 0 auto;
}
.dau-hieu-hinh { width: 30px; height: 30px; flex: 0 0 auto; color: #fff; }
.dh-nen { fill: var(--son); }
.dau-hieu-ten {
  font-size: 15px; font-weight: 700; letter-spacing: -.015em;
  white-space: nowrap;
}

/* Tên ứng dụng hiện ở MỌI cỡ màn hình.
   🪤 Bản trước giấu nó trên điện thoại để nhường chỗ cho tên dòng họ. Sai:
   thanh tiêu đề là chỗ duy nhất mang dấu hiệu sản phẩm, và giấu nó đi trên
   đúng thiết bị mà phần lớn người dùng dùng thì coi như không có. Tên dòng họ
   đã đứng to ở thẻ đầu trang chủ và ở dòng "đang xem quanh" của màn hình cây. */
@media (max-width: 720px) {
  .dau-hieu-hinh { width: 26px; height: 26px; }
  .dau-hieu-ten { font-size: 14px; }

  /* Tên dòng họ nhường chỗ khi hẹp — nó có chỗ đứng khác. */
  .thanh-trai { display: none; }
}

/* ---- màn hình Tôi ---- */

.toi-dau {
  display: flex; align-items: center; gap: 13px;
  padding: 16px; border-radius: var(--bo-lon);
  border: 1px solid var(--vien); background: var(--giay-nang);
  box-shadow: var(--bong-2);
}
.toi-anh {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--son-nhat); color: var(--son);
  font-size: 19px; font-weight: 700;
}
.toi-chu { min-width: 0; flex: 1 1 auto; }
.toi-chu b { display: block; font-size: 16px; }
.toi-chu span {
  display: block; font-size: 13px; color: var(--muc-nhat);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.tc-luoi.mot { grid-template-columns: 1fr; }
a.o-cong-cu { text-decoration: none; }

/* Danh sách trang thông tin: một cột, hàng mảnh. Chúng là thứ tìm đúng một
   lần rồi thôi, nên không cạnh tranh chú ý với phần trên. */
.ds-tin {
  border: 1px solid var(--vien); border-radius: var(--bo-vua);
  background: var(--giay-nang); overflow: hidden;
}
.o-tin {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 14px; font-size: 14.5px;
  color: var(--muc); text-decoration: none;
  border-bottom: 1px solid var(--vien);
}
.o-tin:last-child { border-bottom: 0; }
.o-tin:hover { background: var(--giay-sau); }
.o-tin .cc-mui { color: var(--muc-mo); }

.toi-chan {
  margin: 26px 0 0; text-align: center;
  font-size: 13px; font-weight: 600; color: var(--muc-nhat);
}
.toi-chan .phu { font-weight: 400; font-size: 12.5px; }

/* ---- trang thông tin ---- */

.van-ban { max-width: 62ch; margin: 14px auto 0; }
.van-ban h1 { font-size: 24px; line-height: 1.25; margin: 0 0 14px; letter-spacing: -.015em; }
.van-ban h2 {
  font-size: 16px; margin: 26px 0 8px; letter-spacing: -.005em;
  color: var(--muc);
}
.van-ban p, .van-ban li { font-size: 14.5px; line-height: 1.62; color: var(--muc-dam); }
.van-ban ul { padding-left: 20px; }
.van-ban li { margin-bottom: 5px; }
.van-ban a { color: var(--son); }

/* 🪤 KHÔNG CÓ LUẬT NÀO CHO THẺ `a` TRONG CẢ TỆP — chỉ có hai luật cục bộ cho
   `.di-tich` và `.van-ban`. Mọi đường dẫn ở chỗ khác rơi về **xanh gạch chân
   mặc định của trình duyệt**, lạc hẳn khỏi bảng màu giấy–mực. Lộ ra ở form
   đăng ký: hai dòng "Điều khoản sử dụng" và "Chính sách riêng tư" xanh lè
   giữa một hộp toàn màu son.

   Đặt luật chung ở đây, và giữ gạch chân: bỏ gạch chân thì đường dẫn nằm giữa
   câu văn không còn dấu hiệu nào nói nó bấm được, ngoài màu — mà người mù màu
   thì không thấy màu. */
a {
  color: var(--son);
  text-decoration-color: color-mix(in srgb, var(--son) 45%, transparent);
  text-underline-offset: 2px;
}
a:hover { color: var(--son-toi); text-decoration-color: currentColor; }
a:focus-visible { outline: 2px solid var(--son); outline-offset: 2px; border-radius: 2px; }

/* Trừ những chỗ CỐ Ý không giống đường dẫn: thẻ người, ô công cụ, mục dịch vụ
   — chúng là khối bấm được, không phải chữ trong câu. */
.o-cong-cu, .o-tin, .dv-bang, .o-cay-khac, .mucd, .the-lon { text-decoration: none; }
.van-ban .dan {
  font-size: 16px; line-height: 1.55; color: var(--muc);
  padding-left: 13px; border-left: 3px solid var(--son);
}

/* Chỗ cần chủ sản phẩm hoặc luật sư duyệt — cố tình CHÓI, để không ai lỡ phát
   hành kèm chữ tạm. */
.van-ban .can-duyet {
  margin-top: 28px; padding: 12px 14px; border-radius: var(--bo-nho);
  background: var(--thep-nhat); border: 1px solid var(--thep);
  color: var(--muc); font-size: 13.5px;
}
.van-ban .can-dien {
  background: var(--thep-nhat); border-bottom: 1px dashed var(--thep);
  padding: 1px 5px; border-radius: 3px;
}