/*

Theme Name: Bá Phát - Sang Tên Xe

Theme URI: https://sangtenxehanoi.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:50%;

  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;

    }

}



/* ================================================================

   TRANG CON: HEADER GỌN (KHÔNG VIDEO) + ARCHIVE / SINGLE

   ================================================================ */

.site-header{

  position:relative;

  z-index:100;

  background:#0a0a0b;

  border-bottom:1px solid rgba(212,175,55,.35);

}

.site-header .navbar{

  padding:16px 56px;

}



.page-main{

  padding:2.5rem 0 1rem;

  color:var(--txt);

  min-height:50vh;

}



.archive-header{

  margin-bottom:2rem;

  padding-bottom:1rem;

  border-bottom:1px solid var(--line);

}

.archive-title,

.single-title{

  color:var(--accent);

  font-size:clamp(24px,3.4vw,38px);

  line-height:1.25;

  margin:0 0 .5rem;

}

.archive-description{

  color:var(--muted);

  line-height:1.6;

}



.post-grid{

  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:1.5rem;

}

.post-card{

  display:flex;

  flex-direction:column;

  background:var(--card);

  border:1px solid var(--line);

  border-radius:var(--radius);

  overflow:hidden;

  box-shadow:var(--shadow);

  transition:transform .2s,border-color .2s;

}

.post-card:hover{

  transform:translateY(-3px);

  border-color:var(--accent);

}

.post-card-thumb{

  display:block;

  aspect-ratio:16/10;

  overflow:hidden;

  background:#000;

}

.post-card-thumb img{

  width:100%;

  height:100%;

  object-fit:cover;

}

.post-card-body{

  display:flex;

  flex-direction:column;

  gap:.6rem;

  padding:1.1rem 1.2rem 1.3rem;

  flex:1;

}

.post-meta{

  font-size:13px;

  color:var(--muted);

}

.post-meta a:hover{color:var(--gold);}

.post-meta-sep{margin:0 .4rem;}

.post-card-title{

  font-size:18px;

  line-height:1.35;

  margin:0;

}

.post-card-title a:hover{color:var(--gold);}

.post-card-excerpt{

  color:var(--muted);

  font-size:14px;

  line-height:1.6;

}

.post-card-more{

  margin-top:auto;

  color:var(--accent);

  font-weight:600;

  font-size:14px;

}

.post-card-more:hover{color:var(--gold);}



/* Phân trang */

.pagination{margin:2.5rem 0 1rem;}

.pagination .nav-links{

  display:flex;

  flex-wrap:wrap;

  justify-content:center;

  gap:8px;

}

.pagination .page-numbers{

  min-width:40px;

  padding:8px 14px;

  text-align:center;

  border:1px solid var(--line);

  border-radius:10px;

  color:var(--txt);

  background:var(--card);

}

.pagination .page-numbers.current,

.pagination a.page-numbers:hover{

  background:var(--accent);

  border-color:var(--accent);

  color:#111;

}



/* Bài viết đơn */

.single-article{

  max-width:820px;

  margin:0 auto;

}

.single-header{margin-bottom:1.2rem;}

.single-thumb{margin-bottom:1.5rem;}

.single-thumb img{

  width:100%;

  height:auto;

  border-radius:var(--radius);

}

.entry-content{

  font-size:17px;

  line-height:1.8;

  color:#e6e6e6;

}

.entry-content > *{margin:0 0 1.1em;}

.entry-content h2,

.entry-content h3,

.entry-content h4{

  color:var(--accent);

  line-height:1.3;

  margin:1.6em 0 .6em;

}

.entry-content h2{font-size:26px;}

.entry-content h3{font-size:21px;}

.entry-content a{

  color:var(--gold);

  text-decoration:underline;

}

.entry-content ul,

.entry-content ol{padding-left:1.4em;}

.entry-content ul{list-style:disc;}

.entry-content ol{list-style:decimal;}

.entry-content img{

  height:auto;

  border-radius:12px;

  margin-inline:auto;

}

.entry-content table{

  width:100%;

  border-collapse:collapse;

  display:block;

  overflow-x:auto;

}

.entry-content th,

