/* Học viện — nhóm "Huấn luyện" (DotLife), 24/10/2026: biến chung, chữ, nút, đầu trang, chân trang cho cả 17 kiểu dl_*.
   CSS tự viết, dựng lại cảm giác bố cục của trang mẫu (chữ hình học nét mảnh, nút viên thuốc chữ hoa giãn cách, nhãn nhỏ giãn chữ, nền xám rất nhạt,
   dải kêu gọi xanh đậm ở chân trang) — không chép CSS/ảnh/phông/biểu tượng của mẫu. Kiểu riêng (v-dl_*.css) nạp sau, ghi đè được mọi biến --dl-*. */
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@300;400;500;600;700&display=swap&subset=vietnamese');

body.ac-fam-dotlife{
  --dl-font:"Be Vietnam Pro","Segoe UI",system-ui,sans-serif;
  --dl-ink:var(--ink);--dl-text:#4a4a4a;--dl-muted:#8d9399;--dl-line:#e9e9ec;--dl-soft:#f8f8f8;--dl-blue:#eef4f8;
  --dl-navy:#122947;--dl-navy2:#0e1f36;--dl-pink:#fea2a7;--dl-r:6px;--dl-sh:0 14px 40px rgba(20,32,54,.08);--dl-head:93px;--dl-head-s:73px;--dl-box:1170px;--wrap:1240px;
  font-family:var(--dl-font);font-size:16px;line-height:1.72;color:var(--dl-text);background:#fff;font-weight:400}
.ac-fam-dotlife h1,.ac-fam-dotlife h2,.ac-fam-dotlife h3,.ac-fam-dotlife h4{font-family:var(--dl-font);color:var(--dl-ink);font-weight:500;letter-spacing:-.01em;line-height:1.25}
.ac-fam-dotlife em{color:var(--ac);font-style:normal}
.ac-fam-dotlife ::selection{background:var(--ac);color:#fff}

/* nút: viên thuốc, chữ hoa nhỏ giãn cách */
.ac-fam-dotlife .ac-btn,.dlp-pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:10px 28px;border-radius:999px;border:1.5px solid var(--ac);background:var(--ac);color:#fff!important;font:600 13px/1.2 var(--dl-font);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s,box-shadow .2s;text-align:center}
.ac-fam-dotlife .ac-btn:hover,.dlp-pill:hover{background:var(--ac-d);border-color:var(--ac-d);transform:translateY(-2px);box-shadow:0 10px 22px var(--ac-s)}
.ac-fam-dotlife .ac-btn--sm,.dlp-pill--sm{min-height:38px;padding:7px 20px;font-size:12px}
.ac-fam-dotlife .ac-btn--line,.dlp-pill--line{background:transparent;color:var(--dl-ink)!important;border-color:currentColor}
.ac-fam-dotlife .ac-btn--line:hover,.dlp-pill--line:hover{background:var(--dl-ink);border-color:var(--dl-ink);color:#fff!important;box-shadow:none}
.dlp-pill--w{background:transparent;border-color:#fff;color:#fff!important}
.dlp-pill--w:hover{background:#fff;border-color:#fff;color:var(--dl-ink)!important}
.dlp-pill--block{display:flex;width:100%}

/* nhãn nhỏ giãn chữ trên tiêu đề */
.dl-eyebrow{display:inline-block;font:500 12.5px/1.4 var(--dl-font);letter-spacing:.2em;text-transform:uppercase;color:var(--ac);margin-bottom:14px}
.dl-eyebrow--w{color:rgba(255,255,255,.88)}
.dl-eyebrow--ink{color:var(--dl-ink)}

/* ---------- đầu trang: menu tách hai bên, logo giữa (26/10/2026: đo theo mẫu — khung 1170, cao 93 → dính 73, chữ menu 14/600, khoảng 20) ---------- */
.dlh-top{background:var(--dl-navy);color:rgba(255,255,255,.82);font-size:13.5px}
.dlh-top__in{display:flex;justify-content:space-between;align-items:center;gap:14px;min-height:38px;flex-wrap:wrap}
.dlh-top__r{display:flex;gap:20px}
.dlh-top a:hover{color:#fff}
.dlh{position:sticky;top:0;z-index:60;background:#fff;transition:box-shadow .3s,background-color .3s}
.dlh.is-scrolled{box-shadow:0 0 20px rgba(0,0,0,.05);margin-bottom:calc(var(--dl-head) - var(--dl-head-s))}
.dlh__in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;min-height:var(--dl-head);padding:0 20px;max-width:calc(var(--dl-box) + 40px);margin:0 auto;transition:min-height .3s}
.dlh.is-scrolled .dlh__in{min-height:var(--dl-head-s)}
.dlh__nav{display:flex;align-items:center;gap:20px;flex-wrap:nowrap}
.dlh__nav a{position:relative;display:block;padding:0 5px;font:600 14px/29px var(--dl-font);color:var(--dl-ink);white-space:nowrap;transition:color .25s}
.dlh__nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:50%;background:var(--ac);opacity:.2;transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.dlh__nav a:hover,.dlh__nav a.is-on{color:var(--ac)}
.dlh__nav a:hover::after{transform:scaleX(1)}
.dlh__nav--l{justify-self:start}
.dlh__logo{justify-self:center;display:flex;align-items:center;gap:10px;min-width:0}
.dlh__logo img{display:block;max-height:65px;width:auto;max-width:170px;object-fit:contain;transition:max-height .3s,filter .3s}
.dlh.is-scrolled .dlh__logo img{max-height:44px}
.dlh__logo b{font-weight:600;font-size:19px;color:var(--dl-ink);letter-spacing:-.01em;white-space:nowrap}
.dlh__r{justify-self:end;display:flex;align-items:center;gap:20px}
.dlh__social,.dlh__m-social,.dlf-social{display:flex;align-items:center;gap:0}
.dlh__social{margin-left:-10px}
.dlh__social a,.dlh__m-social a{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;color:var(--dl-ink);transition:color .3s,background-color .3s}
.dlh__social svg{width:14px;height:14px}
.dlh__social a:hover,.dlh__m-social a:hover{color:var(--ac)}
.dlh__login{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--dl-line);color:var(--dl-ink);transition:border-color .25s,color .25s}
.dlh__login svg{width:17px;height:17px}
.dlh__login:hover{color:var(--ac);border-color:var(--ac)}
.dlh__btn{display:inline-flex;align-items:center;min-height:40px;padding:8px 22px;border-radius:25px;background:var(--ac);color:#fff!important;font:700 12px/1.2 var(--dl-font);letter-spacing:1px;text-transform:uppercase;white-space:nowrap;transition:background-color .25s,transform .25s}
.dlh__btn:hover{background:var(--ac-d);transform:translateY(-1px)}
.dlh__burger{display:none;justify-self:end;width:40px;height:40px;border:0;border-radius:50%;background:transparent;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--dl-ink)}
.dlh__burger i{display:block;width:18px;height:2px;background:currentColor;border-radius:2px;transition:transform .25s,opacity .2s}
.dlh__burger[aria-expanded="true"] i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.dlh__burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.dlh__burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.dlh__m{display:none}

/* đầu trang trong suốt trên ảnh đầu trang chủ: chữ trắng, logo trắng; cuộn quá 40px → thanh trắng 73px trượt xuống */
.dlh--over{background:transparent}
.dlh--over:not(.is-scrolled) .dlh__nav a,.dlh--over:not(.is-scrolled) .dlh__nav a.is-on,.dlh--over:not(.is-scrolled) .dlh__social a,.dlh--over:not(.is-scrolled) .dlh__burger,.dlh--over:not(.is-scrolled) .dlh__logo b{color:#fff}
.dlh--over:not(.is-scrolled) .dlh__nav a::after{background:#fff}
.dlh--over:not(.is-scrolled) .dlh__logo img{filter:brightness(0) invert(1)}
.dlh--over:not(.is-scrolled) .dlh__login{color:#fff;border-color:rgba(255,255,255,.45)}
.dlh--over:not(.is-scrolled) .dlh__login:hover{border-color:#fff}
.dlh--over.is-scrolled{background:#fff;animation:dlhDrop .35s ease-out}
@keyframes dlhDrop{from{transform:translateY(-100%)}to{transform:none}}
/* ảnh đầu trang chỉ kéo lên dưới đầu trang khi đầu trang ở chế độ trong suốt (khối hero không đứng đầu → về lại bình thường) */
.dlh:not(.dlh--over)~#main .dlc-hero{margin-top:0}
.dlh--over~#main .dlc-hero{margin-top:calc(-1 * var(--dl-head))}

@media (max-width:1320px){
  .dlh__nav,.dlh__r{gap:12px}
  .dlh__social{display:none}
}
@media (max-width:1180px){
  .dlh__nav a{padding:0 3px;font-size:13.5px}
  .dlh__btn{padding:8px 16px}
}
@media (max-width:1120px){
  body.ac-fam-dotlife{--dl-head:75px;--dl-head-s:75px}
  .dlh__in{grid-template-columns:auto 1fr auto;padding:0 20px}
  .dlh__nav--l,.dlh__r{display:none}
  .dlh__logo{justify-self:start}
  .dlh__logo img,.dlh.is-scrolled .dlh__logo img{max-height:54px;max-width:150px}
  .dlh__burger{display:flex;grid-column:3}
  .dlh__m{display:flex;flex-direction:column;max-height:0;overflow:hidden;background:#fff;background-clip:padding-box;border-top:1px solid transparent;padding:0 20px;transition:max-height .35s ease,padding .35s,border-color .35s}
  .dlh__m.is-open{max-height:calc(100vh - 75px);overflow-y:auto;padding:8px 20px 22px;border-top-color:var(--dl-line)}
  .dlh__m a{padding:13px 2px;border-bottom:1px solid var(--dl-line);font-weight:500;color:var(--dl-ink)}
  .dlh__m a.is-on{color:var(--ac)}
  .dlh__m .dlh__m-btn{margin-top:16px;border:0;justify-content:center;display:flex;border-radius:25px;background:var(--ac);color:#fff;font-size:13px;letter-spacing:1px;text-transform:uppercase;font-weight:700}
  .dlh__m-social{margin-top:14px;justify-content:center}
  .dlh__m-social a{border:0;padding:0}
  .dlh--over:has(.dlh__m.is-open){background:#fff}
  .dlh--over:has(.dlh__m.is-open) .dlh__burger{color:var(--dl-ink)}
  .dlh--over:has(.dlh__m.is-open) .dlh__logo img{filter:none}
}
@media (max-width:420px){ .dlh__logo b{font-size:16px;white-space:normal;line-height:1.2} }

/* ---------- chân trang (26/10/2026: dải 70/80 nền #122947, khung 1170, logo giữa, 4 cột 293, tiêu đề 21/600, dòng 27px; màn lớn: chân trang nằm dưới, nội dung cuộn lên để lộ ra) ---------- */
.dlf-wrap{width:100%;max-width:calc(var(--dl-box) + 40px);margin:0 auto;padding:0 20px;box-sizing:border-box}
.dlf{background:#fff;color:var(--dl-ink);font-size:14px}
.dlf-band{background:var(--dl-navy);color:#fff;position:relative;overflow:hidden}
.dlf-band__in{display:grid;grid-template-columns:410px minmax(0,1fr);align-items:center;gap:0;padding-top:70px;padding-bottom:80px}
.dlf-band__l{padding:0 10px}
.dlf-band__eb{display:block;margin-bottom:15px;font:700 13px/18px var(--dl-font);letter-spacing:2px;text-transform:uppercase;color:var(--dl-pink)}
.dlf-band .dlf-band__t{margin:0;color:#fff;font-size:40px;font-weight:700;line-height:1;letter-spacing:-.01em}
.dlf-band .dlf-band__t em{color:#fff}
.dlf-band__r{display:flex;align-items:center;gap:20px;padding:0 10px}
.dlf-band__p{flex:0 1 491px;margin:0;min-height:48px;display:flex;align-items:center;padding:10px 10px 10px 0;border-bottom:1px solid #fff;font-size:16px;line-height:1.5;color:rgba(255,255,255,.88)}
.dlf-band__btn{flex:none;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 30px;border-radius:25px;border:1px solid #fff;color:#fff!important;font:700 13px/22px var(--dl-font);letter-spacing:1px;text-transform:uppercase;white-space:nowrap;transition:background-color .3s,color .3s}
.dlf-band__btn:hover{background:#fff;color:var(--dl-navy)!important}
.dlf-main{padding-top:60px;padding-bottom:40px}
.dlf-logo{display:flex;justify-content:center;align-items:center;gap:10px;margin:0 auto 70px;width:max-content;max-width:100%}
.dlf-logo img{display:block;max-height:65px;width:auto;max-width:170px;object-fit:contain}
.dlf-logo b{font-size:20px;font-weight:600;color:var(--dl-ink)}
.dlf-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.dlf-col{padding-right:24px;min-width:0}
.dlf-col h3{font-size:21px;font-weight:600;line-height:20px;margin:0 0 20px;color:var(--dl-ink)}
.dlf-col a,.dlf-col p{display:block;margin:0;font-size:14px;line-height:27px;color:var(--dl-ink);overflow-wrap:anywhere;transition:color .25s}
.dlf-col p{line-height:27px}
.dlf-col a:hover{color:var(--ac)}
.dlf-col .dlf-strong{font-weight:700;color:var(--dl-ink)}
.dlf-col .dlf-strong:hover{color:var(--ac)}
.dlf-social{margin-top:6px}
.dlf-social a{display:grid!important;place-items:center;width:28px;height:28px;margin:0!important;border-radius:50%;color:var(--dl-ink)!important;transition:background-color .3s,color .3s}
.dlf-social svg{width:15px;height:15px}
.dlf-social a:hover{color:var(--ac)!important}
.dlf-bottom{text-align:center;padding:14px 0 24px;font-size:14px;line-height:19px;color:var(--dl-ink)}
@media (min-width:1025px) and (min-height:820px){
  body.ac-fam-dotlife:has(> footer.dlf) > #main{position:relative;z-index:1;background:#fff}
  body.ac-fam-dotlife > footer.dlf{position:sticky;bottom:0;z-index:0}
}
@media (max-width:1024px){
  .dlf-band__in{grid-template-columns:1fr;gap:26px;padding-top:60px;padding-bottom:64px}
  .dlf-band__l,.dlf-band__r{padding:0}
  .dlf-band .dlf-band__t{font-size:34px;line-height:1.1}
  .dlf-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 0}
  .dlf-logo{margin-bottom:50px}
}
@media (max-width:560px){
  .dlf-band__r{flex-direction:column;align-items:stretch}
  .dlf-band__p{flex:none}
  .dlf-band__btn{align-self:flex-start}
  .dlf-band .dlf-band__t{font-size:30px}
  .dlf-cols{grid-template-columns:1fr;gap:34px;text-align:center}
  .dlf-col{padding-right:0}
  .dlf-social{justify-content:center}
  .dlf-main{padding-top:50px}
}
.ac .dlh__login{color:var(--dl-ink)}
.ac .dlh__login:hover{color:var(--ac)}
.ac .dlh--over:not(.is-scrolled) .dlh__login{color:#fff}