/*
Theme Name: Bá Phát - Sang Tên Xe
Theme URI: https://dichvusangtenxe.vn/
Author: Công ty TNHH Anh Bá Phát
Description: Theme WordPress chuyển từ trang chủ tĩnh index.htm + index.css. Giữ nguyên 100% giao diện. Gồm header.php, front-page.php, footer.php.
Version: 1.0.0
Requires at least: 5.8
Requires PHP: 7.4
Text Domain: baphat
*/

/* ================================================================
   SANGTENXE.VN — INDEX.CSS
   CSS ĐÃ LỌC TRÙNG / THỪA — TRANG CHỦ
   ================================================================
   Nguyên tắc:
   - Giữ các selector đang dùng trên index hiện tại.
   - Gộp các selector bị khai báo nhiều lần.
   - Bỏ CSS của slider/HTML cũ không còn dùng.
   - Chỉ giữ 1 bộ responsive cho mỗi breakpoint.
   - Không đổi nội dung HTML.
   ================================================================ */

/* ================================================================
   01. BIẾN MÀU + RESET + NỀN
   ================================================================ */
:root{
  --bg:#0a0a0a;
  --txt:#f5f5f5;
  --muted:#c9c9c9;
  --card:#141414;
  --line:#252525;
  --accent:#d4af37;
  --brand:#f6e27a;
  --radius:18px;
  --shadow:0 10px 28px rgba(0,0,0,.45);
  --gold:#ffd700;
  --gold-light:#fff9c4;
}

*,
*::before,
*::after{
  box-sizing:border-box;
}

html,
body{
  margin:0;
  padding:0;
  max-width:100vw;
  overflow-x:hidden;
  background:var(--bg);
  color:var(--txt);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
}

a{
  text-decoration:none;
  color:inherit;
}

img{
  max-width:100%;
  display:block;
}

.container{
  width:min(1200px,92%);
  margin-inline:auto;
}

.text-center{
  text-align:center;
}

/* ================================================================
   02. TIÊU ĐỀ SECTION
   ================================================================ */
.section-title{
  display:flex;
  align-items:center;
  justify-content:center;
  margin:2rem 0 1.2rem;
}

.ribbon{
  background:#e53935;
  padding:.5rem 1.1rem;
  border-radius:999px;
  color:#fff;
  font-weight:800;
  letter-spacing:.3px;
}

/* ================================================================
   03. GRID + CARD DỊCH VỤ
   ================================================================ */
.grid-wrapper{
  position:relative;
}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:25px;
  padding:30px 0;
}

.grid.cols-3{
  grid-template-columns:repeat(3,1fr);
}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  position:relative;
  transition:transform .3s ease,box-shadow .3s ease;
}

.card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:14px;
  background:radial-gradient(circle at center,rgba(255,215,0,.3) 0%,transparent 70%);
  opacity:0;
  transform:scale(.8);
  transition:opacity .5s ease,transform .5s ease;
  z-index:0;
}

.card:hover::before{
  opacity:1;
  transform:scale(1.2);
}

.card img{
  width:100%;
  height:auto;
  max-height:200px;
  object-fit:cover;
  border-radius:14px 14px 0 0;
  margin:0 auto;
  transition:transform .6s ease,filter .5s ease;
}



.card img {
    width: 70%;
    margin: 0 auto;
    display: block;
}


.card .pad{
  padding:15px 20px;
  background:linear-gradient(180deg,#181818 0%,#0d0d0d 100%);
  text-align:center;
  position:relative;
  z-index:1;
}

.card h3{
  margin:.2rem 0 .35rem;
  color:var(--accent);
  font-size:1.05rem;
  transition:color .3s ease;
}

.card h5{
  margin:0;
  color:var(--gold);
  font-size:14px;
  line-height:1.4;
  font-weight:700;
}

.card p{
  margin:0;
  color:var(--muted);
  font-size:.9rem;
  opacity:.85;
  transition:opacity .3s ease;
}

.card:hover{
  transform:translateY(-6px);
  box-shadow:0 12px 25px rgba(255,215,0,.45);
}

.card:hover img{
  transform:scale(1.07);
  filter:brightness(1.1);
}

.card:hover h3{
  color:var(--gold-light);
}

.card:hover p{
  opacity:1;
}

/* Nút mũi tên hai bên grid */
.arrow{
  position:absolute;
  top:45%;
  transform:translateY(-50%);
  background:rgba(0,0,0,.6);
  color:#ffd700;
  border:0;
  font-size:1.8rem;
  width:44px;
  height:44px;
  border-radius:50%;
  cursor:pointer;
  display:none;
  justify-content:center;
  align-items:center;
  box-shadow:0 0 12px rgba(0,0,0,.35);
  transition:all .25s ease;
  z-index:20;
}

.arrow:hover{
  background:rgba(255,215,0,.25);
  color:#fff;
  transform:translateY(-50%) scale(1.15);
}

.arrow-left{left:5px;}
.arrow-right{right:5px;}

/* ================================================================
   04. CTA + WHY + BENEFITS
   ================================================================ */
.quick-cta{
  display:flex;
  gap:.8rem;
  flex-wrap:wrap;
  justify-content:center;
  margin:1rem 0 2rem;
}

.quick-cta .qbtn{
  background:#e53935;
  border:0;
  color:#fff;
  padding:.7rem 1rem;
  border-radius:12px;
  font-weight:800;
}

.why{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:1rem;
}

.why .box{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1rem;
}

.why ul{
  margin:.4rem 0 0 1.1rem;
}


/* FIX 2 KHUNG SANG TÊN */
.benefits {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
}

.benefits .b {
  display: inline-block !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: max-content !important;
  flex: 0 0 auto !important;
  padding: 7px 25px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}


@keyframes glow{
  0%,100%{
    text-shadow:0 0 5px var(--gold),0 0 10px #ffa500,0 0 20px var(--gold);
    color:var(--gold);
  }
  50%{
    text-shadow:0 0 15px #ffe55c,0 0 30px #ffb700,0 0 45px var(--gold);
    color:#fff3b0;
  }
}

/* ================================================================
   05. VIDEO HƯỚNG DẪN
   ================================================================ */
.video-wrapper{
  display:flex;
  justify-content:center;
  align-items:center;
  margin-top:20px;
}

.video-container{
  position:relative;
  width:60%;
  padding-top:22.5%;
  background:#000;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 0 18px rgba(255,215,0,.25);
}

.video-container iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  border-radius:10px;
}