.entry-content td{

  border:1px solid var(--line);

  padding:8px 12px;

}

.entry-content th{background:var(--card);color:var(--accent);}

.entry-content blockquote{

  border-left:4px solid var(--accent);

  padding:.4em 1.2em;

  color:var(--muted);

  background:var(--card);

  border-radius:0 12px 12px 0;

}

.single-tags{

  margin-top:2rem;

  color:var(--muted);

  font-size:14px;

}

.single-tags a{color:var(--accent);}

.post-navigation{

  max-width:820px;

  margin:2.5rem auto 0;

}

.post-navigation .nav-links{

  display:flex;

  justify-content:space-between;

  gap:1rem;

}

.post-navigation a{color:var(--accent);}

.post-navigation a:hover{color:var(--gold);}

.no-results{color:var(--muted);}



@media (max-width:980px){

  .post-grid{grid-template-columns:repeat(2,1fr);}

}

@media (max-width:768px){

  .site-header .navbar{padding:12px 14px;}

  .page-main{padding-top:1.5rem;}

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

  .entry-content{font-size:16px;}

}





/* ================================================================

   TEMPLATE TRANG MENU + BÀI VIẾT CON

   ================================================================ */

.bp-btn{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  gap:6px;

  padding:11px 22px;

  border-radius:999px;

  font-weight:700;

  font-size:15px;

  border:1px solid transparent;

  transition:background .2s,color .2s,border-color .2s;

}

