:root{--white:#fff;--orange:#F15808;--orange-dark:#c94500;--text:#7A7A7A;--title:#a84e1a;--dark:#1a1a1a;--dark2:#222;--bg:#f8f6f4;--bg2:#fdf9f6;--border:#e8ddd5}
body{color:var(--text);background:var(--white);font-size:16px;line-height:1.7}
/* ── STICKY ── */
  .sticky-cta{position:fixed;bottom:100px;right:28px;z-index:99;background:var(--orange);color:#fff;padding:13px 22px;font-family:'Barlow Condensed',sans-serif;font-size:14px;font-weight:700;letter-spacing:.5px;display:flex;align-items:center;gap:9px;box-shadow:0 6px 24px rgba(241,88,8,.4);transition:transform .2s}
.dot{width:8px;height:8px;background:#afffaf;border-radius:50%;animation:pulse 1.5s infinite}
  .sticky-cta:hover{color: #ffffff !important;      /* Ép màu chữ phải là trắng khi hover */
    background: #d44a07 !important; /* Màu cam đậm hơn một chút khi hover */
    text-decoration: none !important;
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(241, 88, 8, 0.6);}
body.page-id-23 .sticky-cta {
	display: none
}
h1,h2,h3,h4{color:var(--title);font-weight:700;line-height:1.2}
a {text-decoration:none}
.container {max-width:1160px;margin:0 auto;padding:0 40px}
.site-content{user-select:none; margin-top: 50px}
@media (min-width: 1024px){
	.site-content{margin-top: 100px;}
}
.btn-primary{background:var(--orange);color:#fff !important;padding:15px 34px;font-weight:700;font-size:15px;border:none;cursor:pointer;letter-spacing:.5px;display:inline-block;transition:background .2s,transform .15s; text-decoration: none !important}
  .btn-primary:hover{background:var(--orange-dark);transform:translateY(-1px)}
  .btn-outline{background:transparent;color:#fff;padding:14px 30px;font-weight:600;font-size:15px;border:1.5px solid rgba(255,255,255,.35);cursor:pointer;display:inline-block;transition:all .2s;text-decoration: none !important}
  .btn-outline:hover{border-color:var(--orange);color:var(--orange)}
.ast-site-identity .site-title a, 
.ast-site-identity .site-title {font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:700;color:var(--title);display:block;line-height:1.1}
.site-header, 
.ast-primary-header-bar {
    border-bottom: 2px solid #e8ddd5;
    box-shadow: 0 2px 12px rgba(241, 88, 8, 0.06);
    background-color: #FFFFFF !important;
	padding: 0 20px;
	position: fixed !important;
	display: block;
  width: 100%;
}
.site-header .site-description {
font-size: 11px;
color: var(--text);
letter-spacing: 0.5px;
}
.ast-container {padding-left: 0; padding-right:0 }
/* 1. Đổ bóng và tạo đường viền dưới cho toàn bộ Header */
.site-header, 
.ast-primary-header-bar {
    border-bottom: 2px solid #e8ddd5;
    box-shadow: 0 2px 12px rgba(241, 88, 8, 0.06);
    background-color: #FFFFFF !important;
}
/* 2. Tùy chỉnh Font chữ và màu sắc cho các mục Menu */
.main-header-menu > .menu-item > a {
    color: #1a1a1a !important; /* Màu chữ tối cho menu */
    font-weight: 600 !important;
    font-size: 15px !important;
    font-family: 'Barlow', sans-serif; /* Đảm bảo bạn đã load font Barlow */
    padding: 10px 18px !important;
    position: relative;
    transition: color 0.2s ease-in-out;
}

/* 3. Đổi màu cam khi Hover hoặc Đang ở trang hiện tại (Active) */
.main-header-menu > .menu-item:hover > a,
.main-header-menu > .current-menu-item > a {
    color: #F15808 !important;
}

/* 4. Hiệu ứng thanh gạch chân màu cam trượt ra khi Hover */
.main-header-menu > .menu-item > a::after {
    content: '';
    position: absolute;
    bottom: 5px; /* Điều chỉnh vị trí đường gạch chân */
    left: 18px;
    right: 18px;
    height: 2px;
    background: #F15808;
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.main-header-menu > .menu-item:hover > a::after,
.main-header-menu > .current-menu-item > a::after {
    transform: scaleX(1);
}

/* 5. Tùy chỉnh riêng cho nút CTA "Liên Hệ" (Sử dụng class menu-cta đã thêm ở Bước 1) */
.main-header-menu > .menu-item.menu-cta > a {
    background-color: #F15808 !important;
    color: #FFFFFF !important;
    padding: 12px 24px !important;
    border-radius: 3px; /* Bo góc nhẹ cho nút */
    font-weight: 700 !important;
    margin-left: 10px;
    transition: background-color 0.2s ease-in-out, transform 0.15s;
}

/* Hiệu ứng Hover cho nút Liên hệ */
.main-header-menu > .menu-item.menu-cta:hover > a {
    background-color: #c94500 !important; /* Màu cam đậm hơn khi hover */
    color: #FFFFFF !important;
    transform: translateY(-1px); /* Hiệu ứng nảy nhẹ lên */
}

/* Tắt hiệu ứng gạch chân cho riêng nút Liên hệ */
.main-header-menu > .menu-item.menu-cta > a::after {
    display: none !important;
}

.entry-header {display: none}
.section-label{font-size:12px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--orange);margin-bottom:12px}
.section-title{font-size:40px;color:var(--title);margin-bottom:16px}
  .section-sub{font-size:17px;color:var(--text);max-width:560px;line-height:1.7;margin: 0 auto;}
 
/* ── HERO ── */
#hero{background:var(--dark2);padding:100px 0 90px;position:relative;overflow:hidden}
#hero::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,#1a0a00,#2d1200 50%,#1a1a1a)}
.hero-stripe{position:absolute;top:0;right:0;width:480px;height:100%;background:var(--orange);opacity:.07;clip-path:polygon(30% 0%,100% 0%,100% 100%,0% 100%)}
  .hero-line{position:absolute;top:0;right:200px;width:3px;height:100%;background:var(--orange);opacity:.35}
  .hero-inner{position:relative;z-index:2}
  .hero-tag{display:inline-block;background:rgba(241,88,8,.18);border:1px solid rgba(241,88,8,.38);color:#f9a96a;font-size:12px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;padding:6px 16px;margin-bottom:28px}
  #hero h1{font-size:58px;color:#fff;margin-bottom:20px}
  #hero h1 span{color:var(--orange)}
  #hero p{font-size:18px;color:rgba(255,255,255,.72);max-width:580px;margin-bottom:40px}
  .hero-btns{display:flex;gap:16px;align-items:center}
  .hero-stats{position:relative;z-index:2;display:flex;margin-top:64px;border-top:1px solid rgba(255,255,255,.1);padding-top:40px}
  .stat{flex:1;padding-right:40px;border-right:1px solid rgba(255,255,255,.1);margin-right:40px}
.stat:last-of-type{border-right:none;margin-right:0;padding-right:0}
  .stat strong{display:block;font-family:'Barlow Condensed',sans-serif;font-size:42px;font-weight:700;color:var(--orange);line-height:1}
  .stat span{font-size:13px;color:rgba(255,255,255,.45);margin-top:4px;display:block}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* 2. Áp dụng vào class */
.fade-in {
  opacity: 0; /* Trạng thái ẩn lúc đầu */
  animation: fadeInUp 0.8s ease-out forwards; /* forwards giữ lại trạng thái cuối cùng (opacity 1) */
}
@media (min-width: 1200px) {
    .ast-plain-container.ast-no-sidebar #primary {
        margin-top: 0 !important;
			margin-bottom: 0 !important;
    }
}
/* --- CSS THÊM MỚI CHO BỐ CỤC 2 CỘT --- */

/* Bố cục Flexbox cho màn hình máy tính */
.hero-row {
  display: flex;
  align-items: center; /* Căn giữa chữ và hình theo chiều dọc */
  justify-content: space-between;
  gap: 20px; /* Khoảng cách giữa cột chữ và hình */
  margin-bottom: 40px; /* Khoảng cách với phần .hero-stats bên dưới */
}

/* Chia tỉ lệ 2 cột đều nhau (50-50) */
.hero-content {
  flex: 1;
}

.hero-image {
  flex: 1;
  display: flex;
  justify-content: flex-end; /* Đẩy hình sang sát lề phải */
}

/* Style cho thẻ img để không bị méo và bo góc đẹp mắt */
.hero-image img {
  width: 100%;
  max-width: 600px; /* Giới hạn chiều rộng tối đa của ảnh */
  height: auto;
  border-radius: 0px; /* Bo góc ảnh cho mềm mại (tùy chọn) */
  object-fit: cover;
}

/* --- XỬ LÝ RESPONSIVE CHO MOBILE & TABLET --- */
@media (max-width: 991px) {
  .hero-row {
    flex-direction: column; /* Chuyển thành 1 cột: xếp chồng lên nhau */
    gap: 30px;
  }

  .hero-image {
    width: 100%;
    justify-content: center; /* Đưa ảnh ra giữa trên mobile */
    margin-top: 20px;
  }
}
* ── OVERVIEW ── */
  #overview{background:var(--white);padding:72px 0;border-bottom:1px solid var(--border)}
  .ov-grid{display:grid;grid-template-columns:repeat(3,1fr)}
  .ov-item{padding:36px 40px;border-right:1px solid var(--border)}
  .ov-item:last-of-type{border-right:none}
  .ov-icon{width:52px;height:52px;background:rgba(241,88,8,.08);display:flex;align-items:center;justify-content:center;margin-bottom:20px;font-size:28px}
  .ov-item h3{font-size:22px;color:var(--title);margin-bottom:10px}
/* ── SERVICES PREVIEW ── */
  #services-prev{background:var(--bg2);padding:30px 0}
  .sp-header{justify-content:space-between;margin-bottom:36px;text-align:center}
  .sp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
  .sp-card{background:var(--white);padding:36px 32px;position:relative;overflow:hidden;transition:background .2s}
  .sp-card::before{content:'';position:absolute;top:0;left:0;width:3px;height:0;background:var(--orange);transition:height .3s}
  .sp-card:hover::before{height:100%}
  .sp-card:hover{background:#fff8f5}
  .sp-num{font-family:'Barlow Condensed',sans-serif;font-size:48px;font-weight:700;color:rgba(241,88,8,.1);line-height:1;margin-bottom:14px}
  .sp-card h3{font-size:20px;color:var(--title);margin-bottom:10px}
  .sp-card p{font-size:14px;color:var(--text);line-height:1.75}
  .sp-link{display:inline-block;margin-top:16px;font-size:13px;font-weight:700;color:var(--orange);letter-spacing:.5px; text-decoration: none !important}

/* ── CLIENTS PREVIEW ── */
  #clients-prev{background:var(--white);padding:30px 0}
  .cp-header{text-align:center;margin-bottom:56px}
  .cp-logos{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--border);margin-bottom:56px}
  .cp-logo{border-right:1px solid var(--border);border-bottom:1px solid var(--border);padding:28px 20px;display:flex;align-items:center;justify-content:center}
  .cp-logo:nth-child(4n){border-right:none}
  .logo-box{width:120px;height:48px;background:var(--bg);display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:700;color:var(--title);border:1px solid var(--border)}
  .cp-quote{background:var(--bg2);border-left:3px solid var(--orange);padding:28px 32px;max-width:700px;margin:0 auto;position:relative}
  .cp-quote::before{content:'"';font-family:Georgia,serif;font-size:72px;color:rgba(241,88,8,.1);position:absolute;top:8px;right:20px;line-height:1}
  .cp-quote p{font-size:15px;color:var(--text);font-style:italic;line-height:1.8;margin-bottom:16px}
  .cp-author{display:flex;align-items:center;gap:12px}
.avatar{width:40px;height:40px;background:var(--orange);display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;color:#fff}

/* ── PRODUCTS PREVIEW ── */
  #products-prev{background:var(--bg2);padding:30px 0}
  .pp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:48px}
  .pp-card{background:var(--white);border:1px solid var(--border);transition:all .2s}
  .pp-card:hover{border-color:var(--orange);transform:translateY(-2px);box-shadow:0 4px 20px rgba(241,88,8,.1)}
  .pp-img{height:140px;background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:42px;}
.pp-img img{object-fit: cover;width: 100%;height: 100%;}
  .pp-info{padding:18px}
  .pp-info h4{font-size:16px;color:var(--title);margin-bottom:6px}
  .pp-info p{font-size:13px;color:var(--text);line-height:1.6}

/* ── CTA BANNER ── */
  #cta{background:var(--title);padding:80px 0;position:relative;overflow:hidden}
  #cta::before{content:'';position:absolute;right:-80px;top:-80px;width:360px;height:360px;background:var(--orange);opacity:.15;border-radius:50%}
  .cta-inner{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center}
  .cta-inner h2{font-size:44px;color:#fff;margin-bottom:10px}
  .cta-inner p{font-size:17px;color:rgba(255,255,255,.65)}

/* =========================
   FOOTER MAIN
========================= */
.site-footer {
	background: #222;
	font-family: inherit !important
}

.site-above-footer-wrap {
    background: #1b1b1d;
    padding: 70px 80px;
    color: #b8b8b8;
}

/* remove Astra default weird spacing */
.site-above-footer-wrap .ast-builder-grid-row {
    align-items: flex-start;
    column-gap: 80px;
}

/* =========================
   LAYOUT
========================= */

.ft-grid {
    display: inline-flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
	text-align: left;
}

/* left brand column */
.ft-brand {
    max-width: 460px;
}

/* =========================
   LOGO AREA
========================= */

.logo {
    display: -webkit-box;
    gap: 16px;
    margin-bottom: 28px;
}

.logo-icon img {
    width: 56px;
    height: 56px;
    object-fit: contain;
}

/* company name */
.logo-text {
    display: flex;
    flex-direction: column;
    gap: 6px;

    font-size: 15px;
    color: #9a9a9a;
    line-height: 1.4;
}

/* BDTelecom title */
.logo-text a {
    font-size: 22px;
    font-weight: 700;
    color: #ffffff !important;
    letter-spacing: -0.5px;
}

/* description text */
.ft-brand p {
    font-size: 17px;
    line-height: 1.8;
    color: #8e8e8e;
    margin: 0;
}

/* =========================
   FOOTER COLUMNS
========================= */

.ft-col {
    min-width: 180px;
}

/* titles */
.ft-col h4 {
    color: #ffffff;
    font-size: 15px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

/* links */
.ft-col a {
    display: inline-block;
    color: #8f8f8f;
    text-decoration: none;
    font-size: 15px;
    line-height: 2.5;
    transition: all 0.25s ease;
}

/* hover effect */
.ft-col a:hover {
    color: #ff6a00;
    transform: translateX(3px);
}

/* remove extra paragraph margin */
.ft-col p {
    margin: 0;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 991px) {

    .site-above-footer-wrap {
        padding: 50px 30px;
    }

    .ft-brand {
        max-width: 100%;
    }
}

@media (max-width: 768px) {

    .ft-grid {
        flex-direction: column;
    }

    .ft-col {
        width: 100%;
			display: none;
    }

    .logo {
        align-items: flex-start;
    }

    .ft-brand p {
        font-size: 15px;
    }
}