/* ══════════════════════════════════════════════════════════════════════════
   page-wide.css — bộ trình bày cho TRANG NỘI DUNG RỘNG của tempsmail.org
   Chuẩn trình bày lấy từ thuvienmasothue.com/gioi-thieu (Sếp Long chốt 07/11/2026).

   🔴 VÌ SAO CÓ TỆP NÀY, KHÔNG NHÉT CSS VÀO CSDL:
      Bản làm lần đầu dồn cả CSS lẫn HTML vào cột `pages.content`. Hệ quả:
      không ai sửa được bằng trình soạn thảo, không có vân tay cache, không
      tái dùng được cho trang thứ hai, và mỗi lần sửa một dấu chấm phẩy là
      ghi lại 27KB vào cơ sở dữ liệu. Nay CSS nằm ở tệp thật, nạp qua
      `@push('styles')`, nội dung trong CSDL chỉ còn HTML ngữ nghĩa.

   🔴 VÌ SAO KHÔNG DÙNG ĐƯỢC KHUNG `.viewbox` CỦA THEME:
      `.viewbox-container .box-content{max-width:850px}` ⇒ nội dung bị bóp còn
      802px. Trang mẫu rộng 1312px. Ép thiết kế rộng vào cột hẹp rồi thu nhỏ
      chữ cho vừa chính là thứ làm trang trông bé và thô. Trang rộng đi theo
      `page-wide.blade.php`, KHÔNG nằm trong `.viewbox`.

   🔴 MỌI luật đều bắt đầu bằng `.pw` — tệp này nạp cùng Bootstrap và
      `style.css` (135KB). Luật trần kiểu `table{}` sẽ rò ra toàn site.

   Số đo lấy từ trang mẫu, đo bằng trình duyệt ngày 07/11/2026:
      khung 1312px · hero padding 48px bo góc 32px · H1 50px/56px · H2 32px
   ══════════════════════════════════════════════════════════════════════════ */

.pw {
  --pw-xanh: #00897B;          /* primary_color trong settings của site */
  --pw-xanh-sau: #00665c;
  --pw-xanh-nhat: #e6f4f1;
  --pw-dam: #0f2b28;           /* nền khối tối, cùng hệ teal */
  --pw-sang: #5EEAD4;
  --pw-chu: #212121;           /* text_color trong settings */
  --pw-mo: #5a6672;
  --pw-vien: #e2e8f0;
  --pw-nen: #f9f9f9;           /* background_color trong settings */
  --pw-trang: #fff;
  --pw-khung: 1312px;          /* đo từ trang mẫu */
  --pw-gap: 20px;
  color: var(--pw-chu);
  font-size: 16px;
  line-height: 1.7;
}
.pw *, .pw *::before, .pw *::after { box-sizing: border-box; }
.pw a { color: var(--pw-xanh); text-decoration: none; }
.pw a:hover { text-decoration: underline; }

.pw-wrap {
  max-width: var(--pw-khung);
  margin: 0 auto;
  padding: 0 16px 56px;
}

/* ── chữ ────────────────────────────────────────────────────────────────── */
.pw h1 {
  margin: 0;
  font-size: clamp(30px, 4vw, 50px);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.pw h2 {
  position: relative;
  margin: 46px 0 16px;
  padding-top: 30px;
  border-top: 1px solid var(--pw-vien);
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.02em;
}
/* vạch nhấn ngắn đè lên đường kẻ — mỗi mục có một mốc màu để mắt bắt nhịp */
.pw h2::before {
  content: ""; position: absolute; top: -2px; left: 0;
  width: 56px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--pw-xanh), var(--pw-sang));
}
.pw h3 { margin: 24px 0 8px; font-size: 18.5px; font-weight: 700; line-height: 1.4; }
.pw p  { margin: 0 0 14px; line-height: 1.8; }
.pw ul { margin: 0 0 14px; padding-left: 22px; line-height: 1.8; }
.pw li { margin-bottom: 6px; }

/* ── đường dẫn ──────────────────────────────────────────────────────────── */
.pw-duong {
  display: flex; gap: 8px; flex-wrap: wrap;
  font-size: 13px; color: var(--pw-mo); padding: 20px 0 16px;
}
.pw-duong b { color: var(--pw-chu); font-weight: 600; }

