/* ====== RealDev-like styling for Flatsome (sidebar + hero + cards + footer) ====== */
:root{
  --rd-leftnav-w: 240px;
  --rd-primary: #4f46e5;      /* Indigo */
  --rd-primary-2:#8b5cf6;     /* Purple */
  --rd-bg-soft:#f7f7f9;
  --rd-text:#111827;
}

/* --- Left Sidebar Nav --- */
#rd-leftnav{position:fixed; left:0; top:0; bottom:0; width:var(--rd-leftnav-w);
  background:#fff; border-right:1px solid #e5e7eb; padding:88px 14px 20px; z-index:9999;
  overflow:auto; box-shadow:0 10px 30px rgba(17,24,39,.05)}
#rd-leftnav .rd-leftnav__logo{position:absolute; left:14px; top:18px;}
#rd-leftnav .rd-leftnav__logo a{display:flex; align-items:center; gap:10px; font-weight:800; color:var(--rd-text); text-decoration:none}
#rd-leftnav .rd-leftnav__logo img{max-height:40px}

.rd-leftnav__menu, #rd-leftnav .menu{list-style:none; padding:0; margin:8px 0 0}
.rd-leftnav__menu li{margin:2px 0}
.rd-leftnav__menu a{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px;
  color:#1f2937; font-weight:600; text-decoration:none}
.rd-leftnav__menu a:hover{background:#f5f6ff; color:var(--rd-primary)}
.rd-leftnav__menu i{font-size:18px; opacity:.85}

/* Push content right to make room for left nav */
body.rd-leftnav-padding .header-wrapper,
body.rd-leftnav-padding #wrapper{margin-left:var(--rd-leftnav-w)}
/* Make sure admin bar doesn't overlap leftnav */
body.admin-bar #rd-leftnav{padding-top:120px}

/* Mobile: hide left nav */
@media (max-width: 1024px){
  #rd-leftnav{display:none}
  body.rd-leftnav-padding .header-wrapper,
  body.rd-leftnav-padding #wrapper{margin-left:0}
}

/* --- Hero search block --- */
.rd-hero{background:var(--rd-bg-soft); padding:48px 0 28px; text-align:center}
.rd-hero__title{margin:0 0 8px; font-size:38px; line-height:1.15; font-weight:800}
.rd-hero__desc{font-size:18px; opacity:.8; margin:0 0 16px}
.rd-hero .searchform{max-width:760px; margin:18px auto 0; display:flex; align-items:center}
.rd-hero .search-field{flex:1; height:52px; border-radius:999px 0 0 999px; border:1px solid #e5e7eb; background:#fff;
  padding:0 18px; font-size:16px}
.rd-hero .searchform .ux-search-submit, .rd-hero .searchform button[type=submit], .rd-hero .searchform input[type=submit]{
  height:52px; padding:0 22px; border-radius:0 999px 999px 0; border:0;
  background:linear-gradient(180deg, var(--rd-primary-2), var(--rd-primary));
  color:#fff; font-weight:700; cursor:pointer
}

/* --- Blog post cards tweak (Flatsome blog_posts element) --- */
.blog-posts .box{border-radius:16px; overflow:hidden; box-shadow:0 8px 24px rgba(17,24,39,.06)}
.blog-posts .box-image{border-radius:0}
.blog-posts .box-text{padding:14px 16px}
.blog-posts .box-text p{display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}

/* --- Footer block --- */
.rd-footer{background:#0b1220; color:#cbd5e1; padding:34px 0}
.rd-footer h4{color:#fff; margin:0 0 12px; font-weight:800}
.rd-footer .is-divider{--divider-color:rgba(255,255,255,.12)}
.rd-footer a{color:#cbd5e1; text-decoration:none}
.rd-footer a:hover{color:#fff}
.rd-footer .social a{display:inline-flex; width:38px; height:38px; border-radius:999px; align-items:center; justify-content:center;
  background:rgba(255,255,255,.08); margin-right:8px}
.rd-footer .social a:hover{background:rgba(255,255,255,.16)}

/* --- Left Sidebar Nav --- */
#rd-leftnav{position:fixed; left:0; top:0; bottom:0; width:var(--rd-leftnav-w);
  background:#fff; border-right:1px solid #e5e7eb; padding:88px 14px 20px; z-index:9999;
  overflow:auto; box-shadow:0 10px 30px rgba(17,24,39,.05)}
#rd-leftnav .rd-leftnav__logo{position:absolute; left:14px; top:18px;}
#rd-leftnav .rd-leftnav__logo a{display:flex; align-items:center; gap:10px; font-weight:800; color:var(--rd-text); text-decoration:none}
#rd-leftnav .rd-leftnav__logo img{max-height:40px}

.rd-leftnav__menu, #rd-leftnav .menu{list-style:none; padding:0; margin:8px 0 0}
.rd-leftnav__menu li{margin:2px 0}
.rd-leftnav__menu a{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px;
  color:#1f2937; font-weight:600; text-decoration:none}
.rd-leftnav__menu a:hover{background:#f5f6ff; color:var(--rd-primary)}
.rd-leftnav__menu i{font-size:18px; opacity:.85}

/* Push content right to make room for left nav */
body.rd-leftnav-padding .header-wrapper,
body.rd-leftnav-padding #wrapper{margin-left:var(--rd-leftnav-w)}
/* Make sure admin bar doesn't overlap leftnav */
body.admin-bar #rd-leftnav{padding-top:120px}

/* Mobile: hide left nav */
@media (max-width: 1024px){
  #rd-leftnav{display:none}
  body.rd-leftnav-padding .header-wrapper,
  body.rd-leftnav-padding #wrapper{margin-left:0}
}

/* --- Hero search block --- */
.rd-hero{background:var(--rd-bg-soft); padding:48px 0 28px; text-align:center}
.rd-hero__title{margin:0 0 8px; font-size:38px; line-height:1.15; font-weight:800}
.rd-hero__desc{font-size:18px; opacity:.8; margin:0 0 16px}
.rd-hero .searchform{max-width:760px; margin:18px auto 0; display:flex; align-items:center}
.rd-hero .search-field{flex:1; height:52px; border-radius:999px 0 0 999px; border:1px solid #e5e7eb; background:#fff;
  padding:0 18px; font-size:16px}
.rd-hero .searchform .ux-search-submit, .rd-hero .searchform button[type=submit], .rd-hero .searchform input[type=submit]{
  height:52px; padding:0 22px; border-radius:0 999px 999px 0; border:0;
  background:linear-gradient(180deg, var(--rd-primary-2), var(--rd-primary));
  color:#fff; font-weight:700; cursor:pointer
}

/* --- Blog post cards tweak (Flatsome blog_posts element) --- */
.blog-posts .box{border-radius:16px; overflow:hidden; box-shadow:0 8px 24px rgba(17,24,39,.06)}
.blog-posts .box-image{border-radius:0}
.blog-posts .box-text{padding:14px 16px}
.blog-posts .box-text p{display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}

/* ====== RESET KHUNG CỦA FLATSOME KHI DÙNG "FOOTER CONTENT = PAGE" ====== */
/* Mặc định Flatsome bọc footer content trong .container -> bị hẹp, thêm padding.
   Đoạn dưới giúp 2 section footer bứt ra full-width giống RealDev. */
.footer-widgets .container > .row > .col { padding-left:0; padding-right:0; }
.footer-widgets .container { max-width:none; padding-left:0; padding-right:0; }

/* 2 section trong page footer: bẻ ra full viewport width */
.rd-foot-cta, .rd-foot-links {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

/* Container chuẩn trong footer */
.rd-container{ max-width:1220px; margin:0 auto; padding:0 20px; }

/* ====== CTA XÁM NHẸ TRÊN CÙNG ====== */
.rd-foot-cta{
  background:#eaf0ff; /* xám xanh nhạt giống mẫu */
  padding:26px 0 22px; 
  border-bottom:1px solid rgba(2,6,23,.06);
}
.rd-foot-cta .rd-container{
  display:grid; grid-template-columns:1.7fr 1.3fr; gap:32px; align-items:center;
}
.rd-cta-left h3{ margin:0 0 6px; font-weight:800; font-size:26px; color:#0f172a; }
.rd-cta-left p{ margin:0 0 14px; opacity:.85; }
.rd-btn{ display:inline-flex; align-items:center; gap:8px; padding:10px 18px;
  border-radius:12px; font-weight:700; text-decoration:none; background:#1d4ed8; color:#fff; box-shadow:0 8px 18px rgba(29,78,216,.18) }
.rd-btn:hover{ filter:brightness(1.05) }

.rd-cta-right{ display:grid; grid-template-columns:1fr; gap:10px; justify-items:start }
.rd-cta-right .rd-contact{ display:flex; gap:12px; align-items:flex-start; }
.rd-cta-right .rd-icon{ font-size:26px; line-height:1; }
.rd-label{ font-weight:700; color:#0f172a; }
.rd-note{ opacity:.7 }
.rd-social{ margin-top:6px; display:flex; gap:10px }
.rd-social a{
  display:inline-flex; width:36px; height:36px; border-radius:999px; align-items:center; justify-content:center;
  background:#e5e7eb; color:#0f172a; text-decoration:none; font-weight:700;
}
.rd-social a:hover{ background:#d1d5db }

@media (max-width: 980px){
  .rd-foot-cta .rd-container{ grid-template-columns:1fr; }
  .rd-cta-right{ justify-items:stretch }
}

/* ====== KHỐI LINK TỐI ====== */
.rd-foot-links{ background:#0b1220; color:#cbd5e1; padding:28px 0 10px; }
.rd-foot-links a{ color:#cbd5e1; text-decoration:none }
.rd-foot-links a:hover{ color:#fff }
.rd-foot-links h4{ margin:.2em 0 .6em; font-weight:800; color:#fff; }

.rd-grid{
  display:grid; 
  grid-template-columns:repeat(6,1fr);
  gap:28px;
  border-top:1px solid rgba(255,255,255,.12);
  padding-top:20px;
}
.rd-grid .col ul{ list-style:none; margin:0; padding:0 }
.rd-grid .col li{ margin:.38em 0 }
.col--wide{ grid-column:span 2 } /* cột “Thông tin Tác Quyền” rộng 2 */

@media (max-width: 1160px){
  .rd-grid{ grid-template-columns:repeat(3,1fr) }
  .col--wide{ grid-column:span 3 }
}
@media (max-width: 640px){
  .rd-grid{ grid-template-columns:1fr }
  .col--wide{ grid-column:span 1 }
}

/* Dòng bản quyền & badge */
.rd-bottom{
  display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center;
  margin-top:18px; padding-top:14px; border-top:1px solid rgba(255,255,255,.12); 
  font-size:14px; opacity:.92;
}
.rd-badges{ display:flex; gap:8px; align-items:center }
.rd-badges img{ height:34px; width:auto; display:block; border-radius:4px; background:#fff; padding:2px }

/* ====== ẨN HOÀN TOÀN FOOTER MẶC ĐỊNH CỦA FLATSOME (nếu vẫn còn) ====== */
.footer-secondary, .absolute-footer{ display:none !important; }
/* Ẩn header Flatsome ở Trang chủ */
body.home .header-top, 
body.home .header-bottom, 
body.home .header-main { display:none !important; }
body.home .rd-hero { margin-top:0 !important; }

/* ===================== */
/*  EasyInvoice look     */
/* ===================== */
:root{
  --ei-navy: #0f172a;        /* tiêu đề */
  --ei-text: #334155;        /* chữ mô tả */
  --ei-primary: #f36a21;     /* cam EasyInvoice */
  --ei-accent: #2563eb;      /* xanh nút CTA */
  --ei-bg1: #f3f6ff;         /* nền rất nhạt */
  --ei-bg2: #eef3ff;
}

/* NỀN CTA: xanh rất nhạt + wave pattern */
.rd-foot-cta{
  /* lớp nền nhạt */
  background:
    linear-gradient(180deg, var(--ei-bg1) 0%, var(--ei-bg2) 100%);
  padding: 32px 0 26px;
  position: relative;
  overflow: hidden;
  border: 0;
  border-top: 1px solid rgba(2,6,23,.06);
}
/* lớp wave mảnh như easyinvoice */
.rd-foot-cta::before{
  content:"";
  position:absolute; inset:-20% -10% auto -10%; height:220%;
  background-image:
    url("data:image/svg+xml;utf8,\
      <svg xmlns='http://www.w3.org/2000/svg' width='1200' height='600' viewBox='0 0 1200 600'>\
        <defs><linearGradient id='g' x1='0' x2='1' y1='0' y2='0'>\
          <stop offset='0%' stop-color='%23ffffff' stop-opacity='0'/>\
          <stop offset='100%' stop-color='%23c7d2fe' stop-opacity='0.45'/>\
        </linearGradient></defs>\
        <path d='M0 120 Q300 60 600 120 T1200 120 L1200 0 0 0Z' fill='url(%23g)'/>\
        <path d='M0 240 Q300 180 600 240 T1200 240 L1200 0 0 0Z' fill='url(%23g)'/>\
        <path d='M0 360 Q300 300 600 360 T1200 360 L1200 0 0 0Z' fill='url(%23g)'/>\
      </svg>");
  background-repeat:no-repeat;
  background-size:cover;
  opacity:.55;
  pointer-events:none;
}

/* Lưới trái/phải */
.rd-foot-cta .rd-container{
  display:grid; grid-template-columns:1.7fr 1.3fr; gap:40px; align-items:center;
}
.rd-cta-left h3{ margin:0 0 6px; font-weight:800; font-size:32px; color:var(--ei-navy); }
.rd-cta-left p{ margin:0 0 16px; color:var(--ei-text); opacity:.95; }

/* Nút giống vibe EasyInvoice */
.rd-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 18px; border-radius:16px; font-weight:700; text-decoration:none;
  background:var(--ei-accent); color:#fff;
  box-shadow:0 12px 24px rgba(37,99,235,.18);
}
.rd-btn:hover{ filter:brightness(1.05) }

/* Khối hotline/email ở cột phải */
.rd-cta-right{ display:grid; gap:14px; }
.rd-cta-right .rd-contact{ display:flex; gap:12px; align-items:flex-start; }
.rd-cta-right .rd-icon{
  width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background: #fff; box-shadow:0 6px 16px rgba(15,23,42,.08);
  font-size:18px;
}
.rd-label{ font-weight:800; color:var(--ei-navy); }
.rd-cta-right a{ color:#0f3db5; text-decoration:none; font-weight:700; }
.rd-cta-right a:hover{ text-decoration:underline; }
.rd-note{ opacity:.7 }

/* Social tròn có đổ bóng mềm */
.rd-social{ display:flex; gap:12px; margin-top:6px }
.rd-social a{
  display:inline-flex; width:42px; height:42px; border-radius:999px;
  align-items:center; justify-content:center; font-weight:700; text-decoration:none;
  background:#fff; color:#111827;
  box-shadow:0 8px 18px rgba(15,23,42,.10), inset 0 0 0 1px rgba(2,6,23,.06);
}
.rd-social a:hover{ transform:translateY(-1px); }

/* Responsive */
@media (max-width: 980px){
  .rd-foot-cta .rd-container{ grid-template-columns:1fr; gap:20px }
  .rd-cta-left h3{ font-size:28px }
}

/* Khối link tối giữ như trước, chỉ nhấn màu tiêu đề & link hover */
.rd-foot-links{ background:#0b1220; color:#cbd5e1; padding:30px 0 12px }
.rd-foot-links h4{ color:#fff; font-weight:800 }
.rd-foot-links a{ color:#cbd5e1 }
.rd-foot-links a:hover{ color:#fff }

/* Single Post, Page, CPT, Archive/Category/Tag */
body.single .header-top, body.single .header-bottom, body.single .header-main,
body.page .header-top,   body.page .header-bottom,   body.page .header-main,
body.archive .header-top,body.archive .header-bottom,body.archive .header-main,
body.blog .header-top,   body.blog .header-bottom,   body.blog .header-main { 
  display:none !important; 
}

/* Tránh text Site Title to đè nếu header có text logo fallback */
.header-main .logo a, .header-top .logo a { font-size:0 !important; }
.header-top, .header-bottom, .header-main { display:none !important; }
.header-wrapper { display:none !important; }  /* tắt hẳn khung header */
#rd-leftnav .rd-leftnav__logo{ line-height:0 }
#rd-leftnav .rd-logo-link{ display:inline-flex; align-items:center; text-decoration:none }
#rd-leftnav .rd-logo-img{ max-height:40px; height:auto; width:auto; display:block }
#rd-leftnav .rd-logo-text{ font-size:18px; font-weight:800; color:#111827; text-decoration:none }
/* ==== FIX: Logo và khoảng cách trên sidebar trái ==== */
/* Dùng biến để dễ chỉnh cao-thấp toàn bộ khối */
:root{ --rd-leftnav-top: 196px; }              /* chiều cao phần trống phía trên */
body.admin-bar{ --rd-leftnav-top: 128px; }    /* khi đang đăng nhập có admin bar */

/* Đẩy toàn bộ nội dung sidebar xuống đúng khoảng */
#rd-leftnav{
  top: 0;                                    /* bám theo mép trên viewport */
  padding-top: var(--rd-leftnav-top) !important;
}

/* Khu vực logo: thêm nền/viền + khoảng đệm đẹp mắt */
#rd-leftnav .rd-leftnav__logo{
  padding: 8px 6px 14px;
  margin: 0 0 8px;
  border-bottom: 1px solid #eceef3;
  line-height: 0;
}
#rd-leftnav .rd-logo-img{ max-height: 42px; height:auto; width:auto; display:block; }
#rd-leftnav .rd-logo-text{ font-size: 18px; font-weight: 800; }

/* Menu: giãn đều, chữ không bị tràn */
.rd-leftnav__menu > li{ margin: 6px 0; }
.rd-leftnav__menu a{
  padding: 10px 12px;
  border-radius: 10px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}/* ĐẨY SIDEBAR XUỐNG THẤP HƠN (canh top) */
/* chỉnh số px tại đây */
:root{
  --rd-leftnav-top: 130px;      /* khoảng trống trên khi KHÔNG đăng nhập */
}
body.admin-bar{
  --rd-leftnav-top: 162px;      /* khi ĐANG đăng nhập (có admin bar) */
}

/* áp khoảng trống cho toàn bộ sidebar */
#rd-leftnav{
  padding-top: var(--rd-leftnav-top) !important;
}

/* nếu muốn chỉ đẩy logo xuống thêm 1 chút (không bắt buộc) */
#rd-leftnav .rd-leftnav__logo{ margin-top: 6px; }
/* ==== CANH TOP + NHỊP DỌC ĐỀU CHO SIDEBAR ==== */

/* 1) Khoảng trống phía trên toàn sidebar (tùy chỉnh ở đây) */
:root{ --rd-leftnav-top: 110px; }                 /* khi KHÔNG đăng nhập */
@media (min-width:783px){ body.admin-bar{ --rd-leftnav-top: 142px; } } /* admin bar desktop ≈32px */
@media (max-width:782px){ body.admin-bar{ --rd-leftnav-top: 156px; } } /* admin bar mobile ≈46px */

/* Áp khoảng trống trên cho sidebar */
#rd-leftnav{ padding-top: var(--rd-leftnav-top) !important; }

/* 2) Logo block có nhịp dọc = menu item (12px trên + 12px dưới) */
#rd-leftnav .rd-leftnav__logo{
  padding: 12px 12px;                /* 12px top + 12px bottom  → cân với menu */
  margin: 0 0 8px;                   /* khe nhỏ trước khi vào menu */
  border-bottom: 1px solid #eceff4;  /* đường phân tách nhẹ */
  line-height: 0;
}

/* 3) Kích thước logo và chữ dự phòng */
#rd-leftnav .rd-logo-img{ max-height: 42px; height:auto; width:auto; display:block; }
#rd-leftnav .rd-logo-text{ font-size:18px; font-weight:800; }

/* 4) Nhịp của từng mục menu (khớp với logo ở trên) */
.rd-leftnav__menu > li{ margin: 6px 0; }
.rd-leftnav__menu a{
  padding: 12px;                      /* 12px giống logo block */
  border-radius: 10px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* ========= RealDev Footer (tone giống easyinvoice) ========= */
:root{
  --rd-primary: #2D6CDF;          /* xanh chủ đạo */
  --rd-primary-600:#275cc0;
  --rd-text: #0f2a45;             /* chữ đậm */
  --rd-muted:#6b7a90;
  --rd-bg:#F4F7FF;                /* nền nhạt kiểu easyinvoice */
  --rd-border:#E6ECF7;
  --rd-radius:14px;
}

.rd-footer{position:relative; color:var(--rd-text); background: linear-gradient(180deg,var(--rd-bg) 0%,#fff 68%);}

/* “wave” nhẹ trên nền */
.rd-footer::before{
  content:""; position:absolute; inset:0 0 auto 0; height:220px; opacity:.35; pointer-events:none;
  background:
    radial-gradient(1200px 160px at 80% -20%, rgba(45,108,223,.18), rgba(45,108,223,0) 60%),
    radial-gradient(900px 120px at 20% -40%, rgba(45,108,223,.14), rgba(45,108,223,0) 60%);
}

/* container chung */
.rd-container{max-width:1200px; margin:auto; padding:28px 18px;}
@media (min-width:1280px){ .rd-container{padding:36px 0;} }

/* CTA zone */
.rd-cta{display:grid; gap:28px; align-items:center; grid-template-columns: 1.1fr 1fr; border-bottom:1px solid var(--rd-border);}
@media (max-width: 980px){ .rd-cta{grid-template-columns:1fr;} }

.rd-cta__left h3{font-size:28px; margin:0 0 8px; font-weight:800}
.rd-cta__left p{margin:0 0 16px; color:var(--rd-muted); font-size:15px; line-height:1.6}
.rd-btn{display:inline-block; padding:10px 18px; border-radius:12px; font-weight:700; text-decoration:none}
.rd-btn--primary{background:var(--rd-primary); color:#fff;}
.rd-btn--primary:hover{background:var(--rd-primary-600);}

.rd-cta__right{display:flex; flex-direction:column; gap:16px; align-items:flex-start}
.rd-contact{display:flex; flex-direction:column; gap:14px}
.rd-contact__item{display:flex; gap:12px; align-items:center}
.rd-contact__label{font-size:12px; color:var(--rd-muted); margin-bottom:2px}
.rd-contact__value{font-weight:800; color:var(--rd-primary); text-decoration:none}
.rd-contact__value:hover{color:var(--rd-primary-600)}
.rd-contact__note{margin-left:6px; color:var(--rd-muted); font-size:12px}

/* icons (phone/mail) dùng mask SVG để sạch HTML) */
.rd-icon{width:28px; height:28px; border-radius:10px; background:var(--rd-primary); -webkit-mask-size:18px; -webkit-mask-repeat:no-repeat; -webkit-mask-position:center; mask-size:18px; mask-repeat:no-repeat; mask-position:center;}
.rd-icon--phone{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6.6 10.8c1.7 3.2 3.4 5 6.6 6.6l2.2-2.2c.3-.3.7-.4 1.1-.2c1.2.5 2.5.7 3.8.7c.6 0 1 .4 1 .9V21c0 .6-.4 1-1 1C10.4 22 2 13.6 2 3c0-.6.4-1 1-1h4.3c.5 0 .9.4.9 1c0 1.3.2 2.6.7 3.8c.2.4.1.8-.2 1.1z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6.6 10.8c1.7 3.2 3.4 5 6.6 6.6l2.2-2.2c.3-.3.7-.4 1.1-.2c1.2.5 2.5.7 3.8.7c.6 0 1 .4 1 .9V21c0 .6-.4 1-1 1C10.4 22 2 13.6 2 3c0-.6.4-1 1-1h4.3c.5 0 .9.4.9 1c0 1.3.2 2.6.7 3.8c.2.4.1.8-.2 1.1z'/%3E%3C/svg%3E");}
.rd-icon--mail{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2m0 4l-8 5l-8-5V6l8 5l8-5z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2m0 4l-8 5l-8-5V6l8 5l8-5z'/%3E%3C/svg%3E");}

/* social */
.rd-social{display:flex; gap:12px; margin-top:8px}
.rd-s{width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:50%; border:1px solid var(--rd-border); text-decoration:none; font-weight:800; color:var(--rd-text); background:#fff}
.rd-s:hover{border-color:var(--rd-primary); color:var(--rd-primary)}
.rd-s--fb{letter-spacing:.5px}
.rd-s--yt{font-size:16px}

/* links grid */
.rd-links{display:grid; gap:32px 28px; padding-top:28px; padding-bottom:16px; grid-template-columns: repeat(5, minmax(0,1fr)); border-bottom:1px solid var(--rd-border);}
@media (max-width:1180px){ .rd-links{grid-template-columns: repeat(3,minmax(0,1fr));} }
@media (max-width:720px){ .rd-links{grid-template-columns: repeat(2,minmax(0,1fr));} }

.rd-col h4{font-size:16px; margin:0 0 10px; font-weight:800}
.rd-col ul{list-style:none; padding:0; margin:0}
.rd-col li{margin:8px 0}
.rd-col a{color:var(--rd-text); text-decoration:none}
.rd-col a:hover{color:var(--rd-primary)}
.rd-col--wide{grid-column: span 1;}
@media (min-width:1181px){ .rd-col--wide{grid-column: span 1;} }
@media (max-width:720px){ .rd-col--wide{grid-column: span 2;} }

.rd-col p{color:var(--rd-muted); line-height:1.7; margin:0}

/* bottom */
.rd-bottom{display:flex; gap:28px; justify-content:space-between; align-items:flex-start; padding-top:18px; padding-bottom:26px}
@media (max-width:980px){ .rd-bottom{flex-direction:column; gap:18px;} }

.rd-company strong{display:block; margin-bottom:6px}
.rd-company ul{margin:0 0 8px; padding-left:18px; color:var(--rd-muted)}
.rd-copy{color:var(--rd-muted); font-size:13px}

.rd-badges{display:flex; gap:12px; align-items:center}
.rd-store-badge{display:inline-flex; align-items:center; justify-content:center; min-width:140px; height:40px; padding:0 14px; font-weight:700; border:1px solid var(--rd-border); border-radius:11px; text-decoration:none; color:var(--rd-text); background:#fff}
.rd-store-badge:hover{border-color:var(--rd-primary); color:var(--rd-primary)}
/* ===== RealDev Footer – Page block (namespaced .rd-*) ===== */
:root{
  --rd-primary:#1e6bd6;
  --rd-primary-700:#1757ae;
  --rd-bg:#eef5ff;
  --rd-bg-strong:#e8f0ff;
  --rd-dark:#1f2f48;
  --rd-muted:#6f7b8d;
  --rd-radius:16px;
  --rd-gap:28px;
}
.rd-footer *{box-sizing:border-box}
.rd-container{max-width:1200px;margin:0 auto;padding:0 20px}

/* CTA layer (tầng trên) */
.rd-footer-cta{
  background:linear-gradient(180deg,#fff, var(--rd-bg));
  border-radius:var(--rd-radius);
  box-shadow:0 6px 20px rgba(31,47,72,.06);
  padding:36px 0;
  margin:10px auto 28px; /* tạo khoảng cách rõ với tầng dưới */
}
.rd-cta{display:grid;grid-template-columns:1.3fr 1fr;gap:var(--rd-gap);align-items:center}
.rd-cta__left h3{margin:.2rem 0 10px;font-size:28px;color:var(--rd-dark)}
.rd-cta__left p{margin:0 0 14px;color:var(--rd-muted);line-height:1.6}
.rd-btn{display:inline-block;padding:10px 20px;border-radius:10px;font-weight:600;text-decoration:none}
.rd-btn--primary{background:var(--rd-primary);color:#fff}
.rd-btn--primary:hover{background:var(--rd-primary-700);}

/* Quick contact + social */
.rd-contact{display:grid;gap:10px}
.rd-contact__item{font-weight:600;color:var(--rd-dark)}
.rd-contact__item a{color:var(--rd-primary);text-decoration:none}
.rd-contact__item small{font-weight:400;color:var(--rd-muted);margin-left:6px}
.rd-ico{display:inline-block;width:22px;text-align:center;margin-right:8px}

.rd-social{display:flex;gap:10px;margin:14px 0 0;padding:0;list-style:none}
.rd-social a{
  display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:#fff;box-shadow:0 2px 8px rgba(31,47,72,.08);text-decoration:none;
  color:var(--rd-dark);font-weight:700;
}
.rd-social a:hover{transform:translateY(-1px);}

/* Main layer (tầng dưới) */
.rd-footer-main{
  background:#fff;border-radius:var(--rd-radius);
  padding:26px 0 36px;border:1px solid rgba(31,47,72,.06)
}
.rd-links{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px 32px;margin-bottom:18px}
.rd-links__col h4{margin:0 0 10px;font-size:16px;color:var(--rd-dark)}
.rd-links__col ul{margin:0;padding:0;list-style:none}
.rd-links__col li{margin:7px 0}
.rd-links__col a{color:var(--rd-dark);text-decoration:none}
.rd-links__col a:hover{color:var(--rd-primary)}

.rd-copy{display:grid;grid-template-columns:1.3fr auto;gap:var(--rd-gap);align-items:center}
.rd-copy__left h5{margin:0 0 8px;color:var(--rd-dark)}
.rd-copy__left p{margin:0 0 10px;color:var(--rd-muted);line-height:1.7}
.rd-badge{
  display:inline-block;border:1px solid rgba(31,47,72,.15);
  padding:8px 14px;border-radius:10px;text-decoration:none;color:var(--rd-dark);
  margin-left:8px
}
.rd-badge:first-child{margin-left:0}
.rd-badge:hover{border-color:var(--rd-primary);color:var(--rd-primary)}

/* Responsive */
@media (max-width:1024px){
  .rd-cta{grid-template-columns:1fr}
  .rd-copy{grid-template-columns:1fr}
}
@media (max-width:820px){
  .rd-links{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:560px){
  .rd-links{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rd-footer-cta{padding:28px 0}
  .rd-cta__left h3{font-size:22px}
}
/* Social (vòng tròn, bóng nhẹ – giống demo trước) */
.rd-social{display:flex;gap:12px;margin:14px 0 6px}
.rd-social__btn{
  width:42px;height:42px;border-radius:999px;background:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 22px rgba(20,33,61,.08);
  transition:transform .15s ease, box-shadow .15s ease;
}
.rd-social__btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(20,33,61,.12)}
.rd-social__btn svg{width:20px;height:20px;display:block}

/* Brand colors */
.rd-social--fb svg path{fill:#1877F2}
.rd-social--zalo svg path{fill:#0068FF}
.rd-social--tele svg path{fill:#27A6E5}
.rd-social--yt svg path{fill:#FF0033}
.rd-social--ig svg path{fill:#E4405F}
/* Ẩn nút 'Xem tất cả hướng dẫn' trong footer */
.footer-wrapper a[href*="huong-dan"],
.footer-wrapper .view-all-guides,
.footer-wrapper .docs-button,
.footer-wrapper .betterdocs-cta,
.footer-wrapper .betterdocs-read-more { display:none !important; }
/* === RD Footer: ép dãy icon social nằm ngang === */
#rd-footer .rd-social,
#rd-footer .rd-contact .rd-social,
#rd-footer .rd-contact ul.rd-social,
#rd-footer .rd-social.nav-vertical {            /* nếu Flatsome chèn nav-vertical */
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  list-style: none !important;
  margin: 10px 0 0 !important;
  padding: 0 !important;
}

/* mỗi item & link */
#rd-footer .rd-social > li,
#rd-footer .rd-contact .rd-social > li {
  display: inline-flex !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;                      /* chống layout cột dọc */
}

/* tắt mọi bullet/pseudo của theme */
#rd-footer .rd-social > li::marker,
#rd-footer .rd-social > li::before,
#rd-footer .rd-social > li > a::before {
  content: none !important;
  display: none !important;
}

/* nút tròn giữ nguyên nếu bạn đã có .rd-social__btn */
#rd-footer .rd-social__btn {
  display: inline-flex;
  width: 44px; height: 44px;
  border-radius: 999px;
  justify-content: center; align-items: center;
}
/* RD – Knowledge */
.rd-knowledge{--rd-gap:24px;max-width:1200px;margin:0 auto;padding:10px 0 30px;}
.rd-knowledge__head h2{font-size:28px;line-height:1.25;margin:0 0 18px;font-weight:800;}

/* ép grid ngang, equal-height */
.rd-knowledge .row{display:flex!important;flex-wrap:wrap;gap:var(--rd-gap);margin:0!important;}
.rd-knowledge .row .col{padding:0!important;margin:0!important;flex:0 0 calc(33.333% - 0px)!important;max-width:calc(33.333% - 0px)!important;}
@media (max-width:1024px){.rd-knowledge .row .col{flex:0 0 48%!important;max-width:48%!important}}
@media (max-width:640px){.rd-knowledge .row .col{flex:0 0 100%!important;max-width:100%!important}}

/* card */
.rd-knowledge .post-item{height:100%;background:#fff;border:1px solid #e9eef5;border-radius:14px;overflow:hidden;box-shadow:0 2px 10px rgba(18,28,45,.05);transition:transform .2s ease,box-shadow .2s ease;}
.rd-knowledge .post-item:hover{transform:translateY(-4px);box-shadow:0 10px 26px rgba(18,28,45,.12);}
.rd-knowledge .box-image{aspect-ratio:16/9;background:#f5f7fb;overflow:hidden;}
.rd-knowledge .box-image img{width:100%;height:100%;object-fit:cover;transform:scale(1.01);transition:transform .3s ease;}
.rd-knowledge .post-item:hover .box-image img{transform:scale(1.06);}
.rd-knowledge .box-text{padding:14px 16px 18px;}
.rd-knowledge .post-title{font-size:16px;line-height:1.35;font-weight:700;margin:0 0 6px;}
.rd-knowledge .from_the_blog_excerpt{display:none;}
.rd-knowledge .posted-on,.rd-knowledge .cat-label,.rd-knowledge .post-meta{font-size:12px;color:#76829a;}
.rd-knowledge__cta{text-align:center;margin-top:10px;}

/* Minor utilities */
.rd-pill{border-radius:999px}
.rd-badge{display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; font-size:12px; font-weight:700}
.rd-badge.yellow{background:#fef3c7; color:#92400e}

/* =============================
   SINGLE POST – Hero & Body cleanup (Flatsome)
   ============================= */

/* 0) Làm hero sáng lên, bỏ overlay tối */
.single-post .featured-title,
.single-post .page-title {
  background: linear-gradient(180deg,#f8fbff 0,#eef6ff 100%) !important;
  color:#0f172a;
}
.single-post .featured-title .overlay,
.single-post .page-title .overlay,
.single-post .featured-title .title-bg:before,
.single-post .page-title .title-bg:before { display:none !important; }

/* 1) Ẩn "POSTED ON" + "BY (tác giả)" ở hero */
.single-post .featured-title .entry-meta,
.single-post .page-title .entry-meta { display:none !important; }

/* 2) H1 trong hero – to, đậm, đổ bóng + có vạch nhấn */
.single-post .featured-title .page-title-inner,
.single-post .page-title .page-title-inner {
  padding-top: 54px; padding-bottom: 30px;
}

.single-post .featured-title .page-title-inner h1,
.single-post .page-title .page-title-inner h1{
  position: relative;
  margin: 0;
  color:#0f172a !important;
  font-weight: 900;
  letter-spacing:-.01em;
  line-height:1.22;
  font-size: clamp(30px, 2.2vw + 20px, 42px);
  /* bóng sáng + bóng xa để nổi */
  text-shadow: 0 1px 0 rgba(255,255,255,.85),
               0 10px 24px rgba(30,58,138,.18);
}
/* vạch nhấn dưới tiêu đề */
.single-post .page-title h1::after{
  content:"";
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:-12px; width:110px; height:6px;
  background: linear-gradient(90deg,#2ea3ff,#1a63ff);
  border-radius:999px;
  box-shadow:0 6px 14px rgba(26,99,255,.28);
}

/* 3) Nội dung bài – thoáng, dễ đọc */
.single-post #content .entry-content{
  max-width: 780px;
  margin: 28px auto 70px;
  padding: 0 16px;
  font-size: 18px;
  line-height: 1.85;
  color:#0f172a;
}

/* Đoạn mở đầu (lead) – nổi bật nhẹ như page chuyên nghiệp */
.single-post .entry-content > p:first-of-type{
  background:#fffbd1;
  border-left:4px solid #ffd84a;
  padding:12px 14px;
  border-radius:10px;
  margin: 18px 0 20px;
}

/* Heading trong nội dung – đổ bóng, nổi rõ */
.single-post .entry-content h2,
.single-post .entry-content h3,
.single-post .entry-content h4{
  color:#0f172a; font-weight: 800; letter-spacing:-.01em;
  margin: 1.6em 0 .6em;
  text-shadow: 0 1px 0 rgba(255,255,255,.7),
               0 10px 18px rgba(30,58,138,.10);
  scroll-margin-top: 96px;
}
.single-post .entry-content h2{font-size: clamp(22px, 1.1vw + 18px, 28px)}
.single-post .entry-content h3{font-size: clamp(19px, 1vw + 16px, 24px)}
.single-post .entry-content h4{font-size: clamp(17px, .8vw + 14px, 20px)}

/* Ảnh/figure – bo góc + bóng nhẹ */
.single-post .entry-content img{
  width:100% !important; height:auto !important;
  display:block; border-radius:14px;
}
.single-post .entry-content figure,
.single-post .entry-content .wp-block-image{ margin:18px 0 22px; }
.single-post .entry-content figure img{
  box-shadow:0 10px 26px rgba(24,39,75,.06), 0 2px 6px rgba(24,39,75,.05);
}
.single-post .wp-caption-text,
.single-post .entry-content figcaption{
  text-align:center; font-size:13.5px; color:#6b7280; margin-top:8px;
}

/* Danh sách, quote, bảng… gọn gàng */
.single-post .entry-content ul,
.single-post .entry-content ol{ margin: 0 0 1.05em 1.15em; }
.single-post .entry-content li + li{ margin-top:.25em; }

.single-post blockquote{
  margin:18px 0; padding:14px 18px;
  border-left:4px solid #2563eb;
  background:#f5faff; color:#0f172a; border-radius:10px;
}

.single-post .entry-content table{ width:100%; border-collapse:collapse; font-size:16px; }
.single-post .entry-content th,
.single-post .entry-content td{ border:1px solid #e7eef5; padding:10px 12px }
.single-post .entry-content thead th{ background:#f6f9ff; font-weight:700 }

/* Link tinh tế – không bị “thô” */
.single-post .entry-content a{
  color:#1a63ff; text-decoration:none;
  border-bottom:2px solid rgba(26,99,255,.18);
}
.single-post .entry-content a:hover{ border-color:#1a63ff }
/* =========================
   BOOST SECTION HEADINGS
   ========================= */

/* H2: block heading dạng section – nổi bật, có nền + viền + bóng */
.single-post .entry-content h2{
  position: relative;
  margin: 32px 0 16px;
  padding: 14px 16px 14px 20px;
  color:#0f172a !important;
  background: linear-gradient(180deg,#f8fbff 0,#eef6ff 100%);
  border:1px solid #e6eef9;
  border-radius:14px;
  box-shadow:0 10px 22px rgba(24,39,75,.08);
  font-weight:900 !important;
  font-size: clamp(22px, 1.1vw + 20px, 30px) !important;
  line-height:1.28;
  letter-spacing:-.01em;
  text-shadow: 0 1px 0 rgba(255,255,255,.9),
               0 10px 18px rgba(30,58,138,.10);
}

/* Thanh nhấn bên trái */
.single-post .entry-content h2::before{
  content:"";
  position:absolute; left:10px; top:50%;
  transform:translateY(-50%);
  width:6px; height:70%;
  border-radius:6px;
  background:#1a63ff;
  box-shadow:0 0 0 3px rgba(26,99,255,.12);
}

/* Vạch mảnh dưới tiêu đề h2 (tùy chọn – cho cảm giác “neo” nội dung) */
.single-post .entry-content h2::after{
  content:"";
  display:block; margin-top:10px;
  width:120px; height:4px; border-radius:99px;
  background:linear-gradient(90deg,#2ea3ff,#1a63ff);
  box-shadow:0 6px 14px rgba(26,99,255,.18);
}

/* H3 cũng nhấn mạnh nhưng nhẹ hơn H2 */
.single-post .entry-content h3{
  position:relative;
  margin:26px 0 12px;
  padding:8px 10px 8px 16px;
  font-weight:800 !important;
  font-size: clamp(19px, 1vw + 16px, 24px) !important;
  line-height:1.32;
  color:#0f172a;
  background:#f7fbff;
  border:1px solid #eaf2fe;
  border-left:5px solid #3aa0ff;
  border-radius:12px;
  text-shadow:0 1px 0 rgba(255,255,255,.8);
}

/* Bài một số editor chèn strong vào H2 – ép thống nhất */
.single-post .entry-content h2 strong,
.single-post .entry-content h3 strong{
  font-weight: inherit !important;
}

/* Nếu đoạn mở đầu/khối cap có inline style justify từ editor – bỏ cho thoáng */
.single-post .entry-content .has-drop-cap,
.single-post .entry-content .has-drop-cap.has-background{
  text-align: inherit !important;
}

/* Khoảng cách giữa các block cho thoáng */
.single-post .entry-content > * + *{ margin-top: 14px; }
.single-post .entry-content p{ margin: 0 0 1.1em; }

/* List gọn */
.single-post .entry-content ul,
.single-post .entry-content ol{ margin: .2em 0 1.1em 1.25em; }
.single-post .entry-content li + li{ margin-top:.25em; }
/* ============ AUTHOR BOX – Clean-Lite ============ */
.single-post .author-box,
.single-post .entry-author,
.single-post [class*="author"] .box,
.single-post [class*="author"] .author-bio{
  position:relative;
  display:grid;
  grid-template-columns: 80px 1fr;
  gap:16px;
  align-items:center;
  margin:28px 0 12px;
  padding:16px 18px;
  background:#fff;
  border:1px solid #e9edf4;
  border-radius:14px;
  box-shadow:none !important;   /* ghi đè thiết kế cũ */
}

/* Label nhỏ “Tác giả” */
.single-post .author-box::before,
.single-post .entry-author::before{
  content:"Tác giả";
  position:absolute; top:-10px; left:16px;
  padding:2px 8px; font-size:11px; letter-spacing:.06em;
  color:#0f3f67; background:#f3f7ff; border:1px solid #e3ecfb;
  border-radius:999px;
}

/* Avatar tròn nhẹ */
.single-post .author-box img.avatar,
.single-post .entry-author img.avatar{
  width:80px;height:80px;object-fit:cover;border-radius:50%;
  border:1px solid #e9edf4; box-shadow:none !important;
}

/* Tên + mô tả */
.single-post .author-box h4,
.single-post .entry-author h4{
  margin:0 0 4px; font-weight:700; font-size:18px; line-height:1.25; color:#0f172a;
}
.single-post .author-box p,
.single-post .entry-author p{
  margin:0; font-size:16px; line-height:1.8; color:#475569;
}
.single-post .author-box a,
.single-post .entry-author a{
  color:#1666ff; text-decoration:none; border-bottom:1px dotted rgba(22,102,255,.35);
}
.single-post .author-box a:hover{ border-bottom-color:transparent; }

/* ============ POST NAV – Clean-Lite ============ */
.single-post .nav-links{
  display:flex; gap:10px; align-items:stretch;
  margin:18px 0 12px;
}
.single-post .nav-previous, .single-post .nav-next{ flex:1; }

.single-post .nav-links a{
  display:flex; align-items:center; justify-content:space-between;
  gap:8px;
  padding:12px 14px;
  background:#fff; color:#0f172a; text-decoration:none;
  border:1px solid #e9edf4; border-radius:12px;
  font-weight:600; font-size:16.5px; line-height:1.35;
  box-shadow:none !important; transition:background .15s,border-color .15s;
}
.single-post .nav-previous a{ justify-content:flex-start; }
.single-post .nav-next a{ justify-content:flex-end;  }

.single-post .nav-previous a::before{ content:"←"; color:#3b82f6; }
.single-post .nav-next a::after   { content:"→"; color:#3b82f6; }
.single-post .nav-links a:hover{ background:#f9fbff; border-color:#d7e7ff; }

/* Ẩn caption phụ nếu theme sinh ra */
.single-post .nav-previous .meta-nav,
.single-post .nav-next .meta-nav{ display:none !important; }

/* Mobile: xếp dọc */
@media (max-width:720px){
  .single-post .nav-links{ flex-direction:column; }
}
/* ============ CATEGORY STRIP (nếu có) ============ */
.single-post .post-cat-bar,
.single-post .entry-category,
.single-post .post-terms{
  display:flex; justify-content:center; margin:6px 0 0;
}
.single-post .post-cat-bar a,
.single-post .entry-category a,
.single-post .post-terms a{
  display:inline-flex; padding:6px 10px; border-radius:999px;
  background:#f6faff; border:1px solid #e7effe; color:#1f4cc9;
  font-weight:600; text-decoration:none;
}
/* ============ CONTENT TYPO – nhẹ, thoáng ============ */
.single-post .entry-content p{ font-size:17px; line-height:1.9; color:#334155; }
.single-post .entry-content li{ line-height:1.85; color:#334155; }