/* ============================================================
   LSR GX. Ninh Loan — TRANG CÔNG KHAI — header, hero, sự kiện, đánh giá, liên hệ, footer
   ============================================================ */

.sec-title {
  font-size: clamp(1.8rem, 5vw, 2.7rem);
  color: var(--do-dam);
  line-height: 1.15;
  margin-bottom: 12px;
}

.sec-sub {
  color: var(--xam);
  max-width: 620px;
  margin: 0 auto;
}

/* Phải dùng .site-header chứ KHÔNG dùng selector `header` trần: topbar khu quản trị
   cũng là thẻ <header>, sẽ bị dính nền đỏ + dải sọc và vỡ layout. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: linear-gradient(135deg, var(--do-dam), var(--do));
  color: #fff;
  box-shadow: 0 4px 20px rgba(139, 0, 0, 0.3);
  overflow: hidden;
}

/* Barber-pole: dải sọc đỏ-vàng nghiêng 45° chạy liên tục.
   Dùng transform (GPU) thay vì background-position để mượt, không giật. */
.site-header::after {
  content: '';
  display: block;
  height: 6px;
  width: 200%;
  background-image: repeating-linear-gradient(
    45deg,
    var(--vang) 0,
    var(--vang) 15px,
    var(--do-dam) 15px,
    var(--do-dam) 30px
  );
  animation: stripe-run 1s linear infinite;
  will-change: transform;
  backface-visibility: hidden;
}

/* chu kỳ 30px ÷ cos45° = 42.426px → như ban đầu, lặp liền mạch */
@keyframes stripe-run {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-42.426px, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header::after {
    animation: none;
  }
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  gap: 12px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-weight: 800;
  letter-spacing: -0.01em;
  font-size: 1.2rem;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  line-height: 1.1;
}

.foot-logo .brand-img {
  width: 46px;
  height: 46px;
}

.admin-title .brand-img {
  width: 42px;
  height: 42px;
}

.logo .mask {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--vang);
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  flex: none;
  border: 2px solid #fff3;
}

.logo small {
  display: block;
  font-family: 'Be Vietnam Pro';
  font-weight: 600;
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  color: var(--vang);
  text-transform: uppercase;
}

.menu {
  display: flex;
  align-items: center;
  gap: 24px;
  list-style: none;
}

.menu a {
  font-weight: 600;
  color: #fff;
  font-size: 0.96rem;
  position: relative;
  padding: 4px 0;
}

.menu a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 0;
  height: 2px;
  background: var(--vang);
  transition: width 0.25s;
}

.menu a:hover::after {
  width: 100%;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-link {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  padding: 8px 14px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  font-family: inherit;
  transition: 0.2s;
  white-space: nowrap;
}

.admin-link:hover {
  background: var(--vang);
  color: var(--do-dam);
  border-color: var(--vang);
}

.burger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  flex-direction: column;
  gap: 5px;
}

.burger span {
  width: 26px;
  height: 3px;
  background: #fff;
  border-radius: 3px;
  transition: 0.3s;
}

.burger.open span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.burger.open span:nth-child(2) {
  opacity: 0;
}

.burger.open span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* Hero — banner làm nền full, căn giữa; chữ + nút ở chính giữa */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  /* Cao đúng bằng phần màn hình còn lại dưới header → không dư khoảng trắng */
  min-height: calc(100vh - var(--head-h));
  min-height: calc(100svh - var(--head-h));
  padding: 56px 0;
  background:
    linear-gradient(rgba(8, 10, 35, 0.35), rgba(25, 6, 10, 0.58)),
    url('../img/BannerLSR.png') center center / cover;
  background-color: #0a1030;
}

.hero .cta-row {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 6px;
}

.hero-title {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-weight: 800;
  letter-spacing: -0.01em;
  font-size: clamp(2.4rem, 7vw, 4.6rem);
  line-height: 1.04;
  margin: 4px 0 12px;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.6);
}

.hero-tag {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: clamp(1.1rem, 3.2vw, 1.6rem);
  color: var(--vang-nhat);
  margin: 0 auto 24px;
  text-shadow: 0 3px 16px rgba(0, 0, 0, 0.75);
  max-width: 760px;
}

/* Mũi tên "cuộn xuống" giữa đáy banner */
.scroll-down {
  position: absolute;
  left: 50%;
  bottom: 26px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: var(--vang);
  border: 2px solid rgba(245, 197, 24, 0.5);
  background: rgba(0, 0, 0, 0.25);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  transform: translate(-50%, 0);
  animation: scroll-bob 1.8s ease-in-out infinite;
  transition:
    background 0.25s,
    border-color 0.25s,
    color 0.25s;
}

.scroll-down:hover {
  background: var(--vang);
  border-color: var(--vang);
  color: var(--do-dam);
}

.scroll-down svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* transform gộp cả căn giữa + nhún, tránh đè lên nhau */
@keyframes scroll-bob {
  0%,
  100% {
    transform: translate(-50%, 0);
  }
  50% {
    transform: translate(-50%, 10px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-down {
    animation: none;
    transform: translate(-50%, 0);
  }
}

/* Khu thành viên */
.mz-hero {
  background: linear-gradient(135deg, var(--do-dam), var(--do));
  color: #fff;
  text-align: center;
  padding: 52px 0;
}

.mz-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.9rem, 5vw, 2.8rem);
  margin: 6px 0 8px;
}

.mz-sub {
  color: var(--vang-nhat);
  max-width: 640px;
  margin: 0 auto;
}

.admin-tiny {
  color: #6b5d57;
  margin-left: 10px;
  font-size: 0.82rem;
  opacity: 0.6;
  text-decoration: underline;
}

