/* =============================================================================
   v1.6.3 — Mobile Summary CTA (Back | Total | Next/Book)
   ------------------------------------------------------------------------------
   frontend/assets/styles/mobile/mobile-summary-v6-3.css
   ------------------------------------------------------------------------------
   - Container CTA trong suốt
   - Nút hành động có hiệu ứng blur (glass)
   - Total 1 dòng ở giữa; 2 bên là khung có bề rộng cố định để tránh "nhảy"
   ========================================================================== */

:root {
  --cta-side-w: 2.6rem; /* bề rộng cột trái/phải (Back/Next|Book) */
  --cta-btn-h: 2.6rem; /* chiều cao nút hành động */
  --glass-bg: rgba(0, 0, 0, 0.6);
  --glass-bd: rgba(255, 255, 255, 0.18);
  --glass-blur: 18px;
}

/* Giữ nguyên hiển thị mobile-summary ở mobile (đã có ở v1.4.0) */

/* Thanh CTA: 3 cột — [ Back ] [ Total ] [ Next|Book ] */
@media (max-width: 768px) {
  .mobile-cta {
    display: grid;
    grid-template-columns: var(--cta-side-w) 1fr var(--cta-side-w);

    grid-template-columns: var(--cta-side-w) 12rem var(--cta-side-w);
    align-items: center;
    justify-content: space-between;
    justify-items: center;

    gap: var(--mobile-cta--gap);
    background: transparent; /* yêu cầu: CTA trong suốt */
    padding: var(--mobile-cta--pad);
    border-radius: var(--mobile-cta--rad);

    background: transparent;
    background-color: hsla(225, 95%, 71%, 0.5);
    background-color: transparent;

    overflow: hidden; /*ẩn elements out*/
    margin: 0 auto 0;
    min-width: 320px; /* chống bị dev tool tách quá nhiều */
    max-width: 320px;
  }

  .ms-left,
  .ms-right {
    width: var(--cta-side-w);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Glass button (áp cho các nút hành động) */
  .ms-left > button,
  .ms-right > button {
    height: var(--cta-btn-h);
    padding: 0 14px;
    border-radius: 999px;
    background: var(--glass-bg);
    color: #fff;
    border: 1px solid var(--glass-bd);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
  }

  /* Trung tâm: Total 1 dòng */
  .ms-center {
    min-width: 12rem;
    min-height: var(--cta-btn-h);
    border-radius: 999px;
    background: transparent; /* không blur cho total */
    border: 1px solid rgba(0, 0, 0, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.75rem;
    color: #fff; /* tuỳ theme nền */

    background-color: black;
  }
  .ms-center .total-line {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
  }
  .ms-center .bubble {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.25);
    font-size: 12px;
    opacity: 0.9;
  }
  .ms-center .total-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    opacity: 0.95;
  }
  .ms-center .total-amount {
    /*tạm không dùng width << sẽ tính sau */
    font-weight: var(--total-amount--fw, 700);
    font-size: var(--total-amount--fs, 1rem);
    letter-spacing: 0.2px;
    color: var(--total-amount--clr, #3aa0ff);
  }

  /* Trạng thái disabled đã có rule chung, giữ nguyên */
}
/*
========================================================================================================
#mobile-action style
========================================================================================================
*/
.mobile-actions {
  display: flex;
  gap: var(--mobile-actions--gap);
}
#mobile-prev {
  font-size: var(--mobile-prev--fs);
  font-weight: var(--mobile-prev--fw);
  color: var(--mobile-prev--clr);
}
#mobile-next,
#mobile-book {
  font-size: var(--mobile-next--fs);
  font-weight: var(--mobile-next--fw);
  color: var(--mobile-next--clr);
}

#mobile-prev,
#mobile-next,
#mobile-book {
  width: var(--cta-side-w);
  height: var(--cta-side-w);

  aspect-ratio: 1/1;

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  position: relative; /*requird fos .glass-only*/

  border-radius: 50%!important;
  
  
  /* border: 2px solid hsla(0, 100%, 100%, .4) */

  /* background-color:hsla(237,0%,100%,0);
  background-image:
    radial-gradient(at 28% 20%, hsla(0,0%,100%,0.8) 0px, transparent 50%),
    radial-gradient(at 79% 69%, hsla(0,0%,100%,0.8) 0px, transparent 50%);

  background-color:hsl(0deg 0% 70.15% / 20%);
  background-image:
  radial-gradient(at 1% 86%, hsl(0deg 0% 100%) 0px, transparent 50%),
  radial-gradient(at 86% 14%, hsla(303,0%,100%,0.4) 0px, transparent 50%),
  radial-gradient(at 79% 69%, hsla(0,0%,100%,0.43) 0px, transparent 50%); */

  background-color: hsla(0, 100%, 100%, .0);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  
}

