:root{
  --brand-800:#6f6222;
  --brand-700:#6f6222;
  --brand-600:#9b862b;
  --brand-500:#b79d33;
  --brand-400:#d1b645;
  --brand-300:#e4cb61;

  --white:#fff;
  --bg:#ffffff;
  --bg-soft:#faf8f3;
  --text:#1f2937;
  --muted:#6b7280;

  --topbar-h:36px;
  --header-h:80px;
  --radius:10px;
  --font:Arial, sans-serif;
}
    .fb-float{
  position: fixed;
  right: 18px;
  bottom: 20px;                
  z-index: 5000;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  background: #0068ff;
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
    .zalo-float{
  position: fixed;
  right: 18px;
  bottom: 90px;                
  z-index: 5000;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  background: #0068ff;
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.zalo-float:hover,.fb-float:hover{
  background: #0050c7;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
}

.zalo-float img,.fb-float img{
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: block;
  background: #fff;
}

/* Nhấp nháy nhẹ để thu hút */
@keyframes zalo-bounce{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-3px); }
}
@keyframes fb-bounce{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-3px); }
}
.zalo-float.pulse,.fb-float.pulse{
  animation: zalo-bounce 1.6s ease-in-out infinite;
}

/* Mobile: thu nhỏ lại 1 chút */
@media (max-width: 768px){
  .zalo-float{
    right: 12px;
    bottom: 80px;
    padding: 8px 10px;
    font-size: 0.85rem;
  }
  .zalo-float img{
    width: 24px;
    height: 24px;
  }
}
 .home-news{
  padding: 40px 0 60px;

}
.home-news h2{
  text-align: center;
  color: var(--brand-700);
  margin-bottom: 24px;
  font-size: 1.8rem;
}
.home-news-list{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.home-news-item{
  background: #fff;
  border: 1px solid #f0ead6;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 4px 10px rgba(0,0,0,.04);
  transition: transform .2s ease, box-shadow .2s ease;
}
.home-news-item:hover{
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0,0,0,.08);
}
.home-news-item h3{
  margin: 8px 0 6px;
  font-size: 1.1rem;
  color: #0f172a;
}
.home-news-item .meta{
  font-size: .9rem;
  color: #6b7280;
  margin-bottom: 8px;
}
.home-news-item img{
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 8px;
  margin: 6px 0 10px;
}
.home-news-more{
  text-align: center;
  margin-top: 20px;
}
.home-news-more a{
  font-weight: 700;
  color: var(--brand-700);
}
.home-news-more a:hover{
  text-decoration: underline;
}
.news-detail {
  max-width: 860px;
  margin: 14px auto 0;
  background: #fff;
  border: 1px solid #f0ead6;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
  padding: 22px 20px;
}

.news-detail h1 {
  margin: 0 0 6px;
  color: #0f172a;
  font-size: 1.8rem;
}

.news-detail .meta {
  color: #6b7280;
  margin-bottom: 12px;
  font-size: .95rem;
}

.news-detail .cover {
  height: 320px;
  border: 1px solid #f0ead6;
  border-radius: 12px;
  overflow: hidden;
  margin: 12px 0 16px;
}
.news-detail .cover img { width: 100%; height: 100%; object-fit: cover; }

.news-detail .content {
  line-height: 1.8;
  color: #1f2937;
}
.news-detail .content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 10px auto;
  border-radius: 8px;
}
.news-detail .back-row {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 18px; gap: 10px;
}
.news-detail .btn-back {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--brand-700);
  color: var(--brand-700);
  font-weight: 700; text-decoration: none;
}
.home-news-item a{
  color: #0f172a;
  font-weight: 700;
}