.admin-tiny:hover {
  color: var(--vang);
  opacity: 1;
}

.lanterns {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  pointer-events: none;
  font-size: 2rem;
  opacity: 0.9;
}

.lanterns span {
  animation: sway 3s ease-in-out infinite;
}

.lanterns span:nth-child(even) {
  animation-delay: 0.6s;
}

@keyframes sway {
  0%,
  100% {
    transform: translateY(0) rotate(-4deg);
  }
  50% {
    transform: translateY(8px) rotate(4deg);
  }
}

/* About */
.about {
  background: #fff;
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 36px;
}

.stat {
  background: var(--vang-nhat);
  border-radius: 18px;
  padding: 28px 18px;
  text-align: center;
  box-shadow: var(--shadow);
  border-bottom: 4px solid var(--vang);
}

.stat b {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 2.4rem;
  color: var(--do);
  line-height: 1;
}

.stat span {
  color: var(--xam);
  font-weight: 600;
  font-size: 0.92rem;
}

.awards {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 30px;
}

.award {
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 50px;
  padding: 10px 20px;
  font-weight: 600;
  font-size: 0.9rem;
  box-shadow: 0 4px 12px rgba(139, 0, 0, 0.06);
}

.award b {
  color: var(--do);
}

/* Pricing */
.pricing {
  background: linear-gradient(180deg, var(--kem), var(--vang-nhat));
}

.price-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
  margin-top: 40px;
}

.pcard {
  background: #fff;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition:
    transform 0.3s,
    box-shadow 0.3s;
  display: flex;
  flex-direction: column;
  position: relative;
  border-top: 5px solid var(--do);
}

.pcard:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
}

.pcard.feat {
  border-top-color: var(--vang);
}

.pcard .ribbon {
  position: absolute;
  top: 14px;
  right: -30px;
  background: var(--vang);
  color: var(--do-dam);
  font-weight: 800;
  font-size: 0.72rem;
  padding: 5px 36px;
  transform: rotate(45deg);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

.pcard-top {
  padding: 26px 24px 18px;
  text-align: center;
  background: linear-gradient(135deg, rgba(200, 16, 46, 0.05), rgba(245, 197, 24, 0.08));
}

.pcard .ic {
  font-size: 2.4rem;
}

.pcard h3 {
  font-size: 1.25rem;
  color: var(--do-dam);
  margin: 8px 0 4px;
}

.pcard .amount {
  font-family: 'Playfair Display', serif;
  font-size: 1.7rem;
  color: var(--do);
  font-weight: 800;
}

/* Không niêm yết giá — đội tư vấn và báo giá riêng theo sự kiện */
.pcard .amount.quote {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: var(--do-dam);
  background: var(--vang-nhat);
  border-radius: 50px;
  padding: 7px 18px;
  display: inline-block;
}

.pcard .amount small {
  font-size: 0.8rem;
  color: var(--xam);
  font-weight: 600;
}

.pcard-body {
  padding: 18px 24px 26px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.pcard-body p {
  color: var(--xam);
  font-size: 0.92rem;
  flex: 1;
  margin-bottom: 18px;
}

.pcard-body .btn {
  width: 100%;
  justify-content: center;
}

/* Gallery */
.gallery {
  background: #fff;
}

.gal-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 38px;
}

.gal-grid a {
  display: block;
  overflow: hidden;
  border-radius: 16px;
  aspect-ratio: 1;
  box-shadow: var(--shadow);
  position: relative;
}

.gal-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s;
}

.gal-grid a::after {
  content: '🦁';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 1.8rem;
  background: rgba(90, 0, 0, 0.4);
  opacity: 0;
  transition: 0.3s;
}

.gal-grid a:hover img {
  transform: scale(1.12);
}

.gal-grid a:hover::after {
  opacity: 1;
}

/* Booking form */
/* Nền kem như trang chủ — nguyên khối đỏ nhìn chói và mỏi mắt */
.booking {
  background: var(--kem);
  color: var(--den);
}

.booking .sec-title {
  color: var(--do-dam);
}

.booking .sec-sub {
  color: var(--xam);
}

.booking .divider {
  background: linear-gradient(90deg, var(--do), var(--vang));
}

/* Thẻ trắng trên nền kem — trước là kính mờ vì nền đỏ, giờ nền sáng nên phải đổi */
.form-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 32px;
  max-width: 760px;
  margin: 34px auto 0;
  box-shadow: var(--shadow);
  text-align: left;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-card .btn {
  width: 100%;
  justify-content: center;
  margin-top: 6px;
}

.form-msg {
  margin-top: 18px;
  text-align: center;
  background: var(--xanh-ok);
  color: #fff;
  padding: 14px;
  border-radius: 12px;
  font-weight: 700;
}

/* Footer */
footer {
  background: var(--den);
  color: #e8d9c8;
  padding: 52px 0 24px;
}

.foot-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1.5fr;
  gap: 36px;
  margin-bottom: 32px;
}

.foot-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-weight: 800;
  letter-spacing: -0.01em;
  font-size: 1.2rem;
  color: #fff;
  margin-bottom: 12px;
}

.foot-logo .mask {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--vang);
  display: grid;
  place-items: center;
  font-size: 1.3rem;
}

footer p {
  color: #c8b8a8;
  font-size: 0.94rem;
  max-width: 330px;
}

footer h4 {
  color: var(--vang);
  font-size: 1.02rem;
  margin-bottom: 14px;
  font-family: 'Playfair Display', serif;
}

footer ul {
  list-style: none;
  display: grid;
  gap: 9px;
}