/* ── khối mở đầu ────────────────────────────────────────────────────────── */
.pw-hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  gap: var(--pw-gap);
  background: var(--pw-dam);
  color: #fff;
  border-radius: 32px;
  padding: clamp(28px, 3.5vw, 48px);
  position: relative;
  overflow: hidden;
}
.pw-hero::before {
  content: ""; position: absolute; left: -120px; bottom: -170px;
  width: 460px; height: 460px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,137,123,.55), transparent 70%);
  pointer-events: none;
}
.pw-hero > * { position: relative; }
.pw-hero-trai { display: grid; gap: 20px; align-content: center; }
.pw-hero h1 { color: #fff; }
.pw-hero p {
  margin: 0; font-size: 17px; line-height: 1.7;
  color: #cfe3e0; max-width: 580px;
}
.pw-nhan {
  justify-self: start; padding: 7px 16px; border-radius: 999px;
  background: rgba(255,255,255,.12); font-size: 13px; font-weight: 600;
  color: #9fe3da;
}
.pw-nut { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.pw-nut a {
  height: 50px; display: inline-flex; align-items: center; padding: 0 24px;
  border-radius: 14px; font-weight: 600; font-size: 15px;
}
.pw-nut a:hover { text-decoration: none; }
.pw-nut .pw-chinh { background: #fff; color: var(--pw-dam); }
.pw-nut .pw-chinh:hover { background: #e8f2f0; }
.pw-nut .pw-phu { border: 1px solid rgba(255,255,255,.28); color: #fff; }
.pw-nut .pw-phu:hover { background: rgba(255,255,255,.08); }

.pw-hero-hop {
  min-height: 300px; border-radius: 24px; background: rgba(255,255,255,.07);
  padding: 30px; display: grid; gap: 16px; align-content: center;
}
.pw-hero-hop > b {
  font-size: 13px; font-weight: 700; color: #9fe3da; letter-spacing: .05em;
}
.pw-hero-hop > span {
  display: grid; grid-template-columns: 22px 1fr; gap: 12px;
  font-size: 15.5px; line-height: 1.6; color: #e8f2f0;
}
.pw-hero-hop svg { margin-top: 3px; }

/* ── dải số liệu ────────────────────────────────────────────────────────── */
.pw-so {
  margin-top: var(--pw-gap); display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px;
}
.pw-so > div {
  position: relative; overflow: hidden;
  background: var(--pw-trang); border: 1px solid var(--pw-vien);
  border-radius: 24px; padding: 26px; display: grid; gap: 4px;
  box-shadow: 0 1px 2px rgba(15,43,40,.04);
}
/* vạch nhấn trên đầu mỗi ô số — đủ để mắt bám, không ồn */
.pw-so > div::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--pw-xanh), var(--pw-sang));
}
.pw-so b {
  font-size: 38px; font-weight: 800; letter-spacing: -0.035em;
  color: var(--pw-xanh-sau); font-variant-numeric: tabular-nums; line-height: 1.1;
}
.pw-so em { font-style: normal; font-size: 14px; color: var(--pw-mo); }
/* ô số liệu CHỦ ĐẠO — nền đậm, để dải số có một điểm neo thay vì phẳng đều */
.pw-so > .pw-noi {
  background: linear-gradient(135deg, var(--pw-dam), #14433d);
  border-color: transparent;
}
.pw-so > .pw-noi::before { background: var(--pw-sang); }
.pw-so > .pw-noi b { color: #fff; }
.pw-so > .pw-noi em { color: #9fe3da; }

/* ── thẻ nguyên tắc ─────────────────────────────────────────────────────── */
.pw-the {
  margin-top: var(--pw-gap); display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px;
}
.pw-the > div {
  background: var(--pw-trang); border: 1px solid var(--pw-vien);
  border-radius: 24px; padding: 28px; display: grid; gap: 12px; align-content: start;
  box-shadow: 0 1px 2px rgba(15,43,40,.04);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.pw-the > div:hover {
  border-color: var(--pw-xanh);
  box-shadow: 0 10px 24px rgba(0,137,123,.12);
  transform: translateY(-2px);
}
/* số thứ tự thành huy hiệu tròn thay vì chữ nhỏ lọt thỏm */
.pw-the i {
  font-style: normal; font-size: 14px; font-weight: 800;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--pw-xanh-nhat); color: var(--pw-xanh-sau);
  display: grid; place-items: center;
  font-variant-numeric: tabular-nums;
}
.pw-the strong { font-size: 20px; font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; }
.pw-the span { font-size: 15px; line-height: 1.7; color: var(--pw-mo); }

/* ── khối quy trình ─────────────────────────────────────────────────────── */
.pw-qt {
  margin-top: var(--pw-gap); background: var(--pw-trang);
  border: 1px solid var(--pw-vien); border-radius: 32px;
  padding: clamp(26px, 3.2vw, 44px); display: grid; gap: 28px;
}
.pw-qt-dau { display: grid; gap: 8px; max-width: 660px; }
.pw-qt-dau i {
  font-style: normal; font-size: 13px; font-weight: 700;
  color: var(--pw-xanh); letter-spacing: .04em;
}
.pw-qt h2 { margin: 0; padding: 0; border: 0; }
.pw-buoc { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.pw-buoc > div {
  padding: 24px; border-radius: 22px; background: var(--pw-nen);
  display: grid; gap: 10px; align-content: start;
}
.pw-buoc b {
  width: 42px; height: 42px; border-radius: 12px; background: var(--pw-dam);
  color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 16px;
}
.pw-buoc strong { font-size: 17.5px; font-weight: 700; }
.pw-buoc span { font-size: 14.5px; line-height: 1.7; color: var(--pw-mo); }
.pw-chip {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  padding-top: 22px; border-top: 1px solid var(--pw-vien);
}
.pw-chip > b { font-size: 14px; font-weight: 600; color: var(--pw-mo); margin-right: 4px; }
.pw-chip a {
  display: inline-block; padding: 9px 16px; border-radius: 12px;
  border: 1px solid var(--pw-vien); font-size: 13.5px; font-weight: 600;
  color: var(--pw-chu);
}
.pw-chip a:hover { border-color: var(--pw-xanh); color: var(--pw-xanh); text-decoration: none; }

/* ── thân bài ─────────────────────────────────────────────────────────────
   🔴 Đo trang mẫu: khối bài viết rộng 1210px nằm trong thẻ trắng 1280px
      (padding 35px) — tức GẦN KÍN khung, không phải cột hẹp. Bản trước để
      max-width:1000px nên thân bài hẹp hơn hero, lòi ra lệch mép phải. */
.pw-than {
  margin-top: var(--pw-gap);
  background: var(--pw-trang);
  border: 1px solid var(--pw-vien);
  border-radius: 32px;
  padding: clamp(24px, 2.7vw, 35px);
}
.pw-than > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.pw-dinhnghia {
  background: linear-gradient(135deg, var(--pw-xanh-nhat), #f4fbf9);
  border: 1px solid #cfe9e4; border-left: 5px solid var(--pw-xanh);
  padding: 22px 26px; border-radius: 0 16px 16px 0; margin: 0 0 22px;
  font-size: 17.5px; line-height: 1.8;
}
.pw-dinhnghia strong { color: var(--pw-xanh-sau); }
.pw-dem {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px; margin: 18px 0 26px;
}
.pw-dem > div {
  text-align: center; border: 1px solid #cfe9e4; border-radius: 16px;
  padding: 20px 10px; background: var(--pw-xanh-nhat);
}
.pw-dem b {
  display: block; font-size: 30px; color: var(--pw-xanh-sau); line-height: 1.2;
  font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.pw-dem em { font-style: normal; font-size: 13.5px; color: var(--pw-mo); }

.pw-luoi {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 14px; margin: 18px 0;
}
.pw-luoi > div {
  position: relative; overflow: hidden;
  border: 1px solid var(--pw-vien); border-radius: 16px;
  padding: 20px 22px; background: var(--pw-trang);
  box-shadow: 0 1px 2px rgba(15,43,40,.04);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
/* dải nhấn dọc mép trái, hiện rõ khi rê chuột */
.pw-luoi > div::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--pw-xanh); opacity: .22; transition: opacity .15s;
}
.pw-luoi > div:hover {
  border-color: var(--pw-xanh);
  box-shadow: 0 10px 24px rgba(0,137,123,.12);
  transform: translateY(-2px);
}
.pw-luoi > div:hover::before { opacity: 1; }
.pw-luoi strong {
  display: block; font-size: 16.5px; margin-bottom: 7px;
  color: var(--pw-xanh-sau); line-height: 1.4; font-weight: 700;
}
.pw-luoi span { display: block; font-size: 15px; color: var(--pw-mo); line-height: 1.72; }

.pw-than table {
  width: 100%; border-collapse: collapse; border: 1px solid var(--pw-vien);
  border-radius: 14px; overflow: hidden; margin: 14px 0 8px; font-size: 15.5px;
}
.pw-than table caption {
  /* 🔴 Bootstrap dat `caption{caption-side:bottom}` — khong khai lai thi chu
     thich roi xuong DUOI bang, doc nhu ghi chu lac cho. Phai ep ve tren. */
  caption-side: top;
  text-align: left; padding: 0 0 10px; color: var(--pw-mo); font-size: 14px;
}
.pw-than th {
  width: 34%; text-align: left; background: #f3faf8; padding: 14px 18px;
  border-bottom: 1px solid var(--pw-vien); vertical-align: top;
  font-weight: 700; color: var(--pw-xanh-sau);
}
.pw-than td { padding: 14px 18px; border-bottom: 1px solid var(--pw-vien); vertical-align: top; }
.pw-than tbody tr:nth-child(even) td { background: #fbfcfd; }
.pw-than tr:last-child th, .pw-than tr:last-child td { border-bottom: 0; }

.pw-than details {
  border: 1px solid var(--pw-vien); border-radius: 14px;
  margin: 0 0 10px; background: var(--pw-trang);
  transition: border-color .15s, background .15s;
}
.pw-than details:hover { border-color: #b9ded7; }
.pw-than details[open] { border-color: var(--pw-xanh); background: #fbfefd; }
.pw-than summary {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px; cursor: pointer; font-weight: 600;
  font-size: 16.5px; list-style: none; line-height: 1.5;
}
.pw-than summary::-webkit-details-marker { display: none; }
/* dấu +/− thành huy hiệu vuông bo góc, thấy rõ là bấm được */
.pw-than summary::before {
  content: "+"; flex: 0 0 auto;
  width: 26px; height: 26px; border-radius: 8px;
  background: var(--pw-xanh-nhat); color: var(--pw-xanh-sau);
  display: grid; place-items: center; font-weight: 800; font-size: 17px;
}
.pw-than details[open] summary { color: var(--pw-xanh-sau); }
.pw-than details[open] summary::before {
  content: "\2212"; background: var(--pw-xanh); color: #fff;
}
.pw-tl { padding-left: 58px !important; }
.pw-tl { padding: 0 20px 18px; font-size: 15.5px; line-height: 1.8; color: var(--pw-mo); }

.pw-chuy {
  background: #fffbeb; border: 1px solid #fde68a; border-left: 5px solid #f59e0b;
  border-radius: 0 14px 14px 0;
  padding: 20px 24px; font-size: 15.5px; line-height: 1.8; margin: 20px 0;
}
.pw-chuy strong { color: #92400e; }

/* ── màn hình nhỏ ───────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .pw { font-size: 15.5px; }
  .pw-wrap { padding: 0 14px 40px; }
  .pw-hero { border-radius: 24px; }
  .pw-hero-hop { min-height: 0; padding: 24px; }
  .pw-qt, .pw-than { border-radius: 24px; }
  .pw h2 { margin-top: 34px; padding-top: 22px; }
  .pw-than th { width: 42%; }
  .pw-than table { font-size: 14.5px; }
  .pw-than th, .pw-than td { padding: 11px 13px; }
}

/* ── dải kêu gọi hành động ────────────────────────────────────────────────
   🔴 Trang dài 7.000px mà từ sau khối mở đầu toàn thẻ trắng ⇒ nhạt dần về
      cuối. Dải này là điểm neo màu thứ hai, đặt ngay trước mục "đi tiếp". */
.pw-goi {
  margin-top: var(--pw-gap);
  background: linear-gradient(135deg, var(--pw-dam), #14433d);
  border-radius: 32px; padding: clamp(28px, 3.5vw, 48px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 24px; align-items: center; position: relative; overflow: hidden;
}
.pw-goi::before {
  content: ""; position: absolute; right: -140px; top: -160px;
  width: 440px; height: 440px; border-radius: 50%;
  background: radial-gradient(circle, rgba(94,234,212,.28), transparent 70%);
  pointer-events: none;
}
.pw-goi > * { position: relative; }
.pw-goi h2 {
  margin: 0; padding: 0; border: 0; color: #fff;
  font-size: clamp(24px, 2.8vw, 34px);
  text-wrap: balance;   /* ngat dong deu, khong de tro lai mot tu o dong cuoi */
}
.pw-goi h2::before { display: none; }
.pw-goi p { margin: 10px 0 0; color: #cfe3e0; font-size: 16.5px; max-width: 560px; }
.pw-goi .pw-nut { justify-content: flex-end; margin: 0; }
@media (max-width: 860px) { .pw-goi .pw-nut { justify-content: flex-start; } }

/* ── mục "đi tiếp" — mũi tên nhấn, phân biệt với lưới thường ─────────────── */
.pw-tiep > div { background: #fbfdfc; }
.pw-tiep strong a::after { content: " \2192"; }