/* ============================================================
   luutanhainam.com — kiểu dáng dùng chung cho trang chủ & blog
   Sửa file này là đổi giao diện TOÀN BỘ trang, không phải sửa từng bài.
   Bảng màu và font giữ đúng như các sale page cũ để cùng một thương hiệu.
   ============================================================ */

:root {
  --primary: #2F4A38;
  --accent: #4A7C59;
  --accent-dark: #3B6248;
  --dark: #1F3327;
  --text: #2d2d2d;
  --muted: #5b6b7a;
  --bg: #ffffff;
  --cream: #F7F5EF;
  --line: #e2e7dc;
  --warn-bg: #FDF6E7;
  --warn-line: #E8C77A;
  --font-display: 'Lora', serif;
  --font-body: 'Be Vietnam Pro', sans-serif;
  --radius: 10px;
  --shadow: 0 8px 20px rgba(47, 74, 56, .10);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  line-height: 1.8;
  font-size: 1.06rem;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent-dark); }

.wrap { max-width: 760px; margin: 0 auto; padding: 0 22px; }
.wrap-rong { max-width: 1040px; margin: 0 auto; padding: 0 22px; }
section { padding: 58px 0; }

h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.28; color: var(--primary); }
h1 { font-size: 2.25rem; }
h2 { font-size: 1.72rem; margin-bottom: .9rem; }
h3 { font-size: 1.28rem; margin-bottom: .6rem; }
p { margin-bottom: 1.1rem; }
strong { color: var(--primary); font-weight: 700; }