footer ul a,
footer ul li {
  color: #c8b8a8;
  font-size: 0.94rem;
  transition: 0.2s;
}

footer ul a:hover {
  color: var(--vang);
  padding-left: 4px;
}

.socials {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.socials a {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  display: grid;
  place-items: center;
  font-weight: 800;
  color: #fff;
  font-size: 0.85rem;
  transition: 0.25s;
}

.socials a:hover {
  background: var(--do);
  transform: translateY(-3px);
}

.copyright {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 20px;
  text-align: center;
  color: #9d8b7c;
  font-size: 0.86rem;
}

/* Bản đồ trong footer */
.foot-map {
  border-radius: 14px;
  overflow: hidden;
  background: #1a1310;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4);
}

.foot-map iframe {
  display: block;
  width: 100%;
  height: 190px;
  border: 0;
}

.map-link {
  display: inline-block;
  margin-top: 12px;
  color: var(--vang);
  font-weight: 700;
  font-size: 0.9rem;
}

.map-link:hover {
  text-decoration: underline;
}

/* ============ NÚT LIÊN HỆ NỔI (góc phải dưới) ============ */
.fab-stack {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 900;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.fab {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 800;
  font-size: 0.8rem;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
  transition:
    transform 0.25s,
    box-shadow 0.25s;
  -webkit-tap-highlight-color: transparent;
}

.fab:hover {
  transform: scale(1.09);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.38);
}

.fab svg {
  width: 24px;
  height: 24px;
}

.fab-zalo {
  background: #0068ff;
}

.fab-fb {
  background: #1877f2;
}

.fab-call {
  background: var(--xanh-ok);
}

/* Nút "lên đầu trang" chỉ hiện sau khi đã cuộn (class .show do JS gắn) */
.fab-top {
  background: var(--do-dam);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition:
    opacity 0.3s,
    transform 0.3s,
    visibility 0.3s,
    box-shadow 0.25s;
}

.fab-top.show {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.fab-top.show:hover {
  transform: scale(1.09);
}

/* Nhãn tên hiện khi rê chuột */
.fab::after {
  content: attr(data-label);
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--den);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 7px 12px;
  border-radius: 9px;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s;
}

.fab:hover::after {
  opacity: 1;
}

/* Vòng sóng lan quanh nút gọi */
.fab-call::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--xanh-ok);
  animation: fab-ping 1.8s ease-out infinite;
}

@keyframes fab-ping {
  0% {
    transform: scale(1);
    opacity: 0.75;
  }
  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fab-call::before {
    display: none;
  }
}

/* Reveal */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.7s,
    transform 0.7s;
}

.reveal.visible {
  opacity: 1;
  transform: none;
}

.hint {
  font-size: 0.78rem;
  color: #aaa;
  margin-top: 14px;
}

/* Nền trang đăng nhập: hoạ tiết lân vàng trên đỏ + lớp phủ tối cho thẻ nổi bật */
.login-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 20px;
  background:
    linear-gradient(rgba(70, 0, 0, 0.5), rgba(30, 0, 0, 0.68)),
    url('../img/BGLogin.png') center center / cover no-repeat;
  background-color: var(--do-dam);
}

.login-wrap .modal {
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

@media (max-width: 900px) {
  .foot-grid {
    grid-template-columns: 1fr 1fr;
  }
  .gal-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 720px) {
  .burger {
    display: flex;
  }
  .menu {
    position: fixed;
    top: var(--head-h);
    right: 0;
    width: min(80%, 300px);
    height: calc(100vh - var(--head-h));
    background: var(--do-dam);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 16px;
    transform: translateX(105%);
    transition: transform 0.35s;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.3);
    overflow-y: auto;
  }
  .menu.open {
    transform: translateX(0);
  }
  .menu li {
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }
  .menu a {
    display: block;
    padding: 15px 4px;
    font-size: 1.05rem;
  }
  .scroll-down {
    width: 40px;
    height: 40px;
    bottom: 16px;
  }
  .scroll-down svg {
    width: 20px;
    height: 20px;
  }
  .stats {
    grid-template-columns: 1fr;
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
  .gal-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .foot-grid {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 26px;
  }
  footer p {
    margin: 0 auto;
  }
  .socials {
    justify-content: center;
  }
  .foot-logo {
    justify-content: center;
  }
  .foot-map iframe {
    height: 210px;
  }
  .fab-stack {
    right: 12px;
    bottom: 12px;
    gap: 10px;
  }
  .fab {
    width: 48px;
    height: 48px;
  }
  .fab svg {
    width: 22px;
    height: 22px;
  }
  .fab::after {
    display: none;
  }
}

/* ============ TRANG CON: dải tiêu đề ============ */
.page-head {
  background: linear-gradient(135deg, var(--do-dam), var(--do));
  color: #fff;
  text-align: center;
  padding: 56px 0;
}

.page-head .mz-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.9rem, 5vw, 2.8rem);
  margin: 6px 0 8px;
}

.page-head .mz-sub {
  color: var(--vang-nhat);
  max-width: 640px;
  margin: 0 auto;
}

/* ============ SỰ KIỆN ĐƯỢC TỔ CHỨC ============ */
.events {
  background: #fff;
}

.ev-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 26px;
  margin-top: 40px;
  text-align: left;
}

.ev-card {
  border-radius: 18px;
  overflow: hidden;
  background: var(--do-dam);
  border: 3px solid var(--vang);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  transition:
    transform 0.28s,
    box-shadow 0.28s;
}

.ev-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.ev-thumb {
  aspect-ratio: 4 / 3;
  background: #2b0000;
  overflow: hidden;
}

.ev-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}

.ev-card:hover .ev-thumb img {
  transform: scale(1.06);
}