/* ================================================================
   06. GALLERY BIỂN SỐ
   ================================================================ */

    /* Gallery Scroll */
    .section-gallery {
      background: linear-gradient(180deg, #1a1a1a, #111);
      text-align: center;
      padding: 50px 10px;
      overflow: hidden;
    }

    .gallery-track {
      display: flex;
      gap: 20px;
      width: max-content;
      animation: scrollGallery 60s linear infinite;
    }

    .gallery-item {
      flex: 0 0 220px;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .gallery-item img {
      width: 100%;
      border-radius: 12px;
      box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
      object-fit: cover;
    }

    .gallery-item:hover {
      transform: scale(1.05);
      box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
    }

    @keyframes scrollGallery {
      0% {
        transform: translateX(0);
      }

      100% {
        transform: translateX(-50%);
      }
    }

    .section-title-gold{
  margin:0 0 24px;
  text-align:center;
  font-size:clamp(22px,3vw,34px);
  line-height:1.25;
  font-weight:800;
  color:#FFD700;
}
/* ================================================================
   07. FOOTER
   ================================================================ */
footer{
  border-top:1px solid var(--line);
  color:#bdbdbd;
  padding:2rem 0;
  margin-top:2rem;
  background:radial-gradient(1200px 400px at 20% 0%,rgba(212,175,55,.12),transparent 60%),#000;
  position:relative;
}

footer::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.12;
  background:var(--bp-footer-bg) center/cover no-repeat;
  filter:blur(6px);
}

footer,
footer *{
  position:relative;
}

.footer-wrap{
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:1rem;
  align-items:flex-start;
}

.footer-brand{
  display:flex;
  gap:12px;
  align-items:center;
}

.footer-brand img{
  width:56px;
  height:56px;
  border-radius:50%;
  background:#fff;
}

.footer-note{
  color:#d9c378;
  font-weight:700;
}

.footer-col h4{
  margin:0 0 .6rem;
  color:var(--brand);
}

.footer-col a{
  display:block;
  color:#d0d0d0;
  margin:.25rem 0;
}

.footer-col iframe{
  width:100%;
  border:0;
  border-radius:12px;
}

.footer-bottom{
  width:100%;
  margin:14px 0 0;
  padding:0;
  text-align:center;
  font-size:12px;
  line-height:1.8;
  opacity:.72;
}

.footer-bottom a{
  color:#ffd700;
  margin:0 6px;
  white-space:nowrap;
}

.footer-bottom a:hover{
  opacity:1;
}

/* ================================================================
   08. HERO VIDEO + NAVBAR
   ================================================================ */
.hero-section{
  position:relative;
  width:100%;
  height:100vh;
  min-height:720px;
  overflow:hidden;
  background:#0a0a0b;
}

.background-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 60%;
  pointer-events:none;
  z-index:0;
}

.video-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(
    180deg,
    rgba(8,8,10,.65) 0%,
    rgba(8,8,10,.25) 30%,
    rgba(8,8,10,.35) 55%,
    rgba(8,8,10,.95) 100%
  );
  z-index:1;
}

.navbar{
  position:relative;
  z-index:100;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:28px 56px;
  flex-wrap:wrap;
}

.nav-left{
  display:flex;
  align-items:center;
  gap:48px;
}

.logo{
  display:flex;
  align-items:center;
  gap:12px;
}

.logo img{
  width:50px;
  height:50px;
  border-radius:50%;
  border:2px solid #ffd700;
  box-shadow:0 0 20px rgba(255,215,0,.4);
}

.logo-text{
  display:flex;
  flex-direction:column;
  line-height:1.3;
}

.logo-text .brand-name{
  color:#ffd700;
  font-size:18px;
  font-weight:700;
}

.logo-text .brand-sub{
  color:#eee;
  font-size:14px;
  font-weight:500;
}

.nav-links{
  display:flex;
  gap:36px;
  align-items:center;
}

.nav-links a{
  font-size:14px;
  font-weight:500;
  color:rgba(255,255,255,.85);
  transition:color .2s;
}

.nav-links a:hover,
.nav-links a.active{
  color:#ffd700;
}

.contact-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:linear-gradient(135deg,#ffd700 0%,#ffc000 100%);
  color:#000;
  font-size:14px;
  font-weight:700;
  padding:12px 24px;
  border-radius:10px;
  transition:all .3s;
  box-shadow:0 4px 15px rgba(255,215,0,.3);
}

.contact-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(255,215,0,.5);
}

/* ================================================================
   09. DROPDOWN DỊCH VỤ + LIÊN HỆ
   ================================================================ */
.nav-dropdown-item{
  position:relative;
  z-index:200;
  display:flex;
  align-items:center;
}

.nav-dropdown-toggle{
  display:inline-flex;
  align-items:center;
  gap:5px;
  white-space:nowrap;
}

.nav-arrow{
  display:inline-block;
  font-size:13px;
  line-height:1;
  transition:transform .2s ease;
}

