/* Step 5.1 — layout chung. Trích nguyên văn 2 block style header (id sec-fcd5)
 * và footer (id sec-505d) từ content-snapshot/home.html, giữ nguyên marker
 * RESPONSIVE_CLASS / RESPONSIVE_MEDIA của builder (không sửa, không viết lại).
 * Nạp SAU static/css/style.css + media.css (file builder gốc, copy nguyên văn).
 */

.u-header {
  background-image: ;
  background-position: 50% 50%;
}
.u-header .u-sheet-1 {
  min-height: 175px;
}
.u-header .u-menu-1 {
  margin: 0 auto 0 1155px;
}
.u-header .u-nav-1 {
  font-size: 1rem;
  letter-spacing: 0px;
  font-weight: 700;
  text-transform: uppercase;
}
.u-header .u-nav-2 {
  font-size: 1.25rem;
}
.u-header .u-menu-2 {
  margin: 95px auto 0;
}
.u-block-fbb5-26 {
  box-shadow: 2px 2px 8px 0 rgba(128,128,128,1);
}
.u-header .u-nav-4 {
  font-size: 1.25rem;
}
.u-block-fbb5-27 {
  box-shadow: 2px 2px 8px 0 rgba(128,128,128,1);
}
/*RESPONSIVE_MEDIA*/
@media (max-width: 1199px) {
  .u-header .u-sheet-1 {
    min-height: 198px;
  }
  .u-header .u-menu-1 {
    margin-left: 907px;
  }
  .u-header .u-menu-2 {
    margin-top: 123px;
    margin-bottom: -5px;
  }
}
/*/RESPONSIVE_MEDIA*/
/*RESPONSIVE_CLASS*/
.u-lg .u-header .u-sheet-1 {
  min-height: 198px;
}
.u-lg .u-header .u-menu-1 {
  margin-left: 907px;
}
.u-lg .u-header .u-menu-2 {
  margin-top: 123px;
  margin-bottom: -5px;
}
/*/RESPONSIVE_CLASS*/
/*RESPONSIVE_MEDIA*/
@media (max-width: 991px) {
  .u-header .u-sheet-1 {
    min-height: 175px;
  }
  .u-header .u-menu-1 {
    margin-left: 729px;
  }
  .u-header .u-menu-2 {
    margin-top: 95px;
    margin-bottom: 0;
  }
}
/*/RESPONSIVE_MEDIA*/
/*RESPONSIVE_CLASS*/
.u-md .u-header .u-sheet-1 {
  min-height: 175px;
}
.u-md .u-header .u-menu-1 {
  margin-left: 729px;
}
.u-md .u-header .u-menu-2 {
  margin-top: 95px;
  margin-bottom: 0;
}
/*/RESPONSIVE_CLASS*/
/*RESPONSIVE_MEDIA*/
@media (max-width: 767px) {
  .u-header .u-sheet-1 {
    min-height: auto;
  }
  .u-header .u-menu-1 {
    margin-left: 547px;
  }
}
/*/RESPONSIVE_MEDIA*/
/*RESPONSIVE_CLASS*/
.u-sm .u-header .u-sheet-1 {
  min-height: auto;
}
.u-sm .u-header .u-menu-1 {
  margin-left: 547px;
}
/*/RESPONSIVE_CLASS*/
/*RESPONSIVE_MEDIA*/
@media (max-width: 575px) {
  .u-header .u-menu-1 {
    margin-left: 344px;
  }
}
/*/RESPONSIVE_MEDIA*/
/*RESPONSIVE_CLASS*/
.u-xs .u-header .u-menu-1 {
  margin-left: 344px;
}
/*/RESPONSIVE_CLASS*/