.ev-noimg {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-size: 3rem;
  opacity: 0.4;
}

.ev-body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
  color: #fff;
}

.ev-body h3 {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1.35;
  color: var(--vang);
  margin-bottom: 8px;
}

.ev-meta {
  font-size: 0.82rem;
  color: #e9c9c9;
  margin-bottom: 10px;
}

.ev-desc {
  font-size: 0.9rem;
  color: #f0dcdc;
  margin-bottom: 16px;
}

.ev-more {
  margin-top: auto;
  font-weight: 800;
  font-size: 0.9rem;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ev-more span {
  transition: transform 0.25s;
}

.ev-more:hover span {
  transform: translateX(5px);
}

/* ============ ĐÁNH GIÁ KHÁN GIẢ (băng chạy) ============ */
.reviews {
  background: var(--kem);
  overflow: hidden;
}

.rv-marquee {
  margin-top: 36px;
  /* Mặc định cho vuốt ngang — JS hỏng hay tắt thì vẫn đọc được hết bài.
     Vẫn ẩn thanh cuộn cho gọn, vuốt/lăn chuột thì vẫn chạy. */
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.rv-marquee::-webkit-scrollbar {
  display: none;
}

/* Chỉ khoá cuộn + làm mờ hai mép khi băng đang tự chạy */
.rv-marquee.is-running {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.rv-track {
  display: flex;
  width: max-content;
  /* KHÔNG dùng gap: gap chỉ chèn GIỮA các thẻ nên một lượt không rộng đúng
     bằng bội số của thẻ. Đẩy khoảng cách vào margin-right của từng thẻ thì
     mỗi lượt rộng y hệt nhau, dịch đúng 1 lượt là khớp về đầu.
     --rv-shift (đúng chiều rộng 1 lượt) và thời lượng do JS tính. */
}

.rv-track.running {
  animation: rv-run var(--rv-dur, 30s) linear infinite;
}

.rv-marquee:hover .rv-track {
  animation-play-state: paused;
}

@keyframes rv-run {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-1 * var(--rv-shift, 50%)));
  }
}

@media (prefers-reduced-motion: reduce) {
  .rv-track {
    animation: none;
    overflow-x: auto;
  }
}

.rv-card {
  width: min(360px, 78vw);
  margin-right: 20px;
  flex: none;
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: var(--shadow);
  border-bottom: 4px solid var(--vang);
  display: flex;
  flex-direction: column;
  text-align: left;
}

.rv-text {
  font-size: 0.95rem;
  color: var(--den);
  line-height: 1.75;
  margin-bottom: 18px;
  flex: 1;
}

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

.rv-av {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  border: 2px solid var(--vang);
}

.rv-av-txt {
  display: grid;
  place-items: center;
  background: var(--do);
  color: #fff;
  font-weight: 800;
  font-size: 1.15rem;
}

.rv-who b {
  display: block;
  color: var(--do-dam);
  font-size: 0.95rem;
}

.rv-who small {
  color: var(--xam);
  font-size: 0.78rem;
}

/* ============ LIÊN HỆ ============ */
.ct-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px;
  margin-top: 38px;
}

.ct-card {
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 16px;
  padding: 24px 18px;
  box-shadow: var(--shadow);
  transition: 0.25s;
  display: block;
}

.ct-card:hover {
  transform: translateY(-4px);
  border-color: var(--do);
}

.ct-card .ic {
  font-size: 1.9rem;
  display: block;
  margin-bottom: 10px;
}

.ct-card b {
  display: block;
  color: var(--do-dam);
  margin-bottom: 4px;
}

.ct-card span:not(.ic) {
  color: var(--xam);
  font-size: 0.9rem;
}

.ct-map {
  margin-top: 30px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 3px solid var(--vang);
}

.ct-map iframe {
  display: block;
  width: 100%;
  height: 380px;
  border: 0;
}

/* ============ HEADER: logo trái — menu ở giữa — nút đặt lịch sát mép phải ============ */
.nav {
  justify-content: flex-start;
  gap: 0;
}

/* Khoảng thở giữa logo và menu, tránh dính sát nhau */
.menu {
  gap: 30px;
  margin-left: 56px;
}

/* margin-left:auto đẩy nút ra sát mép phải của .wrap */
.nav-actions {
  margin-left: auto;
  padding-left: 24px;
}

.menu a.on {
  color: var(--vang);
}

.menu a.on::after {
  width: 100%;
}

.nav-actions {
  margin-left: auto;
}

.menu-cta {
  display: none;
}

@media (max-width: 720px) {
  .nav-book {
    display: none;
  }
  .menu-cta {
    display: block;
    margin-top: 14px;
    border-bottom: none;
  }
  .menu-cta .btn {
    width: 100%;
    justify-content: center;
  }
  .ct-map iframe {
    height: 280px;
  }
}

/* Thông báo sau khi gửi form ở trang công khai */
.flash-bar {
  margin: 20px auto 0;
  padding: 15px 20px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.95rem;
  text-align: center;
  color: #fff;
  box-shadow: var(--shadow);
}

.flash-bar.ok {
  background: var(--xanh-ok);
}

.flash-bar.err {
  background: #c0392b;
}

@media (max-width: 720px) {
  .menu {
    margin-left: 0;
    gap: 0;
  }
  .nav-actions {
    padding-left: 0;
  }
}


