/* ============================================================
   18 TRANG CHI TIẾT DỰ ÁN — adongland.vn
   ------------------------------------------------------------
   Phần đầu trang và khối liên hệ được CHÈN THÊM quanh nội dung
   có sẵn (xem mục 11 trong functions.php). Nội dung gốc giữ
   nguyên, CSS ở đây KHÔNG đụng vào phần thân bài.
   ============================================================ */

.adl-proj-hero,
.adl-proj-cta{
  --navy-900:#041A33; --navy-800:#052A4F; --navy:#033867; --navy-600:#0A4C86;
  --gold:#C9A961; --gold-bright:#E0C88C;
  --paper:#F7F5F1; --ink:#10192A;
  --display:"Playfair Display", Georgia, serif;
  --body:"Be Vietnam Pro", system-ui, -apple-system, sans-serif;
  /* Tràn hết chiều ngang màn hình dù đang nằm trong container hẹp của Flatsome */
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}

/* ---------- Đầu trang ---------- */
.adl-proj-hero{
  position:relative;overflow:hidden;background:var(--navy-900);color:var(--paper);
  padding:66px 0 44px;margin-bottom:44px;
}
.adl-ph-bg{position:absolute;inset:0;z-index:0}
.adl-ph-bg img{width:100%;height:100%;object-fit:cover;display:block}
.adl-ph-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(4,26,51,.80) 0%,rgba(4,26,51,.62) 40%,rgba(4,26,51,.95) 100%)}
.adl-ph-inner{position:relative;z-index:2;max-width:1200px;margin:0 auto;padding:0 24px}
.adl-ph-badges{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.adl-badge{font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;padding:5px 12px;border-radius:2px;line-height:1.6}
.adl-badge.adl-on{color:var(--ink);background:var(--gold-bright)}
.adl-badge.adl-off{color:#fff;background:rgba(255,255,255,.18)}
.adl-badge.adl-star{color:var(--navy-900);background:#fff}
.adl-ph-title{font-family:var(--display);font-weight:500;font-size:clamp(32px,4.6vw,56px);
  line-height:1.12;color:var(--paper);margin:0;text-transform:none;letter-spacing:0;max-width:18ch}
.adl-ph-quick{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:32px;
  border-top:1px solid rgba(255,255,255,.2)}
.adl-ph-quick .adl-q{padding:18px 22px 0 0;border-right:1px solid rgba(255,255,255,.2)}
.adl-ph-quick .adl-q:last-child{border-right:none}
.adl-qk{font-family:var(--body);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--gold)}
.adl-qv{font-family:var(--display);font-size:19px;margin-top:6px;line-height:1.3;color:var(--paper)}

/* ---------- Khối liên hệ cuối trang ---------- */
.adl-proj-cta{background:var(--navy);color:var(--paper);text-align:center;padding:80px 0;margin-top:56px}
.adl-pc-inner{max-width:1200px;margin:0 auto;padding:0 24px}
.adl-proj-cta .adl-eyebrow{display:block;font-family:var(--body);font-size:13px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.adl-proj-cta h2{font-family:var(--display);font-weight:500;font-size:clamp(26px,3.4vw,40px);
  line-height:1.16;color:var(--paper);margin:14px auto 0;max-width:22ch;text-transform:none;letter-spacing:0}
.adl-proj-cta p{font-family:var(--body);max-width:56ch;margin:16px auto 0;
  color:rgba(247,245,241,.82);font-size:16px;line-height:1.7}
.adl-pc-row{display:flex;gap:14px;justify-content:center;margin-top:30px;flex-wrap:wrap}
.adl-proj-cta .adl-btn{display:inline-block;font-family:var(--body);font-weight:600;font-size:15px;
  padding:16px 30px;border-radius:2px;transition:.25s;border:1px solid transparent}
.adl-proj-cta .adl-btn-gold{background:var(--gold);color:var(--ink)}
.adl-proj-cta .adl-btn-gold:hover{background:var(--gold-bright);color:var(--ink)}
.adl-proj-cta .adl-btn-ghost{border-color:rgba(247,245,241,.6);color:var(--paper);background:transparent}
.adl-proj-cta .adl-btn-ghost:hover{background:rgba(255,255,255,.12);color:var(--paper)}

/* ---------- Nút gọi cố định (chỉ trên điện thoại) ---------- */
.adl-sticky-call{display:none}
@media(max-width:849px){
  .adl-sticky-call{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:999;
    background:#041A33;border-top:1px solid rgba(201,169,97,.4);
  }
  .adl-sc-btn{
    flex:1;text-align:center;padding:15px 8px;font-family:"Be Vietnam Pro",system-ui,sans-serif;
    font-size:15px;font-weight:600;color:#041A33;background:#C9A961;text-decoration:none;
  }
  .adl-sc-btn.adl-sc-alt{background:transparent;color:#E0C88C}
  /* Chừa chỗ để nút không che nội dung cuối trang */
  body.adl-has-sticky-call{padding-bottom:54px}
}

@media(max-width:1000px){
  .adl-ph-quick{grid-template-columns:1fr 1fr}
  .adl-ph-quick .adl-q:nth-child(2){border-right:none}
}
@media(max-width:849px){
  .adl-proj-hero{padding:44px 0 32px;margin-bottom:32px}
  .adl-ph-quick{grid-template-columns:1fr}
  .adl-ph-quick .adl-q{border-right:none;border-bottom:1px solid rgba(255,255,255,.16);padding:14px 0}
  .adl-ph-quick .adl-q:last-child{border-bottom:none}
  .adl-proj-cta{padding:56px 0;margin-top:40px}
}

/* ============================================================
   ĐỊNH KIỂU CHO PHẦN THÂN TRANG DỰ ÁN
   ------------------------------------------------------------
   Nội dung do UX Builder sinh ra, KHÔNG sửa cấu trúc — chỉ đổi
   diện mạo: chữ, bảng, danh sách, ảnh, khoảng cách.
   UX Builder chèn nhiều thẻ <style> riêng nên một số chỗ cần
   !important để thắng, nhưng chỉ giới hạn trong .adl-proj-body.
   ============================================================ */

.adl-proj-body{
  --navy-900:#041A33; --navy-800:#052A4F; --navy:#033867; --navy-600:#0A4C86; --navy-50:#EDF2F8;
  --gold:#C9A961; --gold-bright:#E0C88C;
  --paper:#F7F5F1; --ink:#10192A; --muted:#5C6B7F; --line:#DDE4EC;
  --display:"Playfair Display", Georgia, serif;
  --body:"Be Vietnam Pro", system-ui, -apple-system, sans-serif;
  font-family:var(--body);
  color:var(--ink);
  font-size:17px;
  line-height:1.75;
}

/* --- Tiêu đề --- */
.adl-proj-body h2,
.adl-proj-body h3,
.adl-proj-body h4{
  font-family:var(--display) !important;
  font-weight:500 !important;
  letter-spacing:0 !important;
  color:var(--ink);
  line-height:1.2;
}
.adl-proj-body h2{
  font-size:clamp(25px,3vw,34px) !important;
  margin:52px 0 18px;
  padding-bottom:14px;
  border-bottom:1px solid var(--line);
  scroll-margin-top:96px;
}
.adl-proj-body h3{
  font-size:clamp(20px,2.2vw,24px) !important;
  margin:34px 0 12px;
  color:var(--navy);
}
.adl-proj-body h4{font-size:19px !important;margin:26px 0 10px}

/* --- Đoạn văn --- */
.adl-proj-body p{margin:0 0 16px;color:#3C4757}
.adl-proj-body strong,.adl-proj-body b{color:var(--ink);font-weight:600}
.adl-proj-body a:not(.button):not(.adl-btn){color:var(--navy);font-weight:500;
  border-bottom:1px solid rgba(3,56,103,.25);transition:.2s}
.adl-proj-body a:not(.button):not(.adl-btn):hover{color:var(--gold);border-bottom-color:var(--gold)}

/* --- Bảng thông số: đây là tài sản lớn nhất của các trang dự án --- */
.adl-proj-body table{
  width:100%;border-collapse:collapse;margin:18px 0 10px;
  font-size:15.5px;background:transparent;border:none;
}
.adl-proj-body table tr{border-bottom:1px solid var(--line)}
.adl-proj-body table tr:first-child{border-bottom:2px solid var(--navy)}
.adl-proj-body table tr:first-child td,
.adl-proj-body table th{
  font-family:var(--body);font-weight:600;font-size:12.5px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--navy);
  padding:0 16px 12px 0;text-align:left;background:transparent;
}
.adl-proj-body table td{padding:14px 16px 14px 0;vertical-align:top;border:none;background:transparent}
.adl-proj-body table tr:not(:first-child) td:first-child{color:var(--muted);width:34%}
.adl-proj-body table tr:not(:first-child) td:last-child{font-weight:500}
.adl-proj-body table tr:hover{background:var(--navy-50)}

/* --- Danh sách --- */
.adl-proj-body ul{list-style:none;padding:0;margin:0 0 18px}
.adl-proj-body ul li{position:relative;padding:8px 0 8px 26px;color:#3C4757}
.adl-proj-body ul li::before{
  content:"";position:absolute;left:4px;top:17px;
  width:6px;height:6px;background:var(--gold);border-radius:50%;
}
.adl-proj-body ol{padding-left:22px;margin:0 0 18px}
.adl-proj-body ol li{padding:6px 0;color:#3C4757}
.adl-proj-body ol li::marker{color:var(--gold);font-weight:600}

/* --- Ảnh --- */
.adl-proj-body img{border-radius:2px}
.adl-proj-body figcaption,
.adl-proj-body .caption{font-size:13.5px;color:var(--muted);font-style:italic;margin-top:8px;text-align:center}

/* --- Trích dẫn --- */
.adl-proj-body blockquote{
  border-left:2px solid var(--gold);background:var(--navy-50);
  padding:20px 24px;margin:24px 0;font-family:var(--display);font-style:italic;font-size:18px;color:var(--ink);
}
.adl-proj-body blockquote p:last-child{margin-bottom:0}

/* --- Nút trong nội dung --- */
.adl-proj-body .button{border-radius:2px !important;text-transform:none !important;
  font-family:var(--body) !important;font-weight:600 !important;letter-spacing:.02em !important}

/* --- Form nhúng giữa bài --- */
.adl-proj-body input[type="text"],.adl-proj-body input[type="tel"],
.adl-proj-body input[type="email"],.adl-proj-body select,.adl-proj-body textarea{
  border-radius:2px !important;border:1px solid var(--line) !important;
  font-family:var(--body) !important;font-size:15.5px !important;
}
.adl-proj-body input[type="submit"]{
  background:var(--gold) !important;color:var(--ink) !important;border:none !important;
  border-radius:2px !important;font-family:var(--body) !important;font-weight:600 !important;
  text-transform:none !important;
}

/* --- Khoảng thở giữa các khối UX Builder --- */
.adl-proj-body .row{margin-bottom:0}
.adl-proj-body .col{padding-bottom:20px}

/* ---------- THANH ĐIỀU HƯỚNG DÍNH (sinh từ các tiêu đề H2) ---------- */
.adl-secnav{
  position:sticky;top:0;z-index:45;
  background:#fff;border-bottom:1px solid var(--line, #DDE4EC);
  width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
}
.adl-secnav-inner{
  max-width:1200px;margin:0 auto;padding:0 24px;
  display:flex;gap:2px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.adl-secnav-inner::-webkit-scrollbar{display:none}
.adl-secnav a{
  padding:15px 15px;font-family:"Be Vietnam Pro",system-ui,sans-serif;
  font-size:14.5px;font-weight:500;color:#10192A;white-space:nowrap;
  border-bottom:2px solid transparent;transition:.2s;text-decoration:none;
}
.adl-secnav a:hover{color:#033867;border-bottom-color:#C9A961}
.adl-secnav a.is-active{color:#033867;border-bottom-color:#033867;font-weight:600}

@media(max-width:849px){
  .adl-proj-body{font-size:16px}
  .adl-proj-body h2{margin:36px 0 14px;font-size:23px !important}
  .adl-proj-body h3{margin:26px 0 10px}
  .adl-proj-body table{font-size:14.5px}
  .adl-proj-body table tr:not(:first-child) td:first-child{width:42%}
  .adl-secnav a{padding:13px 12px;font-size:14px}
}