/* rabapps.net — bảng màu và chữ dùng chung cho mọi trang.
 *
 * CHỮ. Ràng buộc nặng nhất không phải thẩm mỹ mà là DẤU TIẾNG VIỆT: phần lớn
 * phông hiển thị đẹp lại thiếu ơ, ư, ạ, ệ, ỹ — chữ rơi về phông dự phòng ngay
 * giữa một từ và trông vỡ. Nên chọn theo độ phủ trước, dáng sau:
 *   · Lora           — serif, phủ Việt đầy đủ, dùng cho tiêu đề và câu dẫn
 *   · Be Vietnam Pro — thiết kế RIÊNG cho tiếng Việt, dùng cho thân bài
 */
/* ## Vì sao chỉ có MỘT giao diện sáng, không có bản tối
 *
 * Người dùng chốt 08/09: "nên web cho màu trắng". Và điều đó khớp với chất
 * liệu: banner cùng ba ảnh icon đều nền trắng, ĐỤC HOÀN TOÀN. Ở giao diện tối
 * chúng thành bốn khối trắng chói giữa trang — bản tối làm trang xấu đi chứ
 * không đẹp hơn.
 *
 * Nên trang này cam kết một hình thức duy nhất. Đổi lại, MỌI màu phải khai
 * tường minh: không màu nào được để trình duyệt tự chọn, và `body` phải có
 * nền riêng — để trong suốt là mượn nền của trình duyệt, và trình duyệt ở chế
 * độ tối sẽ cho ra chữ tối trên nền tối.
 */
:root {
  color-scheme: light;   /* nói thẳng với trình duyệt: đừng tự đảo màu */

  --nen:      #FFFFFF;
  --nen-hai:  #F5F6F8;
  --muc:      #16202A;   /* đen ngả xanh, không phải đen tuyền */
  --mo:       #5B6875;   /* xám lệch xanh — chọn, không phải xám mặc định */
  --vach:     #E3E7EC;

  /* Ba sắc sản phẩm. Mỗi cụm thông tin về một app mang sắc của nó — không
   * phải trang trí: nó nói đúng một sự thật, ba ứng dụng khác nhau. */
  --talk:        #0E7490;  --talk-nen:   #EDF7FA;  --talk-vach:   #BFE1EB;
  --teach:       #4338CA;  --teach-nen:  #F0EFFC;  --teach-vach:  #D2CEF5;
  --family:      #4D7C0F;  --family-nen: #F2F8E8;  --family-vach: #D8E8BF;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  /* Nền phải đặt TƯỜNG MINH: để trong suốt là mượn nền của trình duyệt và
   * chữ tối có thể rơi lên nền tối. */
  background: var(--nen);
  color: var(--muc);
  font-family: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
.khung { max-width: 46rem; margin: 0 auto; padding: 0 1.5rem; }
a { color: inherit; text-decoration-color: var(--vach); text-underline-offset: .25em; }
a:hover { text-decoration-color: currentColor; }
a:focus-visible { outline: 2px solid var(--talk); outline-offset: 3px; border-radius: 2px; }

h1, h2, h3 { font-family: Lora, Georgia, "Times New Roman", serif; font-weight: 600;
             text-wrap: balance; line-height: 1.25; margin: 0; }
.nhan { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase;
        color: var(--mo); font-weight: 600; }


/* Câu dẫn */
.dan { font-family: Lora, Georgia, serif; font-size: 1.5rem; line-height: 1.45;
       margin: 3rem 0 .75rem; }
.dan-phu { color: var(--mo); margin: 0 0 3rem; max-width: 34rem; }

/* Danh sách sản phẩm — hàng có vạch kẻ, KHÔNG dùng thẻ bo góc */
section { margin-bottom: 3.5rem; }
section > .nhan { display: block; margin-bottom: .25rem; }
/* Mỗi cụm app một sắc nền riêng — đọc lướt là phân biệt được ba sản phẩm mà
 * không phải đọc tên. Sắc rất nhạt để chữ vẫn đủ tương phản trên nền trắng. */
.mon { display: grid; grid-template-columns: 12rem 1fr; gap: 0 2rem;
       padding: 1.4rem 1.5rem; border: 1px solid var(--vach);
       border-radius: .9rem; margin-bottom: 1rem; align-items: start;
       transition: border-color .25s ease, transform .25s ease; }
.mon:hover { transform: translateY(-2px); }
.mon.talk   { background: var(--talk-nen);   border-color: var(--talk-vach); }
.mon.teach  { background: var(--teach-nen);  border-color: var(--teach-vach); }
.mon.family { background: var(--family-nen); border-color: var(--family-vach); }
.mon h3 { font-size: 1.2rem; }
.mon h3 .cham { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%;
                margin-right: .5rem; vertical-align: .12em; }
.mon p { margin: .35rem 0 0; }
.mon .ghi { color: var(--mo); font-size: .95rem; }
.talk .cham { background: var(--talk); }  .talk h3 { color: var(--talk); }
.teach .cham { background: var(--teach); } .teach h3 { color: var(--teach); }
.family .cham { background: var(--family); } .family h3 { color: var(--family); }

@media (max-width: 34rem) {
  .mon { grid-template-columns: 1fr; gap: .25rem; }
  .dan { font-size: 1.3rem; }
}

/* Chân trang */
footer { border-top: 1px solid var(--vach); margin-top: 2rem; }
footer .khung { padding-top: 2rem; padding-bottom: 3rem;
                font-size: .9rem; color: var(--mo); }
footer .hang { display: flex; flex-wrap: wrap; gap: .4rem 1.75rem; }
/* Địa chỉ thư XUỐNG DÒNG riêng, không nằm chung hàng với dòng bản quyền. */
footer .thu { margin-top: .55rem; }
footer .thu a { color: var(--muc); }
footer a { text-decoration: none; }
footer a:hover { text-decoration: underline; }

/* Trang văn bản (chính sách, hỗ trợ) */
.vanban { padding: 2.5rem 0 1rem; }
.vanban h1 { font-size: 1.9rem; margin-bottom: .35rem; }
.vanban h2 { font-size: 1.15rem; margin: 2.25rem 0 .5rem; }
.vanban .ngay { color: var(--mo); font-size: .9rem; margin: 0 0 2rem; }
.vanban ul { padding-left: 1.15rem; }
.vanban li { margin: .35rem 0; }
.vanban table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .95rem; }
.vanban th, .vanban td { text-align: left; vertical-align: top;
                         padding: .6rem .75rem .6rem 0; border-bottom: 1px solid var(--vach); }