/* ============ VỀ CHÚNG TÔI — 3 cột nội dung ở trang riêng ============ */
.about-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 26px;
  margin-top: 40px;
  text-align: left;
}
.about-col {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px;
  box-shadow: var(--shadow);
}
.about-col h3 {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-weight: 800;
  font-size: 1.02rem;
  color: var(--do-dam);
  margin-bottom: 10px;
}
.about-col p {
  color: var(--xam);
  font-size: 0.93rem;
  line-height: 1.75;
}
.about-col a {
  color: var(--do);
  font-weight: 700;
  text-decoration: underline;
}

/* ============ CHI TIẾT MỘT SỰ KIỆN ============ */
.ev-detail {
  padding: 48px 0 8px;
  background: #fff;
}
.ev-back {
  display: inline-block;
  color: var(--do);
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 18px;
}
.ev-back:hover {
  text-decoration: underline;
}
.ev-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.7rem, 4.5vw, 2.6rem);
  color: var(--do-dam);
  line-height: 1.2;
  margin-bottom: 10px;
}
.ev-detail-meta {
  color: var(--xam);
  font-size: 0.92rem;
  font-weight: 600;
  margin-bottom: 26px;
}
.ev-hero {
  border-radius: 18px;
  overflow: hidden;
  border: 3px solid var(--vang);
  box-shadow: var(--shadow-lg);
  margin-bottom: 30px;
}
.ev-hero img {
  width: 100%;
  max-height: 520px;
  object-fit: cover;
}
.ev-content {
  max-width: 760px;
  font-size: 1rem;
  line-height: 1.85;
  color: var(--den);
}
.ev-cta {
  margin: 40px 0 10px;
  padding: 28px;
  border-radius: 18px;
  background: var(--vang-nhat);
  text-align: center;
}
.ev-cta p {
  font-weight: 700;
  color: var(--do-dam);
  margin-bottom: 16px;
}
.ev-cta .btn {
  margin: 0 6px 8px;
}

/* Tên sự kiện trên thẻ là link — giữ nguyên màu vàng của thẻ */
.ev-body h3 a {
  color: inherit;
}
.ev-body h3 a:hover {
  text-decoration: underline;
}

/* ============ TUYỂN THÀNH VIÊN ============ */
.rc-intro {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
  margin-bottom: 34px;
}
.rc-point {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px 20px;
  box-shadow: var(--shadow);
  text-align: left;
}
.rc-point span {
  font-size: 1.8rem;
  display: block;
  margin-bottom: 8px;
}
.rc-point b {
  display: block;
  color: var(--do-dam);
  margin-bottom: 6px;
}
.rc-point p {
  color: var(--xam);
  font-size: 0.9rem;
  line-height: 1.7;
}
/* Chọn "đã từng múa chưa" */
.rc-radio {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  padding: 10px 0 2px;
}
.rc-radio label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  cursor: pointer;
  color: var(--den);
}
.rc-radio input {
  width: 18px;
  height: 18px;
  accent-color: var(--do);
  cursor: pointer;
}

/* Lưu ý khi vào đội — trang tuyển thành viên */
.rc-notes {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 5px solid var(--vang);
  border-radius: 16px;
  padding: 26px 28px;
  margin-bottom: 32px;
  box-shadow: var(--shadow);
  text-align: left;
}
.rc-notes h3 {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-weight: 800;
  font-size: 1.08rem;
  color: var(--do-dam);
  margin-bottom: 16px;
}
.rc-notes ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px 26px;
}
.rc-notes li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.rc-notes li > span {
  font-size: 1.3rem;
  flex: none;
  line-height: 1.3;
}
.rc-notes li b {
  display: block;
  color: var(--den);
  font-size: 0.95rem;
  margin-bottom: 2px;
}
.rc-notes li div {
  color: var(--xam);
  font-size: 0.89rem;
  line-height: 1.65;
}
.rc-notes > .muted {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}

/* ============================================================
   TRANG NỘI QUY  /noi-quy
   Đây là văn bản để ĐỌC, không phải trang giới thiệu. Ba thứ quyết
   định dễ đọc hay không, và cũng là ba lỗi của bản trước:
     1. Bề ngang dòng chữ  — .wrap rộng 1180px thì một dòng dài ~150 ký
        tự, mắt đọc xong phải dò lại đầu dòng. Cột chữ ở đây chốt 68ch.
     2. Nhãn nằm cùng dòng nội dung — "Nghỉ phép: Trường hợp bận việc…"
        khiến không lướt nhanh tìm được mục cần. Nay nhãn một dòng riêng.
     3. Cỡ chữ và giãn dòng — nâng lên 1.05rem / 1.85 cho đỡ mỏi mắt.
   ============================================================ */
.sec-rules {
  padding: 46px 0 76px;
  background: var(--kem);
}

/* Mục lục bên trái, nội dung bên phải. Dưới 1000px thì xếp dọc. */
.rules-wrap {
  display: grid;
  grid-template-columns: 244px minmax(0, 1fr);
  gap: 34px;
  align-items: start;
}

/* ---------- MỤC LỤC ---------- */
.rules-toc {
  position: sticky;
  top: calc(var(--head-h) + 18px);
}
.toc-box {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 16px;
  box-shadow: 0 6px 20px rgba(139, 0, 0, 0.06);
}
.toc-box h2 {
  /* Ghi đè luật chung h1,h2,h3 = Playfair Display của base.css */
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 0.74rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--xam);
  font-weight: 800;
  padding-bottom: 10px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.toc-box ol {
  list-style: none;
  display: grid;
  gap: 2px;
}
.toc-box a {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 8px 9px;
  border-radius: 9px;
  color: var(--den);
  font-size: 0.9rem;
  line-height: 1.45;
  font-weight: 600;
  transition: background 0.15s, color 0.15s;
}
.toc-box a:hover {
  background: var(--vang-nhat);
  color: var(--do-dam);
}
.toc-no {
  flex: none;
  min-width: 26px;
  text-align: center;
  font-weight: 800;
  font-size: 0.8rem;
  color: var(--do);
  background: var(--vang-nhat);
  border-radius: 6px;
  padding: 2px 4px;
}
.toc-tonchi {
  margin-top: 14px;
  padding: 14px 12px;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--do-dam), var(--do-tuoi));
  color: #fff;
  text-align: center;
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 1.7;
}
.toc-tonchi span {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vang);
  font-weight: 800;
  margin-bottom: 5px;
}

