/* ==========================================================================
   HUONG AVALA — CSS chung cho cả 5 trang
   Dựng lại y hệt khung thiết kế của hieudinh.vn (quét ngày 2026-08-02)
   Sửa màu / cỡ chữ thì sửa ở khối :root ngay dưới, cả 5 trang đổi theo.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BIẾN — đổi ở đây là đổi cả web
   -------------------------------------------------------------------------- */
:root{
  /* Màu nền */
  --bg-black:       #000000;   /* nền đen — khối chị em nói gì, câu chuyện, gói lớp */
  --bg-dark:        #1A1A1A;   /* nền tối — dải con số, nhận được gì, phản hồi, footer */
  --bg-light:       #FAFAFF;   /* nền sáng — quy trình, form liên hệ */
  --bg-white:       #FFFFFF;

  /* Màu chữ */
  --text-light:     #FFFFFF;   /* chữ trên nền tối (dùng nhiều nhất) */
  --text-dark:      #000000;   /* chữ trên nền sáng */
  --text-muted:     #C9C9C9;   /* chữ phụ trên nền tối */
  --link:           #188bf6;

  /* Màu nhấn */
  --accent-orange:  #FE9418;   /* cam — viền nút, nút phụ, nút gửi form */
  --accent-coral:   #F5634B;   /* coral — nút CTA chính, hover menu */
  --btn-hero-bg:    #e93d3d;   /* đỏ — nút CTA to nhất */
  --btn-hero-text:  #222222;

  /* Form */
  --form-text:        #2c3345;
  --form-border:      #ACACAC;
  --form-placeholder: #8c8c8c;

  /* Chữ */
  --font-head:    'Roboto', -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Roboto', -apple-system, 'Segoe UI', sans-serif;
  --font-btn-alt: 'Montserrat', 'Roboto', sans-serif;
  --font-form:    'Inter', 'Roboto', sans-serif;

  /* Khung */
  --container:    1170px;
  --container-wide: 1120px;
  --radius-card:  10px;
  --radius-btn:   75px;
  --radius-input: 5px;
}

/* --------------------------------------------------------------------------
   2. NỀN CHUNG
   -------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg-white);
  font-family:var(--font-body);
  font-size:18px;
  line-height:1.6em;
  color:var(--text-dark);
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:var(--link); text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }

/* --------------------------------------------------------------------------
   3. KHUNG SECTION / ROW / COLUMN  (copy đúng cách hieudinh.vn xếp)
   -------------------------------------------------------------------------- */
.sec{ position:relative; padding:20px 0; }
.sec > .inner{
  max-width:var(--container);
  width:100%;
  margin:0 auto;
  padding:0 10px;
}
.sec.wide > .inner{ max-width:var(--container-wide); }
.sec.full  > .inner{ max-width:100%; padding:0; }

/* Nền theo nhịp sáng–tối của bản gốc */
.sec.black{ background:var(--bg-black); color:var(--text-light); }
.sec.dark { background:var(--bg-dark);  color:var(--text-light); }
.sec.light{ background:var(--bg-light); color:var(--text-dark); }

.sec.black a, .sec.dark a{ color:var(--accent-orange); }

.row{ display:flex; width:100%; padding:15px 0; }
.col{ flex:1 1 auto; width:100%; padding:10px 15px; min-width:0; }

.row.cols-2 > .col{ width:50%; }
.row.cols-3 > .col{ width:33.3333%; }
.row.cols-4 > .col{ width:25%; }
.row.tight { padding:5px 0; }
.row.middle{ align-items:center; }

