/* ============================================================
   XUÂN CĂN CỨ - MOBILE RESPONSIVE LAYER
   Tối ưu cho điện thoại / tablet mà không đổi logic ASP.NET MVC.
   ============================================================ */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body,
body * {
  box-sizing: border-box;
}

img,
video,
iframe,
svg {
  max-width: 100%;
}

input,
select,
textarea,
button {
  max-width: 100% !important;
}

/* Tránh grid / flex child đẩy ngang màn hình. */
.row > *,
[class*="grid"] > *,
[class*="shell"] > *,
[class*="wrap"] > *,
[class*="panel"] > * {
  min-width: 0;
}

/* ============================================================
   TABLET + MOBILE NAVIGATION
   ============================================================ */
@media (max-width: 991.98px) {
  body {
    overflow-x: hidden !important;
  }

  header.sticky-top,
  header.mk-home-header,
  header.mk-home-header.mk-header-scrolled {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
  }

  .xq-navbar {
    width: 100% !important;
    max-width: none !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }

  .xq-navbar .container-fluid {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    padding: 8px 14px !important;
    gap: 0 !important;
  }

  .brand-wrap.navbar-brand {
    max-width: calc(100% - 58px) !important;
    margin-right: 0 !important;
    padding: 0 !important;
  }

  .brand-copy {
    overflow: hidden;
  }

  .brand-title {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  .navbar-toggler {
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    border: 1px solid #d8d2c5 !important;
    border-radius: 12px !important;
    background: #f3efe5 !important;
    box-shadow: none !important;
    display: grid !important;
    place-items: center !important;
  }

  .navbar-toggler:focus {
    box-shadow: 0 0 0 .18rem rgba(52,94,64,.13) !important;
  }

  .navbar-toggler-icon {
    width: 21px !important;
    height: 21px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23345e40' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.4' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
  }

  #navbarNav {
    flex-basis: 100% !important;
    width: 100% !important;
    margin-top: 8px !important;
    padding: 10px !important;
    max-height: calc(100dvh - 78px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    border-top: 1px solid #e7e0d4 !important;
    background: rgba(250,247,238,.99) !important;
    border-radius: 0 0 16px 16px !important;
  }

  #navbarNav .navbar-nav {
    width: 100% !important;
    margin: 0 !important;
    gap: 5px !important;
    align-items: stretch !important;
  }

  #navbarNav .nav-item {
    width: 100% !important;
    min-width: 0 !important;
  }

  #navbarNav .xq-nav-link {
    width: 100% !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    padding: 10px 12px !important;
    font-size: .92rem !important;
    border-radius: 10px !important;
  }

  #navbarNav .xq-nav-link.active {
    background: #edf0e4 !important;
  }

  #navbarNav .xq-cart-btn {
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0 12px !important;
  }

  #navbarNav .xq-cart-btn::before {
    font-size: 18px !important;
  }

  #navbarNav .admin-dashboard-btn {
    width: 100% !important;
    min-height: 44px !important;
    border-radius: 10px !important;
    justify-content: flex-start !important;
    padding: 10px 12px !important;
  }

  #navbarNav .account-trigger {
    width: 100% !important;
    min-height: 48px !important;
    border-radius: 12px !important;
    padding: 6px 10px !important;
  }

  #navbarNav .account-menu {
    width: 100% !important;
    max-width: none !important;
  }

  #navbarNav .auth-actions {
    width: 100% !important;
    grid-template-columns: 50px minmax(0,1fr) !important;
    gap: 8px !important;
  }

  #navbarNav .auth-login-btn {
    width: 50px !important;
    height: 44px !important;
  }

  #navbarNav .auth-register-btn {
    width: 100% !important;
    min-height: 44px !important;
    padding: 10px 12px !important;
  }

  #navbarNav .language-switch {
    width: 100% !important;
    margin: 0 !important;
  }

  #navbarNav .language-option {
    flex: 1 1 50% !important;
    min-height: 38px !important;
  }

  /* Tránh dropdown/menu mở làm trang phía sau cuộn khó chịu. */
  body.mobile-nav-open {
    overflow: hidden !important;
  }

  /* Các bố cục 2 cột phổ biến chuyển thành 1 cột. */
  .cart-shell,
  .pay-grid,
  .bq-form-shell,
  .bq-after,
  .rv-toolbar-card,
  .mxq-story-grid,
  .mxq-history-grid,
  .mxq-souvenir-wrap,
  .mxq-community-grid,
  .mxq-slow-grid {
    grid-template-columns: 1fr !important;
  }

  /* Sticky sidebar desktop -> bình thường trên tablet/phone. */
  .summary-card,
  [style*="position:sticky"],
  [style*="position: sticky"] {
    position: static !important;
    top: auto !important;
  }

  /* Bảng quản trị / lịch sử có thể cuộn ngang bằng ngón tay. */
  .table-responsive {
    -webkit-overflow-scrolling: touch;
  }

  table.table:not(.table-borderless) {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  /* Modal không vượt màn hình. */
  .modal-dialog {
    max-width: calc(100vw - 24px) !important;
    margin: 12px auto !important;
  }

  .modal-content {
    max-height: calc(100dvh - 24px);
    overflow: auto;
  }
}