.nav-dropdown-menu{
  position:absolute;
  top:100%;
  left:50%;
  transform:translate(-50%,-6px);
  width:360px;
  max-height:min(70vh,620px);
  overflow-y:auto;
  padding:8px;
  background:rgba(18,18,18,.98);
  border:1px solid rgba(255,215,0,.35);
  border-radius:10px;
  box-shadow:0 14px 35px rgba(0,0,0,.45);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .2s ease,transform .2s ease,visibility .2s ease;
  z-index:9999;
}

.nav-dropdown-menu::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-10px;
  height:10px;
}

.nav-dropdown-menu a{
  display:block;
  padding:9px 11px;
  color:rgba(255,255,255,.9);
  font-size:13px;
  font-weight:400;
  line-height:1.35;
  text-decoration:none;
  border-radius:6px;
  white-space:normal;
}

.nav-dropdown-menu a:hover,
.nav-dropdown-menu a:focus-visible{
  color:#ffd700;
  background:rgba(255,215,0,.08);
  outline:none;
}

.nav-dropdown-item:hover > .nav-dropdown-menu,
.nav-dropdown-item:focus-within > .nav-dropdown-menu{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate(-50%,0);
}

.nav-dropdown-menu:hover{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.nav-dropdown-item:hover .nav-arrow,
.nav-dropdown-item:focus-within .nav-arrow{
  transform:rotate(180deg);
}

.nav-dropdown-contact .nav-dropdown-menu{
  width:300px;
}

/* ================================================================
   10. HERO — SANG TÊN XE / HÀ NỘI
   ================================================================ */
.giant-headline{
  position:absolute;
  top:125px;
  left:0;
  right:0;
  text-align:center;
  z-index:2;
  font-size:clamp(38px,7vw,70px);
  font-weight:800;
  line-height:.98;
  letter-spacing:-.02em;
  background:linear-gradient(180deg,#ffd700 0%,#fff 45%,#b8b8bd 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.hero-content{
  position:absolute;
  left:56px;
  bottom:80px;
  z-index:3;
  max-width:680px;
}

.hero-content h1{
  color:#fff;
  font-weight:800;
  font-size:clamp(22px,4vw,30px);
  line-height:1.15;
  letter-spacing:-.01em;
  margin:0 0 14px;
  text-shadow:0 2px 10px rgba(0,0,0,.5);
}

.hero-content p{
  color:rgba(255,255,255,.88);
  font-size:14px;
  font-weight:400;
  line-height:1.5;
  max-width:500px;
  margin:0 0 22px;
}

.hero-buttons{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}

.btn-primary,
.btn-secondary,
.btn-3{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:9px;
  transition:all .3s ease;
}

.btn-primary{
  background:linear-gradient(135deg,#ffd700 0%,#ffc000 100%);
  color:#000;
  font-size:14px;
  font-weight:700;
  letter-spacing:.02em;
  padding:11px 22px;
  box-shadow:0 4px 20px rgba(255,215,0,.4);
}

.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 25px rgba(56,134,244,.6);
}

.btn-secondary{
  background:#0057a8;
  border:1px solid #0057a8;
  color:#fff;
  font-size:14px;
  font-weight:600;
  padding:11px 22px;
}

.btn-secondary:hover{
  background:#ffd700;
  border-color:#ffd700;
  color:#111;
}

.btn-3{
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.3);
  backdrop-filter:blur(8px);
  color:#fff;
  font-size:14px;
  font-weight:600;
  padding:11px 22px;
}

.btn-3:hover{
  background:rgba(255,255,255,.15);
  border-color:#ffd700;
}

/* ================================================================
   11. BACK TO TOP
   ================================================================ */
#backToTop{
  position:fixed;
  left:16px;
  bottom:80px;
  width:46px;
  height:46px;
  border-radius:50%;
  background:linear-gradient(135deg,#ffd700,#fff2a8);
  color:#000;
  border:0;
  cursor:pointer;
  font-size:20px;
  display:none;
  justify-content:center;
  align-items:center;
  z-index:999;
}

#backToTop:hover{
  background:linear-gradient(135deg,#fff2a8,#ffd700);
  transform:scale(1.1);
}

/* ================================================================
   12. FLOATING ZALO / TELEGRAM / MESSENGER / HOTLINE
   ================================================================ */
.zalo-chat-widget{
  position:fixed;
  right:5px;
  top:70%;
  z-index:9999;
}

.zalo-chat-widget a,
.zalo-chat-widget .button-contact{
  width:45px;
  height:45px;
  background:#fff;
  border-radius:50%;
  padding:0;
  display:flex;
  justify-content:center;
  align-items:center;
  box-shadow:0 0 0 0 #40ece6;
  animation:devvn_zoom 1.8s infinite linear;
  transition:transform .3s ease;
}

.zalo-chat-widget a:hover,
.zalo-chat-widget .button-contact:hover{
  transform:scale(1.15);
}

.zalo-chat-widget img{
  width:90%;
  height:90%;
  animation:calltrap_spin 3s infinite linear;
}

@keyframes devvn_zoom{
  0%{box-shadow:0 0 0 0 rgba(40,184,251,.577);}
  70%{box-shadow:0 0 0 12px transparent;}
  100%{box-shadow:0 0 0 0 transparent;}
}

@keyframes calltrap_spin{
  0%,30%{transform:rotate(0deg);}
  33%{transform:rotate(-10deg);}
  36%{transform:rotate(10deg);}
  39%{transform:rotate(-10deg);}
  42%{transform:rotate(10deg);}
  45%{transform:rotate(-10deg);}
  48%{transform:rotate(10deg);}
  51%{transform:rotate(-10deg);}
  54%{transform:rotate(10deg);}
  57%{transform:rotate(0deg);}
}

/* ================================================================
   13. RESPONSIVE — TABLET
   ================================================================ */
@media (max-width:980px){
  .grid.cols-3{
    grid-template-columns:1fr 1fr;
  }

  .why{
    grid-template-columns:1fr;
  }

  .footer-wrap{
    grid-template-columns:1fr 1fr;
  }
}

/* ================================================================
   14. RESPONSIVE — GALLERY
   ================================================================ */
@media (max-width:900px){
  .gallery-number-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}

/* ================================================================
   15. RESPONSIVE — MOBILE 768px
   ================================================================ */
@media (max-width:768px){
  /* Grid dịch vụ: giữ dạng danh sách dọc, không kéo ngang */
  .grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    overflow-x:visible !important;
    scroll-snap-type:none !important;
    gap:16px !important;
    padding:16px 10px !important;
  }

  .grid.cols-3{
    grid-template-columns:1fr !important;
  }

  .card{
    width:100% !important;
  }

  .card .pad{
    padding:10px;
  }

  .card h3{
    font-size:.85rem;
  }

  .card p{
    display:none;
  }

  .arrow{
    display:flex;
  }

  /* Footer */
  .footer-wrap{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    text-align:center !important;
    gap:1.5rem !important;
  }

  .footer-col{
    width:100% !important;
    margin-bottom:20px;
  }

  .footer-brand{
    justify-content:center;
  }

  .footer-brand img{
    display:block;
    margin:0 auto 10px;
    width:80px;
    height:auto;
  }

  .footer-col iframe{
    width:100% !important;
    height:280px !important;
    margin:0 auto;
  }

  .footer-note,
  .footer-col div,
  .footer-col a{
    font-size:15px;
    line-height:1.6;
  }

  .footer-bottom{
    width:100%;
    padding:0 10px;
    font-size:11px;
    line-height:1.8;
  }

  /* Video */
  .video-container{
    width:90%;
    padding-top:50%;
  }

  /* Hero */
  .hero-section{
    height:100svh;
    min-height:650px;
  }

  .navbar{
    padding:12px 14px;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    gap:9px;
  }

  .nav-left{
    width:100%;
    flex-direction:column;
    align-items:center;
    gap:8px;
  }

  .logo{
    justify-content:center;
    gap:8px;
  }

  .logo img{
    width:40px;
    height:40px;
  }

  .logo-text .brand-name{
    font-size:15px;
  }

  .logo-text .brand-sub{
    font-size:11px;
  }

  .nav-links{
    width:100%;
    justify-content:center;
    gap:11px;
    flex-wrap:wrap;
  }

  .nav-links a{
    font-size:12px;
  }

  .navbar > .contact-btn{
    display:none;
  }

  /* Dropdown */
  .nav-dropdown-item{
    position:relative;
  }

  .nav-dropdown-menu{
    top:100%;
    left:50%;
    width:min(92vw,360px);
    max-height:55vh;
  }

  .nav-dropdown-contact .nav-dropdown-menu{
    width:min(92vw,300px);
  }

  .nav-dropdown-menu a{
    font-size:12px;
    padding:8px 10px;
  }

  /* Hero text */
  .giant-headline{
    top:155px;
    font-size:clamp(30px,9vw,48px);
    line-height:1;
    padding:0 10px;
  }

  .hero-content{
    left:16px;
    right:16px;
    bottom:25px;
    max-width:none;
    text-align:center;
  }

  .hero-content h1{
    font-size:clamp(21px,6.2vw,29px);
    line-height:1.16;
    margin-bottom:9px;
  }

  .hero-content p{
    max-width:360px;
    margin:0 auto 14px;
    font-size:12px;
    line-height:1.42;
  }

  .hero-buttons{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7px;
    width:min(100%,340px);
    margin:0 auto;
  }

  .btn-primary{
    grid-column:1 / -1;
    width:100%;
    font-size:12px;
    padding:9px 12px;
  }

  .btn-secondary,
  .btn-3{
    width:100%;
    font-size:12px;
    padding:9px 10px;
  }

  /* Gallery */
  .section-gallery{
    margin:30px auto;
    padding:30px 14px;
  }

  .gallery-item{
    flex:0 0 240px;
  }

  .section-title-gold{
    font-size:clamp(22px,6vw,30px);
  }

  .gallery-number-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
  }

  .gallery-number{
    min-height:64px;
    border-radius:10px;
  }
}