/* ---------- THÂN VĂN BẢN ---------- */
.rules-doc {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 8px 40px 32px;
  box-shadow: 0 8px 26px rgba(139, 0, 0, 0.07);
}

.chuong {
  padding: 30px 0 4px;
  /* Neo cho link mục lục nhảy tới không bị header che mất tiêu đề */
  scroll-margin-top: calc(var(--head-h) + 16px);
}
.chuong + .chuong {
  border-top: 1px solid var(--line);
}
/* Trên máy tính: nhãn "CHƯƠNG I" và tên chương NẰM CÙNG MỘT HÀNG.
   Dùng center chứ KHÔNG dùng baseline: baseline căn chân chữ, mà chân chữ
   của cái nhãn nằm sát đáy phần nền của nó — thành ra nhãn bị tụt xuống so
   với tên chương to bên cạnh. Center thì hai khối cân giữa nhau, thẳng mắt. */
.chuong-head {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 22px;
}
.chuong-eyebrow {
  flex: none;
  font-size: 0.72rem;
  font-weight: 800;
  /* 0.16em quá thưa với chữ hoa tiếng Việt: "CHƯƠNG" có Ư và Ơ, giãn rộng
     quá thì cái móc của Ư tách rời khỏi thân chữ, đọc ra "CH U O NG". */
  letter-spacing: 0.1em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--do);
  background: var(--vang-nhat);
  padding: 5px 12px;
  /* Bo góc chứ không bo tròn hẳn — viên thuốc con nhộng nhìn như cái nút
     bấm, ở đây là nhãn của văn bản nên góc bo vừa phải hợp hơn. */
  border-radius: 7px;
  white-space: nowrap;
}
/* Tên chương dùng Be Vietnam Pro chứ KHÔNG dùng Playfair Display.
   Playfair là font hiển thị kiểu chân phương của phương Tây, ở nét đậm 800
   các dấu chồng của tiếng Việt (ế, ộ, ữ) bị bó sát vào thân chữ và đụng
   dòng trên. Be Vietnam Pro vẽ riêng cho tiếng Việt nên dấu thoáng và đều. */
/* Cỡ chữ chỉ tới 1.5rem. Để 1.9rem thì tên chương to gấp gần 2 lần tiêu đề
   điều, nhìn như hai trang khác nhau ghép lại — chương lấn át, phần thân
   bị teo. Bậc 1.5 → 1.12 → 1.0 rem mới ra một văn bản cân đối. */