/* ============================================================
   PHONE
   ============================================================ */
@media (max-width: 767.98px) {
  :root {
    --mobile-gutter: 15px;
  }

  body {
    font-size: 14px;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .container,
  .container-fluid {
    --bs-gutter-x: 30px !important;
  }

  main {
    min-height: auto !important;
  }

  /* Touch target dễ bấm. */
  button,
  .btn,
  a.btn,
  input[type="submit"],
  input[type="button"] {
    min-height: 44px;
  }

  .form-control,
  .form-select {
    width: 100% !important;
    max-width: none !important;
    min-height: 46px;
    font-size: 16px !important; /* tránh iPhone auto zoom */
  }

  textarea.form-control {
    min-height: 110px;
  }

  input[type="date"],
  input[type="time"],
  input[type="number"] {
    font-size: 16px !important;
  }

  /* HEADER */
  header.sticky-top,
  header.mk-home-header.mk-header-scrolled {
    padding: 0 !important;
  }

  .xq-navbar {
    border-radius: 0 !important;
  }

  .brand-icon {
    width: 40px !important;
    height: 40px !important;
    flex-basis: 40px !important;
  }

  .brand-title {
    font-size: .88rem !important;
    letter-spacing: .01em !important;
  }

  .brand-subtitle {
    display: none !important;
  }

  #navbarNav {
    max-height: calc(100dvh - 64px) !important;
    margin-left: -14px !important;
    margin-right: -14px !important;
    width: calc(100% + 28px) !important;
    padding: 10px 14px 14px !important;
    border-radius: 0 !important;
  }

  /* FLOATING ACTIONS */
  .chat-widget {
    right: 10px !important;
    bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    gap: 7px !important;
  }

  .chat-btn {
    width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    border-radius: 13px !important;
    font-size: 13px !important;
  }

  .xq-backtop {
    left: 10px !important;
    bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    width: 42px !important;
    height: 42px !important;
  }

  /* FOOTER */
  .xq-footer-top {
    padding: 38px 0 22px !important;
  }

  .footer-bottom {
    padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important;
    font-size: .78rem !important;
  }

  .footer-mini-card {
    height: 100%;
    padding: .9rem !important;
  }

  /* HOME */
  .mxq-shell {
    padding-left: var(--mobile-gutter) !important;
    padding-right: var(--mobile-gutter) !important;
  }

  .mxq-section {
    padding: 44px 0 !important;
  }

  .mxq-title {
    font-size: clamp(2rem, 10vw, 2.8rem) !important;
    overflow-wrap: anywhere;
  }

  .mxq-hero {
    min-height: 680px !important;
    background-position: 58% center !important;
  }

  .mxq-hero-inner {
    min-height: 680px !important;
    padding: 94px 0 56px !important;
  }

  .mxq-hero h1 {
    font-size: clamp(2.7rem, 16vw, 3.4rem) !important;
    letter-spacing: -.045em !important;
  }

  .mxq-hero-sub {
    font-size: 1rem !important;
  }

  .mxq-hero p {
    font-size: .92rem !important;
    line-height: 1.7 !important;
  }

  .mxq-hero-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100%;
  }

  .mxq-hero-actions a,
  .mxq-btn,
  .mxq-btn-outline,
  .mxq-btn-brown {
    width: 100% !important;
  }

  .mxq-summary {
    grid-template-columns: 1fr !important;
  }

  .mxq-ticket-grid,
  .mxq-layer-grid,
  .mxq-relic-grid,
  .mxq-guide-grid,
  .mxq-review-list,
  .mxq-all-review-grid {
    grid-template-columns: 1fr !important;
  }

  .mxq-souvenir-grid {
    padding-left: 2px;
    padding-right: 2px;
    scrollbar-width: thin;
  }

  .mxq-product-card {
    min-width: min(82vw, 260px) !important;
  }

  .mxq-memory-panel {
    min-height: 290px !important;
    padding: 20px !important;
  }

  .mxq-memory-copy h3 {
    font-size: 1.55rem !important;
  }

  .mxq-fact-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  .mxq-fact {
    min-height: 120px !important;
    padding: 18px 14px !important;
  }

  .mxq-slow-media {
    min-height: 330px !important;
    border-radius: 20px !important;
  }

  .mxq-slow-note {
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    padding: 14px !important;
  }

  .mxq-photo-grid {
    min-height: 220px !important;
  }

  .mxq-reviews-modal {
    padding: 6px !important;
  }

  .mxq-reviews-dialog {
    width: 100% !important;
    max-height: calc(100dvh - 12px) !important;
    border-radius: 18px !important;
  }

  .mxq-reviews-modal-head,
  .mxq-reviews-scroll,
  .mxq-reviews-modal-foot {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .mxq-all-review-gallery {
    margin-left: 0 !important;
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  }

  /* REVIEWS */
  .rv-hero {
    min-height: 300px !important;
  }

  .rv-hero .container {
    padding-top: 78px !important;
    padding-bottom: 46px !important;
  }

  .rv-hero h1 {
    font-size: clamp(2.2rem, 11vw, 3rem) !important;
  }

  .rv-toolbar {
    margin-top: -18px !important;
  }

  .rv-toolbar-card {
    padding: 17px !important;
    border-radius: 18px !important;
    gap: 22px !important;
  }

  .rv-summary {
    display: grid !important;
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    gap: 8px !important;
  }

  .rv-stat {
    min-width: 0 !important;
    padding: 10px 8px !important;
  }

  .rv-stat strong {
    font-size: 1.15rem !important;
  }

  .rv-stat span {
    font-size: .62rem !important;
  }

  .rv-upload-box {
    min-height: 142px !important;
    padding: 15px !important;
    border-radius: 18px !important;
  }

  .rv-upload-preview,
  .rv-photo-grid {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  }

  .rv-submit {
    width: 100% !important;
  }

  /* CONTACT */
  .support-page {
    padding: 18px 0 44px !important;
  }

  .support-hero {
    padding: 26px 20px !important;
    border-radius: 20px !important;
  }

  .support-hero h1 {
    font-size: clamp(2rem, 10vw, 2.65rem) !important;
  }

  .quick-support {
    margin-top: 16px !important;
  }

  .quick-card {
    padding: 14px !important;
    min-height: 92px;
  }

  .quick-card strong,
  .quick-card small,
  .footer-note,
  .footer-copy {
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .support-card,
  .lookup-card,
  .faq-card {
    padding: 18px !important;
    border-radius: 17px !important;
  }

  .support-cta {
    padding: 22px 18px !important;
    border-radius: 20px !important;
  }

  .confidence {
    grid-template-columns: 1fr !important;
  }

  .map-shell,
  .map-shell iframe {
    min-height: 300px !important;
  }

  /* BOOKING */
  .bq-hero-content {
    padding: 76px 0 62px !important;
  }

  .bq-hero h1 {
    font-size: clamp(2.15rem, 11vw, 3rem) !important;
  }

  .bq-package-grid,
  .bq-people-grid,
  .bq-slot-grid,
  .bq-progress,
  .bq-trust-inner {
    grid-template-columns: 1fr !important;
  }

  .bq-card,
  .booking-card {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* HISTORY / STORY */
  .history-hero {
    min-height: 520px !important;
  }

  .history-hero-content {
    padding: 82px 0 105px !important;
  }

  .history-hero h1 {
    font-size: clamp(2.25rem, 12vw, 3rem) !important;
  }

  .story-intro-wrap {
    margin-top: -46px !important;
  }

  .story-photo,
  .experience-photo {
    min-height: 300px !important;
    border-radius: 20px !important;
  }

  .relic-grid {
    grid-template-columns: 1fr !important;
  }

  /* PRODUCTS */
  .souvenir-hero {
    min-height: 270px !important;
  }

  .souvenir-hero h1 {
    font-size: clamp(2.05rem, 11vw, 2.8rem) !important;
  }

  .catalog {
    padding: 20px 0 48px !important;
  }

  .catalog-toolbar {
    padding: 12px !important;
    border-radius: 16px !important;
  }

  .product-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .ticket-cta {
    padding: 18px !important;
  }

  /* CART / PAYMENT / TICKET */
  .cart-page,
  .pay-page,
  .ticket-page {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .cart-card,
  .summary-card,
  .pay-card,
  .e-ticket {
    border-radius: 17px !important;
  }

  .cart-item {
    grid-template-columns: 76px minmax(0,1fr) !important;
    gap: 10px !important;
    padding: 12px !important;
  }

  .cart-img {
    width: 76px !important;
    height: 74px !important;
  }

  .pay-info,
  .ticket-info {
    grid-template-columns: 1fr !important;
  }

  .qr-wrap img,
  .qr-box img,
  .bank-qr img {
    width: min(220px, 76vw) !important;
    height: auto !important;
    aspect-ratio: 1/1;
  }

  /* FOOD ORDER */
  .food-order-page {
    padding: 24px 0 48px !important;
  }

  .food-order-card {
    border-radius: 20px !important;
  }

  .food-photo img {
    min-height: 300px !important;
    height: 300px !important;
  }

  .food-photo-copy {
    left: 18px !important;
    right: 18px !important;
    bottom: 18px !important;
  }

  .food-order-form {
    padding: 18px !important;
  }

  .total-box {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  /* ACCOUNT / AUTH / SUPPORT STATUS */
  .account-page,
  .auth-page,
  .register-page,
  .booking-history,
  .history-page,
  .admin-list-page {
    overflow-x: hidden;
  }

  .account-panel,
  .profile-card,
  .auth-card,
  .register-card {
    padding: 18px !important;
    border-radius: 18px !important;
  }

  /* toast nằm gọn trên điện thoại */
  .toast-container {
    left: 8px !important;
    right: 8px !important;
    top: 8px !important;
    padding: 0 !important;
  }

  .toast-container .toast {
    width: 100% !important;
    max-width: none !important;
  }
}

/* ============================================================
   SMALL PHONE (<= 480px)
   ============================================================ */
@media (max-width: 480px) {
  .container,
  .container-fluid {
    --bs-gutter-x: 26px !important;
  }

  .brand-title {
    font-size: .82rem !important;
  }

  .mxq-section {
    padding: 38px 0 !important;
  }

  .mxq-hero {
    min-height: 640px !important;
  }

  .mxq-hero-inner {
    min-height: 640px !important;
    padding-top: 88px !important;
  }

  .mxq-hero h1 {
    font-size: clamp(2.55rem, 15vw, 3rem) !important;
  }

  .mxq-fact-grid {
    grid-template-columns: 1fr !important;
  }

  .mxq-photo-grid {
    grid-template-columns: 1.1fr 1fr !important;
  }

  .rv-summary {
    grid-template-columns: 1fr 1fr !important;
  }

  .rv-stat:last-child {
    grid-column: 1 / -1;
  }

  .rv-upload-preview,
  .rv-photo-grid {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  }

  .product-card {
    grid-template-columns: 105px minmax(0,1fr) !important;
  }

  .product-image {
    min-height: 172px !important;
  }

  .product-body {
    padding: 12px !important;
  }

  .product-foot {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  .buy-btn {
    width: 100% !important;
  }

  .quick-card {
    min-height: 84px;
  }

  .footer-mini-card {
    font-size: .78rem;
  }
}

/* ============================================================
   EXTRA SMALL PHONE (<= 380px)
   ============================================================ */
@media (max-width: 380px) {
  .brand-icon {
    width: 36px !important;
    height: 36px !important;
    flex-basis: 36px !important;
    font-size: 1rem !important;
  }

  .brand-title {
    font-size: .75rem !important;
  }

  .navbar-toggler {
    width: 40px !important;
    height: 40px !important;
    flex-basis: 40px !important;
  }

  .mxq-hero h1 {
    font-size: 2.45rem !important;
  }

  .mxq-title,
  .rv-title {
    font-size: 2rem !important;
  }

  .product-card {
    display: flex !important;
    flex-direction: column !important;
  }

  .product-image {
    width: 100% !important;
    height: 205px !important;
    min-height: 205px !important;
  }

  .rv-upload-preview,
  .rv-photo-grid,
  .mxq-all-review-gallery {
    grid-template-columns: 1fr 1fr !important;
  }
}