/* =========================================================
   QUẢNG BÌNH ƠI - theme WordPress thật (dựng trên Aloxovn Base)
   Port trung thành 1:1 từ html-view/css/style.css (bản mockup đã
   được duyệt). Thay đổi so với bản mockup CHỈ GỒM:
   - thêm selector .current-menu-item/.current_page_item cho menu
     thật WordPress (wp_nav_menu không tự gắn class "is-active");
   - bỏ khối ".floating-contacts/.back-to-top" vì các icon nổi
     (Zalo/Messenger/Hotline/Lên đầu trang) do plugin
     icon-support-buttons-v2.9 tự chèn độc lập qua JS riêng của nó,
     theme không hard-code lại (xem footer.php).
   Toàn bộ phần còn lại GIỮ NGUYÊN không đổi.
   ========================================================= */

:root{
  --color-primary:#ef7f1a;      /* cam thương hiệu (tiêu đề, icon) */
  --color-primary-dark:#d96c0c;
  --color-accent:#e8432f;       /* đỏ cam (nút Hotline, Xem chi tiết) */
  --color-accent-dark:#c7301f;
  --color-nav-bg:#ff8c00;       /* cam nền thanh menu */
  --color-green:#2f9e44;        /* xanh lá (subtitle, icon giờ mở cửa) */
  --color-green-dashed:#3cb371; /* viền nét đứt khối thông tin nhanh */
  --color-cream:#fff9e6;        /* nền khối thông tin nhanh */
  --color-text:#333333;
  --color-muted:#777777;
  --color-footer-bg:#363b44;
  --color-footer-bar:#111111;
  --color-border:#eaeaea;
  --radius-sm:6px;
  --radius-md:10px;
  --container-width:1200px;
  --font-heading:"Georgia","Bona Nova",serif;
  --font-body:"Segoe UI",Roboto,Arial,sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--color-text);
  background:#ffffff;
  line-height:1.6;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
.container{
  max-width:var(--container-width);
  margin:0 auto;
  padding:0 20px;
}