.home-news-item a:hover{
  color: var(--brand-700);
  
}
.news-detail .btn-back:hover { background: var(--brand-700); color: #fff; }

    /* ========== ABOUT (GIOI THIEU) LAYOUT REFINEMENTS ========== */
.section-separator {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, #f0ead6, #e6ddbf, #f0ead6);
  margin: 26px 0;
}

.about-hero {
  background: linear-gradient(180deg, var(--bg-soft), #fff);
  border-bottom: 1px solid #ece8d9;
}
.about-hero .container {
  max-width: 1100px;
}
.about-hero h1 {
  color: var(--brand-700);
  font-size: 2rem;
  margin: 0 0 10px;
}
.about-hero p.lead {
  color: #444;
  font-size: 1.05rem;
  margin: 0;
}

.about-wrap {
  padding: 40px 0 50px;
}
.about-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 30px;
  align-items: start;
}
.about-content .block + .block { margin-top: 20px; }
.about-content h2 { color: var(--brand-700); margin: 8px 0 10px; }
.about-content h3 { color: var(--brand-600); margin: 6px 0 8px; }
.about-content ul, .about-content ol { padding-left: 18px; }
.about-content li { margin: 6px 0; }
.about-content p { color:#444; }

.about-aside {
  position: sticky;
  top: calc(var(--topbar-h) + var(--header-h) + 18px);
}
.about-card {
  background: #fff;
  border: 1px solid #f0ead6;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
  padding: 18px;
}
.about-card h3 {
  margin: 0 0 6px;
  color:#0f172a;
  font-size: 1.15rem;
}
.about-bullets {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.about-bullets li {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 0; border-top: 1px dashed #ecdca9;
}
.about-bullets li:first-child { border-top: 0; }
.about-bullets .dot {
  width: 10px; height: 10px; border-radius: 999px;
  background: linear-gradient(135deg, var(--brand-400), var(--brand-600));
  margin-top: 6px;
}
.about-cta {
  display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 14px;
}
.about-cta .btn-solid { text-align:center; }

.contact-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid #f0ead6;
  box-shadow: 0 4px 10px rgba(0,0,0,.05);
}
.contact-table thead th {
  background: linear-gradient(180deg, #fffaf0, #fff);
  color: #0f172a;
  text-align: left;
  padding: 12px 14px;
  font-weight: 800;
  border-bottom: 1px solid #f0ead6;
}
.contact-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid #f7f2df;
}
.contact-table tbody tr:last-child td { border-bottom: 0; }
.contact-table a { color: var(--brand-700); font-weight: 700; }
.contact-table a:hover { text-decoration: underline; }
@media (max-width: 480px){
  .hero-slider{
    height: 420px;
  }

  .slider-caption{
    top: 58%;
  }

  .slider-caption h2{
    font-size: 1.3rem;
  }

  .slider-caption p{
    font-size: 0.85rem;
  }
}
@media (max-width: 992px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-aside { position: static; }
  .about-hero h1 { font-size: 1.6rem; }
}


*{box-sizing:border-box}
body{margin:0;padding:0;font-family:var(--font);color:var(--text);line-height:1.6;background:var(--bg)}
.container{max-width:1200px;margin:0 auto;padding:0 15px}
a{color:var(--brand-700);text-decoration:none ;}

h1,h2,h3{color:#0f172a;margin-top:0}


/* =========================
   HEADER – nền trắng, logo trái, menu phải
========================= */
.header{
 
 position: fixed;
  top: 0;                   /* nằm ngay dưới topbar */
  left: 0; right: 0;
  z-index: 4000;
  background-color:black;
  opacity: 0.7;
text-align:right;
  
  /* bỏ overflow: hidden nếu có */
  overflow: visible;
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  min-height:var(--header-h);
}
.logo{position:relative;display:inline-block;text-align:left;}
.logo img{height: 70px;display:block;transition:opacity .3s ease}
.logo img.hover-logo{
  position:absolute;top:0;left:0;opacity:0;pointer-events:none;
  transition:opacity .3s ease, transform .3s ease;
}
.logo:hover img.default-logo{opacity:0}
.logo:hover img.hover-logo{opacity:1;transform:scale(1.15)}

/* Nav desktop */
.main-nav ul{display:flex;gap:32px;list-style:none;margin:0;padding:0;align-items:center}
.nav-link{
  color:var(--white);
  font-weight:700;
  position:relative;
  padding:10px 0;
  letter-spacing:.2px;
  transition:opacity .2s ease;
}
.nav-link::after{
  content:"";position:absolute;left:0;bottom:2px;height:2px;width:0%;
  background:linear-gradient(90deg,var(--brand-400),var(--brand-600));
  border-radius:2px;transition:width .25s ease;
}
.nav-link:hover{opacity:.9}
.nav-link:hover::after,.nav-link.active::after{width:100%}

/* CTA phải */
.header-cta{display:flex;align-items:center;gap:10px}
.btn-solid{
  background:var(--brand-600);color:#fff;font-weight:800;
  padding:10px 14px;border-radius:var(--radius);
  box-shadow:0 6px 16px rgba(107,83,16,.18);
  transition:transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.btn-solid:hover{background:var(--brand-500);transform:translateY(-1px)}
.btn-ghost{
  border:1px solid var(--brand-700);color:var(--brand-700);
  padding:9px 12px;border-radius:var(--radius);font-weight:700;
  transition:background .15s ease, color .15s ease;
}
.btn-ghost:hover{background:var(--brand-700);color:#fff}
.mobile-menu-toggle{
  display:none;font-size:28px;background:none;border:none;color:var(--brand-700);cursor:pointer
}

/* =========================
   SECTIONS (SPA)
========================= */
.section{display:none}
.section.active{display:block}

/* =========================
   HOME – hero & dịch vụ nổi bật
========================= */
.hero-slider{position:relative;width:100%;height:900px;overflow:hidden;
  margin-top: calc(-1 * (var(--topbar-h) + var(--header-h)));
  padding-top: calc(var(--topbar-h) + var(--header-h));}
.slider-item{position:absolute;inset:0;display:none;animation:fadeIn 1.3s ease-in-out}
.slider-item.active{display:block}
.slider-item img{width:100%;height:100%;object-fit:cover}
.slider-caption{
  position:absolute;top:50%;left:10%;transform:translateY(-50%);
  color:#fff;text-align:left;max-width:40%;z-index:10
}
.slider-caption h2{
  font-size: 2.4em;
  margin-bottom: 15px;
  color: #fff;
}
.slider-caption p{
  font-size: 1.05em;
  margin-bottom: 24px;
  color: #f7f6ee;
}
.slider-caption .btn-solid{background:var(--brand-500)}
.slider-caption .btn-solid:hover{background:var(--brand-400)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* Nút & dots của slider */
.hero-prev,.hero-next{
  position:absolute;top:50%;transform:translateY(-50%);
  background:rgba(0,0,0,.35);border:none;color:#fff;
  font-size:28px;line-height:1;padding:10px 14px;cursor:pointer;border-radius:8px;z-index:20
}
.hero-prev{left:14px}
.hero-next{right:14px}
.hero-prev:hover,.hero-next:hover{background:rgba(0,0,0,.5)}
.slider-dots{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:16px;display:flex;gap:8px;z-index:20
}
.slider-dots button{
  width:10px;height:10px;border-radius:50%;border:0;cursor:pointer;
  background:#ffffff88
}
.slider-dots button.active{background:#fff}

.featured-services{background:var(--bg-soft);padding:60px 0;text-align:center}
.featured-services h2{font-size:2em;margin-bottom:36px;color:#0f172a}
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:28px}
.service-item{
  background:#fff;padding:28px;border-radius:12px;
  box-shadow:0 4px 10px rgba(0,0,0,.06);
  border:1px solid #f0ead6;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.service-item:hover{
  transform:translateY(-8px);
  box-shadow:0 12px 24px rgba(156,125,29,.18);
  border-color:#ecdca9;
}
.service-item img{height:68px;margin-bottom:12px;filter:grayscale(40%) sepia(25%) hue-rotate(10deg) saturate(120%)}
.service-item h3{font-size:1.35em;margin:8px 0 6px 0;color:#0f172a}
.service-item p{color:#4b5563}

/* =========================
   GIỚI THIỆU
========================= */
.about-hero{
  background:linear-gradient(180deg,#faf8f3,#fff);
  text-align:center;padding:60px 20px 40px;
}
.about-hero h1{font-size:2.2em;color:var(--brand-700);margin-bottom:12px}
.about{padding:40px 0}
.about-content{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.about-content img{width:100%;border-radius:12px;box-shadow:0 6px 16px rgba(0,0,0,.08)}
.about p{margin-bottom:14px;color:#444;font-size:1.05em}
.about strong{color:var(--brand-600)}

/* =========================
   DỊCH VỤ
========================= */
.services-page{padding:50px 0}
.services-page h2{text-align:center;color:var(--brand-700);margin-bottom:28px}
.service-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px}
.service-card{
  background:#fff;border:1px solid #f0ead6;border-radius:12px;padding:22px;
  box-shadow:0 4px 10px rgba(0,0,0,.05);transition:.25s
}
.service-card:hover{transform:translateY(-6px);box-shadow:0 10px 20px rgba(0,0,0,.08)}
.service-card h3{color:var(--brand-600);margin:8px 0 10px}
.service-card p{color:#4b5563}

/* =========================
   TIN TỨC
========================= */
.news{padding:50px 0}
.news h2{text-align:center;color:var(--brand-700);margin-bottom:24px}
.news-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.news-item{
  background:#fff;border:1px solid #f0ead6;border-radius:12px;padding:18px;transition:.25s
}
.news-item:hover{transform:translateY(-6px);box-shadow:0 10px 20px rgba(0,0,0,.08)}
.news-item h4{margin:10px 0 8px;color:#0f172a}
.news-item p{margin:0;color:#4b5563}
/* ===== Tables inside news detail content ===== */
.news-detail .content {
  line-height: 1.8;
  color: #1f2937;
  overflow-x: auto;              /* nếu bảng rộng hơn màn hình mobile thì kéo ngang */
}

.news-detail .content table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0 16px;
  background: #fff;
}

.news-detail .content th,
.news-detail .content td {
  border: 1px solid #e6ddbf;     /* viền vàng nhạt hợp theme */
  padding: 10px 12px;
  vertical-align: top;
}

.news-detail .content thead th {
  background: #fffaf0;           /* header nhẹ nhàng */
  color: #0f172a;
  font-weight: 700;
}

.news-detail .content caption {
  caption-side: top;
  text-align: left;
  font-weight: 700;
  padding: 6px 0;
  color: #7f7024;
}

/* Nếu bảng có nhiều cột, nhắc min-width để tránh bị bóp chữ quá nhỏ */
@media (max-width: 768px){
  .news-detail .content table { min-width: 640px; } /* có scrollbar ngang nhờ overflow-x ở .content */
}

/* =========================
   LIÊN HỆ
========================= */
.contact{padding:50px 0}
.contact h2{text-align:center;color:var(--brand-700);margin-bottom:24px}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.contact .card{
  background:#fff;border:1px solid #f0ead6;border-radius:12px;padding:20px;
  box-shadow:0 4px 10px rgba(0,0,0,.05)
}
.form-field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
input,textarea{
  border:1px solid #e6ddbf;border-radius:10px;padding:10px 12px;font-family:inherit
}
textarea{min-height:120px;resize:vertical}

/* =========================
   FOOTER
========================= */
.footer{background:#1f1f1f;color:#e9e9e9;padding:50px 0 20px 0}
.footer .container{display:flex;justify-content:space-between;flex-wrap:wrap;gap:30px}
.footer-col{flex:1;min-width:250px}
.footer-col h3{color:#fff;margin-bottom:18px;font-size:1.25em}
.footer-col p{font-size:.95em;line-height:1.8;margin-bottom:10px;color:#ddd}
.footer-col ul{list-style:none;margin:0;padding:0}
.footer-col ul li{margin-bottom:10px}
.footer-col ul li a{color:#dacf9a}
.footer-col ul li a:hover{color:#f0e2a9;text-decoration:underline}
.social-links img{height:30px;margin-right:10px;filter:sepia(40%) hue-rotate(10deg) saturate(120%)}
.copyright{text-align:center;padding-top:28px;margin-top:28px;border-top:1px solid #303030;font-size:.9em;color:#bdbdbd}

/* =========================
   ACCESSIBILITY
========================= */
a:focus-visible,.btn-solid:focus-visible,.btn-ghost:focus-visible,.nav-link:focus-visible{
  outline:3px solid rgba(183,157,51,.45);outline-offset:2px;border-radius:6px;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width:992px){
  .btn-ghost{display:none}
  .main-nav ul{gap:22px}
  .slider-caption{max-width:70%}
}
@media (max-width:768px){
  .mobile-menu-toggle{display:block}
  .main-nav{
    position:fixed;right:0;top:calc(var(--topbar-h)+var(--header-h));
   width:72%;max-width:330px;
    height:calc(100vh - var(--topbar-h) - var(--header-h));
    box-shadow:-4px 0 18px rgba(0,0,0,.12);
    transform:translateX(100%);opacity:0;pointer-events:none;
    transition:all .25s ease;
        background: rgba(255,255,255,.70);    /* trắng 70% cho dễ đọc chữ */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 4001;  
  }
  .logo img{height:32px;}

  .main-nav.open{transform:translateX(0);opacity:1;pointer-events:auto}
  .main-nav ul{flex-direction:column;padding:20px}
  .nav-link{color:var(--brand-700);font-size:1.08em}
  .hero-slider{height:460px}
   .slider-caption{
    top: 79%;                      /* chữ nằm thấp xuống 1 chút */
    left: 6%;
    right: 6%;
    max-width: 88%;                /* rộng hơn cho chữ dễ xuống dòng */
    transform: translateY(-50%);
  }
  .slider-caption h2{font-size:1.2em}
}
.hero-slider:not(.js-ready) .slider-item:first-child { display:block; }
/* Fallback nếu tắt JS: hiện slide đầu */
noscript .slider-item:first-child{display:block}
/* ===== Quote lead in ABOUT hero ===== */
.about-hero .quote-lead{
  position: relative;
  background: rgba(255,255,255,0.85);          /* nền trắng mờ */
  border: 1px solid rgba(0,0,0,0.15);          /* viền khung đen mờ */
  border-radius: 14px;
  padding: 22px 22px 22px 64px;
  font-size: 1.15rem;
  line-height: 1.7;
  color: #222;
  box-shadow: 0 8px 24px rgba(0,0,0,0.04);
}

.about-hero .quote-lead::before{
  content: "“";
  position: absolute;
  left: 16px; top: -8px;
  font-size: 72px; line-height: 1;
  color: rgba(0,0,0,0.15);                     /* dấu ngoặc kép to, mờ */
  font-family: Georgia, "Times New Roman", serif;
}

.about-hero .quote-lead::after{
  content: "”";
  position: absolute;
  right: 12px; bottom: -42px;
  font-size: 72px; line-height: 1;
  color: rgba(0,0,0,0.08);
  font-family: Georgia, "Times New Roman", serif;
}

.about-hero .quote-lead strong{
  color: var(--brand-700);                     /* nhấn mạnh với màu thương hiệu */
}

@media (max-width: 768px){
  .about-hero .quote-lead{
    padding: 18px 16px 18px 48px;
    font-size: 1.02rem;
  }
  .about-hero .quote-lead::after{ display: none; }
}

#news-article h1{margin:0 0 6px;color:#0f172a}
#news-article .meta{color:#6b7280;margin-bottom:12px}
#news-article .cover{height:280px;border:1px solid #f0ead6;border-radius:12px;overflow:hidden;margin:10px 0}
#news-article .cover img{width:100%;height:100%;object-fit:cover}
#news-article .content{line-height:1.75;color:#1f2937}
@media (max-width: 768px){
  .main-nav{
    position: fixed;
    top: calc(var(--topbar-h) + var(--header-h)); 
    right: 0;
    width: 80%;
    max-width: 360px;
    
    max-height: calc(100vh - var(--topbar-h) - var(--header-h));
    height: auto;
    overflow-y: auto;          
    z-index: 2000;             
    background: #fff;
    box-shadow: -4px 0 18px rgba(0,0,0,.12);
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
    transition: all .25s ease;
  }
  .main-nav.open{
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
  }
  .main-nav ul{
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
    margin: 0;
    list-style: none;
  }
  .nav-link{
    display: block;
    font-size: 1.08em;
    padding: 10px 0;
  }

  body.menu-open{ overflow: hidden; }
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

.contact-map .map-wrapper {
  width: 100%;
  height: 340px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #f0ead6;
  margin-top: 8px;
}

.contact-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 768px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
  .contact-map .map-wrapper {
    height: 260px;
  }
}