.chuong-head h2 {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: clamp(1.3rem, 2.6vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -0.005em;
  color: var(--do-dam);
  line-height: 1.35;
}

/* ---------- MỘT ĐIỀU ----------
   Mọi thứ bắt đầu từ MÉP TRÁI, không có cột thụt nào. Nhờ vậy tiêu đề,
   nội dung và khối mức kỷ luật luôn thẳng một đường ở mọi cỡ màn hình —
   trước tách số ra cột riêng nên phải canh thụt cho khớp, và đó chính là
   chỗ sinh ra lệch trên điện thoại. */
.dieu {
  padding: 17px 0;
}
.dieu + .dieu {
  border-top: 1px dashed var(--line);
}

/* Số điều nằm trong dòng tiêu đề, dạng viên tròn nhỏ.
   Nền vàng nhạt chữ đỏ như ban đầu — 17 viên tròn ĐỎ ĐẶC cộng thêm tên
   chương cũng đỏ thì cả trang đỏ rực, nhìn nặng và mất cân đối. */
.dieu-so {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  /* Bo góc, không bo tròn hẳn — đồng bộ với nhãn chương và nhãn mức phạt */
  border-radius: 7px;
  background: var(--vang-nhat);
  color: var(--do-dam);
  border: 1px solid rgba(224, 168, 0, 0.45);
  font-weight: 800;
  font-size: 0.78rem;
  margin-right: 10px;
  /* Đẩy ô số xuống cho tâm của nó ngang với thân chữ tiêu đề */
  vertical-align: 1px;
}

/* Tiêu đề điều: PHẢI to hơn hẳn nội dung thì mắt mới lướt tìm mục được.
   Nét 700 chứ không 800 — 800 ở cỡ này nhìn nặng và bè, chữ tiếng Việt
   nhiều dấu càng thấy bết. */
.dieu h3 {
  /* BẮT BUỘC ghi rõ font: base.css có luật chung h1,h2,h3 dùng Playfair
     Display, không ghi đè thì tiêu đề điều đổ về font serif — lệch hẳn
     tông so với phần nội dung bên dưới, và dấu tiếng Việt bị bó sát. */
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 1.12rem;
  font-weight: 700;
  /* Không bóp chữ: dấu ỷ, ậ, ế cần chỗ trống hai bên, bóp lại là dấu của
     chữ này chạm thân chữ kế bên — đó là chỗ khiến "Kỷ luật", "Khen thưởng"
     nhìn rối. */
  letter-spacing: 0;
  color: var(--den);
  line-height: 1.5;
  margin-bottom: 7px;
}
.dieu p {
  /* 68ch là bề ngang dễ đọc nhất cho văn bản dài */
  max-width: 68ch;
  font-size: 1rem;
  line-height: 1.85;
  color: #4a423e;
}

/* ---------- BA MỨC KỶ LUẬT ----------
   Ba thẻ có nền và viền trái đổi màu nặng dần.

   MÉP THẺ thẳng hàng với mép chữ (margin 0). Từng thử kéo cả khối lùi ra
   ngoài 20px để chữ BÊN TRONG thẻ khớp với chữ bên trên — hỏng: khung thò
   hẳn ra khỏi cột nội dung, nhìn chói mắt hơn nhiều so với cái lợi thu được.
   Khối có nền thì căn theo mép khối, đệm bên trong là chuyện của nó. */
.muc-phat {
  display: grid;
  gap: 12px;
  margin: 14px 0 4px;
}
.phat {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 16px;
  border-radius: 12px;
  border-left: 4px solid;
  background: #fbfbfb;
}
/* Cùng cỡ và cùng nét với tiêu đề điều cho cả trang một nhịp */
.phat b {
  display: block;
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--den);
  line-height: 1.5;
  margin-bottom: 3px;
}
.phat p {
  font-size: 0.96rem;
  line-height: 1.75;
  color: var(--xam);
  max-width: 62ch;
}
.phat-cap {
  flex: none;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1.5;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 6px;
  color: #fff;
  /* Canh tâm nhãn ngang với dòng chữ đầu tiên bên cạnh (dòng cao ~25px,
     nhãn cao ~23px → lệch 1px) */
  margin-top: 1px;
}
/* Màu nặng dần: vàng → cam → đỏ, nhìn là biết mức độ */
.phat-nhe  { border-left-color: var(--vang-dam); background: #fffdf4; }
.phat-vua  { border-left-color: var(--cam);      background: #fff8f0; }
.phat-nang { border-left-color: var(--do);       background: #fff5f6; }
.phat-nhe  .phat-cap { background: var(--vang-dam); }
.phat-vua  .phat-cap { background: var(--cam); }
.phat-nang .phat-cap { background: var(--do); }

/* ---------- CHÂN VĂN BẢN ---------- */
/* Trước để trắng trơn y hệt nền văn bản nên nhìn như phần bị hụt, không ra
   khối kết. Nay là một tấm nền vàng nhạt cùng tông với ô số và nhãn chương —
   toàn trang chỉ dùng ba nền: trắng (văn bản), vàng nhạt (điểm nhấn),
   kem (nền ngoài). */
.rules-foot {
  margin-top: 30px;
  padding: 24px 26px 26px;
  border-radius: 14px;
  background: var(--vang-nhat);
  border: 1px solid rgba(224, 168, 0, 0.28);
  text-align: center;
}
.rules-foot p {
  color: #6a5528;
  line-height: 1.8;
  max-width: 62ch;
  margin: 0 auto;
}
.rules-foot p b {
  color: var(--do-dam);
}
.rules-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 20px;
}

/* ---------- MÁY TÍNH BẢNG & ĐIỆN THOẠI ---------- */
@media (max-width: 1000px) {
  .rules-wrap {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  /* Hết chỗ để cột dính bên trái — cho mục lục nằm ngang trên đầu */
  .rules-toc {
    position: static;
  }
  .toc-box ol {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 4px;
  }
  .toc-tonchi {
    display: none;
  }
}

@media (max-width: 720px) {
  .sec-rules {
    padding: 24px 0 52px;
  }
  .rules-doc {
    padding: 4px 16px 22px;
    border-radius: 14px;
  }
  .chuong {
    padding: 22px 0 2px;
  }
  /* Trên điện thoại tách "CHƯƠNG I" và tên chương thành HAI HÀNG.
     Để cùng hàng thì cái nhãn ăn mất ~100px, tên chương dài như
     "Kỷ luật bản thân và đạo đức Kitô giáo" bị bóp còn 2–3 chữ mỗi dòng. */
  .chuong-head {
    display: block;
  }
  .chuong-eyebrow {
    display: inline-block;
    margin-bottom: 9px;
  }
  /* Vẫn giữ bậc phân cấp tiêu đề / nội dung, chỉ hạ nhẹ cả hai */
  .dieu h3 {
    font-size: 1.1rem;
  }
  .dieu p {
    font-size: 0.97rem;
    line-height: 1.8;
  }
  .dieu-so {
    width: 25px;
    height: 25px;
    font-size: 0.76rem;
    margin-right: 8px;
  }
  /* Nhãn "Mức 1" xuống dòng riêng, nhường trọn bề ngang cho phần chữ.
     Để nằm ngang thì riêng cái nhãn đã ăn mất ~62px của màn hình điện thoại. */
  .phat {
    flex-direction: column;
    gap: 7px;
    padding: 13px 14px;
  }
  .phat-cap {
    margin-top: 0;
  }
  .phat b {
    font-size: 1rem;
  }
  .phat p {
    font-size: 0.93rem;
  }
  .rules-actions .btn {
    flex: 1 1 100%;
  }
}

@media (max-width: 400px) {
  .rules-doc {
    padding-left: 13px;
    padding-right: 13px;
  }
  .toc-box ol {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   TỰ ĐIỂM DANH — khu thành viên /thanh-vien
   ============================================================ */
.dd-card {
  border-left: 5px solid var(--vang);
}
.dd-card h3 {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 1.18rem;
  font-weight: 800;
  color: var(--do-dam);
  margin-bottom: 6px;
}
.dd-card h3 .muted {
  font-weight: 600;
  font-size: 0.86rem;
}
/* KHÔNG đặt max-width: thẻ trên PC rộng cả nghìn pixel, bó form lại 560px
   thì nửa phải trống hoác, nhìn như bị bóp. Màn rộng thì tách 2 cột
   (xem @media dưới cùng), màn hẹp thì xếp chồng. */
.dd-form {
  display: grid;
  gap: 18px;
}
/* Tên · 4 số · "Hôm nay bạn" nằm CHUNG một hàng lưới.
   Để "Hôm nay bạn" thành khối riêng bên ngoài thì nó tự canh theo hàng của
   nó, tụt xuống ngang dòng ghi chú và chừa một mảng trống bên trái.
   Cùng một lưới thì ba nhãn thẳng nhau, ba ô cũng thẳng đáy.
   Cột mã 140px: vừa đủ 4 chữ số đã giãn thưa, không thừa chỗ. */
.dd-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 140px;
  gap: 14px 16px;
}
/* Màn chưa đủ rộng cho ba cột thì khối chọn xuống hàng, ăn trọn bề ngang */
.dd-tt {
  grid-column: 1 / -1;
}
.dd-form .field label {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--den);
  margin-bottom: 7px;
}
/* Hai ô trong hàng phải CAO BẰNG NHAU. Không đặt thì select và input
   lấy chiều cao mặc định khác nhau vài pixel, nhìn lệch đáy. */
.dd-form select,
.dd-form input[type='text'],
.dd-form input:not([type]) {
  height: 48px;
}
/* Ghi chú nằm dưới cả hàng — nhét dưới ô 4 số thì cột hẹp làm nó gãy 3 dòng */
.dd-note {
  margin-top: -10px;
  font-size: 0.82rem;
  color: var(--xam);
  line-height: 1.55;
}
/* Ô 4 số: giãn thưa, canh giữa cho dễ nhìn khi gõ trên điện thoại.
   padding-left bù đúng phần letter-spacing thừa sau chữ số cuối,
   không bù thì chữ lệch sang phải. */
#dd_pin {
  text-align: center;
  letter-spacing: 0.4em;
  padding-left: calc(0.4em + 12px);
  font-weight: 800;
  font-size: 1.1rem;
}

/* Hai lựa chọn dạng thẻ bấm — ngón tay bấm dễ hơn nút radio tí xíu */
.dd-chon {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.dd-chon label {
  cursor: pointer;
  display: block;
}
/* Ẩn nút radio nhưng vẫn để bàn phím Tab tới được và trình đọc màn hình
   nhận ra — display:none là mất cả hai. */
.dd-chon input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.dd-chon input + span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 62px;
  padding: 12px 14px;
  border: 2px solid var(--line);
  border-radius: 14px;
  background: #fff;
  transition: border-color 0.18s, background 0.18s, transform 0.18s;
}
.dd-chon .ic {
  font-size: 1.45rem;
  line-height: 1;
  flex: none;
}
.dd-chon b {
  font-size: 1rem;
  color: var(--den);
  line-height: 1.3;
}
.dd-chon label:hover input + span {
  border-color: var(--vang-dam);
  transform: translateY(-2px);
}
.dd-chon input:checked + span {
  border-color: var(--do);
  background: var(--vang-nhat);
  box-shadow: 0 4px 14px rgba(200, 16, 46, 0.14);
}
.dd-chon input:checked + span b {
  color: var(--do-dam);
}
.dd-chon input:focus-visible + span {
  outline: 2px solid var(--do);
  outline-offset: 2px;
}

/* Ô lý do chỉ hiện khi xin nghỉ (public.js gỡ thuộc tính hidden).
   Cần khai báo rõ: .field là grid nên hidden mặc định của trình duyệt
   (display:none) bị display:grid đè mất, ô vẫn hiện ra. */
.dd-lydo[hidden] {
  display: none;
}

.dd-form > .btn {
  justify-self: start;
  min-width: 150px;
  justify-content: center;
}

/* ===== PC: ba ô trên một hàng =====
   [ Tên .......... ] [ 4 số ] [ Có mặt | Xin phép vắng ]
   Cột chọn tối thiểu 340px để hai thẻ không bị bóp; phần dư chia đều với
   cột tên nên hàng luôn kín bề ngang thẻ, không kéo ô Tên dài lê thê. */
@media (min-width: 900px) {
  .dd-row {
    grid-template-columns: minmax(0, 1fr) 140px minmax(340px, 1.1fr);
  }
  .dd-tt {
    grid-column: auto;
  }
  /* Thẻ chọn cao bằng ô tên và ô 4 số cho cả hàng thẳng đáy */
  .dd-chon input + span {
    min-height: 48px;
  }
}

@media (max-width: 620px) {
  .dd-row,
  .dd-chon {
    grid-template-columns: 1fr;
  }
  .dd-note {
    margin-top: -12px;
  }
  .dd-chon input + span {
    justify-content: flex-start;
    min-height: 56px;
  }
  .dd-form > .btn {
    justify-self: stretch;
  }
}

/* Thẻ "đã khai rồi" thay chỗ form tự điểm danh */
.dd-xong {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 18px;
  border: 1px solid #bfe3c4;
  border-left: 5px solid #2e9c4a;
  border-radius: 12px;
  background: #f3fbf4;
}
.dd-xong.nghi {
  border-color: #f0d9a8;
  border-left-color: var(--vang);
  background: #fffaef;
}
.dd-xong .ic { font-size: 1.7rem; line-height: 1; }
.dd-xong b { display: block; font-size: 1.05rem; }
.dd-xong .ly,
.dd-xong .tt { font-size: 0.9rem; color: var(--xam); margin-top: 4px; }
.dd-xong .tt { font-weight: 600; }