.vanban th { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mo); }
.hop { background: var(--nen-hai); border: 1px solid var(--vach);
       padding: 1rem 1.25rem; margin: 1.5rem 0; }
.hop p:first-child { margin-top: 0; } .hop p:last-child { margin-bottom: 0; }
.cuon { overflow-x: auto; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ─── Trang chủ: khẩu hiệu và sứ mệnh ─────────────────────────────────── */
.khau-hieu { padding: 3.5rem 0 0; }
.khau-hieu h1 { font-size: clamp(1.9rem, 5.5vw, 2.9rem); letter-spacing: -.015em; }
.khau-hieu h1 em { font-style: normal; color: var(--talk); }
.su-menh { font-family: Lora, Georgia, serif; font-size: 1.22rem; line-height: 1.55;
           margin: 1.25rem 0 0; max-width: 38rem; }
.su-menh + p { color: var(--mo); margin: .9rem 0 3.25rem; max-width: 38rem; }

/* ─── Trang chi tiết ──────────────────────────────────────────────────── */
.duong-ve { display: inline-block; font-size: .85rem; color: var(--mo);
            text-decoration: none; margin: 2rem 0 .25rem; }
.duong-ve:hover { text-decoration: underline; }
.dau-trang { padding-bottom: 2.5rem; border-bottom: 1px solid var(--vach); }
.dau-trang h1 { font-size: clamp(1.8rem, 5vw, 2.4rem); }
.dau-trang .cham-to { display: inline-block; width: .7rem; height: .7rem;
                      border-radius: 50%; margin-right: .6rem; vertical-align: .12em; }
.dau-trang .mo-ta { font-family: Lora, Georgia, serif; font-size: 1.18rem;
                    line-height: 1.55; margin: 1rem 0 0; max-width: 38rem; }

/* Danh sách tính năng — hai cột trên máy rộng, KHÔNG dùng thẻ bo góc */
.tinh-nang { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.75rem 2.5rem;
             margin: 1.25rem 0 0; }
.tinh-nang > div { border-top: 2px solid var(--vach); padding-top: .9rem; }
.tinh-nang h3 { font-size: 1.02rem; font-family: "Be Vietnam Pro", sans-serif;
                font-weight: 600; }
.tinh-nang p { margin: .3rem 0 0; color: var(--mo); font-size: .95rem; }
@media (max-width: 40rem) { .tinh-nang { grid-template-columns: 1fr; gap: 1.4rem; } }

/* Hai cấp gia sư — cột có kẻ trên, không phải thẻ */
.hai-cap { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.5rem;
           margin: 1.25rem 0 0; }
.hai-cap > div { border-top: 3px solid var(--vach); padding-top: 1rem; }
.hai-cap .co-ban { border-top-color: var(--family); }
.hai-cap .nang-cao { border-top-color: var(--talk); }
.hai-cap h3 { font-size: 1.15rem; margin-bottom: .15rem; }
.hai-cap .gia { font-size: .78rem; font-weight: 600; letter-spacing: .06em;
                text-transform: uppercase; color: var(--mo); }
.hai-cap ul { padding-left: 1.1rem; margin: .75rem 0 0; }
.hai-cap li { margin: .3rem 0; font-size: .95rem; }
@media (max-width: 40rem) { .hai-cap { grid-template-columns: 1fr; gap: 1.75rem; } }

/* ─── Ký hiệu và biểu tượng ───────────────────────────────────────────── */
/* Mọi biểu tượng vẽ bằng nét theo `currentColor`, nên đổi màu chữ là đổi màu
 * biểu tượng — không phải nuôi hai bộ ảnh cho nền sáng và nền tối. */
.bt { width: 1.35rem; height: 1.35rem; flex: none; stroke: currentColor;
      stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
/* Ký hiệu sản phẩm — hình ĐẶC theo `currentColor`, không phải nét mảnh.
 * Nét 1,6px tan ở 16px; hình đặc thì bóng dáng còn nguyên khi thu nhỏ. */
.ky { flex: none; fill: currentColor; }
.dau-mon { width: 2.3rem; height: 2.3rem; }
.dau-to  { width: 2.9rem; height: 2.9rem; vertical-align: -.55rem; margin-right: .5rem; }


/* Hàng sản phẩm: thêm chỗ cho ký hiệu, và nét kẻ ở trên đổi màu khi rê chuột */

.mon h3 { display: flex; align-items: center; gap: .5rem; }
.mon h3 a { text-decoration: none; }
.mon h3 a::after { content: "→"; display: inline-block; margin-left: .4rem;
                   opacity: 0; transform: translateX(-.25rem);
                   transition: opacity .25s ease, transform .25s ease; }
.mon:hover h3 a::after { opacity: 1; transform: translateX(0); }

/* Thẻ tính năng: biểu tượng đứng cạnh tiêu đề */
.tinh-nang h3 { display: flex; align-items: center; gap: .55rem; }
.tinh-nang > div { transition: border-color .25s ease; }
.tinh-nang > div:hover { border-top-color: var(--muc); }
.talk .tinh-nang > div:hover { border-top-color: var(--talk); }
.teach .tinh-nang > div:hover { border-top-color: var(--teach); }
.family .tinh-nang > div:hover { border-top-color: var(--family); }

/* ─── Hiện dần khi cuộn ───────────────────────────────────────────────── */
/* Lớp `.an` do JavaScript gắn vào, KHÔNG có sẵn trong HTML — xem rab.js. */
[data-hien] { transition: opacity .5s ease, transform .5s ease; }
[data-hien].an { opacity: 0; transform: translateY(.6rem); }

@media (prefers-reduced-motion: reduce) {
  [data-hien], [data-hien].an { opacity: 1; transform: none; transition: none; }
  .mon h3 a::after { opacity: 1; transform: none; }
}

/* ─── Banner và thanh điều hướng ──────────────────────────────────────── */
/* Ảnh banner ĐỤC HOÀN TOÀN, nền gần trắng — nên ở giao diện tối nó sẽ là một
 * khối trắng giữa trang. Đặt nó trên một tấm nền sáng cố định thì khối trắng
 * đó thành CÓ CHỦ Ý, đọc ra là một tấm biển hiệu, thay vì một lỗi hiển thị. */
/* Banner nằm TRONG cùng khung với menu và thân trang, không tràn màn hình.
 * Nền trang đã trắng nên ảnh (nền cũng trắng) hoà thẳng vào, không cần tấm
 * nền riêng — và không còn mép nào để lộ. */
.banner .khung { padding-top: 1.5rem; padding-bottom: .25rem; }
.banner a { display: block; text-decoration: none; }
.banner img { display: block; width: 100%; height: auto; }

/* ## Menu — mượn đúng ngôn ngữ hình của banner
 *
 * Chữ "RabApps" trên banner vẽ theo lối MẠCH ĐIỆN: nét mảnh, có nút tròn ở
 * đầu đường, có ánh sáng lan. Menu lặp lại đúng ba yếu tố đó thay vì bịa ra
 * một hiệu ứng "công nghệ" chung chung:
 *
 *   · một đường mạch mảnh chạy hết bề ngang, có nút ở hai đầu;
 *   · mỗi mục có một nút tròn phía trước — tắt lúc thường, SÁNG khi rê chuột;
 *   · gạch chân mọc từ trái sang, chuyển sắc teal → lam, kết thúc bằng một
 *     nút sáng — đúng dáng một đoạn mạch vừa được cấp điện.
 *
 * Không dùng chuyển sắc nền, không đổ bóng màu, không chữ phát sáng: banner
 * đã đủ nặng phần hình rồi, menu phải nhẹ hơn nó. */
nav.dieu-huong {
  position: relative;
  border-top: 1px solid var(--vach);
  border-bottom: 1px solid var(--vach);
  background: var(--nen);
}
/* Đường mạch: một nét chuyển sắc mờ dần về hai đầu, nằm trên vạch kẻ trên. */
nav.dieu-huong::before {
  content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--talk) 18%,
                              #22B8CF 50%, var(--talk) 82%, transparent);
  opacity: .55;
}
nav.dieu-huong .khung {
  display: flex; flex-wrap: wrap; align-items: center; gap: .1rem 2rem;
  padding-top: .75rem; padding-bottom: .75rem;
}
nav.dieu-huong a {
  position: relative; display: inline-flex; align-items: center; gap: .5rem;
  font-size: .93rem; color: var(--mo); text-decoration: none;
  padding: .3rem 0; transition: color .22s ease;
}
/* Nút mạch phía trước mỗi mục */
nav.dieu-huong a::before {
  content: ""; width: .38rem; height: .38rem; border-radius: 50%;
  background: var(--vach);
  box-shadow: 0 0 0 0 rgba(14, 116, 144, .35);
  transition: background .22s ease, box-shadow .28s ease;
}
/* Gạch chân mọc từ trái, chuyển sắc, kết thúc bằng một nút sáng */
nav.dieu-huong a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
  background: linear-gradient(90deg, var(--talk), #22B8CF);
  transform: scaleX(0); transform-origin: left;
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}
nav.dieu-huong a:hover, nav.dieu-huong a[aria-current="page"] { color: var(--muc); }
nav.dieu-huong a:hover::before, nav.dieu-huong a[aria-current="page"]::before {
  background: var(--talk); box-shadow: 0 0 0 .22rem rgba(14, 116, 144, .13);
}
nav.dieu-huong a:hover::after, nav.dieu-huong a[aria-current="page"]::after {
  transform: scaleX(1);
}
nav.dieu-huong a:focus-visible { outline: 2px solid var(--talk); outline-offset: 4px;
                                 border-radius: 2px; }
@media (max-width: 34rem) { nav.dieu-huong .khung { gap: .1rem 1.25rem; }
                            nav.dieu-huong a { font-size: .88rem; } }
@media (prefers-reduced-motion: reduce) {
  nav.dieu-huong a::after { transition: none; }
  nav.dieu-huong a::before { transition: none; }
}

/* Chỉ đọc bằng trình đọc màn hình — tiêu đề h1 khi khẩu hiệu đã nằm trong ảnh */
.chi-doc { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
           overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ─── Hàng sản phẩm có ảnh đại diện ───────────────────────────────────── */
.mon { grid-template-columns: 5.5rem 1fr; gap: 0 1.5rem; }
.mon .anh { grid-row: span 2; }
.mon .anh img { display: block; width: 100%; height: auto; border-radius: 1.1rem; }
.mon-noi h3 { display: flex; align-items: center; gap: .5rem; margin-bottom: .1rem; }
@media (max-width: 34rem) {
  .mon { grid-template-columns: 4rem 1fr; gap: 0 1rem; }
}

/* Mục "Giải pháp về" trên trang chủ — có chỗ neo cho thanh điều hướng */
section[id] { scroll-margin-top: 1.5rem; }

/* Ảnh đại diện ở đầu trang chi tiết */
.anh-dau { margin: 1.75rem 0 -.5rem; }
.anh-dau img { display: block; width: 5.5rem; height: 5.5rem; border-radius: 1.2rem; }


/* Dải đầu trang chi tiết — mang sắc của chính app đó, nối tiếp cụm màu ở
 * trang chủ. Đọc lướt qua hai trang là nhận ra cùng một sản phẩm. */
.dau-trang-sac { border: 1px solid var(--vach); border-radius: .9rem;
                 padding: 1.5rem 1.75rem 1.75rem; margin-top: 1.75rem; }
.dau-trang-sac.talk   { background: var(--talk-nen);   border-color: var(--talk-vach); }
.dau-trang-sac.teach  { background: var(--teach-nen);  border-color: var(--teach-vach); }
.dau-trang-sac.family { background: var(--family-nen); border-color: var(--family-vach); }
.dau-trang-sac .anh-dau { margin: 0 0 .9rem; }
.dau-trang-sac .dau-trang { border-bottom: 0; padding-bottom: 0; }

/* ─── Nhóm giải pháp văn phòng ────────────────────────────────────────── */
/* Sắc thứ tư của bộ: teal, chàm, ô-liu đều là màu lạnh — thêm một sắc ẤM ở
 * đây vừa tách bạch với ba nhóm kia, vừa hợp nghĩa: đây là nhóm về giấy tờ,
 * văn bản, tài liệu. */
:root { --vp: #A16207; --vp-nen: #FAF6EC; --vp-vach: #E9DCBE; }

.khoi-vp { background: var(--vp-nen); border: 1px solid var(--vp-vach);
           border-radius: .9rem; padding: 1.5rem 1.75rem; }
.khoi-vp > p:first-child { margin-top: 0; }
.khoi-vp .moi { margin-bottom: 0; color: var(--mo); }

.ds-vp { display: grid; grid-template-columns: 10rem 1fr; gap: 0 1.5rem;
         margin: 1.35rem 0; }
.ds-vp dt { font-weight: 600; color: var(--vp);
            padding: .55rem 0; border-top: 1px solid var(--vp-vach); }
.ds-vp dd { margin: 0; padding: .55rem 0; color: var(--muc);
            border-top: 1px solid var(--vp-vach); }
.ds-vp dt:first-of-type, .ds-vp dd:first-of-type { border-top: 0; }
@media (max-width: 34rem) {
  .ds-vp { grid-template-columns: 1fr; gap: 0; }
  .ds-vp dt { padding-bottom: 0; }
  .ds-vp dd { padding-top: .1rem; border-top: 0; }
}

/* Ba cách sử dụng RabTeach.
 * ⚠ PHẢI khoanh bằng lớp riêng `.ba-cap`. `.hai-cap` còn được trang RabTalk
 * dùng cho khối HAI cấp gia sư — đổi thẳng nó thành ba cột thì trang kia thừa
 * một cột trống, mà nhìn CSS thì không thấy gì sai. */
.ba-cap { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.ba-cap .ca-nhan { border-top-color: var(--vp); }
@media (max-width: 52rem) { .ba-cap { grid-template-columns: 1fr; gap: 1.75rem; } }