/* Safe-area + cuộn mượt, chừa khoảng cho navbar cố định */
@supports (padding: max(0px)){
  :root{ --safe-top: env(safe-area-inset-top, 0px); }
}
html{ scroll-behavior:smooth; scroll-padding-top:72px; }
@media (max-width:640px){ html{ scroll-padding-top:64px; } }

/* Co giãn typography theo kích thước màn */
:root{
  /* Giảm rail & dot timeline trên mobile */
  --tl-rail:48px;  /* icon column */
  --tl-dot:28px;   /* icon dot   */
}

/* Section spacing gọn gàng hơn */
.section{ padding-block:clamp(2rem,5vw,4rem); }

/* HERO (home)  */
.gradient-bg{ padding-block: clamp(3rem,8vw,6rem); }
.gradient-bg h1{
  font-size: clamp(1.75rem, 7vw, 2.75rem);
  line-height: 1.15;
}
.gradient-bg p{ font-size: clamp(1rem, 3.8vw, 1.125rem); }

/* Nút & chip: full-width trên màn nhỏ để tap dễ hơn */
@media (max-width:640px){
  .btn,
  .language-btn,
  #home .gradient-bg .flex button{ width:100%; justify-content:center; }
  .card, .service-card, .event-card{ border-radius:14px; }
}

/* Giảm “hover nặng” trên thiết bị cảm ứng */
@media (hover:none){
  .card-hover:hover,
  .service-card:hover{
    transform:none !important; box-shadow:none !important;
    background:inherit !important; border-color:inherit !important;
  }
}

/* Service card: thon gọn */
.service-card{ padding:1rem; }
.service-icon{ width:3rem; height:3rem; margin-bottom:.75rem; }

/* Case images: đảm bảo tỉ lệ ổn định, tránh nhảy layout */
.case-images{ aspect-ratio:4/3; }
.case-images > div{ height:100% !important; }
.case-item .p-4{ padding:.875rem; }

/* Menu mobile: phủ toàn màn + cuộn độc lập, có safe-area */
#mobile-menu{
  position:fixed; inset:var(--safe-top) 0 0 0;
  height:calc(100dvh - var(--safe-top));
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}
#mobile-menu .block{ padding-inline:1rem; }
#mobile-menu .block + .block{ border-top:1px solid rgba(212,175,55,.35); }

/* Timeline (áp dụng cho cả timeline mới & block hiện tại) */
.timeline{ gap:1rem; }
.timeline::before{ left: calc(var(--tl-rail)/2 - 1px); }
.timeline-row{
  column-gap:.75rem;
  grid-template-columns: var(--tl-rail) 1fr;
}
.timeline-dot{ width:var(--tl-dot); height:var(--tl-dot); }
.timeline-card{ padding:1rem; }

@media (max-width:640px){
  .timeline::before{ left:24px; } /* line dịch vào sát trái hơn */
  .timeline-row{ grid-template-columns:48px 1fr; }
}

/* Modal: chia tỷ lệ hợp lý trên mobile (viewer ảnh) */
.modal.show{ align-items:stretch; }
@media (max-width:768px){
  #imageViewerModal .w-80{ width:100%; height:45%; }
  #imageViewerModal .flex-1{ height:55%; }
  #imageViewerModal .w-10, #imageViewerModal .w-12{ width:44px; height:44px; }
}

/* Footer: thoáng hơn một chút */
footer .grid{ gap:1.25rem; }
footer .text-gray-300{ font-size:.95rem; }

/* Nhỏ tinh chỉnh khác */
.nav-link{ -webkit-tap-highlight-color: transparent; }