/* ---------- Header ---------- */
.site-header{
  background:#ffffff;
  padding:16px 0;
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
}
.site-branding{
  display:flex;
  align-items:center;
  gap:16px;
}
.site-branding img{
  width:78px;
  height:78px;
}
.site-branding h1{
  margin:0;
  font-size:22px;
  letter-spacing:.3px;
  color:var(--color-primary);
  font-family:var(--font-heading);
}
.site-branding p{
  margin:4px 0 0;
  font-size:17px;
  font-weight:700;
  font-style:italic;
  color:var(--color-green);
}
.header-hotline{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.header-hotline a{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:linear-gradient(135deg,#ff6a3d,var(--color-accent));
  color:#fff;
  font-weight:800;
  font-size:19px;
  padding:12px 26px;
  border-radius:30px;
  box-shadow:0 4px 10px rgba(232,67,47,.35);
  transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.header-hotline a:hover,
.header-hotline a:focus-visible{
  transform:translateY(-2px) scale(1.05);
  box-shadow:0 8px 18px rgba(232,67,47,.5);
  filter:brightness(1.06);
}
.header-hotline svg{width:18px;height:18px;fill:#fff;}

/* Nút "Nhắn Zalo" cạnh hotline - nền trắng viền xanh Zalo, phân biệt với nút Hotline cam */
.header-hotline a.btn-zalo-header{
  background:#fff;
  color:#0068ff;
  font-size:17px;
  padding:11px 24px;
  border:2px solid #0068ff;
  box-shadow:none;
}
.header-hotline a.btn-zalo-header:hover,
.header-hotline a.btn-zalo-header:focus-visible{
  background:#0068ff;
  color:#fff;
  box-shadow:0 8px 18px rgba(0,104,255,.35);
  filter:none;
}
.header-hotline a.btn-zalo-header img{width:20px;height:20px;}
@media (max-width:600px){
  .header-hotline{width:100%;justify-content:center;}
  .header-hotline a{font-size:16px;padding:10px 18px;}
}

/* ---------- Main nav ---------- */
.main-nav{
  background:var(--color-nav-bg);
}
.main-nav ul{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
}
.main-nav li{
  position:relative;
}
.main-nav li:not(:last-child)::after{
  content:"";
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  width:1px;
  height:14px;
  background:rgba(255,255,255,.5);
}
.main-nav a{
  position:relative;
  display:block;
  padding:14px 18px;
  color:#fff;
  font-weight:600;
  font-size:15px;
  white-space:nowrap;
}
.main-nav a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:3px;
  background:#ff0000;
  opacity:0;
  transition:opacity .3s cubic-bezier(.58,.3,.005,1);
}
.main-nav a:hover::after,
.main-nav a.is-active::after,
.main-nav li.current-menu-item > a::after,
.main-nav li.current_page_item > a::after,
.main-nav li.current-menu-ancestor > a::after{
  opacity:1;
}
.nav-toggle{
  display:none;
  background:none;
  border:none;
  color:#fff;
  font-size:26px;
  padding:10px 16px;
  cursor:pointer;
}
/* Menu mobile: nút hamburger hiện ra, menu ngang thu gọn thành dropdown
   dọc, ẩn/hiện bằng class "is-open" (gắn qua js/main.js khi bấm nút). */
@media (max-width:860px){
  .main-nav .container{
    flex-wrap:wrap;
    justify-content:flex-start;
    padding-top:4px;
    padding-bottom:4px;
  }
  .nav-toggle{display:block;}
  .main-nav nav{
    display:none;
    width:100%;
    order:3;
  }
  .main-nav nav.is-open{display:block;}
  .main-nav nav ul{
    flex-direction:column;
    align-items:stretch;
  }
  .main-nav li:not(:last-child)::after{display:none;}
  .main-nav li{border-top:1px solid rgba(255,255,255,.2);}
  .main-nav a{padding:12px 6px;}
}

/* ---------- Breadcrumb ---------- */
.breadcrumb{
  padding:16px 0;
  font-size:14px;
  color:var(--color-muted);
}
.breadcrumb a{color:var(--color-accent);}
.breadcrumb .sep{margin:0 6px;opacity:.6;}
.breadcrumb .current{color:var(--color-text);}

/* ---------- Section heading với gạch chấm 2 bên ---------- */
.section-title{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  margin:46px 0 26px;
  text-align:center;
}
.section-title .line{
  flex:0 0 90px;
  height:8px;
  background:repeating-linear-gradient(90deg,var(--color-primary) 0 6px,transparent 6px 12px);
  border-radius:4px;
}
.section-title h2{
  margin:0;
  font-size:24px;
  color:var(--color-primary);
  text-transform:uppercase;
  font-weight:800;
}
.section-title h2 a{color:inherit;}

/* ---------- Layout 2 cột (nội dung + sidebar) ----------
   Tỉ lệ đo thật trên site gốc (DevTools getBoundingClientRect):
   cột nội dung 783.86px, sidebar 316.14px, gap 20px (≈70%/30%). */
.content-layout{
  display:grid;
  grid-template-columns:7fr 3fr;
  gap:20px;
  align-items:start;
  padding:10px 0 40px;
}
@media (max-width:860px){
  .content-layout{grid-template-columns:1fr;}
}
/* Khối nội dung chính dạng "card" - viền + bóng nhẹ cho chuyên nghiệp hơn
   nền trắng trôi tự do trước đây. */
.content-layout main{
  background:#fff;
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  box-shadow:0 2px 14px rgba(20,20,20,.06);
  padding:26px 30px 32px;
}
@media (max-width:600px){
  .content-layout main{padding:20px 18px 26px;}
}

/* ---------- Khối thông tin nhanh / dashed box ---------- */
.info-box{
  background:var(--color-cream);
  border:2px dashed var(--color-green-dashed);
  border-radius:var(--radius-md);
  padding:16px 18px;
  margin:20px 0;
  font-size:14px;
}
.info-box h3{
  margin:0 0 12px;
  color:var(--color-primary);
  font-size:17px;
  text-transform:uppercase;
}
.info-box ul li{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin-bottom:8px;
  color:var(--color-accent);
  font-weight:600;
}
.info-box ul li:last-child{margin-bottom:0;}
.info-box svg{flex:0 0 16px;width:16px;height:16px;margin-top:3px;fill:var(--color-accent);}
.info-box .btn-hotline{
  display:inline-block;
  margin:6px 0 10px;
  background:linear-gradient(135deg,#ff8c00,#f2295b);
  color:#fff;
  font-weight:700;
  font-size:13px;
  padding:8px 16px;
  border-radius:20px;
  box-shadow:0 4px 10px rgba(232,67,47,.35);
}

/* ---------- Sidebar widget box ---------- */
.widget{margin-bottom:30px;}
.widget h3{
  color:var(--color-primary);
  font-size:18px;
  text-transform:uppercase;
  margin:0 0 16px;
  font-weight:800;
}
.related-post{
  display:flex;
  gap:12px;
  margin-bottom:16px;
  align-items:flex-start;
}
.related-post img{
  width:90px;
  height:68px;
  object-fit:cover;
  border-radius:var(--radius-sm);
  flex:0 0 90px;
}
.related-post h4{
  margin:0 0 4px;
  font-size:14px;
  line-height:1.35;
}
.related-post h4 a:hover{color:var(--color-accent);}
.related-post time{
  font-size:12px;
  color:var(--color-muted);
}

/* ---------- Grid món ăn (card ảnh - tiêu đề) ---------- */
.dish-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px 22px;
  margin:10px 0 20px;
}
@media (max-width:700px){
  .dish-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:460px){
  .dish-grid{grid-template-columns:1fr;}
}
.dish-card img{
  border-radius:var(--radius-md);
  aspect-ratio:3/2;
  object-fit:cover;
}
.dish-card h3,
.dish-card h5{
  margin:12px 0 4px;
  font-size:15px;
  font-weight:700;
}
.dish-card h3 a:hover,
.dish-card h5 a:hover{color:var(--color-accent);}
.dish-card time{
  font-size:13px;
  color:var(--color-muted);
}
.dish-card .price{
  margin:4px 0 0;
  color:var(--color-accent);
  font-weight:700;
  text-align:center;
}

/* ---------- Hero slider trang chủ ---------- */
.hero-slider{
  position:relative;
  max-width:var(--container-width);
  margin:20px auto 0;
  padding:0 20px;
}
.hero-slider .slides{
  position:relative;
  border-radius:var(--radius-md);
  overflow:hidden;
  aspect-ratio:16/6.3;
  background:#833ca3;
}
.hero-slider .slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .6s ease;
  background-size:cover;
  background-position:center;
}
.hero-slider .slide.is-active{opacity:1;}
.hero-slider .nav-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:40px;height:40px;
  border-radius:50%;
  background:rgba(255,255,255,.85);
  border:none;
  font-size:18px;
  cursor:pointer;
  z-index:2;
}
.hero-slider .nav-btn.prev{left:14px;}
.hero-slider .nav-btn.next{right:14px;}
.hero-slider .dots{
  position:absolute;
  bottom:12px;left:0;right:0;
  display:flex;justify-content:center;gap:8px;
  z-index:2;
}
.hero-slider .dots button{
  width:9px;height:9px;border-radius:50%;
  border:none;background:rgba(255,255,255,.6);cursor:pointer;
}
.hero-slider .dots button.is-active{background:#fff;}

/* ---------- Giới thiệu trang chủ ---------- */
.intro-section{
  padding:32px 0 10px;
}
.intro-section .container{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
  align-items:center;
}
@media (max-width:760px){
  .intro-section .container{grid-template-columns:1fr;}
}
.intro-section h2{
  color:var(--color-primary);
  font-size:24px;
  margin:0 0 12px;
}
.intro-section p.lead{margin:0 0 14px;text-align:justify;}
.btn{
  display:inline-block;
  background:var(--color-accent);
  color:#fff;
  font-weight:700;
  padding:10px 22px;
  border-radius:24px;
  font-size:14px;
}
.intro-section .info-box{max-width:100%;font-size:16px;}
.intro-section img{
  border-radius:var(--radius-md);
  width:100%;
  height:auto;
  display:block;
}
/* Nút "Xem chi tiết" căn giữa + hiệu ứng rung lắc nhẹ khi hover, ảnh bên
   phải cũng rung lắc tương tự khi rê chuột vào. */
.intro-section .btn{
  display:block;
  width:max-content;
  margin:0 auto 20px;
}
@keyframes qbo-rung-lac{
  0%,100%{transform:translateX(0) rotate(0);}
  15%{transform:translateX(-4px) rotate(-2deg);}
  30%{transform:translateX(4px) rotate(2deg);}
  45%{transform:translateX(-4px) rotate(-2deg);}
  60%{transform:translateX(4px) rotate(2deg);}
  75%{transform:translateX(-2px) rotate(-1deg);}
  90%{transform:translateX(2px) rotate(1deg);}
}
.intro-section .btn:hover,
.intro-section .reveal-right img:hover{
  animation:qbo-rung-lac .5s ease-in-out;
}

/* ---------- Món ngon - đặc sản (trang chủ) ---------- */
.feature-dishes{padding:0 0 10px;}
.feature-dishes .dish-grid{grid-template-columns:repeat(3,1fr);}
.feature-dishes .dish-card{text-align:center;}

/* ---------- Hàng order - slider trượt ngang thật (CSS scroll-snap + JS prev/next) ---------- */
.order-slider{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  margin:10px 0 30px;
}
.order-slider-track{
  display:flex;
  gap:18px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding:4px 2px 14px;
  flex:1 1 auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.order-slider-track::-webkit-scrollbar{display:none;}
/* Vừa khít 4 thẻ/hàng (card to, dễ nhìn), lố ra thẻ thứ 5 một chút để
   gợi ý còn nội dung phía sau - mới cần trượt, không cố nhồi cả 5. */
.order-slider-track .dish-card{
  flex:0 0 calc((100% - 3 * 18px) / 4);
  scroll-snap-align:start;
  text-align:center;
}
@media (max-width:900px){
  .order-slider-track .dish-card{flex-basis:calc((100% - 2 * 18px) / 3);}
}
@media (max-width:560px){
  .order-slider-track .dish-card{flex-basis:70vw;}
  .order-slider-nav{display:none;}
}
.order-slider-nav{
  flex:0 0 auto;
  width:40px;
  height:40px;
  border-radius:50%;
  border:1px solid #e3d9cf;
  background:#fff;
  color:var(--color-accent);
  font-size:22px;
  line-height:1;
  cursor:pointer;
  transition:background .2s ease, color .2s ease;
}
.order-slider-nav:hover{background:var(--color-accent);color:#fff;}

/* ---------- Góc chia sẻ dạng grid 3 cột có mô tả (trang chủ) ---------- */
.post-grid-3{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  margin:10px 0 10px;
}
@media (max-width:900px){.post-grid-3{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.post-grid-3{grid-template-columns:1fr;}}
/* Khung "card" thật: nền trắng + viền + bóng nhẹ, ảnh đại diện đồng nhất
   kích thước, tiêu đề/mô tả giới hạn tối đa 2 dòng (thừa hiện "..."). */
.post-card{
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  box-shadow:0 3px 10px rgba(20,20,20,.07);
  overflow:hidden;
  transition:box-shadow .25s ease, transform .25s ease;
}
.post-card:hover{box-shadow:0 10px 22px rgba(20,20,20,.13);transform:translateY(-3px);}
.post-card .hover-zoom{box-shadow:none;border-radius:0;}
.post-card img{
  width:100%;
  border-radius:0;
  aspect-ratio:4/3;
  object-fit:cover;
}
.post-card h3,
.post-card p,
.post-card .read-more{padding:0 14px;}
.post-card h3{
  font-size:15px;
  margin:14px 0 8px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:2.7em;
}
.post-card h3 a:hover{color:var(--color-accent);}
.post-card p{
  font-size:13px;
  color:var(--color-muted);
  margin:0 0 10px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:2.6em;
}
.post-card .read-more{
  display:inline-block;
  color:var(--color-accent);
  font-size:13px;
  font-weight:700;
  margin-bottom:16px;
}

/* ---------- Gallery ảnh hoạt động ---------- */
.photo-gallery{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin:10px 0 40px;
}
@media (max-width:760px){.photo-gallery{grid-template-columns:repeat(2,1fr);}}
.photo-gallery img{
  aspect-ratio:3/2;
  object-fit:cover;
  border-radius:var(--radius-sm);
}
.empty-note{
  text-align:center;
  color:var(--color-muted);
  font-size:13px;
  font-style:italic;
  padding:6px 0 30px;
}

/* ---------- Nội dung bài viết / trang ---------- */
.entry-title{
  font-size:26px;
  margin:4px 0 18px;
  color:var(--color-text);
}
.entry-content{font-size:15px;}
.entry-content p{margin:0 0 16px;text-align:justify;}
.entry-content img.aligncenter{margin:18px auto;border-radius:var(--radius-md);}
.entry-content ul{margin:0 0 16px;padding-left:20px;list-style:disc;}
.entry-content ul li{margin-bottom:6px;}
.entry-content h3{color:var(--color-primary);font-size:19px;margin:26px 0 12px;}
.entry-content h2{color:var(--color-primary);font-size:22px;margin:30px 0 14px;}
.entry-content h4{color:var(--color-text);font-size:17px;margin:22px 0 10px;}
.entry-content figure{margin:18px 0;text-align:center;}
.entry-content figcaption{font-size:13px;color:var(--color-muted);margin-top:6px;}
.entry-content iframe{width:100%;max-width:640px;aspect-ratio:16/9;height:auto;border:0;border-radius:var(--radius-sm);}
.entry-content ol{margin:0 0 16px;padding-left:20px;}
.entry-content ol li{margin-bottom:6px;}
.entry-content a{color:var(--color-accent);text-decoration:underline;text-underline-offset:2px;}
.entry-content a:hover{color:var(--color-accent-dark);}
.entry-content blockquote{
  margin:20px 0;
  padding:14px 20px;
  border-left:4px solid var(--color-primary);
  background:#fdf7ef;
  color:var(--color-text);
  font-style:italic;
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
}
.entry-content table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:14px;}
.entry-content table th,
.entry-content table td{border:1px solid var(--color-border);padding:8px 10px;text-align:left;}
.entry-content table th{background:#faf5ec;color:var(--color-primary);}
.related-dishes-title{
  color:var(--color-primary);
  font-size:17px;
  text-transform:uppercase;
  margin:34px 0 14px;
}

/* ---------- Danh sách bài viết / archive ---------- */
.archive-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px 26px;
  margin:6px 0 40px;
}
@media (max-width:760px){.archive-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:480px){.archive-grid{grid-template-columns:1fr;}}
.archive-grid .dish-card img{aspect-ratio:3/2.25;}

.pagination{
  display:flex;
  gap:8px;
  margin:10px 0 40px;
}
.pagination a,.pagination span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:34px;
  height:34px;
  border-radius:6px;
  background:#f3f3f3;
  font-size:14px;
  font-weight:700;
}
.pagination .current{background:var(--color-accent);color:#fff;}
.pagination a:hover{background:var(--color-primary);color:#fff;}

/* ---------- Gallery món ăn (trang tổng hợp sản phẩm) ---------- */
.product-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px 20px;
  margin:10px 0 40px;
}
@media (max-width:860px){.product-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:620px){.product-grid{grid-template-columns:repeat(2,1fr);}}
.product-card{
  background:#fff;
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  overflow:hidden;
  transition:box-shadow .25s ease,transform .25s ease;
}
.product-card:hover{box-shadow:0 10px 22px rgba(0,0,0,.08);transform:translateY(-3px);}
.product-card img{aspect-ratio:1/1;object-fit:cover;}
.product-card .body{padding:12px 14px 16px;text-align:center;}
.product-card h3{font-size:15px;margin:0 0 6px;}
.product-card .price{color:var(--color-accent);font-weight:800;font-size:15px;margin:0;}
.page-lead{color:var(--color-muted);font-size:14px;margin:0 0 10px;}

/* ---------- 404 ---------- */
.not-found{
  padding:60px 0 80px;
}
.not-found h1{font-size:30px;margin:0 0 10px;}
.not-found p{color:var(--color-muted);}
.not-found .btn{margin-top:16px;}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--color-footer-bg);
  color:#d9d9d9;
  padding:46px 0 10px;
  margin-top:20px;
}
.footer-columns{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:34px;
}
@media (max-width:760px){.footer-columns{grid-template-columns:1fr;}}
.footer-columns h5{
  color:var(--color-primary);
  text-transform:uppercase;
  font-size:16px;
  margin:0 0 16px;
}
.footer-columns .icon-list li{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
  font-size:14px;
}
.footer-columns .icon-list svg{width:15px;height:15px;fill:#d9d9d9;flex:0 0 15px;}
.footer-columns p{font-size:14px;line-height:1.6;}
.footer-columns p a{color:var(--color-accent);}
.social-icons{display:flex;gap:10px;margin-top:6px;}
.social-icons a{
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#2d3138;
}
.social-icons a svg{width:17px;height:17px;fill:#fff;}
.social-icons .fb{background:#1877f3;}
.social-icons .yt{background:#ff0000;}
.social-icons .ig{background:#c8328f;}
.fb-placeholder{
  margin-top:10px;
  background:#2d3138;
  border:1px dashed #51565f;
  border-radius:var(--radius-sm);
  padding:14px;
  font-size:12px;
  color:#9aa0aa;
  text-align:center;
}
.footer-bottom{
  background:var(--color-footer-bar);
  margin-top:34px;
  padding:14px 0;
}
.footer-bottom .container{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:#bbb;
}
.footer-bottom svg{width:14px;height:14px;fill:#bbb;}

/* Ghi chú: khối ".floating-contacts" của bản mockup đã bỏ khỏi theme thật -
   icon nổi (Zalo/Messenger/Hotline/Lên đầu trang) do plugin
   icon-support-buttons-v2.9 tự chèn CSS/JS riêng độc lập (xem footer.php). */

/* ---------- Tiện ích chung ---------- */
.text-center{text-align:center;}
.visually-hidden{
  position:absolute !important;
  width:1px;height:1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;
}

/* =========================================================
   Hiệu ứng cuộn trang (reveal on scroll) - CSS + IntersectionObserver
   thuần (js/main.js), KHÔNG dùng animate.css/AOS/GSAP. Tương đương
   Elementor Motion Effects/entrance animation của bản gốc:
   - .reveal       : fade + slide lên (fadeInUp)   dùng cho card/khối dưới heading
   - .reveal-left  : fade + slide từ trái (fadeInLeft)
   - .reveal-right : fade + slide từ phải (fadeInRight)
   - .reveal-down  : fade + slide từ trên xuống (fadeInDown), có delay nhẹ,
                      dùng cho heading section
   - .reveal-scale : fade + scale (thay thế bounceInDown đơn giản hoá), dùng cho CTA
   ========================================================= */
.reveal,
.reveal-left,
.reveal-right,
.reveal-down,
.reveal-scale{
  opacity:0;
  transition:opacity .6s ease, transform .6s ease;
  will-change:opacity,transform;
}
.reveal{transform:translateY(24px);}
.reveal-left{transform:translateX(-32px);}
.reveal-right{transform:translateX(32px);}
.reveal-down{transform:translateY(-22px);transition-delay:.35s;}
.reveal-scale{
  transform:scale(.85);
  transition:opacity .5s ease, transform .5s cubic-bezier(.34,1.56,.64,1);
}
.reveal.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible,
.reveal-down.is-visible,
.reveal-scale.is-visible{
  opacity:1;
  transform:none;
}
@media (prefers-reduced-motion: reduce){
  .reveal,.reveal-left,.reveal-right,.reveal-down,.reveal-scale{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}

/* ---------- Hover zoom ảnh trong khung cố định (card/gallery) ---------- */
.hover-zoom{
  overflow:hidden;
  display:block;
  border-radius:var(--radius-md);
  box-shadow:0 3px 10px rgba(20,20,20,.08);
  transition:box-shadow .25s ease;
}
.hover-zoom img{transition:transform .4s ease;border-radius:var(--radius-md);}
.hover-zoom:hover{box-shadow:0 10px 22px rgba(20,20,20,.14);}
.hover-zoom:hover img{transform:scale(1.08);}

/* ---------- Lightbox cho mục "Hình ảnh hoạt động" (.photo-gallery) ---------- */
.lightbox-overlay{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.85);
  padding:40px;
}
.lightbox-overlay.is-hidden{display:none;}
.lightbox-img{
  max-width:min(820px, 80vw);
  max-height:70vh;
  width:auto;
  height:auto;
  border-radius:var(--radius-md);
  box-shadow:0 10px 40px rgba(0,0,0,.5);
}
.lightbox-close{
  position:absolute;
  top:16px;
  right:20px;
  width:40px;
  height:40px;
  border:none;
  border-radius:50%;
  background:rgba(255,255,255,.15);
  color:#fff;
  font-size:22px;
  line-height:1;
  cursor:pointer;
}
.lightbox-close:hover{background:rgba(255,255,255,.3);}
.lightbox-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  border:none;
  border-radius:50%;
  background:rgba(255,255,255,.15);
  color:#fff;
  font-size:26px;
  line-height:1;
  cursor:pointer;
}
.lightbox-nav:hover{background:rgba(255,255,255,.3);}
.lightbox-nav.prev{left:16px;}
.lightbox-nav.next{right:16px;}
@media (max-width:600px){
  .lightbox-overlay{padding:16px;}
  .lightbox-close{top:8px;right:8px;width:34px;height:34px;font-size:18px;}
  .lightbox-nav{width:36px;height:36px;font-size:20px;}
  .lightbox-nav.prev{left:6px;}
  .lightbox-nav.next{right:6px;}
}