/* ================================================================
   16. RESPONSIVE — MOBILE NHỎ
   ================================================================ */
@media (max-width:600px){
  .gallery-number-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media (max-width:380px){
  .hero-section{
    min-height:620px;
  }

  .navbar{
    padding:10px;
    gap:7px;
  }

  .logo img{
    width:36px;
    height:36px;
  }

  .logo-text .brand-name{
    font-size:14px;
  }

  .logo-text .brand-sub{
    font-size:10px;
  }

  .nav-links{
    gap:8px;
  }

  .nav-links a{
    font-size:11px;
  }

  .nav-dropdown-menu{
    width:94vw;
  }

  .nav-dropdown-menu a{
    font-size:11px;
  }

  .giant-headline{
    top:140px;
    font-size:29px;
  }

  .hero-content{
    bottom:18px;
    left:12px;
    right:12px;
  }

  .hero-content h1{
    font-size:21px;
    margin-bottom:7px;
  }

  .hero-content p{
    font-size:11px;
    line-height:1.35;
    margin-bottom:11px;
  }

  .hero-buttons{
    width:min(100%,310px);
    gap:6px;
  }

  .btn-primary,
  .btn-secondary,
  .btn-3{
    font-size:11px;
    padding:8px 9px;
  }

  .gallery-number-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}


/* ================================================================
   CSS MOVED FROM index-gop.htm — giữ nguyên thứ tự cascade
   ================================================================ */


/* ===== INLINE STYLE BLOCK 1 ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
    html, body { overflow-x: hidden; max-width: 100vw; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; }
    a { text-decoration: none; color: inherit; }

    .hero-section { position: relative; width: 100%; height: 100vh; min-height: 720px; overflow: hidden; background: #0a0a0b; }
    .background-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; pointer-events: none; z-index: 0; }
    .video-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,8,10,0.65) 0%, rgba(8,8,10,0.25) 30%, rgba(8,8,10,0.35) 55%, rgba(8,8,10,0.95) 100%); z-index: 1; }

    .navbar { position: relative; z-index: 3; display: flex; justify-content: space-between; align-items: center; padding: 28px 56px; flex-wrap: wrap; }
    .nav-left { display: flex; align-items: center; gap: 48px; }
    .logo { display: flex; align-items: center; gap: 12px; }
    .logo img { width: 50px; height: 50px; border-radius: 50%; border: 2px solid #FFD700; box-shadow: 0 0 20px rgba(255,215,0,0.4); }
    .logo-text { display: flex; flex-direction: column; line-height: 1.3; }
    .logo-text .brand-name { color: #FFD700; font-size: 18px; font-weight: 700; }
    .logo-text .brand-sub { color: #eee; font-size: 14px; font-weight: 500; }
    .nav-links { display: flex; gap: 36px; align-items: center; }
    .nav-links a { font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.85); transition: color 0.2s; }
    .nav-links a:hover, .nav-links a.active { color: #FFD700; }

    /* ===== DROPDOWN MENU: DỊCH VỤ + LIÊN HỆ ===== */
    .nav-dropdown-item {
      position: relative;
      display: flex;
      align-items: center;
    }

    .nav-dropdown-toggle {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      white-space: nowrap;
    }

    .nav-arrow {
      display: inline-block;
      font-size: 13px;
      line-height: 1;
      transition: transform .2s ease;
    }

    .nav-dropdown-menu {
      position: absolute;
      top: calc(100%);
      left: 50%;
      transform: translate(-50%, -6px);



      width: 360px;
      max-height: min(70vh, 620px);
      overflow-y: auto;
      padding: 8px;
      background: rgba(18,18,18,.98);
      border: 1px solid rgba(255,215,0,.35);
      border-radius: 10px;
      box-shadow: 0 14px 35px rgba(0,0,0,.45);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
      z-index: 1000;
    }

    .nav-dropdown-menu a {
      display: block;
      padding: 9px 11px;
      color: rgba(255,255,255,.9);
      font-size: 13px;
      font-weight: 400;
      line-height: 1.35;
      text-decoration: none;
      border-radius: 6px;
      white-space: normal;
    }

    .nav-dropdown-menu a:hover,
    .nav-dropdown-menu a:focus-visible {
      color: #FFD700;
      background: rgba(255,215,0,.08);
      outline: none;
    }

    .nav-dropdown-item:hover .nav-dropdown-menu,
    .nav-dropdown-item:focus-within .nav-dropdown-menu {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translate(-50%, 0);
    }

    .nav-dropdown-item:hover .nav-arrow,
    .nav-dropdown-item:focus-within .nav-arrow {
      transform: rotate(180deg);
    }

    .nav-dropdown-contact .nav-dropdown-menu {
      width: 300px;
    }

    @media (max-width: 768px) {
      .nav-dropdown-item {
        position: relative;
      }

      .nav-dropdown-menu {
        top: calc(100% + 8px);
        left: 50%;
        width: min(92vw, 360px);
        max-height: 55vh;
      }

      .nav-dropdown-contact .nav-dropdown-menu {
        width: min(92vw, 300px);
      }

      .nav-dropdown-menu a {
        font-size: 12px;
        padding: 8px 10px;
      }
    }

    @media (max-width: 380px) {
      .nav-dropdown-menu {
        width: 94vw;
      }

      .nav-dropdown-menu a {
        font-size: 11px;
      }
    }
    .contact-btn { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, #FFD700 0%, #FFC000 100%); color: #000; font-size: 14px; font-weight: 700; padding: 12px 24px; border-radius: 10px; transition: all 0.3s; box-shadow: 0 4px 15px rgba(255,215,0,0.3); }
    .contact-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255,215,0,0.5); }

