/* ==========================================================================
   NDN Tools — phần TRANG TRÍ dùng chung cho mọi trang.

   SỬA CHỮ NGHĨA THÌ KHÔNG CẦN MỞ FILE NÀY. Chữ nằm trong các file .html.
   Chỉ mở file này khi muốn đổi màu hoặc cỡ chữ của cả web một lượt.

   Đổi màu chủ đạo: sửa --xanh ở ngay dưới đây.
   ========================================================================== */
:root{
  --xanh:#2563eb; --xanh-dam:#1d4ed8; --luc:#16a34a;
  --chu:#111827; --chu-nhat:#5b6472; --vien:#e5e7eb; --nen:#f3f5f9;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--nen); color:var(--chu); line-height:1.65;
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.kho{max-width:1060px; margin:0 auto; padding:0 20px}
/* khổ hẹp: dùng cho trang chi tiết sản phẩm, đọc đỡ mỏi mắt */
.kho-hep{max-width:780px}
a{color:var(--xanh); text-decoration:none}
a:hover{text-decoration:underline}
section{padding:46px 0}

/* ------------------------------------------------------------ thanh trên */
header{background:#fff; border-bottom:1px solid var(--vien); position:sticky; top:0; z-index:9}
header .kho{display:flex; align-items:center; height:64px}
.logo{display:flex; align-items:center; gap:10px; font-weight:800; font-size:18px; color:var(--chu)}
.logo:hover{text-decoration:none}
.logo span{
  width:32px; height:32px; border-radius:9px; background:var(--xanh); color:#fff;
  display:grid; place-items:center; font-size:18px
}

/* ------------------------------------------------------------ nút */
.nut{
  display:inline-block; padding:13px 28px; border-radius:8px; font-weight:700;
  background:var(--xanh); color:#fff; border:none; font-size:16px
}
.nut:hover{background:var(--xanh-dam); text-decoration:none}
.nut.tat{background:#e5e7eb; color:#9ca3af; pointer-events:none}
.co-nho{display:block; font-weight:400; font-size:13px; opacity:.85; margin-top:3px}

/* ------------------------------------------------------------ nhãn tình trạng */
.nhan{
  display:inline-block; padding:4px 11px; border-radius:999px;
  font-size:12.5px; font-weight:700; letter-spacing:.2px
}
.nhan.ban{background:#dbeafe; color:#1d4ed8}
.nhan.free{background:#dcfce7; color:#15803d}
.nhan.sap{background:#f1f5f9; color:#64748b}

/* ------------------------------------------------------------ mở đầu trang chủ */
.mo-dau{padding:60px 0 40px; text-align:center}
.mo-dau h1{font-size:40px; line-height:1.25; margin:0 0 16px; letter-spacing:-.5px}
.nhan-dung-thu{
  display:inline-block; background:#dcfce7; color:#15803d;
  padding:7px 16px; border-radius:999px; font-weight:700; font-size:14.5px
}
@media(max-width:700px){ .mo-dau h1{font-size:30px} }

/* ==========================================================================
   Ô ẢNH và Ô VIDEO

   Chưa có ảnh thì tự hiện chữ "Ảnh sắp lên". Thả đúng tên file ảnh vào thư
   mục anh/ là ảnh tự hiện lên, KHÔNG phải sửa gì trong file .html.
   ========================================================================== */
.anh{
  position:relative; width:100%; aspect-ratio:16/10; border-radius:10px;
  overflow:hidden; background:#e8ecf2; border:1px dashed #cbd5e1;
  display:grid; place-items:center
}
.anh img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.cho-anh{color:#94a3b8; font-size:14px}

/* khung video: giữ đúng tỉ lệ 16:9 dù chưa có video */
.video{
  position:relative; width:100%; aspect-ratio:16/9; border-radius:10px; overflow:hidden;
  background:#0f172a
}
.video iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.video.chua-co{
  display:grid; place-items:center; color:#94a3b8; background:#e8ecf2;
  border:1px dashed #cbd5e1; font-size:15px
}

/* ==========================================================================
   TRANG CHỦ — lưới thẻ sản phẩm.

   Lưới tự xếp: 3 cột trên máy tính, 2 cột trên máy tính bảng, 1 cột trên
   điện thoại. Thêm tool mới chỉ cần chép thêm một khối <a class="the-sp">,
   không phải tính lại số cột.
   ========================================================================== */
.luoi{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:22px}
.the-sp{
  display:block; background:#fff; border:1px solid var(--vien); border-radius:14px;
  overflow:hidden; color:var(--chu); transition:border-color .15s, transform .15s
}
.the-sp:hover{border-color:#c7d2fe; transform:translateY(-2px); text-decoration:none}
.the-sp .anh{border-radius:0; border:none; border-bottom:1px solid var(--vien)}
.the-sp .ruot{padding:18px 20px 20px}
.the-sp h3{font-size:20px; margin:10px 0 6px}
.the-sp p{color:var(--chu-nhat); margin:0 0 14px; font-size:15px}
.xem-them{color:var(--xanh); font-weight:700; font-size:14.5px}

/* ==========================================================================
   TRANG CHI TIẾT SẢN PHẨM — chỉ ba phần: mô tả, video, nút tải.
   ========================================================================== */
/* Chú ý: hai khối dưới chỉ được đặt padding-top / padding-bottom.
   Nếu viết tắt kiểu  padding:22px 0 60px  thì lề trái phải của .kho bị xoá,
   chữ sẽ dính sát mép màn hình điện thoại. */
.duong-dan{padding-top:18px; font-size:14px}
.duong-dan a{color:var(--chu-nhat)}

.sp{padding-top:22px; padding-bottom:60px}
.sp h1{font-size:34px; line-height:1.25; margin:12px 0 14px; letter-spacing:-.4px}
@media(max-width:700px){ .sp h1{font-size:27px} }
.sp .chot{font-size:18px; color:var(--chu-nhat); margin:0 0 20px}
/* đoạn giới thiệu chung */
.sp .gioi-thieu{margin:0 0 16px; font-size:16.5px}

ul.viec{list-style:none; padding:0; margin:0 0 34px}
ul.viec li{padding:5px 0 5px 26px; position:relative}
ul.viec li::before{
  content:"✓"; position:absolute; left:0; top:5px; color:var(--luc); font-weight:700
}

/* ------------------------------------------------- các khối mô tả dưới nút tải
   Mỗi khối là một ô trắng, xếp dọc từ trên xuống, không có tiêu đề mẹ.
   Thêm bớt chỉ cần chép thêm hoặc xoá cả một khối <div>.

   Khoảng cách giữa nút tải và khối đầu tiên nằm ở margin-top ngay dưới đây.
   Muốn giãn thêm thì tăng số này — ĐỪNG đặt margin-bottom cho .o-tai, hai lề
   chạm nhau sẽ nuốt vào nhau, đặt bao nhiêu cũng không nhúc nhích.     */
.tinh-nang{margin-top:44px; display:grid; gap:16px}
.tinh-nang > div{background:#fff; border:1px solid var(--vien); border-radius:12px; padding:20px 22px}
.dau-tn{display:flex; align-items:center; gap:12px; margin-bottom:12px}
.tinh-nang h3{margin:0; font-size:17.5px}
.tinh-nang p{margin:0 0 9px; color:var(--chu-nhat); font-size:15px}
.tinh-nang p:last-child{margin-bottom:0}
/* ô vuông xanh nhạt bọc icon của từng tính năng */
.o-icon{
  width:40px; height:40px; border-radius:10px; background:#e5edff;
  display:grid; place-items:center; font-size:20px; line-height:1; flex:0 0 auto
}

/* danh sách chấm tròn dùng trong các khối */
ul.gach{list-style:none; padding:0; margin:0}
ul.gach li{padding:3px 0 3px 20px; position:relative; color:var(--chu-nhat); font-size:15px}
ul.gach li::before{
  content:""; position:absolute; left:3px; top:13px;
  width:6px; height:6px; border-radius:50%; background:#9fb0cc
}

/* ô nút tải: đặt giữa trang */
.o-tai{margin-top:46px; text-align:center}

/* icon mũi tên tải nằm trong nút. Màu tự ăn theo màu chữ của nút. */
.icon-tai{
  width:20px; height:20px; vertical-align:-4px; margin-right:10px;
  fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round
}

/* ------------------------------------------------------------ chân trang */
footer{border-top:1px solid var(--vien); padding:26px 0; color:var(--chu-nhat); font-size:14px; text-align:center}