.u-footer .u-sheet-1 {
  min-height: 66px;
}
.u-footer .u-group-1 {
  width: 848px;
  min-height: 109px;
  margin: 17px auto 15px 8px;
}
.u-footer .u-container-layout-1 {
  padding-left: 20px;
  padding-right: 20px;
}
.u-footer .u-text-1 {
  font-size: 1.25rem;
  font-weight: 700;
  font-family: lora;
  margin: 0;
}
.u-footer .u-text-2 {
  margin: 0;
}
/*RESPONSIVE_MEDIA*/
@media (max-width: 1199px) {
  .u-footer .u-group-1 {
    margin-left: 6px;
    width: 699px;
    position: relative;
  }
  .u-footer .u-container-layout-1 {
    padding-left: 16px;
    padding-right: 16px;
  }
  .u-footer .u-text-1 {
    position: relative;
  }
  .u-footer .u-text-2 {
    position: relative;
  }
}
/*/RESPONSIVE_MEDIA*/
/*RESPONSIVE_CLASS*/
.u-lg .u-footer .u-group-1 {
  margin-left: 6px;
  width: 699px;
  position: relative;
}
.u-lg .u-footer .u-container-layout-1 {
  padding-left: 16px;
  padding-right: 16px;
}
.u-lg .u-footer .u-text-1 {
  position: relative;
}
.u-lg .u-footer .u-text-2 {
  position: relative;
}
/*/RESPONSIVE_CLASS*/
/*RESPONSIVE_MEDIA*/
@media (max-width: 991px) {
  .u-footer .u-group-1 {
    margin-left: 5px;
    width: 535px;
  }
  .u-footer .u-container-layout-1 {
    padding-left: 13px;
    padding-right: 13px;
  }
}
/*/RESPONSIVE_MEDIA*/
/*RESPONSIVE_CLASS*/
.u-md .u-footer .u-group-1 {
  margin-left: 5px;
  width: 535px;
}
.u-md .u-footer .u-container-layout-1 {
  padding-left: 13px;
  padding-right: 13px;
}
/*/RESPONSIVE_CLASS*/
/*RESPONSIVE_MEDIA*/
@media (max-width: 767px) {
  .u-footer .u-sheet-1 {
    min-height: auto;
  }
  .u-footer .u-group-1 {
    margin-left: 4px;
    width: 502px;
  }
  .u-footer .u-container-layout-1 {
    padding-left: 9px;
    padding-right: 9px;
  }
}
/*/RESPONSIVE_MEDIA*/
/*RESPONSIVE_CLASS*/
.u-sm .u-footer .u-sheet-1 {
  min-height: auto;
}
.u-sm .u-footer .u-group-1 {
  margin-left: 4px;
  width: 502px;
}
.u-sm .u-footer .u-container-layout-1 {
  padding-left: 9px;
  padding-right: 9px;
}
/*/RESPONSIVE_CLASS*/
/*RESPONSIVE_MEDIA*/
@media (max-width: 575px) {
  .u-footer .u-group-1 {
    margin-left: 2px;
    width: 338px;
  }
  .u-footer .u-container-layout-1 {
    padding-left: 6px;
    padding-right: 6px;
  }
}
/*/RESPONSIVE_MEDIA*/
/*RESPONSIVE_CLASS*/
.u-xs .u-footer .u-group-1 {
  margin-left: 2px;
  width: 338px;
}
.u-xs .u-footer .u-container-layout-1 {
  padding-left: 6px;
  padding-right: 6px;
}
/*/RESPONSIVE_CLASS*/

            .u-offcanvas .u-sidenav { flex-basis: 250px !important; }            .u-offcanvas:not(.u-menu-open-right) .u-sidenav { margin-left: -250px; }            .u-offcanvas.u-menu-open-right .u-sidenav { margin-right: -250px; }            @keyframes menu-shift-left    { from { left: 0;        } to { left: 250px;  } }            @keyframes menu-unshift-left  { from { left: 250px;  } to { left: 0;        } }            @keyframes menu-shift-right   { from { right: 0;       } to { right: 250px; } }            @keyframes menu-unshift-right { from { right: 250px; } to { right: 0;       } }            