.giant-headline {
    position: absolute;
    top: 125px;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 2;

    font-size: clamp(38px, 7vw, 70px);
    font-weight: 800;
    line-height: 0.98;
    letter-spacing: -0.02em;

    background: linear-gradient(
        180deg,
        #FFD700 0%,
        #ffffff 45%,
        #b8b8bd 100%
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
    .hero-content { position: absolute; left: 56px; bottom: 80px; z-index: 3; max-width: 680px; }



.hero-content h1 {
    color: #fff;
    font-weight: 800;
    font-size: clamp(22px, 4vw, 30px);
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin-bottom: 14px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}





.hero-content p {
    color: rgba(255,255,255,0.88);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    max-width: 500px;
    margin-bottom: 22px;
}







.hero-buttons { display: flex; gap: 16px; flex-wrap: wrap; }
    
 

.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #FFD700 0%, #FFC000 100%);
    color: #000;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 11px 22px;
    border-radius: 9px;
    transition: all 0.3s;
    box-shadow: 0 4px 20px rgba(255,215,0,0.4);
}


     .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 25px rgba(56, 134, 244, 0.6); }


.btn-secondary { 
    display: inline-flex; 
    align-items: center; 
    gap: 8px; 
    background: #0057A8; 
    border: 1px solid #0057A8; 
    color: #fff; 
    font-size: 14px; 
    font-weight: 600; 
    padding: 11px 22px; 
    border-radius: 9px; 
    transition: all 0.3s ease; 
}