/* Disable state nhất quán */
.mobile-actions button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  filter: saturate(0.5);
}
#mobile-prev img,
#mobile-next img ,
#mobile-prev svg,
#mobile-next svg 
{
  position: absolute;
  display: inline-block;

  width: 100%;
  height: 100%;
  min-width: 2.6rem;
  min-height: 2.6rem;
  aspect-ratio: 1/1!important;
  z-index: 10;
}
/* ==========================================================================================
GLASS ONLYE + hiệu ứng cần có dể tạo ra ánh sáng glass-effect
========================================================================================== */
#mobile-next .glass-only {
  position: absolute;
  display: inline-block;
  opacity: 0;
  animation: glassFadeRotate 1.2s ease-in-out infinite;
  transform-origin: center;
  z-index: 11;
  filter: blur(0px);
}

/* Hiệu ứng mượt: fade-in + xoay qua lại */
@keyframes glassFadeRotate {
  0% {
    opacity: 0;
    filter: blur(0px);
    transform: rotate(0deg);
  }

  25% {
    opacity: 1;
    transform: rotate(5deg);
  }

  50% {
    opacity: 0.8;
    filter: blur(10px);
    transform: rotate(-15deg);
  }

  75% {
    opacity: 1;
    filter: blur(15px);
    transform: rotate(15deg);
  }

  100% {
    opacity: 0;
    filter: blur(5px);
    transform: rotate(0deg);
  }
}












/**
 * .has-bg-img — Background Image Utility (v1.0.0)
 * Mục tiêu:
 *  - Dùng làm wrapper hiển thị ảnh nền “cover/center” giống object-fit.
 *  - Tùy biến qua CSS Custom Properties: url, size, position, repeat, opacity, blend.
 *  - Hỗ trợ overlay (tối/sáng), rounded, fixed, parallax (giảm chuyển động khi user chọn).
 *  - Hỗ trợ màn hình 2x bằng image-set().
 *
 * Cách dùng tối thiểu:
 *  <div class="has-bg-img" style="--bg-url: url('/img/hero.jpg')"></div>
 *
 * Gợi ý: đặt nội dung bên trong; lớp này KHÔNG thay thế <img> có ý nghĩa nội dung.
 */

.has-bg-img {
  /* --- Config qua CSS variables --- */
  --bg-url: none;               /* url('...') hoặc image-set(...) */
  --bg-size: cover;             /* cover | contain | auto | 100% 100% ... */
  --bg-pos: center center;      /* 50% 50%, top/center/bottom left/... */
  --bg-repeat: no-repeat;       /* no-repeat | repeat | space | round */
  --bg-attach: scroll;          /* scroll | fixed | local */
  --bg-radius: unset;               /* 8px... */
  --bg-overlay: 0;              /* 0..1  (0 = tắt overlay) */
  --bg-overlay-color: 0 0 0;    /* SRGB as r g b (0..255), vd: 0 0 0 là đen */
  --bg-blend: normal;           /* multiply | overlay | screen | ... */
  --bg-aspect: auto;            /* number hoặc auto (vd: 16/9, 4/3) */
  --bg-min-h: unset;            /* chiều cao tối thiểu */

  /* position: relative; */
  /* border-radius: var(--bg-radius); */
  overflow: hidden; /* để bo góc cũng áp cho overlay */
  /* min-height: var(--bg-min-h); */

  /* Aspect ratio tuỳ chọn: */
  aspect-ratio: var(--bg-aspect);

  /* Lớp nền thực thi bằng pseudo-element → hỗ trợ overlay dễ dàng */
}
.has-bg-img::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;

  /* Ảnh nền */
  background-image: var(--bg-url);
  background-size: var(--bg-size);
  background-position: var(--bg-pos);
  background-repeat: var(--bg-repeat);
  background-attachment: var(--bg-attach);
  background-color: transparent;          /* fallback nếu không có ảnh */
  mix-blend-mode: var(--bg-blend);
}
.has-bg-img::after {
  /* Overlay (nếu --bg-overlay > 0) */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: rgba(var(--bg-overlay-color), var(--bg-overlay));
  /* Ví dụ: --bg-overlay-color: 0 0 0; --bg-overlay: .35  -> phủ đen 35% */
}

/* Nội dung bên trong nổi phía trên */
.has-bg-img > * {
  position: relative;
  z-index: 2;
}

/* --------- Modifiers tiện dụng --------- */

/* Cover đầy khung (mặc định đã là cover) */
.has-bg-img--cover { --bg-size: cover; }
/* Contain đủ thấy cả ảnh */
.has-bg-img--contain { --bg-size: contain; }
/* Cố định nền khi scroll */
.has-bg-img--fixed { --bg-attach: fixed; }
/* Bo góc nhanh */
.has-bg-img--rounded { --bg-radius: 12px; }

/* Overlay nhanh */
.has-bg-img--dark   { --bg-overlay-color: 0 0 0; --bg-overlay: .35; }
.has-bg-img--light  { --bg-overlay-color: 255 255 255; --bg-overlay: .25; }

/* Parallax nhẹ bằng translate (tắt khi user giảm chuyển động) */
.has-bg-img--parallax::before {
  will-change: transform;
  transform: translateY(var(--parallax-offset, 0));
}
@media (prefers-reduced-motion: reduce) {
  .has-bg-img--parallax::before {
    transform: none !important;
  }
}

/* Trường hợp forced-colors (High Contrast) – bỏ overlay để tăng tương phản */
@media (forced-colors: active) {
  .has-bg-img::after { background: transparent; }
}