/* Header: nguồn set ảnh nền inline trên <header> (uploads/2021/01/header-2.jpg),
   app đặt qua class trỏ static local (REQ-WEB-11). 19/10 vòng 2 (REQ-WEB-17):
   header BỎ ảnh nền, thành menu strip trơn + sticky; banner salon_banner_2.jpg
   (2032x528) chuyển xuống khối `.u-site-banner` riêng để hiện NGUYÊN VẸN — với
   khung 175/198px + cover, desktop chỉ thấy 35–42% chiều cao ảnh, mất hẳn chữ
   "DIAMOND NAILS ORGANIC SPA" + dải address/phone (đo Playwright 19/10).
   Chỉ còn MỘT banner: khác bản đã revert 7c2bc5c (thêm khối mà header vẫn giữ ảnh). */
/* Fix 5.10 lần 2 (user 19/10, ảnh tham chiếu images/banner_2.JPG): banner phải
   SÁT mép trên trang, menu nằm ĐÈ lên banner. Header rời khỏi flow (absolute)
   → `.u-site-banner` bắt đầu từ y=0; `u-sticky` trong markup bị override ở đây
   (specificity 2 class > 1 class) nên menu KHÔNG còn dính đỉnh khi cuộn.
   z-index 30 < 1001 của drawer offcanvas → menu mở vẫn phủ trên header. */
.u-header.u-header-photo {
  background-image: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
}
/* Override đặt SAU block builder (không sửa marker RESPONSIVE_CLASS/MEDIA —
   log 5.1): builder set min-height 175/198px + menu-2 margin-top 95/123px cho
   header ảnh nền cao; strip trơn chỉ cần chiều cao nội dung menu.
   Fix 5.10 (user 19/10): hamburger `.u-menu-1` (builder đẩy sang phải bằng
   margin-left 1155/907/729/547px) KHÔNG chiếm hàng riêng nữa — absolute góc
   phải để menu-2 lên cùng hàng, strip 90px -> 46px, banner sát top hơn.
   `.u-nav-container-collapse` của drawer là fixed nên vẫn toàn màn hình khi mở. */
.u-header .u-sheet-1 {
  min-height: 0;
  position: relative;
}
.u-header .u-menu-1 {
  position: absolute;
  right: 0;
  top: 6px;
  margin: 0;
}
.u-header .u-menu-2 {
  margin-top: 6px;
}
/* Banner site (REQ-WEB-17): width/height trên <img> chống CLS; height:auto giữ
   đúng tỉ lệ 3.848 ở mọi bề rộng; line-height:0 bỏ khe 4px dưới img inline. */
.u-site-banner {
  line-height: 0;
}
.u-site-banner img {
  display: block;
  width: 100%;
  height: auto;
}
/* Drawer offcanvas: nguồn set inline `width: 100%` CHỈ KHI MỞ
   (script.js::showOverlay; hideOverlay xóa về 0 khi đóng). Scope theo .open —
   nếu để width:100% thường trực, container fixed full-viewport trong suốt
   (z-1001) chặn mọi click khi menu đóng (Fix 5.1 F1). */
.u-enable-responsive.u-offcanvas.open .u-nav-container-collapse {
  width: 100%;
}
/* Overlay tối khi drawer mở: nguồn display:block qua cơ chế JS builder
   (không tìm thấy rule CSS thuần nào set nó trên live) — app làm bằng
   rule CSS tương đương visual. */
.u-offcanvas.open .u-menu-overlay {
  display: block;
}
/* Màu chữ custom-color-6 (#1a3bf9 — ghi chú chính sách trang /booking/):
   nguồn định nghĩa trong block inline head (site_style_css_parts), không có
   trong style.css copy — trích rule text tương ứng (snapshot booking.html
   1716-1720). Trang khác không dùng class này. */
.u-text-custom-color-6 {
  color: #1a3bf9 !important;
}