.bp-btn-gold{background:var(--gold);color:#111;}

.bp-btn-gold:hover{background:var(--gold-light);}

.bp-btn-line{border-color:var(--gold);color:var(--gold);}

.bp-btn-line:hover{background:var(--gold);color:#111;}



.breadcrumbs{

  font-size:13px;

  color:var(--muted);

  margin-bottom:1rem;

}

.breadcrumbs a:hover{color:var(--gold);}

.bc-sep{margin:0 .5rem;opacity:.6;}

.bc-current{color:var(--txt);}



.page-hero{

  margin-bottom:2rem;

  padding-bottom:1.2rem;

  border-bottom:1px solid var(--line);

}

.page-hero-title{

  color:var(--accent);

  font-size:clamp(28px,4vw,44px);

  line-height:1.2;

  margin:0 0 .6rem;

}

.page-hero-intro{

  color:var(--muted);

  font-size:17px;

  line-height:1.6;

  max-width:760px;

}

.section-intro{margin-bottom:2rem;}



.badge{

  display:inline-block;

  padding:3px 12px;

  margin-bottom:.7rem;

  border-radius:999px;

  background:rgba(212,175,55,.15);

  border:1px solid var(--accent);

  color:var(--gold);

  font-size:12px;

  font-weight:700;

  letter-spacing:.04em;

  text-transform:uppercase;

}



/* ---- Dịch vụ ---- */

.service-grid{

  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:1.2rem;

}

.service-card{

  display:flex;

  flex-direction:column;

  gap:.6rem;

  padding:1.4rem;

  background:var(--card);

  border:1px solid var(--line);

  border-radius:var(--radius);

  box-shadow:var(--shadow);

  transition:transform .2s,border-color .2s;

}

.service-card:hover{transform:translateY(-3px);border-color:var(--accent);}

.service-icon{font-size:28px;}

.service-title{font-size:18px;line-height:1.35;color:var(--gold);margin:0;}

.service-excerpt{color:var(--muted);font-size:14px;line-height:1.6;}

.service-more{margin-top:auto;color:var(--accent);font-weight:600;font-size:14px;}



/* ---- Thủ tục ---- */

.proc-list{list-style:none;display:flex;flex-direction:column;gap:.9rem;padding:0;}

.proc-item{

  display:grid;

  grid-template-columns:64px 1fr auto;

  align-items:center;

  gap:1rem;

  padding:1.1rem 1.3rem;

  background:var(--card);

  border:1px solid var(--line);

  border-left:4px solid var(--accent);

  border-radius:var(--radius);

}

.proc-item:hover{border-color:var(--accent);}

.proc-num{font-size:30px;font-weight:800;color:var(--accent);line-height:1;}

.proc-title{font-size:18px;line-height:1.35;margin:0 0 .3rem;}

.proc-title a:hover{color:var(--gold);}

.proc-excerpt{color:var(--muted);font-size:14px;line-height:1.55;}

.proc-link{color:var(--accent);font-weight:600;font-size:14px;white-space:nowrap;}

.proc-link:hover{color:var(--gold);}



/* ---- Tin tức ---- */

.news-featured{

  display:grid;

  grid-template-columns:1.1fr 1fr;

  gap:1.6rem;

  margin-bottom:2rem;

  background:var(--card);

  border:1px solid var(--line);

  border-radius:var(--radius);

  overflow:hidden;

  box-shadow:var(--shadow);

}

.news-featured-thumb{display:block;min-height:260px;background:#000;}

.news-featured-thumb img{width:100%;height:100%;object-fit:cover;}

.news-featured-body{display:flex;flex-direction:column;gap:.7rem;padding:1.6rem 1.6rem 1.6rem 0;justify-content:center;}

.news-featured:not(:has(.news-featured-thumb)){grid-template-columns:1fr;}

.news-featured:not(:has(.news-featured-thumb)) .news-featured-body{padding:1.6rem;}

.news-featured-title{font-size:clamp(22px,2.6vw,30px);line-height:1.3;margin:0;}

.news-featured-title a:hover{color:var(--gold);}



/* ---- Tài liệu ---- */

.doc-tabs{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1.5rem;}

.doc-tab{

  padding:8px 18px;

  border:1px solid var(--line);

  border-radius:999px;

  background:var(--card);

  font-weight:600;

  font-size:14px;

}

.doc-tab:hover{border-color:var(--accent);color:var(--gold);}

.doc-tab.is-active{background:var(--accent);border-color:var(--accent);color:#111;}

.doc-list{list-style:none;padding:0;display:flex;flex-direction:column;gap:.7rem;}

.doc-item{

  display:grid;

  grid-template-columns:40px 1fr auto;

  align-items:center;

  gap:1rem;

  padding:1rem 1.2rem;

  background:var(--card);

  border:1px solid var(--line);

  border-radius:14px;

}

.doc-item:hover{border-color:var(--accent);}

.doc-icon{font-size:26px;}

.doc-title{font-size:17px;line-height:1.4;margin:0 0 .2rem;}

.doc-title a:hover{color:var(--gold);}

.doc-link{color:var(--accent);font-weight:600;font-size:14px;}



/* ---- Giới thiệu / Liên hệ ---- */

.about-layout{

  display:grid;

  grid-template-columns:1fr 340px;

  gap:2rem;

  align-items:start;

}

.about-info dt{color:var(--muted);font-size:13px;margin-top:.8rem;}

.about-info dd{margin:.1rem 0 0;color:var(--txt);line-height:1.5;}

.about-info a{color:var(--gold);}

.contact-grid{

  display:grid;

  grid-template-columns:repeat(4,1fr);

  gap:1rem;

  margin-bottom:2rem;

}

.contact-card{

  display:flex;

  flex-direction:column;

  gap:.3rem;

  padding:1.3rem;

  background:var(--card);

  border:1px solid var(--line);

  border-radius:var(--radius);

  word-break:break-word;

}

a.contact-card:hover{border-color:var(--accent);}

.contact-icon{font-size:26px;}

.contact-label{color:var(--muted);font-size:13px;}

.contact-value{color:var(--gold);font-weight:700;line-height:1.4;}



/* ---- Bài viết con: 2 cột ---- */

.single-layout{

  display:grid;

  grid-template-columns:minmax(0,1fr) 320px;

  gap:2rem;

  align-items:start;

}

.single-layout .single-article{max-width:none;margin:0;}

.single-sidebar{

  display:flex;

  flex-direction:column;

  gap:1.2rem;

  position:sticky;

  top:16px;

}

.sidebar-box{

  padding:1.2rem 1.3rem;

  background:var(--card);

  border:1px solid var(--line);

  border-radius:var(--radius);

}

.sidebar-box h3{color:var(--accent);font-size:17px;margin:0 0 .7rem;}

.sidebar-cta{display:flex;flex-direction:column;gap:.7rem;border-color:var(--accent);}

.sidebar-cta p{color:var(--muted);font-size:14px;line-height:1.5;}

.sidebar-list{list-style:none;padding:0;display:flex;flex-direction:column;gap:.55rem;}

.sidebar-list a{font-size:14px;line-height:1.45;color:var(--txt);}

.sidebar-list a:hover{color:var(--gold);}

.toc-list{list-style:none;padding:0;display:flex;flex-direction:column;gap:.45rem;}

.toc-list a{font-size:14px;line-height:1.45;color:var(--muted);}

.toc-list a:hover{color:var(--gold);}

.toc-l3{padding-left:1rem;}

.entry-content h2,

.entry-content h3{scroll-margin-top:20px;}



/* ---- Cuối trang ---- */

.cta-band{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:1.5rem;

  flex-wrap:wrap;

  margin:3rem 0 1rem;

  padding:1.8rem 2rem;

  background:linear-gradient(135deg,rgba(212,175,55,.18),rgba(212,175,55,.05));

  border:1px solid var(--accent);

  border-radius:var(--radius);

}

.cta-band h2{color:var(--gold);font-size:22px;margin:0 0 .3rem;}

.cta-band p{color:var(--muted);}

.cta-band-actions{display:flex;gap:.7rem;flex-wrap:wrap;}

.single-related{margin-top:2.5rem;}

.single-tai-lieu .single-article{max-width:820px;margin:0 auto;}

.single-tai-lieu .single-related{max-width:820px;margin-inline:auto;}

.related-title{color:var(--accent);font-size:22px;margin:0 0 1rem;}



@media (max-width:980px){

  .service-grid{grid-template-columns:repeat(2,1fr);}

  .contact-grid{grid-template-columns:repeat(2,1fr);}

  .single-layout,

  .about-layout{grid-template-columns:1fr;}

  .single-sidebar{position:static;}

  .news-featured{grid-template-columns:1fr;}

  .news-featured-body{padding:0 1.4rem 1.4rem;}

}

@media (max-width:768px){

  .service-grid,

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

  .proc-item{grid-template-columns:48px 1fr;}

  .proc-link{grid-column:2;}

  .doc-item{grid-template-columns:32px 1fr;}

  .doc-link{grid-column:2;}

  .cta-band{padding:1.4rem;}

}

/* Widget Zalo: giữa màn hình, sát bên phải */
.zalo-chat-widget {
  position: fixed !important;
  top: 50% !important;
  right: 7px !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  z-index: 99999 !important;
}

/* Nút nhỏ hơn 30%: 45px -> 32px */
.zalo-chat-widget a,
.zalo-chat-widget .button-contact {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  background: #fff;
  border-radius: 50%;
  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;
}

/* Thu nhỏ biểu tượng bên trong nút */
.zalo-chat-widget a img,
.zalo-chat-widget .button-contact img,
.zalo-chat-widget a svg,
.zalo-chat-widget .button-contact svg {
  max-width: 90% !important;
  max-height: 90% !important;
}

/* Điện thoại: vẫn nằm giữa chiều dọc */
@media (max-width: 767px) {
  .zalo-chat-widget {
    top: 70% !important;
    right: 5px !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
  }
}

/* CSS trang tĩnh và trang con Bá Phát. Có thể đặt cuối style.css. */
.abp-page-single {
  width: min(1200px, 92%);
  margin: 0 auto;
  padding: 34px 0 60px;
  color: var(--txt, #f5f5f5);
}
.abp-page-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 24px;
  color: var(--muted, #c9c9c9);
  font-size: 14px;
}
.abp-page-breadcrumb a { color: var(--accent, #d4af37); }
.abp-page-article {
  max-width: 1000px;
  margin: 0 auto;
  min-width: 0;
}
.abp-page-header { margin-bottom: 30px; }
.abp-page-eyebrow {
  color: var(--gold, #ffd700);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
  margin: 0 0 12px;
}
.abp-page-title {
  color: var(--txt, #f5f5f5);
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.15;
  margin: 0 0 18px;
  overflow-wrap: anywhere;
}
.abp-page-intro {
  color: var(--muted, #c9c9c9);
  font-size: 18px;
  line-height: 1.75;
}
.abp-page-featured { margin: 24px 0 0; }
.abp-page-featured img {
  display: block;
  width: 100%;
  max-height: 560px;
  object-fit: cover;
  border-radius: 16px;
}
.abp-page-content {
  min-width: 0;
  font-size: 17px;
  line-height: 1.85;
  overflow-wrap: anywhere;
}
.abp-page-content h2,
.abp-page-content h3 {
  color: var(--gold, #ffd700);
  line-height: 1.35;
  margin: 1.8em 0 .65em;
}
.abp-page-content img,
.abp-page-content video,
.abp-page-content iframe {
  max-width: 100%;
}
.abp-page-content img {
  height: auto;
  border-radius: 10px;
}
.abp-page-content figure { margin: 24px 0; }
.abp-page-content a { color: var(--gold, #ffd700); text-decoration: underline; }
.abp-page-content table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
}
.abp-page-contact {
  margin: 36px 0 20px;
  padding: 28px;
  border: 1px solid var(--line, #252525);
  border-radius: 16px;
  background: var(--card, #141414);
  text-align: center;
}
.abp-page-contact h2 { color: var(--gold, #ffd700); margin: 0 0 10px; }
.abp-page-contact p { color: var(--muted, #c9c9c9); }
.abp-page-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 20px; }
.abp-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 12px 20px;
  border-radius: 999px;
  font-weight: 800;
  text-decoration: none !important;
}
.abp-page-btn-primary { background: var(--gold, #ffd700); color: #111 !important; }
.abp-page-btn-outline { border: 1px solid #aaa; color: var(--txt, #f5f5f5) !important; }
.abp-page-disclaimer { color: var(--muted, #c9c9c9); font-size: 13px; line-height: 1.7; }
.abp-page-children { margin: 42px 0 0; }
.abp-page-children h2 { color: var(--gold, #ffd700); }
.abp-page-children-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.abp-page-child-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  background: var(--card, #141414);
  border: 1px solid var(--line, #252525);
  border-radius: 12px;
  text-decoration: none;
}
.abp-page-child-card strong { color: var(--txt, #f5f5f5); }
.abp-page-child-card span { color: var(--gold, #ffd700); font-size: 14px; }
@media (max-width: 767px) {
  .abp-page-single { padding-top: 24px; }
  .abp-page-children-grid { grid-template-columns: 1fr; }
  .abp-page-contact { padding: 22px 16px; }
  .abp-page-content { font-size: 16px; }
}


/* CAN GIUA ANH TRONG NOI DUNG */
.entry-content img,
.article-main img,
.article-content img,
.post-content img,
.page-content img,
.wp-block-image img,
figure img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

.entry-content figure,
.article-main figure,
.article-content figure,
.post-content figure,
.page-content figure,
.wp-block-image {
    text-align: center;
}
}

/* Căn giữa ảnh trong nội dung bài viết và dịch vụ */
.abp-service-content figure,
.abp-post-content figure,
article.article-main figure {
    width: 100%;
    text-align: center;
}

.abp-service-content figure img,
.abp-post-content figure img,
article.article-main figure img {
    display: block !important;
    width: auto !important;
    max-width: 100%;
    height: auto;
    margin: 0 auto !important;
}



/* ==================================================
   BÁ PHÁT - STYLE NỘI DUNG BÀI VIẾT TRÊN NỀN ĐEN
   Áp dụng cho .ca-so-content và .article-content
   Không thay đổi nội dung, ảnh hoặc URL liên kết
   ================================================== */

/* Nội dung chính */
.ca-so-content,
.article-content {
    color: #E5E7EB;
    font-size: 16px;
    line-height: 1.8;
    overflow-wrap: anywhere;
    word-break: normal;
}

/* Đoạn văn và danh sách */
.ca-so-content p,
.ca-so-content li,
.ca-so-content td,
.ca-so-content th,
.ca-so-content figcaption,
.article-content p,
.article-content li,
.article-content td,
.article-content th,
.article-content figcaption {
    color: #E5E7EB;
    line-height: 1.8;
}

/* Khoảng cách đoạn */
.ca-so-content p,
.article-content p {
    margin-top: 0;
    margin-bottom: 16px;
}

/* Tiêu đề cấp 2 */
.ca-so-content h2,
.article-content h2 {
    color: #FFFFFF;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.5;
    margin: 30px 0 16px;
    padding-left: 12px;
    border-left: 4px solid #FACC15;
}

/* Tiêu đề cấp 3 */
.ca-so-content h3,
.article-content h3 {
    color: #FACC15;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.6;
    margin: 24px 0 12px;
}

/* Tiêu đề cấp 4 */
.ca-so-content h4,
.article-content h4 {
    color: #FFFFFF;
    font-size: 17px;
    font-weight: 700;
    margin: 20px 0 10px;
}

/* Danh sách */
.ca-so-content ul,
.ca-so-content ol,
.article-content ul,
.article-content ol {
    padding-left: 28px;
    margin: 0 0 22px;
}

.ca-so-content li,
.article-content li {
    margin-bottom: 10px;
}

/* Liên kết */
.ca-so-content a,
.article-content a {
    color: #7DD3FC;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color 0.2s ease;
}

.ca-so-content a:hover,
.article-content a:hover {
    color: #FACC15;
}

/* Chữ đậm */
.ca-so-content strong,
.ca-so-content b,
.article-content strong,
.article-content b {
    color: #FFFFFF;
    font-weight: 700;
}

/* Ảnh */
.ca-so-content img,
.article-content img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

/* Hình và chú thích */
.ca-so-content figure,
.article-content figure {
    max-width: 100%;
    margin: 24px auto;
    text-align: center;
}

.ca-so-content figcaption,
.article-content figcaption {
    color: #CBD5E1;
    font-size: 14px;
    line-height: 1.6;
    margin-top: 8px;
}

/* Bảng */
.ca-so-content table,
.article-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    background: transparent;
}

.ca-so-content th,
.ca-so-content td,
.article-content th,
.article-content td {
    border: 1px solid #475569;
    padding: 10px 12px;
    text-align: left;
    vertical-align: top;
}

.ca-so-content th,
.article-content th {
    color: #FACC15;
    background: #1F2937;
    font-weight: 700;
}

/* Khung thông tin liên hệ */
.ca-so-content .contact-info,
.article-content .contact-info {
    background: #171717;
    border: 1px solid #475569;
    border-left: 4px solid #FACC15;
    border-radius: 8px;
    padding: 20px;
    margin: 28px 0;
}

.ca-so-content .contact-info p,
.article-content .contact-info p {
    margin: 8px 0;
}

/* Nội dung được đánh dấu */
.ca-so-content mark,
.ca-so-content .highlight,
.article-content mark,
.article-content .highlight {
    background: #3B3210;
    color: #FDE68A;
    padding: 2px 5px;
    border-radius: 3px;
}

/* Trích dẫn */
.ca-so-content blockquote,
.article-content blockquote {
    margin: 24px 0;
    padding: 16px 20px;
    background: #171717;
    border-left: 4px solid #FACC15;
    color: #E5E7EB;
}

/* Đường phân cách */
.ca-so-content hr,
.article-content hr {
    border: 0;
    border-top: 1px solid #475569;
    margin: 28px 0;
}

/* Mã hoặc nội dung kỹ thuật */
.ca-so-content code,
.article-content code {
    color: #FDE68A;
    background: #1F2937;
    padding: 2px 5px;
    border-radius: 3px;
}

/* Điện thoại */
@media (max-width: 768px) {
    .ca-so-content,
    .article-content {
        font-size: 15px;
        line-height: 1.75;
    }

    .ca-so-content h2,
    .article-content h2 {
        font-size: 21px;
        margin-top: 24px;
    }

    .ca-so-content h3,
    .article-content h3 {
        font-size: 18px;
    }

    .ca-so-content ul,
    .ca-so-content ol,
    .article-content ul,
    .article-content ol {
        padding-left: 22px;
    }

    .ca-so-content .contact-info,
    .article-content .contact-info {
        padding: 14px;
    }

    .ca-so-content table,
    .article-content table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

.contact-info {
    max-width: 600px;
    margin: 30px auto;
    padding: 20px;
    text-align: center;
    box-sizing: border-box;
}

.contact-info p {
    text-align: center;
    line-height: 1.8;
    margin: 0 0 12px;
}

.contact-info img {
    display: block;
    max-width: 160px;
    width: 100%;
    height: auto;
    margin: 12px auto;
}

.contact-info a {
    overflow-wrap: anywhere;
}

.contact-info p:last-child {
    margin-bottom: 0;
}




/* ==================================================
   BA PHAT - CATEGORY ARCHIVE
   4 COT x 4 HANG, CHI HIEN ANH VA TIEU DE
   Ap dung: dich-vu, thu-tuc, bieu-mau
   ================================================== */

/* Khung danh sach bai viet */
body.category .page-main .grid.cols-3 {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    align-items: stretch !important;
}

/* The bai viet */
body.category .page-main .grid.cols-3 > article.card {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
}

/* Link bao quanh anh va tieu de */
body.category .page-main .grid.cols-3 > article.card > a {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    text-decoration: none !important;
}

/* Anh dai dien */
body.category .page-main .grid.cols-3 > article.card img {
    display: block !important;
    width: 100% !important;
    height: 145px !important;
    min-height: 145px !important;
    object-fit: cover !important;
    margin: 0 !important;
}

/* Vung chua tieu de */
body.category .page-main .grid.cols-3 > article.card .pad {
    display: block !important;
    padding: 10px 8px !important;
    flex: 1 0 auto !important;
    text-align: center !important;
}

/* Chi hien tieu de - an mo ta va nut */
body.category .page-main .grid.cols-3 > article.card p,
body.category .page-main .grid.cols-3 > article.card .service-more,
body.category .page-main .grid.cols-3 > article.card .entry-summary {
    display: none !important;
}

/* Tieu de bai viet */
body.category .page-main .grid.cols-3 > article.card h2 {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    overflow: hidden !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    font-weight: 700 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    overflow-wrap: anywhere !important;
}

/* Phan trang */
body.category .page-main .navigation.pagination {
    margin-top: 24px !important;
}

/* Laptop va man hinh vua: 3 cot */
@media (max-width: 1100px) {
    body.category .page-main .grid.cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }
}

/* Dien thoai va tablet: 2 cot */
@media (max-width: 768px) {
    body.category .page-main .grid.cols-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    body.category .page-main .grid.cols-3 > article.card img {
        height: 120px !important;
        min-height: 120px !important;
    }

    body.category .page-main .grid.cols-3 > article.card .pad {
        padding: 8px 6px !important;
    }

    body.category .page-main .grid.cols-3 > article.card h2 {
        font-size: 13px !important;
    }
}

/* ================================================================
   BREADCRUMB NAVIGATION - Phase 1 SEO
   ================================================================ */

.baphat-breadcrumb {
    padding: 12px 20px;
    background: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 20px;
}

.baphat-breadcrumb-nav {
    max-width: 1200px;
    margin: 0 auto;
}

.baphat-breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 14px;
    gap: 8px;
}

.baphat-breadcrumb-item {
    display: inline-flex;
    align-items: center;
}

.baphat-breadcrumb-item a {
    color: #0066cc;
    text-decoration: none;
    transition: color 0.2s;
}

.baphat-breadcrumb-item a:hover {
    color: #004499;
    text-decoration: underline;
}

.baphat-breadcrumb-item:last-child {
    color: #333;
    font-weight: 500;
}

.baphat-breadcrumb-separator {
    color: #999;
    margin: 0 4px;
}

@media (max-width: 768px) {
    .baphat-breadcrumb {
        padding: 10px 15px;
    }
    
    .baphat-breadcrumb-list {
        font-size: 13px;
    }
}
 /* Ẩn nút lên đầu trang trên điện thoại và máy tính bảng */
@media screen and (max-width: 768px) {
    html body #backToTop,
    html body button#backToTop {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}
 
 /* Căn logo giữa khối thông tin công ty trong footer */
@media (min-width: 769px) {
    footer .footer-brand {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
    }

    footer .footer-brand > img {
        flex: 0 0 55px !important;
        width: 55px !important;
        height: 55px !important;
        max-width: 55px !important;
        object-fit: contain !important;
        align-self: center !important;
    }
}