/* ---------- Thanh điều hướng ---------- */
.thanh-dau {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.thanh-dau .trong {
  max-width: 1040px; margin: 0 auto; padding: 12px 22px;
  display: flex; align-items: center; gap: 18px;
}
.logo-nho { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.logo-nho img { height: 38px; width: auto; }
.logo-nho span { font-family: var(--font-display); font-weight: 700; color: var(--primary); font-size: 1.06rem; white-space: nowrap; }
.thanh-dau nav { display: flex; gap: 20px; align-items: center; }
.thanh-dau nav a { color: var(--muted); text-decoration: none; font-weight: 500; font-size: .97rem; }
.thanh-dau nav a:hover, .thanh-dau nav a.dang-o { color: var(--accent); }
.nut-zalo {
  background: var(--accent); color: #fff !important; text-decoration: none;
  padding: 9px 18px; border-radius: 7px; font-weight: 600; font-size: .95rem; white-space: nowrap;
}
@media (max-width: 700px) {
  .logo-nho span { display: none; }
  .thanh-dau nav { gap: 14px; }
  .thanh-dau nav a.an-mobile { display: none; }
}

/* ---------- Hero trang chủ ---------- */
.hero { background: var(--cream); padding: 74px 0 66px; border-bottom: 1px solid var(--line); }
.hero .trong { max-width: 1040px; margin: 0 auto; padding: 0 22px; display: grid; grid-template-columns: 1fr; gap: 34px; align-items: center; }
.hero.co-anh .trong { grid-template-columns: 1.35fr .65fr; }
.hero .nhan {
  display: inline-block; background: #fff; border: 1px solid var(--line);
  color: var(--accent-dark); font-weight: 600; font-size: .88rem;
  padding: 6px 14px; border-radius: 999px; margin-bottom: 18px;
}
.hero h1 { font-size: 2.7rem; margin-bottom: 16px; }
.hero .dan { font-size: 1.16rem; color: var(--muted); margin-bottom: 26px; }
.hero .anh-tron { border-radius: var(--radius); box-shadow: var(--shadow); }
@media (max-width: 820px) {
  .hero.co-anh .trong { grid-template-columns: 1fr; }
  .hero h1 { font-size: 2.05rem; }
}

.hang-nut { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-cta {
  display: inline-block; background: var(--accent); color: #fff; text-decoration: none;
  padding: 15px 32px; font-size: 1.05rem; font-weight: 700; border-radius: 8px;
  box-shadow: 0 8px 20px rgba(74, 124, 89, .25); border: none; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn-cta:hover { transform: scale(1.03); box-shadow: 0 10px 24px rgba(74, 124, 89, .35); }
.btn-phu {
  display: inline-block; background: #fff; color: var(--primary); text-decoration: none;
  padding: 15px 32px; font-size: 1.05rem; font-weight: 600; border-radius: 8px;
  border: 1.5px solid var(--line);
}
.btn-phu:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- Lưới lĩnh vực ---------- */
.luoi { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.the {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 24px; display: flex; flex-direction: column;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.the:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--accent); }
.the .bieu-tuong { font-size: 1.9rem; line-height: 1; margin-bottom: 14px; }
.the h3 { margin-bottom: .45rem; }
.the p { font-size: .99rem; color: var(--muted); margin-bottom: 1rem; }
.the ul { list-style: none; margin: 0 0 1.1rem; padding: 0; }
.the ul li { font-size: .95rem; color: var(--text); padding-left: 20px; position: relative; margin-bottom: 6px; }
.the ul li::before { content: "–"; position: absolute; left: 4px; color: var(--accent); }
.the .lien-ket { margin-top: auto; font-weight: 600; text-decoration: none; color: var(--accent-dark); font-size: .97rem; }
.the .lien-ket:hover { text-decoration: underline; }

/* ---------- Khối nền kem ---------- */
.nen-kem { background: var(--cream); }
.tieu-de-muc { text-align: center; margin-bottom: 38px; }
.tieu-de-muc p { color: var(--muted); max-width: 620px; margin: 10px auto 0; }

/* ---------- Danh sách lý do / cam kết ---------- */
.ly-do { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 26px; }
.ly-do .muc { border-left: 3px solid var(--accent); padding-left: 18px; }
.ly-do .muc h3 { font-size: 1.14rem; }
.ly-do .muc p { color: var(--muted); font-size: .99rem; margin: 0; }

.bang-cam-ket { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.bang-cam-ket th, .bang-cam-ket td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--line); font-size: 1rem; }
.bang-cam-ket th { background: var(--primary); color: #fff; font-family: var(--font-display); font-weight: 600; }
.bang-cam-ket tr:last-child td { border-bottom: none; }

/* ---------- Thẻ bài viết ---------- */
.luoi-bai { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 22px; }
.the-bai {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; text-decoration: none; display: flex; flex-direction: column;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.the-bai:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--accent); }
.the-bai .danh-muc { font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.the-bai h3 { color: var(--primary); margin-bottom: .5rem; font-size: 1.2rem; }
.the-bai p { color: var(--muted); font-size: .97rem; margin-bottom: 1rem; }
.the-bai .chan { margin-top: auto; font-size: .87rem; color: var(--muted); }

/* ---------- Bài viết ---------- */
.bai-dau { background: var(--cream); padding: 52px 0 44px; border-bottom: 1px solid var(--line); }
.duong-dan { font-size: .9rem; color: var(--muted); margin-bottom: 16px; }
.duong-dan a { color: var(--muted); text-decoration: none; }
.duong-dan a:hover { color: var(--accent); text-decoration: underline; }
.bai-dau h1 { font-size: 2.15rem; margin-bottom: 14px; }
.bai-meta { font-size: .92rem; color: var(--muted); }
.bai-meta .cham { margin: 0 8px; opacity: .5; }

.than-bai { padding: 46px 0 60px; }
.than-bai h2 { margin-top: 2.4rem; padding-top: .3rem; }
.than-bai h3 { margin-top: 1.8rem; }
.than-bai ul, .than-bai ol { margin: 0 0 1.2rem 1.3rem; }
.than-bai li { margin-bottom: .5rem; }
.than-bai table { width: 100%; border-collapse: collapse; margin: 0 0 1.5rem; font-size: .98rem; }
.than-bai table th, .than-bai table td { padding: 11px 14px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.than-bai table th { background: var(--cream); font-family: var(--font-display); color: var(--primary); }
.than-bai blockquote {
  background: var(--cream); border-left: 4px solid var(--accent);
  padding: 18px 22px; margin: 0 0 1.5rem; border-radius: 0 var(--radius) var(--radius) 0;
}
.than-bai blockquote p:last-child { margin-bottom: 0; }
.than-bai code { background: var(--cream); border: 1px solid var(--line); border-radius: 4px; padding: 2px 7px; font-size: .92em; font-family: Consolas, Monaco, monospace; }
.than-bai pre { background: var(--dark); color: #e8efe9; padding: 18px 20px; border-radius: var(--radius); overflow-x: auto; margin: 0 0 1.5rem; }
.than-bai pre code { background: none; border: none; padding: 0; color: inherit; }
.than-bai hr { border: none; border-top: 1px solid var(--line); margin: 2.4rem 0; }
.than-bai .canh-bao {
  background: var(--warn-bg); border: 1px solid var(--warn-line);
  border-radius: var(--radius); padding: 18px 22px; margin: 0 0 1.5rem;
}

/* Bảng cuộn ngang trên điện thoại thay vì làm vỡ trang */
.bang-cuon { overflow-x: auto; margin-bottom: 1.5rem; }
.bang-cuon table { margin-bottom: 0; }

/* ---------- Khối chốt cuối bài ---------- */
.chot-bai {
  background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 28px; margin-top: 40px;
}
.chot-bai h3 { margin-bottom: .6rem; }
.chot-bai p { color: var(--muted); }

/* ---------- Bộ lọc danh mục blog ---------- */
.loc { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 34px; }
.loc a {
  text-decoration: none; font-size: .94rem; font-weight: 500;
  padding: 8px 18px; border-radius: 999px; border: 1px solid var(--line);
  color: var(--muted); background: #fff;
}
.loc a:hover { border-color: var(--accent); color: var(--accent); }
.loc a.dang-o { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---------- Form tư vấn ---------- */
.khung-form { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 28px; box-shadow: var(--shadow); }
.khung-form label { display: block; font-weight: 600; color: var(--primary); margin-bottom: 6px; font-size: .96rem; }
.khung-form input, .khung-form textarea, .khung-form select {
  width: 100%; padding: 13px 15px; margin-bottom: 16px; font-size: 1rem;
  font-family: var(--font-body); border: 1.5px solid var(--line); border-radius: 8px; background: #fff; color: var(--text);
}
.khung-form input:focus, .khung-form textarea:focus, .khung-form select:focus { outline: none; border-color: var(--accent); }
.khung-form textarea { min-height: 96px; resize: vertical; }
.khung-form .btn-cta { width: 100%; }
.mat { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ket-qua { margin-top: 14px; font-weight: 600; text-align: center; }
.ket-qua.ok { color: var(--accent-dark); }
.ket-qua.loi { color: #b03030; }

/* ---------- Liên hệ ---------- */
.lien-he { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 22px; }
.lien-he .muc { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; }
.lien-he .muc .nhan-nho { font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; margin-bottom: 6px; }
.lien-he .muc a { color: var(--primary); text-decoration: none; font-weight: 700; font-size: 1.14rem; font-family: var(--font-display); }
.lien-he .muc a:hover { color: var(--accent); }
.lien-he .muc span { display: block; color: var(--text); font-weight: 600; }

/* ---------- Chân trang ---------- */
.chan-trang { background: var(--dark); color: #cbd8cf; padding: 50px 0 30px; font-size: .96rem; }
.chan-trang .cot { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 30px; margin-bottom: 34px; }
.chan-trang h4 { color: #fff; font-size: 1.02rem; margin-bottom: 12px; }
.chan-trang a { color: #cbd8cf; text-decoration: none; }
.chan-trang a:hover { color: #fff; text-decoration: underline; }
.chan-trang ul { list-style: none; }
.chan-trang li { margin-bottom: 7px; }
.chan-trang .day-cuoi { border-top: 1px solid rgba(255, 255, 255, .13); padding-top: 20px; font-size: .88rem; opacity: .75; }

/* ---------- Nút Zalo nổi trên điện thoại ---------- */
.zalo-noi {
  position: fixed; right: 16px; bottom: 16px; z-index: 60;
  background: var(--accent); color: #fff; text-decoration: none;
  padding: 13px 22px; border-radius: 999px; font-weight: 700; font-size: .98rem;
  box-shadow: 0 8px 22px rgba(47, 74, 56, .35);
}
@media (min-width: 821px) { .zalo-noi { display: none; } }