/* Thẻ có viền + bo góc 10 (dải con số, khối "nhận được gì") */
.card-bd{
  border:2px solid currentColor;
  border-radius:var(--radius-card);
  padding:10px 10px 20px;
  margin:0 10px;
  height:100%;
}
.card{
  border-radius:var(--radius-card);
  padding:14px;
  height:100%;
}
.card.on-dark{ background:#111111; }

/* --------------------------------------------------------------------------
   4. CHỮ — cỡ chữ theo bản gốc (desktop / mobile ≤480px)
   -------------------------------------------------------------------------- */
.t-num  { font-family:var(--font-head); font-size:55px; line-height:1.3em; margin:0; }
.t-h1   { font-family:var(--font-head); font-size:45px; line-height:1.3em; margin:0 0 10px; }
.t-h2   { font-family:var(--font-head); font-size:40px; line-height:1.3em; margin:0 0 10px; }
.t-h3   { font-family:var(--font-head); font-size:26px; line-height:1.5em; margin:0 0 8px; }
.t-h4   { font-family:var(--font-head); font-size:20px; line-height:1.6em; margin:0 0 8px; }
.t-lead { font-family:var(--font-head); font-size:23px; font-weight:400; line-height:1.4em; margin:0 0 10px; }
.t-eyebrow{ font-family:var(--font-head); font-size:16px; letter-spacing:1px; text-transform:uppercase; margin:0 0 6px; opacity:.85; }

/* Căn TRÁI, không căn đều hai bên.
   Tiếng Việt nhiều từ 1–2 âm tiết, căn đều đẻ ra khe hở trắng loang lổ giữa dòng. */
p{ font-family:var(--font-body); font-size:18px; font-weight:400; line-height:1.6em; text-align:left; margin:0 0 14px; }
p.small{ font-size:16px; }
p.center, .center{ text-align:center; }
.left{ text-align:left; }

.coral { color:var(--accent-coral); }
.orange{ color:var(--accent-orange); }

/* Gạch đầu dòng kiểu bản gốc: chấm tròn màu nhấn */
.bullets li{
  position:relative;
  padding-left:26px;
  margin-bottom:12px;
  font-size:18px;
  line-height:1.6em;
  text-align:left;
}
.bullets li::before{
  content:"";
  position:absolute; left:0; top:.6em;
  width:10px; height:10px; border-radius:50%;
  background:var(--accent-coral);
}
.bullets.check li::before{
  content:"✔";
  background:none; width:auto; height:auto;
  top:0; color:var(--accent-orange); font-size:16px;
}

.divider{
  width:100%; height:2px; border:0;
  background:currentColor; opacity:.25;
  margin:14px 0 0;
}

/* --------------------------------------------------------------------------
   5. NÚT — 3 kiểu như bản gốc, bo tròn viên thuốc 75px
   -------------------------------------------------------------------------- */
.btn{
  display:inline-block;
  font-family:var(--font-head);
  font-size:20px;
  font-weight:700;
  line-height:1.4em;
  text-align:center;
  text-decoration:none;
  padding:15px 24px;
  border:2px solid transparent;
  border-radius:var(--radius-btn);
  margin-top:30px;
  cursor:pointer;
  transition:opacity .2s ease, transform .2s ease;
}
.btn:hover{ opacity:.88; transform:translateY(-1px); }   /* bản gốc không có hover — thêm cho dễ bấm */

.btn-hero  { background:var(--btn-hero-bg); color:var(--btn-hero-text); border-color:var(--accent-orange); }
.btn-orange{ background:var(--accent-orange); color:#fff; }
.btn-coral { background:var(--accent-coral);  color:#fff; }
.btn-coral-bd{ background:var(--accent-coral); color:#fff; border-color:var(--accent-orange); }
.btn-ghost { background:transparent; color:#fff; border-color:#fff; }
.btn-alt   { font-family:var(--font-btn-alt); font-size:16px; }
.btn-sm    { font-size:16px; padding:12px 20px; margin-top:16px; }
.btn-block { display:block; width:100%; }

.sec .btn-wrap{ text-align:center; }

/* --------------------------------------------------------------------------
   6. HEADER / MENU  (bản gốc KHÔNG dính khi cuộn — ở đây bật dính, xem README)
   -------------------------------------------------------------------------- */
.site-header{
  background:var(--bg-white);
  padding:14px 0;
  position:sticky; top:0; z-index:90;
  box-shadow:0 1px 0 rgba(0,0,0,.08);
}
.site-header > .inner{
  max-width:var(--container); margin:0 auto; padding:0 14px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text-dark); }
.brand img{ width:80px; }
.brand .brand-text{ font-family:var(--font-head); font-weight:700; font-size:20px; line-height:1.1; }
.brand .brand-sub { font-size:12px; font-weight:400; opacity:.7; display:block; }

.nav-menu{ display:flex; align-items:center; }
.nav-menu a{
  display:block;
  font-family:var(--font-head); font-size:16px; font-weight:500;
  color:var(--text-dark); padding:10px 18px;
  transition:all .3s ease;
}
.nav-menu a:hover, .nav-menu a.active{ color:var(--accent-coral); }

.nav-toggle{
  display:none;
  width:44px; height:44px;
  background:none; border:0; cursor:pointer;
  flex-direction:column; justify-content:center; align-items:center; gap:5px;
}
.nav-toggle span{ display:block; width:24px; height:2px; background:#000; transition:all .3s ease; }

/* Menu mobile bung toàn màn hình — giống popup của bản gốc */
.nav-popup{
  position:fixed; inset:0; z-index:100;
  background:rgba(0,0,0,.5);
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease;
}
.nav-popup.show{ opacity:1; visibility:visible; }
.nav-popup-body{
  background:#fff; width:100%; max-width:420px; margin-left:auto;
  height:100%; padding:24px 20px; overflow-y:auto;
}
.nav-popup-body a{
  display:block; padding:14px 6px; font-size:18px; font-weight:500;
  color:var(--text-dark); border-bottom:1px solid #eee;
}
.nav-popup-body a:hover{ color:var(--accent-coral); }
.nav-close{
  background:none; border:0; font-size:30px; line-height:1;
  cursor:pointer; margin-bottom:10px;
}

/* --------------------------------------------------------------------------
   7. Ô CHỜ ẢNH / VIDEO — chị Hương bỏ file thật vào là xoá khối này đi
   -------------------------------------------------------------------------- */
.ph{
  position:relative;
  display:flex; align-items:center; justify-content:center; text-align:center;
  background:repeating-linear-gradient(45deg,#f2f2f2,#f2f2f2 12px,#e9e9e9 12px,#e9e9e9 24px);
  border:2px dashed #b9b9b9;
  border-radius:var(--radius-card);
  color:#5a5a5a;
  font-family:var(--font-head); font-size:14px; line-height:1.5;
  padding:16px;
  width:100%;
}
.sec.black .ph, .sec.dark .ph{
  background:repeating-linear-gradient(45deg,#1f1f1f,#1f1f1f 12px,#262626 12px,#262626 24px);
  border-color:#4a4a4a; color:#bdbdbd;
}
.ph b{ display:block; font-size:16px; margin:4px 0; color:var(--accent-orange); }
.ph small{ display:block; opacity:.75; margin-top:6px; font-size:12px; }
.ph-16x9  { aspect-ratio:16/9; }
.ph-4x5   { aspect-ratio:4/5; }
.ph-1x1   { aspect-ratio:1/1; }
.ph-9x16  { aspect-ratio:9/16; }
.ph-banner{ aspect-ratio:1920/640; border-radius:0; }
.ph-round { border-radius:50%; width:150px; height:150px; margin:0 auto; aspect-ratio:1/1; }

/* Ảnh thật khi đã thay vào */
.banner-img{ width:100%; height:auto; display:block; }
.img-round { border-radius:var(--radius-card); }
.img-circle{ border-radius:50%; width:150px; height:150px; object-fit:cover; margin:0 auto; border:3px solid #fff; }

/* --------------------------------------------------------------------------
   8. HERO CÓ ẢNH NỀN
   -------------------------------------------------------------------------- */
.hero-bg{
  position:relative;
  background:var(--bg-dark) center/cover no-repeat;
  padding:90px 0;
  color:#fff;
}
.hero-bg::before{
  content:""; position:absolute; inset:0;
  background:rgba(0,0,0,.55);
}
.hero-bg > .inner{ position:relative; z-index:2; }
.hero-band{ padding:60px 0 140px; }

/* --------------------------------------------------------------------------
   9. FORM ĐĂNG KÝ
   -------------------------------------------------------------------------- */
.form-card{
  background:#fff;
  border:2px solid var(--accent-orange);
  border-radius:var(--radius-input);
  padding:22px 18px 16px;
  margin-left:20px;
}
.form-card .form-title{
  font-family:var(--font-head); font-size:26px; font-weight:700;
  color:var(--text-dark); text-align:center; margin:0 0 16px;
}
.form-card label{
  display:block; font-family:var(--font-form); font-size:13px;
  color:var(--form-text); margin-bottom:4px;
}
.form-card input, .form-card textarea, .form-card select{
  width:100%;
  font-family:var(--font-form); font-size:14px; font-weight:300;
  color:var(--form-text);
  background:#fff;
  border:1px solid var(--form-border);
  border-radius:var(--radius-input);
  padding:12px 15px;
  margin-bottom:8px;
}
.form-card textarea{ min-height:96px; resize:vertical; }
.form-card ::placeholder{ color:var(--form-placeholder); }
.form-card input:focus, .form-card textarea:focus{
  outline:none; border-color:var(--accent-orange);
}
.form-card button[type=submit]{
  width:100%;
  background:var(--accent-orange); color:#fff;
  font-family:var(--font-form); font-size:20px; font-weight:700;
  border:0; border-radius:var(--radius-input);
  padding:12px 20px; margin-top:6px; cursor:pointer;
  transition:opacity .2s ease;
}
.form-card button[type=submit]:hover{ opacity:.9; }
.form-note{ font-family:var(--font-form); font-size:12px; color:#777; text-align:center; margin:10px 0 0; }
.form-msg{ display:none; font-family:var(--font-form); font-size:14px; text-align:center; padding:10px; border-radius:5px; margin-top:10px; }
.form-msg.ok  { display:block; background:#e8f6ec; color:#1c6b34; }
.form-msg.err { display:block; background:#fdecea; color:#8a1c15; }

/* --------------------------------------------------------------------------
   10. FOOTER
   -------------------------------------------------------------------------- */
.site-footer{ background:var(--bg-dark); color:#fff; padding:34px 0 14px; }
.site-footer > .inner{ max-width:var(--container); margin:0 auto; padding:0 14px; text-align:center; }
.site-footer .foot-title{ font-family:var(--font-head); font-size:26px; font-weight:700; margin:0 0 14px; }
.site-footer p{ text-align:center; font-size:16px; line-height:1.5em; margin:0 0 8px; }
.site-footer a{ color:#fff; }
.socials{ display:flex; justify-content:center; gap:22px; flex-wrap:wrap; margin:18px 0 0; }
.socials a{ display:block; text-align:center; font-size:13px; opacity:.9; }
.socials .ic{
  display:flex; align-items:center; justify-content:center;
  width:42px; height:42px; margin:0 auto 6px;
  border:1px solid rgba(255,255,255,.35); border-radius:6px;
  font-size:18px;
}
.socials a:hover .ic{ border-color:var(--accent-orange); color:var(--accent-orange); }
.copyright{ font-size:14px; opacity:.75; margin-top:18px; }

/* --------------------------------------------------------------------------
   11. LINH TINH
   -------------------------------------------------------------------------- */
.todo{               /* chỗ còn thiếu số liệu thật — chị Hương chốt rồi thì xoá class này */
  background:rgba(254,148,24,.18);
  border-bottom:1px dashed var(--accent-orange);
  padding:0 4px;
}
.step-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:64px; height:64px; margin-bottom:10px;
  border-radius:50%;
  background:var(--accent-coral); color:#fff;
  font-family:var(--font-head); font-size:30px; font-weight:700;
}
.quote{
  font-family:var(--font-head); font-size:26px; line-height:1.6em;
  text-align:center; font-style:italic; margin:0;
}
.testi-name { font-family:var(--font-head); font-size:20px; font-weight:700; margin:12px 0 2px; text-align:center; }
.testi-role { font-size:15px; opacity:.8; text-align:center; margin:0 0 10px; }
.testi-text { font-size:16px; line-height:1.6em; text-align:left; }

.slider{ display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; }
.slider > *{ flex:0 0 78%; scroll-snap-align:start; }

/* --- Trang điều khoản / chính sách (chữ dài, đọc là chính) --------------- */
.legal{ max-width:820px; margin:0 auto; }
.legal p, .legal li{ text-align:left; font-size:17px; line-height:1.75em; }
.legal h2{ font-family:var(--font-head); font-size:26px; line-height:1.4em; margin:34px 0 10px; }
.legal h3{ font-family:var(--font-head); font-size:20px; line-height:1.4em; margin:22px 0 8px; }
.legal ul{ margin:0 0 14px; }
.legal ul li{ position:relative; padding-left:20px; margin-bottom:8px; }
.legal ul li::before{ content:"–"; position:absolute; left:0; color:var(--accent-coral); }
.legal .meta{ font-size:15px; color:#666; margin-bottom:26px; }
.legal .box{
  background:var(--bg-light); border-left:4px solid var(--accent-orange);
  padding:16px 18px; border-radius:0 5px 5px 0; margin:20px 0;
}
.legal .box p:last-child{ margin-bottom:0; }
.legal .en{ background:#f6f6f8; border-radius:8px; padding:18px 20px; margin-top:30px; }
.legal .en p, .legal .en li{ font-size:15px; line-height:1.65em; }

/* ==========================================================================
   13. BLOG — thêm 2026-08-02 khi đổi trang thành blog cá nhân
   ========================================================================== */

/* --- 13.1 Ô giới thiệu ngắn đầu trang chủ ("mình trong 10 giây") --------- */
.hello{ display:flex; align-items:center; gap:26px; padding:8px 0 4px; }
.hello img{ width:132px; height:132px; border-radius:50%; object-fit:cover; flex:0 0 132px; }
.hello .t-h2{ margin-bottom:6px; }
.hello p{ margin-bottom:8px; max-width:640px; }

/* --- 13.2 Danh sách bài viết -------------------------------------------- */
.post-list{ max-width:760px; margin:0 auto; }

.post-item{
  display:flex; gap:20px; align-items:flex-start;
  padding:22px 0;
  border-bottom:1px solid rgba(0,0,0,.09);
}
.sec.dark .post-item, .sec.black .post-item{ border-bottom-color:rgba(255,255,255,.14); }
.post-item:last-child{ border-bottom:0; }

.post-item .thumb{ flex:0 0 132px; }
.post-item .thumb img{
  width:132px; height:165px; object-fit:cover;
  border-radius:var(--radius-card);
}
.post-item .body{ flex:1 1 auto; min-width:0; }

.post-meta{
  font-family:var(--font-head); font-size:13px; letter-spacing:.4px;
  text-transform:uppercase; opacity:.6; margin:0 0 6px;
}
.post-title{
  font-family:var(--font-head); font-size:24px; font-weight:700; line-height:1.35em;
  margin:0 0 8px;
}
.post-title a{ color:inherit; text-decoration:none; }
.post-title a:hover{ color:var(--accent-coral); }
.post-excerpt{ font-size:17px; line-height:1.6em; margin:0; opacity:.88; }

/* --- 13.3 Trang bài viết ------------------------------------------------ */
/* Bề rộng 680px ≈ 60–70 ký tự một dòng — mức đọc dễ nhất theo nghiên cứu
   (Bringhurst 50–75, ngọt nhất 66). Trước đây để 1170px, dài gần gấp đôi. */
.article{ max-width:680px; margin:0 auto; }

.article .article-head{ margin-bottom:26px; }
.article h1{
  font-family:var(--font-head); font-size:38px; font-weight:700; line-height:1.25em;
  margin:0 0 12px; text-align:left;
}
.article .article-meta{
  font-family:var(--font-head); font-size:14px; opacity:.6; margin:0;
}
.article .cover{
  width:100%; border-radius:var(--radius-card); margin:0 0 30px;
}
.article p{
  font-size:19px; line-height:1.75em; margin:0 0 22px; text-align:left;
}
.article p.lead{ font-size:22px; line-height:1.6em; font-weight:500; }
.article h2{
  font-family:var(--font-head); font-size:26px; line-height:1.4em;
  margin:38px 0 12px;
}
.article .note{
  font-size:16px; opacity:.75; font-style:italic;
  border-left:3px solid var(--accent-orange); padding-left:14px; margin:26px 0;
}
.article .cta-comment{
  background:var(--bg-light); border-radius:var(--radius-card);
  padding:20px 22px; margin:32px 0 0;
}
.article .cta-comment p:last-child{ margin-bottom:0; }

.article-nav{
  max-width:680px; margin:36px auto 0; padding-top:22px;
  border-top:1px solid rgba(0,0,0,.1);
  display:flex; gap:16px; justify-content:space-between; flex-wrap:wrap;
}
.article-nav a{ font-family:var(--font-head); font-weight:500; font-size:16px; }

/* --- 13.4 Ô nhận bài mới (thay form đăng ký lớp) ------------------------- */
.subscribe{
  max-width:680px; margin:0 auto;
  background:#fff; border:2px solid var(--accent-orange);
  border-radius:var(--radius-card); padding:24px 22px;
}
.sec.dark .subscribe, .sec.black .subscribe{ background:#fff; color:var(--text-dark); }
.subscribe .t-h3{ margin-bottom:6px; }
.subscribe p{ font-size:16px; margin-bottom:14px; }
.subscribe .fields{ display:flex; gap:10px; flex-wrap:wrap; }
.subscribe .fields > *{ flex:1 1 180px; }
.subscribe input{
  font-family:var(--font-form); font-size:15px;
  border:1px solid var(--form-border); border-radius:var(--radius-input);
  padding:12px 14px; width:100%; color:var(--form-text);
}
.subscribe input:focus{ outline:none; border-color:var(--accent-orange); }
.subscribe button{
  font-family:var(--font-head); font-size:16px; font-weight:700;
  background:var(--accent-orange); color:#fff;
  border:0; border-radius:var(--radius-input); padding:12px 22px;
  cursor:pointer; flex:0 0 auto;
}
.subscribe button:hover{ opacity:.9; }

/* --- 13.5 Trang "Bắt đầu từ đây" ---------------------------------------- */
.start-item{
  border-left:3px solid var(--accent-coral);
  padding:2px 0 2px 18px; margin-bottom:26px;
}
.start-item .when{
  font-family:var(--font-head); font-size:15px; font-weight:700;
  color:var(--accent-coral); margin:0 0 4px;
}
.start-item .post-title{ font-size:21px; margin-bottom:6px; }
.start-item p{ font-size:16px; margin:0; }

/* --- 13.6 Nhãn chủ đề --------------------------------------------------- */
.topics{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.topic{
  font-family:var(--font-head); font-size:15px;
  border:1px solid rgba(0,0,0,.2); border-radius:var(--radius-btn);
  padding:8px 16px; color:inherit; text-decoration:none;
}
.sec.dark .topic, .sec.black .topic{ border-color:rgba(255,255,255,.3); }
.topic:hover{ border-color:var(--accent-coral); color:var(--accent-coral); }

@media only screen and (max-width:767px){
  .hello{ flex-direction:column; text-align:center; gap:16px; }
  .hello img{ flex:0 0 auto; }
  .article h1{ font-size:28px; }
  .article p{ font-size:18px; line-height:1.7em; }
  .article p.lead{ font-size:19px; }
  .post-item{ gap:14px; }
  .post-item .thumb{ flex:0 0 96px; }
  .post-item .thumb img{ width:96px; height:120px; }
  .post-title{ font-size:19px; }
  .post-excerpt{ font-size:15px; }
  .subscribe .fields > *{ flex:1 1 100%; }
}

.foot-links{ margin-top:10px; font-size:14px; }
.foot-links a{ color:#fff; opacity:.8; text-decoration:underline; margin:0 8px; }
.foot-links a:hover{ opacity:1; color:var(--accent-orange); }

/* --------------------------------------------------------------------------
   12. MÀN HÌNH NHỎ
   -------------------------------------------------------------------------- */
@media only screen and (max-width:767px){
  .row{ flex-direction:column; padding:10px 0; }
  .row > .col{ width:100% !important; padding:10px; }
  .row.keep-2 { flex-direction:row; flex-wrap:wrap; }
  .row.keep-2 > .col{ width:50% !important; }

  .nav-menu{ display:none; }
  .nav-toggle{ display:flex; }

  .form-card{ margin-left:0; }
  .card-bd{ margin:0; }
  .hero-bg{ padding:56px 0; }
  .hero-band{ padding:40px 0 60px; }
}

@media screen and (max-width:480px){
  body{ font-size:16px; }
  .t-num  { font-size:38px; }
  .t-h1   { font-size:30px; }
  .t-h2   { font-size:23px; }
  .t-h3   { font-size:20px; }
  .t-h4   { font-size:18px; }
  .t-lead { font-size:18px; }
  p, .bullets li{ font-size:16px; text-align:left; }
  .btn    { font-size:16px; padding:13px 20px; width:100%; }
  .quote  { font-size:20px; }
  .sec    { padding:26px 0; }
  .site-footer .foot-title{ font-size:22px; }
}