/* ============================================================
   KF-MOBILE — Tinh chỉnh RIÊNG cho điện thoại (<=768px).
   Bản desktop đã ổn nên file này CHỈ chạy trên màn hình nhỏ,
   không đụng vào CSS desktop.
   Căn cứ: rà soát bản live v9 trên khung hình điện thoại.
   ============================================================ */
@media (max-width: 768px) {

  /* 1) Chữ phụ mờ (xám nhạt trên nền sao) -> sáng hơn hẳn.
     --muc-mo là biến màu chữ phụ dùng khắp thiệp (địa chỉ nhà
     trai/gái, địa điểm nghi lễ, chữ "KÍNH MỜI"...). Chỉ đổi giá
     trị biến trên mobile, mọi chỗ dùng nó tự sáng lên. */
  :root {
    --muc-mo: #DDE3F7;
  }

  /* 2) Hai bên gia đình: tên 2 họ suýt chạm nhau ở giữa -> nới
     khoảng cách giữa 2 cột, địa chỉ tăng lên 15px cho dễ đọc. */
  .sr-gia-dinh {
    gap: 16px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .sr-gia-dinh .dc {
    font-size: 15px !important;
  }

  /* 3) Hiệu ứng hiện dần: trên điện thoại bỏ lớp nhòe (blur) và
     rút thời gian từ 1,2-1,4s xuống ~0,55s để chữ nét ngay khi
     vừa cuộn tới, không còn cảm giác chữ mờ khó đọc. Chỉ áp cho
     khối CHƯA hiện (.sr-hien chưa có .da-hien); khối đã hiện
     không bị ảnh hưởng. Desktop giữ nguyên choreography gốc. */
  .sr-hien:not(.da-hien) {
    transition-duration: .55s !important;
  }
  .sr-hien:not(.da-hien)[data-hieu-ung="len"] {
    transform: translateY(14px) !important;
    filter: none !important;
  }
  .sr-hien:not(.da-hien)[data-hieu-ung="trai"] {
    transform: translateX(-14px) !important;
    filter: none !important;
  }
  .sr-hien:not(.da-hien)[data-hieu-ung="phai"] {
    transform: translateX(14px) !important;
    filter: none !important;
  }
  .sr-hien:not(.da-hien)[data-hieu-ung="phong"] {
    transform: scale(.94) !important;
    filter: none !important;
  }

  /* 4) Timeline: nền thẻ đậm hơn (đỡ bị sao nền xuyên qua làm
     loãng chữ) + chữ giờ/nhãn to thêm 1px. */
  .SEC-Timeline .wb-tl {
    background: rgba(10, 14, 32, .85);
  }
  .SEC-Timeline .wb-tl-time {
    font-size: 15px;
  }
  .SEC-Timeline .wb-tl-lbl {
    font-size: 16px;
  }

  /* 5) Ô nhập RSVP/lời chúc: chữ nhập >= 16px để iPhone không tự
     phóng to màn hình mỗi lần chạm vào ô (lỗi zoom khó chịu
     quen thuộc trên iOS). Android không bị ảnh hưởng. */
  .wb-rsvp-form input,
  .wb-msg-form input,
  .wb-msg-form textarea {
    font-size: 16px !important;
  }

  /* 6) Hai nút tròn góc dưới: thu nhỏ nhẹ + chừa khoảng trống
     cho vạch home của iPhone (safe-area) để không đè lên nội
     dung góc dưới và không bị vạch vuốt che mất. */
  #kf-music-btn {
    width: 44px;
    height: 44px;
    left: 12px;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  }
  #kf-auto-btn {
    width: 42px;
    height: 42px;
    right: 12px;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    font-size: 16px;
  }

  /* 7) Khung ảnh tròn đầu + cuối thiệp (v14, iPhone): khung gốc
     280px cộng vòng trang trí tràn ra 2 bên (vòng sao ±30px,
     vòng đứt ±16px) suýt chạm mép màn hình 375-390px nên nhìn
     như bị lố cỡ. Thu khung lại + thu vòng trang trí để vừa
     gọn trong màn hình, bố cục tròn giữ nguyên. Desktop không
     đổi (file này chỉ chạy <=768px). */
  .sr-quy-dao {
    width: 62% !important;
    max-width: 248px !important;
  }
  .sr-quy-dao.bau-duc {
    width: 54% !important;
    max-width: 214px !important;
  }
  .sr-quy-dao::before {
    inset: -10px !important;
  }
  .sr-quy-dao .sao-quay {
    inset: -10px !important;
  }
  .sr-quy-dao .sao-quay.s2 {
    inset: -18px !important;
  }
  .sr-quy-dao .hao-quang {
    inset: -5px !important;
  }

  /* 8) Trình xem ảnh (v14, iPhone): nút đóng to hơn + chừa tai
     thỏ để không bấm trượt, tránh kẹt trong trình xem. */
  .tmx-xem .tmx-dau {
    padding-top: calc(12px + env(safe-area-inset-top, 0px)) !important;
  }
  .tmx-xem .tmx-dong {
    width: 48px !important;
    height: 48px !important;
    font-size: 24px !important;
  }

  /* 9) Chữ vừa khung trên điện thoại (v16): luật co chữ gốc chỉ
     chạy ở màn <=370px nên iPhone 375-390px vẫn giữ cỡ chữ
     desktop (tên 54px) trong khi phần đệm 2 bên vẫn 26px,
     khiến tên + câu chữ dài tràn ra ngoài, bị cắt 2 mép.
     Thu đệm phần xuống 18px + nhỏ tên lại để vừa khung. */
  .sr-phan {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  .sr-ten {
    font-size: 44px !important;
  }
  .sr-ket .sr-ky {
    font-size: 27px !important;
  }
}