.btn-secondary:hover { 
    background: #FFD700; 
    border-color: #FFD700; 
    color: #111; 
}
 
    .btn-3 { 
      
       display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.3);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 11px 22px;
    border-radius: 9px;
    transition: all 0.3s;
    }
     
    .btn-3:hover { background: rgba(255,255,255,0.15); border-color: #FFD700; }

    #backToTop { position: fixed; bottom: 100px; right: 20px; width: 48px; height: 48px; background: linear-gradient(135deg, #FFD700 0%, #FFC000 100%); color: #000; border: none; border-radius: 50%; font-size: 24px; cursor: pointer; display: none; align-items: center; justify-content: center; box-shadow: 0 4px 15px rgba(255,215,0,0.3); z-index: 998; transition: all 0.3s; }
    #backToTop:hover { transform: translateY(-4px); box-shadow: 0 6px 20px rgba(255,215,0,0.5); }
@media (max-width: 768px) {

    .hero-section {
        height: 100svh;
        min-height: 680px;
    }

    .navbar {
        padding: 16px 18px;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 12px;
    }

    .nav-left {
        flex-direction: column;
        gap: 12px;
        width: 100%;
    }

    .logo {
        justify-content: center;
    }

    .logo img {
        width: 42px;
        height: 42px;
    }

    .logo-text .brand-name {
        font-size: 16px;
    }

    .logo-text .brand-sub {
        font-size: 12px;
    }

    .nav-links {
        width: 100%;
        justify-content: center;
        gap: 14px;
        flex-wrap: wrap;
    }

    .nav-links a {
        font-size: 13px;
    }

    /* Ẩn nút hotline ở góc phải trên mobile
       vì bên dưới đã có nút GỌI NGAY */
    .navbar > .contact-btn {
        display: none;
    }

    /* Chữ lớn giữa banner */
   
.giant-headline{
    position:absolute;
    top:145px;
    left:0;
    right:0;
    text-align:center;
    z-index:2;
    font-size:clamp(38px,5.8vw,76px);
    font-weight:800;
    line-height:.98;
    letter-spacing:-.02em;
    background:linear-gradient(180deg,#FFD700 0%,#fff 48%,#b8b8bd 100%);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}
.hero-content{
    position:absolute;
    left:56px;
    bottom:58px;
    z-index:3;
    max-width:560px;
}
.hero-content h1{
    color:#fff;
    font-weight:700;
    font-size:clamp(25px,3vw,38px);
    line-height:1.16;
    letter-spacing:-.01em;
    margin-bottom:10px;
    text-shadow:0 2px 10px rgba(0,0,0,.5);
}
.hero-content p{
    color:rgba(255,255,255,.88);
    font-size:13px;
    font-weight:400;
    line-height:1.45;
    max-width:470px;
    margin-bottom:18px;
}
.hero-buttons{display:flex;gap:10px;flex-wrap:wrap;}
.btn-primary{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    background:linear-gradient(135deg,#FFD700 0%,#FFC000 100%);
    color:#000;
    font-size:13px;
    font-weight:700;
    letter-spacing:.01em;
    padding:10px 18px;
    border-radius:8px;
    transition:all .3s;
    box-shadow:0 4px 18px rgba(255,215,0,.35);
}
.btn-secondary,.btn-3{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.30);
    color:#fff;
    font-size:13px;
    font-weight:600;
    padding:10px 18px;
    border-radius:8px;
    transition:all .3s ease;
}
.btn-secondary:hover,.btn-3:hover{
    background:#FFD700;
    border-color:#FFD700;
    color:#111;
}
@media (max-width:768px){
    .hero-section{height:100svh;min-height:650px;}
    .navbar{
        padding:12px 14px;
        flex-direction:column;
        align-items:center;
        justify-content:flex-start;
        gap:9px;
    }
    .nav-left{
        width:100%;
        flex-direction:column;
        align-items:center;
        gap:8px;
    }
    .logo{justify-content:center;gap:8px;}
    .logo img{width:40px;height:40px;}
    .logo-text .brand-name{font-size:15px;}
    .logo-text .brand-sub{font-size:11px;}
    .nav-links{
        width:100%;
        justify-content:center;
        gap:11px;
        flex-wrap:wrap;
    }
    .nav-links a{font-size:12px;}
    .navbar>.contact-btn{display:none;}
    .giant-headline{
        top:155px;
        font-size:clamp(30px,9vw,48px);
        line-height:1;
        padding:0 10px;
    }
    .hero-content{
        left:16px;
        right:16px;
        bottom:25px;
        max-width:none;
        text-align:center;
    }
    .hero-content h1{
        font-size:clamp(21px,6.2vw,29px);
        line-height:1.16;
        margin-bottom:9px;
    }
    .hero-content p{
        max-width:360px;
        margin:0 auto 14px;
        font-size:12px;
        line-height:1.42;
    }
    .hero-buttons{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:7px;
        width:min(100%,340px);
        margin:0 auto;
    }
    .btn-primary{
        grid-column:1 / -1;
        width:100%;
        font-size:12px;
        padding:9px 12px;
    }
    .btn-secondary,.btn-3{
        width:100%;
        font-size:12px;
        padding:9px 10px;
    }
}
@media (max-width:380px){
    .hero-section{min-height:620px;}
    .navbar{padding:10px;gap:7px;}
    .logo img{width:36px;height:36px;}
    .logo-text .brand-name{font-size:14px;}
    .logo-text .brand-sub{font-size:10px;}
    .nav-links{gap:8px;}
    .nav-links a{font-size:11px;}
    .giant-headline{top:140px;font-size:29px;}
    .hero-content{bottom:18px;left:12px;right:12px;}
    .hero-content h1{font-size:21px;margin-bottom:7px;}
    .hero-content p{font-size:11px;line-height:1.35;margin-bottom:11px;}
    .hero-buttons{width:min(100%,310px);gap:6px;}
    .btn-primary,.btn-secondary,.btn-3{font-size:11px;padding:8px 9px;}
}
    /* ===== GALLERY SỐ NHẸ - KHÔNG TẢI 20 ẢNH ===== */
    .section-gallery{
      width:100%;
      max-width:1200px;
      margin:40px auto;
      padding:0 20px;
    }
    .section-gallery .section-title-gold{
      margin:0 0 24px;
      text-align:center;
      font-size:clamp(22px,3vw,34px);
      line-height:1.25;
      font-weight:800;
      color:#FFD700;
    }
    .gallery-number-grid{
      display:grid;
      grid-template-columns:repeat(5,minmax(0,1fr));
      gap:14px;
    }
    .gallery-number{
      min-height:78px;
      display:flex;
      align-items:center;
      justify-content:center;
      border:1px solid rgba(255,215,0,.45);
      border-radius:12px;
      background:linear-gradient(145deg,#171717,#0d0d0d);
      color:#FFD700;
      font-size:clamp(24px,3vw,34px);
      font-weight:800;
      line-height:1;
      text-decoration:none;
      box-shadow:0 5px 16px rgba(0,0,0,.18);
      transition:transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
    }
    .gallery-number:hover,
    .gallery-number:focus-visible{
      transform:translateY(-3px);
      border-color:#FFD700;
      background:linear-gradient(145deg,#242424,#111);
      box-shadow:0 8px 22px rgba(0,0,0,.28);
      outline:none;
    }
    .gallery-number:active{
      transform:translateY(-1px);
    }
    @media (max-width:900px){
      .gallery-number-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
    }
    @media (max-width:600px){
      .section-gallery{margin:30px auto;padding:0 14px;}
      .gallery-number-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
      .gallery-number{min-height:64px;border-radius:10px;}
    }
    @media (max-width:380px){
      .gallery-number-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
    }
  
    /* ===== GALLERY ẢNH: GIỮ ẢNH NHƯNG GIẢM TẢI BAN ĐẦU ===== */
    .section-gallery{
      content-visibility:auto;
      contain-intrinsic-size:600px;
    }
    .gallery-track{
      display:flex;
      gap:24px;
      overflow-x:auto;
      overscroll-behavior-x:contain;
      scroll-behavior:smooth;
      scrollbar-width:none;
    }
    .gallery-track::-webkit-scrollbar{display:none;}
    .gallery-item{
      flex:0 0 clamp(240px,24vw,300px);
      display:block;
      overflow:hidden;
      border-radius:16px;
    }
    .gallery-item img{
      display:block;
      width:100%;
      height:auto;
      aspect-ratio:1 / 1;
      object-fit:cover;
    }
  
    .footer-bottom{
      margin:14px auto 0;
      text-align:center;
      font-size:12px;
      line-height:1.8;
      opacity:.72;
    }
    .footer-bottom a{
      color:#FFD700;
      margin:0 6px;
      white-space:nowrap;
    }
    .footer-bottom a:hover{opacity:1;}


/* ===== INLINE STYLE BLOCK 2 ===== */
.zalo-chat-widget a,
.zalo-chat-widget .button-contact {
  width: 45px;
  height: 45px;
  background: #ffffff;
  border-radius: 50%;
  padding: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 0 0 #40ece6;
  animation: devvn_zoom 1.8s infinite linear;
  transition: transform 0.3s ease;
}

.zalo-chat-widget a:hover,
.zalo-chat-widget .button-contact:hover {
  transform: scale(1.15);
}

.zalo-chat-widget img {
  width: 24px;
  height: 24px;
  animation: calltrap_spin 3s infinite linear;
}

/* Hiệu ứng phóng to nhẹ */
@keyframes devvn_zoom {
  0% { box-shadow: 0 0 0 0 rgba(40, 184, 251, 0.577); }
  70% { box-shadow: 0 0 0 12px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* Hiệu ứng lắc nhẹ */
@keyframes calltrap_spin {
  0%, 30% { transform: rotate(0deg); }
  33% { transform: rotate(-10deg); }
  36% { transform: rotate(10deg); }
  39% { transform: rotate(-10deg); }
  42% { transform: rotate(10deg); }
  45% { transform: rotate(-10deg); }
  48% { transform: rotate(10deg); }
  51% { transform: rotate(-10deg); }
  54% { transform: rotate(10deg); }
  57% { transform: rotate(0deg); }
}
.zalo-chat-widget {
  position: fixed;
  right: 5px;
  top: 70%;
  z-index: 9999;
}
.zalo-chat-widget img {
  width: 90%;
  height: 90%;
  animation: calltrap_spin 3s infinite linear;
}



/* =========================================================
   FIX DROPDOWN MENU
   - Không bị mất khi rê chuột từ menu chính xuống
   - Không bị khoảng hở giữa nút và menu
   - Menu luôn nằm trên hero
   ========================================================= */

.navbar {
    position: relative;
    z-index: 100;
}

.nav-dropdown-item {
    position: relative;
    z-index: 200;
}

.nav-dropdown-menu {
    top: 100% !important;
    z-index: 9999 !important;
}

/* Cầu nối vô hình giữa nút và dropdown */
.nav-dropdown-menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -10px;
    height: 10px;
}

/* Hiển thị dropdown */
.nav-dropdown-item:hover > .nav-dropdown-menu,
.nav-dropdown-item:focus-within > .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

/* Giữ menu khi rê chuột vào chính dropdown */
.nav-dropdown-menu:hover {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Liên hệ */
.nav-dropdown-contact .nav-dropdown-menu {
    z-index: 9999 !important;
}
 
/* =========================================================
   MOBILE FOOTER MENU
   - ẨN HOÀN TOÀN TRÊN LAPTOP / DESKTOP
   - CỐ ĐỊNH Ở ĐÁY MÀN HÌNH TRÊN MOBILE
   ========================================================= */

/* DESKTOP / LAPTOP */
@media (min-width: 769px) {

    body .mobile-footer-menu {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

    body .mobile-footer-menu {

        display: block !important;

        position: fixed !important;

        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;

        width: 100% !important;

        height: 58px !important;

        margin: 0 !important;
        padding: 0 !important;

        background: #111111 !important;

        border-top: 1px solid #444 !important;

        z-index: 999999 !important;

        visibility: visible !important;
        opacity: 1 !important;

        box-sizing: border-box !important;
    }


    /* UL */

    body .mobile-footer-menu ul {

        display: flex !important;

        flex-direction: row !important;

        flex-wrap: nowrap !important;

        justify-content: space-around !important;

        align-items: stretch !important;

        width: 100% !important;
        height: 58px !important;

        margin: 0 !important;
        padding: 0 !important;

        list-style: none !important;

        box-sizing: border-box !important;
    }


    /* LI */

    body .mobile-footer-menu li {

        display: flex !important;

        flex: 1 1 20% !important;

        align-items: stretch !important;
        justify-content: center !important;

        width: 20% !important;

        height: 58px !important;

        margin: 0 !important;
        padding: 0 !important;

        list-style: none !important;

        box-sizing: border-box !important;
    }


    /* LINK */

    body .mobile-footer-menu li a {

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        justify-content: center !important;

        width: 100% !important;
        height: 58px !important;

        margin: 0 !important;
        padding: 4px 2px !important;

        color: #ffffff !important;

        font-size: 11px !important;

        line-height: 1.2 !important;

        text-align: center !important;

        text-decoration: none !important;

        white-space: nowrap !important;

        box-sizing: border-box !important;
    }


    /* ICON */

    body .mobile-footer-menu li a img {

        display: block !important;

        width: 20px !important;
        height: 20px !important;

        object-fit: contain !important;

        margin: 0 auto 3px !important;
        padding: 0 !important;

        border: 0 !important;

        flex-shrink: 0 !important;
    }


    /* HOVER / ACTIVE */

    body .mobile-footer-menu li a:hover,
    body .mobile-footer-menu li a:active {

        color: #f8f008 !important;
    }

}
/* =========================================================
   MOBILE FOOTER MENU
   PC/LAPTOP: ẨN
   MOBILE: CỐ ĐỊNH DƯỚI ĐÁY MÀN HÌNH
   ========================================================= */

/* PC + LAPTOP */
#mobile-footer-menu {
    display: none !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 768px) {

    #mobile-footer-menu {
        display: block !important;

        position: fixed !important;

        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;

        width: 100vw !important;
        height: 58px !important;

        margin: 0 !important;
        padding: 0 !important;

        background: #111 !important;

        border-top: 1px solid #444 !important;

        z-index: 2147483647 !important;

        box-sizing: border-box !important;
    }

    #mobile-footer-menu ul {
        display: flex !important;

        flex-direction: row !important;
        flex-wrap: nowrap !important;

        justify-content: space-around !important;
        align-items: stretch !important;

        width: 100% !important;
        height: 58px !important;

        margin: 0 !important;
        padding: 0 !important;

        list-style: none !important;
    }

    #mobile-footer-menu li {
        display: flex !important;

        flex: 1 1 20% !important;

        width: 20% !important;
        height: 58px !important;

        margin: 0 !important;
        padding: 0 !important;

        align-items: center !important;
        justify-content: center !important;

        list-style: none !important;
    }

    #mobile-footer-menu li a {
        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        height: 58px !important;

        margin: 0 !important;
        padding: 3px 2px !important;

        color: #fff !important;

        font-size: 11px !important;
        line-height: 1.2 !important;

        text-align: center !important;

        text-decoration: none !important;

        white-space: nowrap !important;
    }

    #mobile-footer-menu li a img {
        display: block !important;

        width: 20px !important;
        height: 20px !important;

        margin: 0 auto 2px !important;
        padding: 0 !important;

        object-fit: contain !important;
    }
}

/* Article/Post Content Typography - Reduce Font Size */
.article-main,
.post-content,
article .entry-content,
.wp-content-body,
[class*="article-content"],
[class*="post-body"] {
    font-size: clamp(14px, 2.2vw, 16px) !important;
    line-height: 1.7 !important;
}

/* Fix text visibility - white text on white background */
.article-main a,
.post-content a,
article .entry-content a,
.wp-content-body a {
    color: #0084ff !important;
    text-decoration: underline !important;
    background-color: transparent !important;
}

/* Reduce excessive white space in article sections */
.article-main,
.post-content,
article .entry-content {
    margin: 1rem 0 !important;
    padding: 0.5rem 0 !important;
}

.article-main p,
.post-content p,
article .entry-content p {
    margin: 0.5rem 0 !important;
    padding: 0 !important;
}

/* Reduce white space in article wrapper */
.article-wraper,
.article-image {
    margin: 0.5rem 0 !important;
    padding: 0 !important;
}

/* Improve footer link visibility */
.footer-social-fixed a {
    transition: all 0.2s ease !important;
}

.footer-social-fixed a:hover {
    transform: scale(1.1) !important;
    opacity: 0.9 !important;
}

```css
/* =========================================================
   TRANG CON: BỎ HOÀN TOÀN KHOẢNG HERO DÀNH CHO VIDEO
   KHÔNG ẢNH HƯỞNG NAVBAR
   ========================================================= */

body:not(.home) .hero-section,
body:not(.front-page) .hero-section {
    min-height: 0 !important;
    height: auto !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Không còn video ở trang con */
body:not(.home) .background-video,
body:not(.front-page) .background-video,
body:not(.home) .video-overlay,
body:not(.front-page) .video-overlay {
    display: none !important;
}

/* Navbar vẫn giữ nguyên, không bị đè/lấp */
body:not(.home) .hero-section .navbar,
body:not(.front-page) .hero-section .navbar {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    z-index: 1000 !important;
}
```