/* ==========================================================================
   YOMI Website Management & Designer Styles
   ========================================================================== */

.website-page {
  height: 100%;
  min-height: 0;
  overflow: auto;
  padding: 0;
  color: var(--yomi-table-body-text, #1e293b);
  font-family: var(--yomi-table-body-text-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
}

.website-page-websiteDesigner {
  height: 100%;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Base Panels & Overview */
.website-panel header p { margin: 5px 0 0; color: var(--yomi-table-sub-text, #64748b); font-size: 13px; }
.website-overview-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.website-stat-card, .website-panel {
  border: 1px solid rgba(203, 213, 225, 0.72);
  border-radius: 14px;
  background: var(--yomi-card-bg, #fff);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}
.website-stat-card { display: grid; gap: 10px; padding: 18px; }
.website-stat-card > span { color: var(--yomi-table-sub-text, #64748b); font-size: 13px; }
.website-stat-card > strong { font-size: 20px; color: #0f172a; }
.website-stat-card > small { min-height: 28px; color: var(--yomi-table-sub-text, #64748b); font-size: 12px; line-height: 1.4; }
.website-panel { padding: 20px; }
.website-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.website-panel h2 { margin: 0; font-size: 17px; }

.website-status-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  background: #f1f5f9;
  color: #475569;
}
.website-status-pill.status-published { background: #dcfce7; color: #166534; font-weight: 600; }

.website-primary-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 8px 16px;
  border: 1px solid #2563eb;
  border-radius: 8px;
  background: #2563eb;
  color: #ffffff;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease;
}
.website-primary-action:hover { background: #1d4ed8; color: #fff; }

.website-overview-preview-box {
  padding: 24px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  text-align: center;
}

/* ==========================================================================
   WEBSITE DESIGNER WORKSPACE
   ========================================================================== */

.website-designer-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: #f8fafc;
  position: relative;
}

/* ==========================================================================
   THANH ĐIỀU KHIỂN TRÊN CÙNG (TOPBAR TRẢI DÀI 100% TỪ TRÁI SANG PHẢI)
   ========================================================================== */
.website-topbar {
  position: relative;
  height: 54px;
  padding: 0 16px;
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  z-index: 10;
  width: 100%;
  box-sizing: border-box;
}
.website-topbar-left,
.website-topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 2;
}

/* Căn giữa Desktop / Mobile tuyệt đối theo trục giữa thanh topbar */
.website-topbar-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  z-index: 1;
}

/* Switch Toggle Công tắc xuất bản nhỏ gọn, bỏ chữ, nằm bên phải nút Lưu/Sửa */
.website-publish-switch {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  padding: 2px;
  border-radius: 999px;
  background: transparent;
  transition: all 0.15s ease;
}
.website-publish-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.website-switch-slider {
  position: relative;
  width: 34px;
  height: 20px;
  background-color: #cbd5e1;
  border-radius: 999px;
  transition: background-color 0.2s ease;
  display: inline-block;
  flex-shrink: 0;
}
.website-switch-slider::before {
  content: "";
  position: absolute;
  height: 16px;
  width: 16px;
  left: 2px;
  top: 2px;
  background-color: #ffffff;
  border-radius: 50%;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.website-publish-switch input:checked + .website-switch-slider {
  background-color: #16a34a; /* Xanh lá khi xuất bản */
}
.website-publish-switch input:checked + .website-switch-slider::before {
  transform: translateX(14px);
}

/* Nút Icon Topbar (Xem trước, Sửa, Lưu) */
.website-btn-icon-topbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #475569;
  cursor: pointer;
  transition: all 0.15s ease;
}
.website-btn-icon-topbar svg {
  width: 17px;
  height: 17px;
}
.website-btn-icon-topbar:hover {
  background: #f8fafc;
  color: #1e293b;
  border-color: #94a3b8;
}
.website-btn-icon-topbar.btn-edit {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #2563eb;
}
.website-btn-icon-topbar.btn-edit:hover {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #1d4ed8;
}
.website-btn-icon-topbar.btn-save {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
}
.website-btn-icon-topbar.btn-save:hover {
  background: #1d4ed8;
  border-color: #1d4ed8;
}

/* 3 Cột Chính Desktop nằm dưới Topbar */
.website-3col-layout {
  display: grid;
  grid-template-columns: 310px 1fr 310px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.website-col {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  background: #ffffff;
}

.website-col-header {
  padding: 16px 18px;
  border-bottom: 1px solid #e2e8f0;
  background: #ffffff;
  flex-shrink: 0;
}
.website-col-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: #2563eb;
  background: #eff6ff;
  padding: 2px 8px;
  border-radius: 4px;
  margin-bottom: 4px;
}
.website-col-header h2 { margin: 2px 0 4px; font-size: 16px; font-weight: 700; color: #0f172a; }
.website-col-header p { margin: 0; font-size: 12px; color: #64748b; line-height: 1.4; }

/* --------------------------------------------------------------------------
   COLUMN 1: COMPONENT LIBRARY
   -------------------------------------------------------------------------- */
.website-col-library {
  border-right: 1px solid #e2e8f0;
}
.website-col-library .website-col-header {
  height: 56px;
  display: flex;
  align-items: center;
  padding: 0 18px;
  box-sizing: border-box;
}
.website-col-library .website-col-header h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
}
.website-search-box {
  margin-top: 12px;
}
.website-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 12px;
  font-size: 13px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  outline: none;
  background: #f8fafc;
  transition: border-color 0.15s;
}
.website-search-input:focus {
  border-color: #2563eb;
  background: #ffffff;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

/* ==========================================================================
   TÙY BIẾN THANH CUỘN (SCROLLBAR): CHỈ RÊ VÀO VỊ TRÍ THANH TRƯỢT MỚI HIỆN
   ========================================================================== */
.website-library-groups-scroll,
.website-col-canvas,
.website-inspector-scroll-body,
.website-drawer-form,
.website-themes-body,
.website-preview-modal-body {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

.website-library-groups-scroll::-webkit-scrollbar,
.website-col-canvas::-webkit-scrollbar,
.website-inspector-scroll-body::-webkit-scrollbar,
.website-drawer-form::-webkit-scrollbar,
.website-themes-body::-webkit-scrollbar,
.website-preview-modal-body::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.website-library-groups-scroll::-webkit-scrollbar-track,
.website-col-canvas::-webkit-scrollbar-track,
.website-inspector-scroll-body::-webkit-scrollbar-track,
.website-drawer-form::-webkit-scrollbar-track,
.website-themes-body::-webkit-scrollbar-track,
.website-preview-modal-body::-webkit-scrollbar-track {
  background: transparent;
}

.website-library-groups-scroll::-webkit-scrollbar-thumb,
.website-col-canvas::-webkit-scrollbar-thumb,
.website-inspector-scroll-body::-webkit-scrollbar-thumb,
.website-drawer-form::-webkit-scrollbar-thumb,
.website-themes-body::-webkit-scrollbar-thumb,
.website-preview-modal-body::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 999px;
  transition: background 0.15s ease;
}

/* Khi rê chuột vào khu vực cuộn: thanh trượt xuất hiện mờ nhẹ */
.website-library-groups-scroll:hover,
.website-col-canvas:hover,
.website-inspector-scroll-body:hover,
.website-drawer-form:hover,
.website-themes-body:hover,
.website-preview-modal-body:hover {
  scrollbar-color: rgba(148, 163, 184, 0.45) transparent;
}

.website-library-groups-scroll:hover::-webkit-scrollbar-thumb,
.website-col-canvas:hover::-webkit-scrollbar-thumb,
.website-inspector-scroll-body:hover::-webkit-scrollbar-thumb,
.website-drawer-form:hover::-webkit-scrollbar-thumb,
.website-themes-body:hover::-webkit-scrollbar-thumb,
.website-preview-modal-body:hover::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.45);
}

/* Khi rê trỏ chuột trực tiếp vào thanh trượt (vị trí thanh trượt): hiện rõ đậm */
.website-library-groups-scroll::-webkit-scrollbar-thumb:hover,
.website-col-canvas::-webkit-scrollbar-thumb:hover,
.website-inspector-scroll-body::-webkit-scrollbar-thumb:hover,
.website-drawer-form::-webkit-scrollbar-thumb:hover,
.website-themes-body::-webkit-scrollbar-thumb:hover,
.website-preview-modal-body::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}

.website-library-groups-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 0 32px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Các nhóm thành phần: Phân cấp rõ ràng, dễ nhìn */
.website-component-group {
  border: none;
  border-bottom: 1px solid #e2e8f0;
  border-radius: 0;
  background: #ffffff;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: none;
  transition: all 0.15s ease;
}
.website-component-group:last-child {
  border-bottom: none;
}

/* Tiêu đề nhóm thành phần (Cấp 1) */
.website-group-title {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  background: #ffffff;
  border: none;
  cursor: pointer;
  user-select: none;
  font-family: var(--yomi-panel-title-text-font, var(--yomi-font-sans, Inter, -apple-system, sans-serif));
  transition: background 0.15s, border-color 0.15s;
}
.website-group-title:hover {
  background: #f8fafc;
}

/* Khi nhóm đang mở: Đổi nền xanh nhạt, thêm vạch nhấn bên trái, chữ bình thường không in đậm */
.website-component-group.is-expanded .website-group-title {
  background: #f1f5f9;
  border-left: 3px solid #2563eb;
  padding-left: 13px;
  border-bottom: 1px solid #e2e8f0;
}
.website-component-group.is-expanded .website-group-title .website-group-meta h3 {
  color: #1d4ed8;
  font-weight: 500;
}
.website-component-group.is-expanded .website-group-icon {
  color: #2563eb;
}

.website-group-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  background: transparent;
  border: none;
  color: #64748b;
  font-size: 15px;
  flex-shrink: 0;
  transition: color 0.15s;
}
.website-group-svg {
  width: 17px;
  height: 17px;
  display: block;
}
.website-group-meta { flex: 1; min-width: 0; }
.website-group-meta h3 { margin: 0; font-size: 13px; font-weight: 400; color: #1e293b; transition: color 0.15s; }
.website-group-meta small { display: block; font-size: 11px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 400; }
.website-group-count { font-size: 11px; color: #94a3b8; font-weight: 400; }
.website-group-chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: #94a3b8;
  transition: transform 0.2s ease, color 0.15s;
  flex-shrink: 0;
}
.website-group-chevron svg {
  width: 15px;
  height: 15px;
}
.website-group-chevron.is-open {
  transform: rotate(180deg);
  color: #2563eb;
}

/* Vùng chứa các mẫu con (Cấp 2): Nền xám nhạt thụt vào, tạo khối tách biệt */
.website-variants-list {
  background: #f8fafc;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.website-component-group:not(.is-expanded) .website-variants-list {
  display: none;
}

/* Mỗi thẻ mẫu con (Variant Item): Card trắng độc lập, viền bo tròn */
.website-variant-item {
  padding: 10px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #ffffff;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
  display: flex;
  flex-direction: column;
  gap: 8px;
  user-select: none;
  width: 100%;
  box-sizing: border-box;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  font-family: var(--yomi-panel-title-text-font, var(--yomi-font-sans, Inter, -apple-system, sans-serif));
}
/* Khi hover: Chỉ đổi nhẹ viền, không nổi nhảy cộm để nhẹ nhàng, thanh thoát */
.website-variant-item:hover {
  background: #ffffff;
  border-color: #94a3b8;
}
.website-variant-item:hover .website-variant-name {
  color: #1e293b;
}
.website-variant-item:active {
  cursor: grabbing;
}
.website-variant-item.is-dragging {
  opacity: 0.35;
}

/* Hàng tiêu đề tên mẫu nằm phía trên */
.website-variant-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
/* Chữ bình thường không in đậm */
.website-variant-name {
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  color: #475569;
  transition: color 0.15s;
}
.website-variant-badges {
  display: flex;
  align-items: center;
  gap: 5px;
}
.website-variant-ratio-tag {
  font-size: 10px;
  font-weight: 400;
  color: #64748b;
  background: #f1f5f9;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid #e2e8f0;
  white-space: nowrap;
}

/* Con trỏ chuột: Header/Footer bấm chọn luôn (pointer), các khối khác rê chuột vào đổi thành icon kéo thả (grab) */
.website-variant-item.is-header-footer-item,
.website-variant-item.is-header-footer-item * {
  cursor: pointer !important;
}
.website-variant-item.is-drag-only-item,
.website-variant-item.is-drag-only-item * {
  cursor: grab !important;
  cursor: -webkit-grab !important;
}
.website-variant-item.is-drag-only-item:active,
.website-variant-item.is-drag-only-item:active * {
  cursor: grabbing !important;
  cursor: -webkit-grabbing !important;
}

/* Hiệu ứng nổi bật khi mẫu tương ứng với khung thiết kế đang chọn trên Canvas */
.website-variant-item.is-selected-on-canvas {
  border: 2px solid #2563eb;
  background: #ffffff;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.2);
}
.website-variant-item.is-selected-on-canvas .website-variant-name {
  color: #2563eb;
  font-weight: 600;
}

/* Hiệu ứng chớp sáng thu hút ánh nhìn khi click vào khung trên Canvas */
@keyframes variantPulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.6); }
  50% { transform: scale(1.02); box-shadow: 0 0 0 6px rgba(37, 99, 235, 0.25); border-color: #2563eb; }
  100% { transform: scale(1); box-shadow: 0 4px 14px rgba(37, 99, 235, 0.2); }
}
.website-variant-item.highlight-pulse {
  animation: variantPulse 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Khung hiển thị mẫu: Chứa các thanh gạch ngang wireframe */
.website-variant-preview-container {
  width: 100%;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #f8fafc;
  overflow: hidden;
  transition: border-color 0.15s, background-color 0.15s;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  box-sizing: border-box;
  min-height: 44px;
}
.website-variant-item:hover .website-variant-preview-container {
  border-color: #cbd5e1;
  background: #ffffff;
}
.website-variant-item:hover .website-variant-preview-container {
  border-color: #cbd5e1;
  background: #ffffff;
}

/* ==========================================================================
   WIREFRAME SKELETON LAYOUT BARS (CÁC THANH GẠCH NGANG HIỂN THỊ MẪU)
   ========================================================================== */
.wf-layout {
  width: 100%;
  box-sizing: border-box;
}
.wf-row {
  display: flex;
  align-items: center;
}
.wf-col {
  display: flex;
  flex-direction: column;
}
.wf-center {
  justify-content: center;
  align-items: center;
}
.wf-between {
  justify-content: space-between;
}
.wf-center-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.wf-bar {
  background: #cbd5e1;
  border-radius: 999px;
  height: 4px;
  flex-shrink: 0;
}
.wf-bar-bold {
  background: #64748b;
  border-radius: 999px;
  height: 6px;
  flex-shrink: 0;
}
.wf-rect {
  background: #e2e8f0;
  border-radius: 4px;
  flex-shrink: 0;
}
.wf-circle {
  background: #cbd5e1;
  border-radius: 50%;
  flex-shrink: 0;
}
.website-variant-item:hover .website-variant-preview-container {
  border-color: #cbd5e1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
.website-variant-preview-container.ratio-16-7 {
  aspect-ratio: 16 / 7;
  width: 100%;
}
.website-variant-preview-container.ratio-16-9 {
  aspect-ratio: 16 / 9;
  width: 100%;
}
.website-variant-preview-container.ratio-3-4 {
  aspect-ratio: 3 / 4;
  max-width: 200px;
  margin: 0 auto;
}
.website-variant-preview-container.ratio-4-3 {
  aspect-ratio: 4 / 3;
  width: 100%;
}
.website-variant-preview-container.ratio-1-1 {
  aspect-ratio: 1 / 1;
  max-width: 210px;
  margin: 0 auto;
}
.website-variant-preview-container.ratio-auto {
  width: 100%;
  min-height: 52px;
}

/* --------------------------------------------------------------------------
   VISUAL MOCKUPS CHO CÁC MẪU BIẾN THỂ (CỘT 1 TRỰC QUAN DỄ CHỌN)
   -------------------------------------------------------------------------- */
.website-variant-info h4 { margin: 0 0 2px; font-size: 12px; font-weight: 600; color: #1e293b; }
.website-variant-info p { margin: 0; font-size: 11px; color: #64748b; line-height: 1.3; }

.website-btn-add-variant {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #2563eb;
  cursor: pointer;
  transition: all 0.12s;
}
.website-btn-add-variant svg { width: 14px; height: 14px; }
.website-btn-add-variant:hover {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   COLUMN 2: CANVAS (Khu vực thiết kế)
   -------------------------------------------------------------------------- */
.website-col-canvas {
  background: #f1f5f9;
  position: relative;
  display: flex;
  flex-direction: column;
}

.website-canvas-toolbar {
  height: 56px;
  padding: 0 20px;
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  z-index: 5;
}
.website-toolbar-left, .website-toolbar-center, .website-toolbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.website-theme-title-editor {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.website-theme-title-editor strong {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
}
.website-btn-mini {
  background: none;
  border: none;
  font-size: 12px;
  color: #64748b;
  cursor: pointer;
  padding: 2px 4px;
}
.website-btn-mini:hover { color: #2563eb; }

.website-status-tag {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
}
.website-status-tag.status-published { background: #dcfce7; color: #166534; }
.website-status-tag.status-saved { background: #e0f2fe; color: #0369a1; }
.website-status-tag.status-draft { background: #fef3c7; color: #92400e; }

/* Viewport Switcher */
.website-viewport-switcher {
  display: flex;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 3px;
  gap: 3px;
}
.website-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: none;
  background: none;
  font-size: 12px;
  font-weight: 500;
  color: #64748b;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.12s;
}
.website-view-btn svg { width: 14px; height: 14px; }
.website-view-btn.is-active {
  background: #ffffff;
  color: #0f172a;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.website-btn-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 13px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #334155;
  transition: all 0.12s;
}
.website-btn-action svg { width: 14px; height: 14px; }
.website-btn-action:hover { background: #f8fafc; border-color: #94a3b8; }
.website-btn-action.btn-save { background: #2563eb; border-color: #2563eb; color: #ffffff; font-weight: 600; }
.website-btn-action.btn-save:hover { background: #1d4ed8; }
.website-btn-action.btn-publish { background: #166534; border-color: #166534; color: #ffffff; font-weight: 600; }
.website-btn-action.btn-publish:hover { background: #14532d; }

/* Canvas Workspace & Frame */
.website-canvas-workspace {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 44px 20px 80px;
  background-color: #f1f5f9;
  background-image: radial-gradient(#cbd5e1 1px, transparent 1px);
  background-size: 16px 16px;
  position: relative;
}

/* KHUNG WEBSITE QUY ĐỊNH BẮT BUỘC TỐI ĐA 700PX */
.website-canvas-frame {
  margin: 0 auto;
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.1);
  border-radius: 8px;
  overflow: visible;
  transition: max-width 0.25s ease;
  min-height: 500px;
  background-color: #ffffff;
}
.website-canvas-frame.is-desktop-frame {
  max-width: 700px; /* BẮT BUỘC 700PX THEO ĐẶC TẢ */
  width: 100%;
}
.website-canvas-frame.is-mobile-frame {
  max-width: 390px;
  width: 100%;
  border: 8px solid #1e293b;
  border-radius: 36px;
}

.website-canvas-no-modules {
  padding: 60px 24px;
  text-align: center;
  color: #64748b;
}
.website-empty-icon { font-size: 40px; color: #cbd5e1; margin-bottom: 12px; display: inline-block; }
.website-canvas-no-modules h3 { margin: 0 0 6px; font-size: 16px; color: #1e293b; }
.website-canvas-no-modules p { margin: 0; font-size: 13px; }

/* Canvas Block Wrapper */
.website-canvas-block {
  position: relative;
  outline: 1px dashed transparent;
  transition: outline-color 0.15s;
}
.website-canvas-block:hover {
  outline-color: #93c5fd;
}
.website-canvas-block.is-selected {
  outline: 2px solid #2563eb;
  outline-offset: -2px;
  z-index: 40;
}
.website-canvas-block.is-hidden-block {
  opacity: 0.35;
}
.website-canvas-block.is-dragging {
  opacity: 0.3;
}
.website-canvas-block.drop-target-top::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 0;
  right: 0;
  height: 5px;
  background: #2563eb;
  border-radius: 3px;
  box-shadow: 0 0 10px rgba(37, 99, 235, 0.7);
  z-index: 15;
}
.website-canvas-block.drop-target-bottom::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 0;
  right: 0;
  height: 5px;
  background: #2563eb;
  border-radius: 3px;
  box-shadow: 0 0 10px rgba(37, 99, 235, 0.7);
  z-index: 15;
}

/* Block Quick Action Toolbar (Dời lên phía trên nằm ngoài thiết kế) */
.website-block-toolbar {
  position: absolute;
  top: -34px;
  right: 0;
  display: none;
  align-items: center;
  gap: 4px;
  background: #0f172a;
  color: #ffffff;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  z-index: 50;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}
.website-block-toolbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 8px;
}
.website-canvas-block.is-selected .website-block-toolbar {
  display: flex;
}
.website-block-drag-handle {
  cursor: grab;
  padding: 0 4px;
  color: #94a3b8;
}
.website-block-label {
  font-weight: 500;
  color: #e2e8f0;
  margin-right: 6px;
  font-size: 10px;
  text-transform: uppercase;
}
.website-block-buttons {
  display: flex;
  gap: 2px;
}
.website-tb-btn {
  background: none;
  border: none;
  color: #cbd5e1;
  padding: 3px 6px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 11px;
}
.website-tb-btn:hover { background: rgba(255,255,255,0.2); color: #ffffff; }
.website-tb-btn.btn-delete:hover { background: #ef4444; color: #ffffff; }

/* Drop Target */
.website-drop-target {
  height: 8px;
  margin: -4px 0;
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.website-drop-line {
  width: 100%;
  height: 2px;
  background: transparent;
  transition: all 0.15s;
}
.website-drop-target.is-drag-over {
  height: 20px;
  margin: -10px 0;
}
.website-drop-target.is-drag-over .website-drop-line {
  height: 4px;
  background: #2563eb;
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(37,99,235,0.6);
}

/* Block Spacings */
.website-canvas-block.spacing-small { padding-top: 8px; padding-bottom: 8px; }
.website-canvas-block.spacing-medium { padding-top: 18px; padding-bottom: 18px; }
.website-canvas-block.spacing-large { padding-top: 32px; padding-bottom: 32px; }

/* --------------------------------------------------------------------------
   PROPERTY INSPECTOR Ở CỘT 3 (HIỂN THỊ ĐỘC LẬP, KHÔNG CHE CANVAS THIẾT KẾ)
   -------------------------------------------------------------------------- */
.website-col-inspector {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: #ffffff;
  border-left: 1px solid #e2e8f0;
}
/* Sub-header bảng chỉnh sửa thành phần ở Cột 3 (gọn gàng bên dưới Topbar chung) */
.website-inspector-sub-header {
  height: 44px;
  padding: 0 16px;
  border-bottom: 1px solid #e2e8f0;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  box-sizing: border-box;
}
.website-inspector-sub-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  margin-right: 8px;
}
.website-inspector-title-input {
  width: 100%;
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  border: 1px solid transparent;
  background: transparent;
  padding: 4px 6px;
  border-radius: 4px;
  outline: none;
  transition: all 0.15s ease;
  font-family: inherit;
}
.website-inspector-title-input:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}
.website-inspector-title-input:focus {
  background: #ffffff;
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}
.website-inspector-sub-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.website-btn-icon-mini.btn-save-inspector {
  color: #16a34a;
  border-color: #86efac;
  background: #f0fdf4;
}
.website-btn-icon-mini.btn-save-inspector:hover {
  background: #16a34a;
  color: #ffffff;
  border-color: #16a34a;
}
.website-inspector-sub-title strong {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
}
.website-btn-icon-mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #475569;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  transition: all 0.15s ease;
}
.website-btn-icon-mini:hover {
  background: #eff6ff;
  color: #2563eb;
  border-color: #93c5fd;
}
.website-btn-icon-mini.btn-close:hover {
  background: #fee2e2;
  color: #dc2626;
  border-color: #fca5a5;
}

/* Sub-header danh sách giao diện ở Cột 3 */
.website-themes-sub-header {
  height: 44px;
  padding: 0 16px;
  border-bottom: 1px solid #e2e8f0;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  box-sizing: border-box;
}
.website-themes-sub-header h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
}
.website-inspector-col-header {
  display: none;
}
.website-block-title-box {
  display: flex;
  align-items: center;
  gap: 8px;
}
.website-block-title-text {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
}
.website-inspector-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.website-btn-icon-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #475569;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  transition: all 0.15s ease;
}
.website-btn-icon-action:hover {
  background: #eff6ff;
  color: #2563eb;
  border-color: #93c5fd;
}
.website-btn-icon-action.btn-close:hover {
  background: #fee2e2;
  color: #dc2626;
  border-color: #fca5a5;
}
.website-form-label-muted {
  font-size: 12px;
  font-weight: 600;
  color: #475569;
}
.website-variant-static-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
}
.website-variant-static-name {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
}
.website-inspector-kicker {
  display: none; /* Bỏ kicker theo yêu cầu người dùng */
}
.website-inspector-col-header h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
}
.website-btn-close-inspector {
  display: none;
}
.website-inspector-scroll-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.website-drawer-form {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.website-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.website-form-group label {
  font-size: 12px;
  font-weight: 600;
  color: #334155;
}
.website-input-text, .website-input-select, .website-input-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  font-size: 13px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #ffffff;
  color: #0f172a;
}
.website-input-text:focus, .website-input-select:focus, .website-input-textarea:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37,99,235,0.1);
}
.website-input-hint { font-size: 11px; color: #94a3b8; }
.website-form-row { display: flex; gap: 10px; }
.flex-1 { flex: 1; }
.website-form-divider { border: none; border-top: 1px solid #e2e8f0; margin: 4px 0; }

.website-drawer-actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: 14px;
}
.website-btn-secondary {
  flex: 1;
  padding: 8px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.website-btn-danger {
  padding: 8px 12px;
  border: 1px solid #fecaca;
  background: #fef2f2;
  color: #dc2626;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   COLUMN 3: THEMES LIST
   -------------------------------------------------------------------------- */
.website-col-themes {
  border-left: 1px solid #e2e8f0;
}
.website-themes-header {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  box-sizing: border-box;
  gap: 12px;
}
.website-themes-header .website-col-header-info h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
}
.website-btn-create-theme {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 0;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid #2563eb;
  background: #eff6ff;
  color: #2563eb;
  cursor: pointer;
  white-space: nowrap;
}
.website-btn-create-theme:hover { background: #2563eb; color: #ffffff; }

/* ==========================================================================
   CHẾ ĐỘ XEM (VIEW MODE) – Ẩn nút chỉnh sửa, không cho tương tác canvas
   ========================================================================== */
.website-designer-container.is-view-mode .website-canvas-block-actions,
.website-designer-container.is-view-mode .website-block-toolbar,
.website-designer-container.is-view-mode .website-canvas-block.is-hidden-block,
.website-designer-container.is-view-mode .website-drop-target,
.website-designer-container.is-view-mode .website-btn-add-variant {
  display: none !important;
}
.website-designer-container.is-view-mode .website-canvas-block {
  cursor: default;
}
.website-designer-container.is-view-mode .website-canvas-block,
.website-designer-container.is-view-mode .website-canvas-block:hover {
  outline: none !important;
  box-shadow: none !important;
}

/* ==========================================================================
   DANH SÁCH GIAO DIỆN THEO NHÓM LOẠI TRANG (Cột 3)
   ========================================================================== */
.website-themes-list-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.website-theme-page-group {
  flex-shrink: 0;
}
.website-theme-group-label {
  margin: 0;
  padding: 8px 16px;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  position: sticky;
  top: 0;
  z-index: 2;
}
.website-theme-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid #f1f5f9;
  gap: 10px;
  cursor: pointer;
  transition: background 0.12s;
}
.website-theme-row:last-child {
  border-bottom: none;
}
.website-theme-row:hover {
  background: #f8fafc;
}
.website-theme-row.is-active-theme {
  background: #eff6ff;
  border-left: 3px solid #2563eb;
  padding-left: 13px;
}
.website-theme-row-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
  cursor: pointer;
}
.website-theme-row-name {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.12s;
}
.website-theme-row:hover .website-theme-row-name {
  color: #2563eb;
}
.website-theme-row.is-active-theme .website-theme-row-name {
  color: #1d4ed8;
}
.website-theme-row-tag {
  font-size: 11px;
  font-weight: 500;
  color: #64748b;
}
.website-theme-row-meta {
  font-size: 10px;
  color: #94a3b8;
}
.website-theme-row-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Toggle switch nhỏ cho từng giao diện trong danh sách */
.website-theme-toggle {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}
.website-theme-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.website-theme-toggle-slider {
  position: relative;
  width: 28px;
  height: 16px;
  background-color: #cbd5e1;
  border-radius: 999px;
  transition: background-color 0.2s ease;
  display: inline-block;
}
.website-theme-toggle-slider::before {
  content: "";
  position: absolute;
  height: 12px;
  width: 12px;
  left: 2px;
  top: 2px;
  background-color: #ffffff;
  border-radius: 50%;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.website-theme-toggle input:checked + .website-theme-toggle-slider {
  background-color: #16a34a;
}
.website-theme-toggle input:checked + .website-theme-toggle-slider::before {
  transform: translateX(12px);
}


.website-themes-list-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 16px 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.website-theme-card {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #ffffff;
  overflow: hidden;
  transition: all 0.15s;
}
.website-theme-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.website-theme-card.is-active-theme {
  border-color: #2563eb;
  box-shadow: 0 0 0 1px #2563eb, 0 4px 12px rgba(37,99,235,0.1);
}

.website-theme-card-thumb {
  height: 80px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.website-thumb-preview {
  width: 90px;
  height: 60px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.website-thumb-logo { font-size: 8px; font-weight: 800; color: #0f172a; text-align: center; }
.website-thumb-box { height: 18px; background: #e2e8f0; border-radius: 2px; }
.website-thumb-grid { flex: 1; background: #f1f5f9; border-radius: 2px; }

.website-theme-status-tag {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
}
.website-theme-status-tag.status-published { background: #dcfce7; color: #166534; }
.website-theme-status-tag.status-saved { background: #e0f2fe; color: #0369a1; }
.website-theme-status-tag.status-draft { background: #fef3c7; color: #92400e; }

.website-theme-card-body { padding: 12px; }
.website-theme-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.website-theme-meta h3 { margin: 0; font-size: 14px; font-weight: 700; color: #0f172a; }
.website-theme-style-tag { font-size: 11px; color: #64748b; font-weight: 500; }
.website-theme-desc { margin: 4px 0 6px; font-size: 11px; color: #64748b; line-height: 1.35; }
.website-theme-updated { display: block; font-size: 10px; color: #94a3b8; margin-bottom: 10px; }

.website-theme-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.website-theme-btn {
  flex: 1;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #334155;
  cursor: pointer;
}
.website-theme-btn.btn-open:hover { background: #2563eb; border-color: #2563eb; color: #ffffff; }
.website-theme-btn:disabled { background: #e2e8f0; color: #94a3b8; cursor: default; }

.website-theme-more-menu { position: relative; }
.website-theme-btn-more {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #64748b;
  cursor: pointer;
  font-size: 14px;
}
.website-theme-dropdown-menu {
  position: absolute;
  right: 0;
  bottom: 34px;
  width: 150px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  padding: 4px;
  z-index: 30;
  display: flex;
  flex-direction: column;
}
.website-theme-dropdown-menu button {
  text-align: left;
  padding: 7px 10px;
  font-size: 12px;
  background: none;
  border: none;
  border-radius: 4px;
  color: #334155;
  cursor: pointer;
}
.website-theme-dropdown-menu button:hover { background: #f1f5f9; color: #0f172a; }
.website-theme-dropdown-menu button.text-danger { color: #dc2626; }
.website-theme-dropdown-menu button.text-danger:hover { background: #fef2f2; }

/* --------------------------------------------------------------------------
   PREVIEW RENDERING OF THE 10 MODULES (INSIDE 700PX CONTAINER)
   -------------------------------------------------------------------------- */
/* General module typography & resets */
.web-kicker { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 4px; }
.web-sec-header { text-align: center; margin-bottom: 20px; }
.web-sec-header h3 { margin: 0; font-size: 18px; font-weight: 700; }
.web-btn-primary {
  display: inline-block;
  padding: 10px 22px;
  background: #111111;
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 4px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.web-btn-outline {
  display: inline-block;
  padding: 9px 20px;
  border: 1px solid currentColor;
  color: inherit;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 4px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Header */
.web-preview-header { padding: 8px 16px; border-bottom: 1px solid rgba(0,0,0,0.06); }
.web-announcement-bar {
  text-align: center;
  font-size: 11px;
  font-weight: 500;
  padding-bottom: 6px;
  letter-spacing: 0.02em;
  opacity: 0.85;
}
.web-hdr-row { display: flex; align-items: center; justify-content: space-between; padding-top: 4px; }
.web-hdr-logo { text-align: center; }
.web-hdr-logo strong { font-size: 18px; letter-spacing: 0.15em; }
.web-hdr-logo small { display: block; font-size: 9px; letter-spacing: 0.2em; opacity: 0.7; }
.web-hdr-nav { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; }
.web-hdr-menu { display: flex; gap: 14px; font-size: 12px; font-weight: 500; }
.web-hdr-actions { display: flex; align-items: center; gap: 12px; }
.web-hdr-cart-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  transition: opacity 0.15s, transform 0.15s;
}
.web-hdr-cart-btn:hover {
  opacity: 0.8;
  transform: scale(1.05);
}
.web-cart-svg {
  width: 20px;
  height: 20px;
  display: block;
}
.web-cart-badge {
  position: absolute;
  top: -3px;
  right: -6px;
  background: #0f172a;
  color: #ffffff;
  font-size: 9px;
  font-weight: 700;
  min-width: 15px;
  height: 15px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0 3px;
  box-sizing: border-box;
  border: 1.5px solid #ffffff;
}

/* Banner */
.web-preview-banner-wide {
  width: 100%;
  aspect-ratio: 16 / 7;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #ffffff;
  padding: 24px;
  box-sizing: border-box;
}
.web-banner-inner h2 { margin: 4px 0 8px; font-size: 22px; font-weight: 700; letter-spacing: 0.05em; }
.web-banner-inner p { margin: 0 0 14px; font-size: 13px; opacity: 0.9; max-width: 460px; margin-inline: auto; }

.web-preview-banner-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  background: #ffffff;
}
.web-split-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-position: center;
}
.web-split-content { padding: 24px 20px; }
.web-split-content h3 { margin: 4px 0 8px; font-size: 17px; font-weight: 700; }
.web-split-content p { margin: 0 0 14px; font-size: 12px; color: #475569; line-height: 1.5; }

.web-preview-banner-portrait {
  width: 100%;
  aspect-ratio: 3 / 4;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  padding: 28px 24px;
  box-sizing: border-box;
  color: #ffffff;
}
.web-portrait-caption h2 { margin: 4px 0 8px; font-size: 20px; font-weight: 700; }
.web-portrait-caption p { margin: 0 0 14px; font-size: 12px; opacity: 0.9; }

.web-preview-banner-carousel {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #ffffff;
  padding: 20px;
  box-sizing: border-box;
}
.web-carousel-caption h2 { margin: 4px 0 12px; font-size: 20px; font-weight: 700; }
.web-carousel-dots { position: absolute; bottom: 10px; display: flex; gap: 6px; }
.web-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.5); }
.web-dot.active { background: #ffffff; width: 14px; border-radius: 4px; }

/* Categories */
.web-preview-cat-pills {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 6px 14px;
}
.web-cat-pill {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid rgba(0,0,0,0.1);
  background: #ffffff;
  white-space: nowrap;
}
.web-cat-pill.active {
  background: #111111;
  color: #ffffff;
  border-color: #111111;
}

.web-preview-cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 0 14px;
}
.web-cat-card { text-align: center; }
.web-cat-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  margin-bottom: 6px;
}
.web-cat-card strong { display: block; font-size: 12px; color: #1e293b; }
.web-cat-card small { font-size: 10px; color: #64748b; }

/* Product List */
.web-preview-product-section { padding: 0 14px; }
.web-product-grid.cols-2 {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 14px;
}
.web-product-grid.cols-3 {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 10px;
}
.web-product-grid.cols-slider {
  display: flex;
  gap: 12px;
  overflow-x: auto;
}
.web-product-grid.cols-slider .web-prod-item { min-width: 160px; }

.web-prod-item { display: flex; flex-direction: column; }
.web-prod-thumb {
  width: 100%;
  aspect-ratio: 3 / 4; /* Chuẩn 3:4 cho giày nữ */
  border-radius: 6px;
  background-size: cover;
  background-position: center;
  position: relative;
  background-color: #f1f5f9;
}
.web-prod-tag {
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  background: #111111;
  color: #ffffff;
  border-radius: 3px;
  text-transform: uppercase;
}
.web-prod-meta { padding: 8px 2px; }
.web-prod-meta h4 { margin: 0 0 4px; font-size: 13px; font-weight: 600; line-height: 1.35; color: #1e293b; }
.web-prod-pricing { display: flex; align-items: baseline; gap: 6px; }
.web-price { font-size: 13px; font-weight: 700; color: #0f172a; }
.web-old-price { font-size: 11px; color: #94a3b8; }

/* Featured Products */
.web-preview-featured-spotlight {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 18px;
  padding: 0 16px;
  align-items: center;
}
.web-spotlight-img {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  position: relative;
}
.web-spotlight-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  background: #b45309;
  color: #ffffff;
  border-radius: 4px;
}
.web-spotlight-details h3 { margin: 0 0 6px; font-size: 16px; font-weight: 700; }
.web-spotlight-desc { font-size: 12px; color: #475569; line-height: 1.5; margin: 0 0 10px; }
.web-price-large { font-size: 18px; font-weight: 800; color: #0f172a; margin-right: 8px; }
.web-features-list { list-style: none; padding: 0; margin: 10px 0 14px; font-size: 11px; color: #334155; display: grid; gap: 4px; }

.web-preview-featured-duo { padding: 0 14px; }
.web-duo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.web-duo-card { text-align: center; }
.web-duo-img { width: 100%; aspect-ratio: 1 / 1; border-radius: 6px; background-size: cover; background-position: center; margin-bottom: 6px; }
.web-duo-card h4 { margin: 2px 0 4px; font-size: 13px; font-weight: 600; }

/* Collection */
.web-preview-collection-lookbook {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #ffffff;
  padding: 24px;
  box-sizing: border-box;
}
.web-lookbook-box h2 { margin: 4px 0 8px; font-size: 20px; font-weight: 700; }
.web-lookbook-box blockquote { margin: 0 0 14px; font-size: 13px; font-style: italic; opacity: 0.95; }

.web-preview-collection-mosaic { padding: 0 14px; }
.web-mosaic-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 10px; }
.web-mosaic-main { width: 100%; aspect-ratio: 3 / 4; border-radius: 6px; background-size: cover; background-position: center; }
.web-mosaic-subs { display: flex; flex-direction: column; gap: 10px; }
.web-mosaic-sub { flex: 1; border-radius: 6px; background-size: cover; background-position: center; }

/* Articles */
.web-preview-articles-cards { padding: 0 14px; }
.web-arts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.web-art-img { width: 100%; aspect-ratio: 4 / 3; border-radius: 6px; background-size: cover; background-position: center; margin-bottom: 6px; }
.web-art-cat { font-size: 10px; color: #64748b; font-weight: 500; }
.web-art-meta h4 { margin: 2px 0 4px; font-size: 13px; font-weight: 600; line-height: 1.35; }
.web-art-meta p { margin: 0; font-size: 11px; color: #64748b; line-height: 1.4; }

.web-preview-article-featured {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 14px;
  padding: 0 14px;
  align-items: center;
}
.web-art-hero { width: 100%; aspect-ratio: 16 / 9; border-radius: 6px; background-size: cover; background-position: center; }
.web-art-caption h3 { margin: 4px 0 6px; font-size: 15px; font-weight: 700; }
.web-art-caption p { margin: 0 0 10px; font-size: 12px; color: #475569; }
.web-link-more { font-size: 12px; font-weight: 600; color: #111111; text-decoration: none; }

/* Testimonials */
.web-preview-testimonials { padding: 0 14px; }
.web-reviews-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.web-review-card {
  padding: 14px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 2px 6px rgba(0,0,0,0.02);
}
.web-review-stars { color: #f59e0b; font-size: 12px; margin-bottom: 6px; }
.web-review-quote { margin: 0 0 8px; font-size: 12px; line-height: 1.45; color: #334155; font-style: italic; }
.web-review-author strong { display: block; font-size: 12px; color: #0f172a; }
.web-review-author small { font-size: 10px; color: #64748b; }

/* Policies */
.web-preview-policies-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 12px 14px;
  background: rgba(0,0,0,0.02);
  border-radius: 8px;
  margin: 0 14px;
}
.web-policy-item { text-align: center; padding: 4px; }
.web-policy-icon { display: block; font-size: 14px; font-weight: 700; color: #166534; margin-bottom: 2px; }
.web-policy-item strong { display: block; font-size: 11px; font-weight: 600; margin-bottom: 2px; }
.web-policy-item p { margin: 0; font-size: 10px; color: #64748b; line-height: 1.3; }

.web-preview-policies-bar {
  display: flex;
  justify-content: space-around;
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 500;
  border-top: 1px solid rgba(0,0,0,0.06);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  color: #475569;
}

/* Footer */
.web-preview-footer {
  padding: 24px 18px 18px;
  border-top: 1px solid rgba(0,0,0,0.08);
}
.web-ftr-simple { text-align: center; font-size: 11px; }
.web-ftr-logo { font-size: 16px; font-weight: 800; letter-spacing: 0.1em; margin-bottom: 4px; }
.web-ftr-tagline { margin: 0 0 12px; color: #64748b; }
.web-ftr-links { margin-bottom: 12px; }
.web-ftr-links a { color: inherit; text-decoration: none; }
.web-ftr-copyright { color: #94a3b8; font-size: 10px; }

.web-ftr-full .web-ftr-top { display: flex; justify-content: space-between; font-size: 11px; margin-bottom: 14px; }
.web-ftr-full .web-ftr-bottom { text-align: center; font-size: 10px; color: #94a3b8; padding-top: 10px; border-top: 1px solid rgba(0,0,0,0.05); }

/* --------------------------------------------------------------------------
   NÚT ĐÓNG POPUP DÙNG CHUNG
   -------------------------------------------------------------------------- */
.website-modal-close-btn {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #64748b;
  font-size: 16px;
  cursor: pointer;
  padding: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
  transition: all 0.15s ease;
}
.website-modal-close-btn:hover {
  background: #ef4444;
  border-color: #ef4444;
  color: #ffffff;
}

/* Modal Tạo Giao Diện Mới */
.website-create-theme-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(4px);
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.website-create-theme-modal-window {
  width: 100%;
  max-width: 460px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: visible;
}
.website-create-theme-modal-header {
  padding: 14px 20px;
  background: #0f172a;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 12px 12px 0 0;
}
.website-create-theme-modal-header h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}
.website-create-theme-modal-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
}
.website-create-theme-modal-footer {
  padding: 14px 20px;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0 0 12px 12px;
}

/* Nút Lưu Giao Diện theo phong cách hệ thống, canh giữa */
.website-btn-submit-theme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 160px;
  padding: 10px 32px;
  background: #2563eb;
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid #1d4ed8;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.25);
  transition: all 0.15s ease;
}
.website-btn-submit-theme:hover {
  background: #1d4ed8;
  border-color: #1e40af;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.35);
}
.website-btn-submit-theme:active {
  transform: translateY(1px);
}

/* Custom Dropdown theo khung hệ thống */
.website-custom-select-wrap {
  position: relative;
  width: 100%;
}
.website-custom-select-trigger {
  width: 100%;
  padding: 9px 12px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-size: 13px;
  color: #0f172a;
  text-align: left;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.website-custom-select-trigger:hover,
.website-custom-select-trigger:focus {
  border-color: #2563eb;
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.website-custom-select-val {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.website-custom-select-val .opt-icon {
  font-size: 15px;
}
.website-custom-select-val .opt-text {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
}
.website-custom-select-arrow {
  color: #64748b;
  font-size: 12px;
  transition: transform 0.2s ease;
}
.website-custom-select-arrow.is-open {
  transform: rotate(180deg);
}
.website-custom-select-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.14);
  z-index: 100;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.website-custom-select-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  color: #1e293b;
  cursor: pointer;
  user-select: none;
  transition: background 0.12s;
}
.website-custom-select-item:hover {
  background: #f1f5f9;
}
.website-custom-select-item.is-selected {
  background: #eff6ff;
  color: #1d4ed8;
  font-weight: 600;
}
.website-custom-select-item .opt-icon {
  font-size: 15px;
}
.website-custom-select-item .opt-label {
  flex: 1;
}
.website-custom-select-item .opt-check {
  color: #2563eb;
  font-weight: 700;
  font-size: 13px;
}

/* Nút xóa theme trong danh sách giao diện */
.website-theme-row-actions .btn-delete-theme:hover {
  color: #dc2626;
  background: #fee2e2;
}

/* --------------------------------------------------------------------------
   TOAST NOTIFICATION
   -------------------------------------------------------------------------- */
.website-designer-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #0f172a;
  color: #ffffff;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  opacity: 0;
  transition: all 0.2s ease;
  z-index: 2000;
  pointer-events: none;
}
.website-designer-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* --------------------------------------------------------------------------
   RESPONSIVE / NARROW SCREENS (< 1024px)
   -------------------------------------------------------------------------- */
.website-mobile-tabs {
  display: none;
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  padding: 6px;
  gap: 6px;
  flex-shrink: 0;
}
.website-mobile-tab {
  flex: 1;
  padding: 8px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #f8fafc;
  color: #475569;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.website-mobile-tab.is-active {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
}

@media (max-width: 1024px) {
  .website-mobile-tabs {
    display: flex;
  }
  .website-3col-layout {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .website-3col-layout > .website-col {
    display: none;
    height: 100%;
    width: 100%;
  }
  .website-3col-layout.active-tab-library > .website-col-library { display: flex; }
  .website-3col-layout.active-tab-canvas > .website-col-canvas { display: flex; }
  .website-3col-layout.active-tab-themes > .website-col-themes { display: flex; }

  .website-canvas-frame.is-desktop-frame {
    max-width: 100%; /* Trên di động, website tự co theo chiều rộng thiết bị */
    margin: 0;
  }
}

/* ==========================================================================
   BANNER 1 HÌNH TỰ DO KÍCH THƯỚC (GIỚI HẠN 5MB & CHỌN SẢN PHẨM LIÊN KẾT)
   ========================================================================== */
.web-preview-banner-single {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
}
.web-banner-single-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 6px;
  background: #f1f5f9;
}
.web-banner-single-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  transition: transform 0.3s ease;
}
.web-preview-banner-single:hover .web-banner-single-img {
  transform: scale(1.01);
}
.web-banner-single-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  color: #ffffff;
  pointer-events: none;
}
.web-banner-single-content {
  max-width: 600px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
  pointer-events: auto;
}
.web-banner-single-content .web-kicker {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #f1f5f9;
  margin-bottom: 6px;
}
.web-banner-single-content h2 {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 8px 0;
  color: #ffffff;
}
.web-banner-single-content p {
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 12px 0;
  color: #e2e8f0;
}
.web-banner-single-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 10px;
}
.web-preview-banner-single.text-left .web-banner-single-overlay {
  justify-content: flex-start;
  text-align: left;
}
.web-preview-banner-single.text-left .web-banner-single-actions {
  justify-content: flex-start;
}
.web-preview-banner-single.text-right .web-banner-single-overlay {
  justify-content: flex-end;
  text-align: right;
}
.web-preview-banner-single.text-right .web-banner-single-actions {
  justify-content: flex-end;
}
.web-banner-single-float-badge {
  position: absolute;
  bottom: 14px;
  right: 14px;
  z-index: 2;
}

/* Khung mô phỏng Banner trống khi mới thêm vào Canvas (chưa có nội dung) */
.web-preview-banner-placeholder {
  width: 100%;
  border: 2px dashed #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
  padding: 38px 20px;
  text-align: center;
  box-sizing: border-box;
  cursor: pointer;
  transition: all 0.2s ease;
}
.web-preview-banner-placeholder:hover {
  border-color: #2563eb;
  background: #eff6ff;
}
.web-banner-placeholder-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.web-banner-placeholder-icon {
  font-size: 32px;
  line-height: 1;
  margin-bottom: 2px;
}
.web-banner-placeholder-inner h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #1e293b;
}
.web-banner-placeholder-inner p {
  margin: 0;
  font-size: 12px;
  color: #64748b;
}
.web-banner-placeholder-title {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  margin-top: 6px;
}

/* Bộ đôi nút bấm trên Banner: Thiết kế đồng bộ hoàn hảo (cùng kích thước, font, bo góc) */
.web-banner-buttons-group {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.web-banner-buttons-group.align-center {
  justify-content: center;
}
.web-banner-buttons-group.align-left {
  justify-content: flex-start;
}
.web-banner-buttons-group.align-right {
  justify-content: flex-end;
}

.web-banner-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 38px;
  padding: 0 20px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  box-sizing: border-box;
  text-decoration: none;
}
.web-banner-btn.web-banner-btn-primary {
  background: #0f172a;
  color: #ffffff;
  border: 1px solid #0f172a;
}
.web-banner-btn.web-banner-btn-primary:hover {
  background: #2563eb;
  border-color: #2563eb;
}
.web-banner-btn.web-banner-btn-secondary {
  background: #ffffff;
  color: #0f172a;
  border: 1px solid #0f172a;
}
.web-banner-btn.web-banner-btn-secondary:hover {
  background: #0f172a;
  color: #ffffff;
}
.web-banner-btn-icon {
  font-size: 14px;
  line-height: 1;
}

/* Nút Badge xem sản phẩm bộ sưu tập đính kèm */
.web-banner-product-badge-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  color: #0f172a;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}
.web-banner-product-badge-btn:hover {
  background: #0f172a;
  color: #ffffff;
  border-color: #0f172a;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

/* ==========================================================================
   MODAL DANH SÁCH SẢN PHẨM KHI BẤM VÀO BANNER / BỘ SƯU TẬP
   ========================================================================== */
.website-banner-products-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(4px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: websiteFadeIn 0.2s ease-out;
}
.website-banner-products-modal-window {
  background: #ffffff;
  width: 100%;
  max-width: 820px;
  max-height: 88vh;
  border-radius: 12px;
  box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: websiteSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.website-banner-products-modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  background: #fafafa;
}
.website-banner-products-modal-title-box {
  flex: 1;
  min-width: 0;
}
.website-banner-products-modal-kicker {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: #2563eb;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.website-banner-products-modal-header h3 {
  margin: 0 0 4px 0;
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
}
.website-banner-products-modal-desc {
  margin: 0;
  font-size: 12px;
  color: #64748b;
  line-height: 1.4;
}
.website-banner-products-modal-body {
  padding: 18px 20px;
  overflow-y: auto;
  flex: 1;
}
.website-banner-products-meta-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px dashed #e2e8f0;
  font-size: 12px;
  color: #475569;
}
.website-banner-products-badge-promo {
  font-size: 11px;
  font-weight: 700;
  color: #b91c1c;
  background: #fef2f2;
  border: 1px solid #fecaca;
  padding: 3px 8px;
  border-radius: 999px;
}
.website-banner-products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}
.website-banner-product-card {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.2s ease;
}
.website-banner-product-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  border-color: #cbd5e1;
}
.website-banner-product-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #f8fafc;
  overflow: hidden;
}
.website-banner-product-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.website-banner-product-card:hover .website-banner-product-thumb img {
  transform: scale(1.05);
}
.website-banner-product-tag {
  position: absolute;
  top: 8px;
  left: 8px;
  background: #ef4444;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.3px;
}
.website-banner-product-info {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.website-banner-product-code {
  font-size: 10px;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}
.website-banner-product-name {
  margin: 0 0 8px 0;
  font-size: 12px;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 32px;
}
.website-banner-product-pricing {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 10px;
  margin-top: auto;
}
.website-banner-product-price {
  font-size: 14px;
  font-weight: 800;
  color: #16a34a;
}
.website-banner-product-old-price {
  font-size: 11px;
  color: #94a3b8;
  text-decoration: line-through;
}
.website-banner-product-order-btn {
  width: 100%;
  padding: 7px 10px;
  background: #0f172a;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}
.website-banner-product-order-btn:hover {
  background: #2563eb;
}
.website-banner-products-modal-footer {
  padding: 12px 20px;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.website-banner-products-guarantee {
  display: flex;
  gap: 12px;
  font-size: 11px;
  color: #64748b;
  flex-wrap: wrap;
}

@keyframes websiteFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes websiteSlideUp {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ==========================================================================
   ICON ĐƠN SẮC HỆ THỐNG (action-managed-icon) DÙNG TRONG MODULE WEBSITE
   ========================================================================== */
.action-managed-icon {
  display: block;
  width: 20px;
  height: 20px;
  object-fit: contain;
  pointer-events: none;
}
svg.action-managed-icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.action-managed-icon.is-mask-icon {
  background: currentColor;
  -webkit-mask: var(--action-icon-mask) center / contain no-repeat;
  mask: var(--action-icon-mask) center / contain no-repeat;
}

/* ==========================================================================
   Ô TẢI ẢNH BANNER (TỐI ĐA 2MB - THAY THẾ LINK VÀ ẢNH GỢI Ý)
   ========================================================================== */
.website-banner-upload-box {
  width: 100%;
  border: 2px dashed #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
  cursor: pointer;
  transition: all 0.2s ease;
  overflow: hidden;
  box-sizing: border-box;
}
.website-banner-upload-box:hover {
  border-color: #2563eb;
  background: #eff6ff;
}
.website-banner-upload-empty {
  padding: 22px 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.website-banner-upload-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2563eb;
  margin-bottom: 2px;
}
.website-banner-upload-icon .action-managed-icon,
.website-banner-upload-icon svg {
  width: 28px;
  height: 28px;
  display: block;
}
.website-banner-upload-label {
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
}
.website-banner-upload-hint {
  font-size: 11px;
  color: #64748b;
}
.website-banner-upload-preview {
  position: relative;
  width: 100%;
  min-height: 110px;
  max-height: 160px;
  overflow: hidden;
  background: #0f172a;
  display: flex;
  align-items: center;
  justify-content: center;
}
.website-banner-upload-preview img {
  width: 100%;
  height: 100%;
  max-height: 160px;
  object-fit: cover;
  display: block;
  transition: filter 0.2s ease;
}
.website-banner-upload-box:hover .website-banner-upload-preview img {
  filter: brightness(0.9);
}
/* Icon xóa ảnh ở góc trên bên phải của banner preview */
.website-banner-delete-corner-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.75);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: all 0.15s ease;
  z-index: 5;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  padding: 0;
}
.website-banner-delete-corner-btn:hover {
  background: #ef4444;
  border-color: #ef4444;
  color: #ffffff;
  transform: scale(1.12);
  box-shadow: 0 3px 8px rgba(239, 68, 68, 0.45);
}

/* ==========================================================================
   KHUNG MÔ PHỎNG BANNER 1 HÌNH TRÊN CANVAS
   ========================================================================== */
.web-preview-banner-single-empty {
  min-height: 160px;
}
.web-banner-placeholder-heading {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 6px 0;
  text-align: center;
}
.web-banner-placeholder-sub {
  font-size: 13px;
  color: #64748b;
  margin: 0;
  text-align: center;
  font-weight: 500;
}
.web-banner-placeholder-desc {
  font-size: 12px;
  color: #64748b;
  line-height: 1.5;
  margin: 0;
  max-width: 440px;
}

/* ==========================================================================
   THẺ ĐÍCH ĐẾN NÚT BẤM BANNER (TRONG BẢNG THIẾT KẾ CỘT 3)
   ========================================================================== */
.website-target-display-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.website-target-display-card:hover {
  border-color: #2563eb;
  background: #f8fafc;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.08);
}
.website-target-display-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2563eb;
}
.website-target-display-icon .action-managed-icon,
.website-target-display-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}
.website-target-display-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.website-target-display-title {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.website-target-display-desc {
  font-size: 11px;
  color: #64748b;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.website-target-display-badge {
  font-size: 11px;
  font-weight: 600;
  color: #2563eb;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ==========================================================================
   POPUP CHỌN ĐÍCH ĐẾN CHO NÚT BẤM (HỆ THỐNG)
   ========================================================================== */
.website-target-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(4px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: websiteFadeIn 0.2s ease-out;
}
.website-target-modal-window {
  background: #ffffff;
  width: 100%;
  max-width: 620px;
  max-height: 85vh;
  border-radius: 12px;
  box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: websiteSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.website-target-modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  background: #f8fafc;
}
.website-target-modal-header h4 {
  margin: 0 0 4px 0;
  font-size: 17px;
  font-weight: 700;
  color: #0f172a;
}
.website-target-modal-header p {
  margin: 0;
  font-size: 12px;
  color: #64748b;
}
.website-target-modal-body {
  padding: 18px 20px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.website-target-options-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.website-target-option-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.website-target-option-card:hover {
  border-color: #2563eb;
  background: #f8fafc;
  transform: translateX(2px);
}
.website-target-option-card.is-selected {
  border-color: #2563eb;
  background: #eff6ff;
  box-shadow: 0 0 0 1px #2563eb;
}
.website-target-option-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2563eb;
}
.website-target-option-icon .action-managed-icon,
.website-target-option-icon svg {
  width: 26px;
  height: 26px;
  display: block;
}
.website-target-option-info {
  flex: 1;
  min-width: 0;
}
.website-target-option-title {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  display: block;
  margin-bottom: 3px;
}
.website-target-option-desc {
  font-size: 11px;
  color: #64748b;
  margin: 0;
  line-height: 1.4;
}
.website-target-option-check {
  flex-shrink: 0;
}
.target-check-badge {
  font-size: 11px;
  font-weight: 700;
  color: #1d4ed8;
  background: #dbeafe;
  padding: 4px 10px;
  border-radius: 999px;
  display: inline-block;
}
.target-select-btn {
  font-size: 11px;
  font-weight: 600;
  color: #475569;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  padding: 4px 10px;
  border-radius: 6px;
  display: inline-block;
}
.website-target-custom-box {
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  padding: 12px 14px;
  background: #fafafa;
  margin-top: 4px;
}
.website-target-custom-box.is-selected {
  border-color: #2563eb;
  background: #eff6ff;
}
.website-target-custom-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.website-target-custom-header strong {
  font-size: 13px;
  color: #0f172a;
  display: block;
}
.website-target-custom-header p {
  font-size: 11px;
  color: #64748b;
  margin: 2px 0 0 0;
}
.website-target-custom-form {
  display: flex;
  gap: 8px;
}
.website-target-custom-input {
  flex: 1;
  font-size: 12px;
  padding: 7px 10px;
}
.website-target-modal-footer {
  padding: 12px 20px;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  display: flex;
  justify-content: flex-end;
}

/* ==========================================================================
   THẺ TÓM TẮT SẢN PHẨM ĐÍNH KÈM BANNER (TRONG BẢNG THIẾT KẾ CỘT 3)
   ========================================================================== */
.website-banner-products-summary-card {
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #ffffff;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.website-banner-products-thumbnails {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.website-thumb-mini {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  background: #f1f5f9;
}
.website-thumb-more {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  background: #f1f5f9;
  border: 1px dashed #cbd5e1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
}
.website-banner-products-summary-text {
  font-size: 12px;
  color: #334155;
  line-height: 1.4;
}
.website-banner-products-empty-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 4px;
  padding: 12px 8px;
  color: #64748b;
  font-size: 12px;
  background: #f8fafc;
  border-radius: 6px;
  border: 1px dashed #e2e8f0;
}
.website-btn-open-picker {
  width: 100%;
  padding: 8px 12px;
  background: #0f172a;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.website-btn-open-picker:hover {
  background: #2563eb;
  transform: translateY(-1px);
}

/* ==========================================================================
   POPUP CHỌN SẢN PHẨM ĐÍNH KÈM BANNER (PRODUCT PICKER MODAL)
   ========================================================================== */
.website-product-picker-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(4px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: websiteFadeIn 0.2s ease-out;
}
.website-product-picker-modal-window {
  background: #ffffff;
  width: 100%;
  max-width: 860px;
  max-height: 88vh;
  border-radius: 12px;
  box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: websiteSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.website-product-picker-modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  background: #fafafa;
}
.website-product-picker-modal-header h4 {
  margin: 0 0 4px 0;
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
}
.website-product-picker-modal-header p {
  margin: 0;
  font-size: 12px;
  color: #64748b;
}
.website-product-picker-toolbar {
  padding: 12px 20px;
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.website-product-picker-search {
  position: relative;
  display: flex;
  align-items: center;
}
.website-product-picker-search .search-icon {
  position: absolute;
  left: 10px;
  font-size: 14px;
  pointer-events: none;
  opacity: 0.6;
}
.website-picker-search-input {
  width: 100%;
  padding-left: 32px !important;
  padding-right: 32px !important;
  font-size: 13px !important;
  height: 38px;
}
.website-picker-clear-search {
  position: absolute;
  right: 8px;
  background: none;
  border: none;
  font-size: 14px;
  color: #94a3b8;
  cursor: pointer;
  padding: 4px 8px;
}
.website-picker-clear-search:hover {
  color: #0f172a;
}
.website-product-picker-actions-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.website-product-picker-stats {
  font-size: 12px;
  color: #475569;
}
.website-picker-count-highlight {
  color: #16a34a;
  font-size: 13px;
  font-weight: 800;
}
.website-product-picker-btns {
  display: flex;
  gap: 8px;
}
.website-btn-picker-bulk {
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #334155;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.website-btn-picker-bulk:hover {
  background: #e2e8f0;
  color: #0f172a;
}
.website-product-picker-modal-body {
  padding: 16px 20px;
  overflow-y: auto;
  flex: 1;
  background: #f8fafc;
}
.website-picker-empty {
  padding: 36px 20px;
  text-align: center;
  color: #64748b;
  font-size: 13px;
}
.website-product-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.website-picker-card {
  position: relative;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: all 0.18s ease;
  user-select: none;
}
.website-picker-card:hover {
  border-color: #94a3b8;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.website-picker-card.is-selected {
  border-color: #10b981;
  background: #ecfdf5;
  box-shadow: 0 0 0 1px #10b981;
}
.website-picker-card-check {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 4px;
  padding: 2px 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.website-picker-card-check input {
  accent-color: #10b981;
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
}
.website-picker-card-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #f1f5f9;
  overflow: hidden;
}
.website-picker-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.website-picker-card-tag {
  position: absolute;
  bottom: 6px;
  left: 6px;
  background: #ef4444;
  color: #ffffff;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 3px;
}
.website-picker-card-info {
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.website-picker-card-code {
  font-size: 10px;
  font-weight: 700;
  color: #64748b;
  margin-bottom: 2px;
}
.website-picker-card-name {
  margin: 0 0 6px 0;
  font-size: 12px;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 31px;
}
.website-picker-card-pricing {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: auto;
}
.website-picker-card-price {
  font-size: 13px;
  font-weight: 800;
  color: #16a34a;
}
.website-picker-card-old-price {
  font-size: 10px;
  color: #94a3b8;
  text-decoration: line-through;
}
.website-product-picker-modal-footer {
  padding: 12px 20px;
  background: #ffffff;
  border-top: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.website-product-picker-footer-note {
  font-size: 12px;
  color: #475569;
}
.website-btn-picker-confirm {
  padding: 9px 22px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  background: #16a34a !important;
  border-color: #16a34a !important;
  color: #ffffff !important;
}
.website-btn-picker-confirm:hover {
  background: #15803d !important;
}

/* ========== LINK TYPE TABS (ĐÍCH ĐẾN NÚT BẤM) ========== */
.website-link-type-tabs {
  display: flex;
  gap: 4px;
  background: #f1f5f9;
  border-radius: 8px;
  padding: 3px;
  margin-bottom: 10px;
}
.website-link-type-tab {
  flex: 1;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 8px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  background: transparent;
  color: #64748b;
  transition: all 0.15s ease;
  white-space: nowrap;
  text-align: center;
}
.website-link-type-tab.is-active {
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}
.website-link-type-tab:hover:not(.is-active) {
  color: #0f172a;
  background: rgba(255,255,255,0.6);
}
.website-link-url-box {
  display: flex;
  gap: 6px;
  align-items: center;
}
.website-link-url-input {
  flex: 1;
  font-size: 12px;
}
.website-link-url-save-btn {
  flex-shrink: 0;
  font-size: 12px;
  padding: 7px 12px;
  white-space: nowrap;
}
.website-link-selected-box {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.website-link-selected-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  color: #1e40af;
  font-weight: 600;
}
.website-link-selected-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.website-link-clear-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: #94a3b8;
  font-size: 14px;
  padding: 0 0 0 8px;
  line-height: 1;
  flex-shrink: 0;
}
.website-link-clear-btn:hover { color: #ef4444; }
.website-link-placeholder {
  font-size: 12px;
  color: #94a3b8;
  font-style: italic;
}

/* Backdrop cho category picker (dùng chung style với product picker) */
.website-picker-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeInBackdrop 0.15s ease;
}

/* Nút hành động đặt theo tỷ lệ banner, kéo trực tiếp trên canvas. */
.web-banner-single-wrapper { position: relative; }
.website-banner-action { position: absolute; transform: translate(-50%, -50%); z-index: 3; max-width: 100%; }
.website-canvas-block .website-banner-action { cursor: move; touch-action: none; user-select: none; }
.website-target-options-list button, button.website-target-option-card { width: 100%; text-align: left; margin-bottom: 12px; }

.website-link-selector { position: relative; }
.website-link-dropdown-button { display:flex; justify-content:space-between; align-items:center; width:100%; background:#fff; color:#172b4d; border:1px solid #cbd5e1; border-radius:6px; padding:9px 12px; font:inherit; font-weight:400; cursor:pointer; }
.website-link-dropdown-button:focus-visible, .website-link-dropdown button:focus-visible { outline:2px solid #2563eb; outline-offset:2px; }
.website-link-dropdown { position:absolute; top:40px; left:0; right:0; z-index:20; background:#fff; border:1px solid #cbd5e1; border-radius:6px; box-shadow:0 6px 18px #172b4d20; padding:4px; }
.website-link-dropdown button { display:block; width:100%; text-align:left; border:0; background:#fff; color:#172b4d; font:inherit; padding:10px; border-radius:4px; cursor:pointer; }
.website-link-dropdown button:hover { background:#f1f5f9; }
.website-product-picker-grid.website-product-picker-list { display:flex; flex-direction:column; gap:8px; }
.website-product-picker-list .website-picker-card { display:flex; align-items:center; gap:12px; padding:10px; }
.website-product-picker-list .website-picker-card-check { position:static; flex-shrink:0; }
.website-product-picker-list .website-picker-card-thumb { width:64px; height:64px; flex:0 0 64px; aspect-ratio:1; }
.website-product-picker-list .website-picker-card-info { flex:1; min-width:0; padding:0; }
.website-product-picker-list .website-picker-card-name { white-space:normal; margin:3px 0; }

/* Bảng thuộc tính chỉ có một vùng cuộn, kéo dài hết cột quản lý. */
.website-col-inspector .website-inspector-scroll-body { height:auto; max-height:none; flex:1 1 0; min-height:0; }
.website-col-inspector .website-drawer-form { flex:none; height:auto; max-height:none; min-height:100%; overflow:visible; box-sizing:border-box; }
.website-col-inspector .website-form-group { flex-shrink:0; }
.website-col-inspector .website-link-dropdown { position:static; margin-top:0; flex-shrink:0; }
.website-col-inspector :is(label,input,select,textarea,button,.website-link-selected-label) { font-family:var(--yomi-table-body-text-font,var(--yomi-font-sans,Inter,sans-serif)); }
.website-col-inspector .website-link-dropdown-button,
.website-col-inspector .website-link-dropdown button { font-size:var(--yomi-table-body-text-size,14px); font-weight:400; line-height:1.4; }
.website-col-inspector .website-inspector-scroll-body,
.website-col-inspector .website-inspector-scroll-body:hover { scrollbar-color:transparent transparent; }
.website-col-inspector .website-inspector-scroll-body:hover::-webkit-scrollbar-thumb { background:transparent; }
.website-col-inspector .website-inspector-scroll-body.is-scrollbar-hot { scrollbar-color:rgba(148,163,184,.45) transparent; }
.website-col-inspector .website-inspector-scroll-body.is-scrollbar-hot::-webkit-scrollbar-thumb { background:rgba(148,163,184,.45); }

/* Control và popup chọn đường dẫn theo giao diện quản lý chung. */
.website-col-inspector #prop-buttonText,
.website-col-inspector .website-link-dropdown-button { box-sizing:border-box; width:100%; height:36px; min-height:36px; padding:8px 10px; font-size:13px; line-height:18px; border-radius:6px; }
.website-managed-dialog { background:var(--yomi-card-bg,#fff); border:1px solid var(--yomi-border,#e2e8f0); border-radius:12px; box-shadow:0 20px 60px #0f172a26; color:var(--yomi-text-primary,#172b4d); font-family:var(--yomi-table-body-text-font,var(--yomi-font-sans,Inter,sans-serif)); width:min(720px,calc(100vw - 32px)); max-height:calc(100dvh - 48px); display:flex; flex-direction:column; overflow:hidden; }
.website-target-modal-window.website-managed-dialog { width:min(520px,calc(100vw - 32px)); }
.website-managed-dialog :is(.website-target-modal-header,.website-product-picker-modal-header) { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 20px; background:var(--yomi-card-bg,#fff); border-bottom:1px solid var(--yomi-border,#e2e8f0); flex-shrink:0; }
.website-managed-dialog h4 { margin:0; font-family:var(--yomi-panel-title-text-font,var(--yomi-font-sans,Inter,sans-serif)); font-size:20px; font-weight:600; color:var(--yomi-text-primary,#172b4d); }
.website-managed-dialog header p { margin:6px 0 0; font-size:13px; color:var(--yomi-text-secondary,#64748b); }
.website-dialog-actions { display:flex; gap:8px; flex-shrink:0; }
.website-managed-dialog .website-modal-close-btn { display:flex; align-items:center; justify-content:center; width:32px; height:32px; padding:0; border:1px solid var(--yomi-border,#cbd5e1); border-radius:6px; background:#fff; color:var(--yomi-text-primary,#172b4d); flex-shrink:0; }
.website-managed-dialog .website-dialog-save { color:var(--yomi-success,#16a34a); border-color:var(--yomi-success,#16a34a); }
.website-managed-dialog .website-modal-close-btn > :is(svg,img,span) { width:60%; height:60%; }
.website-managed-dialog .website-modal-close-btn:hover { background:var(--yomi-hover-bg,#f1f5f9); }
.website-managed-dialog button:focus-visible { outline:2px solid var(--yomi-primary,#2563eb); outline-offset:2px; }
.website-managed-dialog :is(input,button) { font-family:inherit; }
.website-managed-dialog .website-target-modal-body { display:flex; flex-direction:column; gap:10px; padding:20px; }
.website-managed-dialog .website-product-picker-modal-body { min-height:0; flex:1; overflow-y:auto; }
.website-managed-dialog .search-icon { display:flex; width:18px; height:18px; }
.website-managed-dialog .search-icon > *, .website-managed-dialog .website-picker-clear-search > * { width:100%; height:100%; }
.website-dialog-category-icon, .website-dialog-empty-icon { display:flex; width:24px; height:24px; margin-bottom:8px; color:var(--yomi-text-secondary,#64748b); }
.website-dialog-category-icon > *, .website-dialog-empty-icon > * { width:100%; height:100%; }

/* Hàng chọn sản phẩm: ô chọn, ảnh nhỏ và thông tin theo chiều ngang. */
.website-managed-dialog .website-product-picker-list .website-picker-card { flex-direction:row; text-align:left; justify-content:flex-start; min-height:84px; }
.website-managed-dialog .website-product-picker-list .website-picker-card-info { text-align:left; }
.website-managed-dialog .website-product-selection-header > div:first-child { flex-shrink:0; }
.website-managed-dialog .website-product-selection-header .website-product-picker-search { flex:1; min-width:0; }
.website-managed-dialog .website-product-selection-header h4 { white-space:nowrap; }
.website-managed-dialog .website-product-selection-header .website-picker-search-input { width:100%; min-width:0; }
@media (max-width:560px) {
  .website-managed-dialog .website-product-selection-header { flex-wrap:wrap; gap:10px; }
  .website-managed-dialog .website-product-selection-header .website-product-picker-search { order:3; flex-basis:100%; }
}

/* Danh sách chọn sản phẩm dùng màu quản lý đang áp dụng, không nhấc hàng khi rê. */
.website-managed-dialog .website-product-picker-modal-body { background:var(--yomi-card-bg,#fff); scrollbar-width:thin; scrollbar-color:transparent transparent; scrollbar-gutter:stable; }
.website-managed-dialog .website-picker-card { background:var(--yomi-card-bg,#fff); border-color:var(--yomi-border,#e2e8f0); transition:background-color .12s,border-color .12s; }
.website-managed-dialog .website-picker-card:hover { background:var(--yomi-hover-bg,#f7f5f1); transform:none; box-shadow:none; }
.website-managed-dialog .website-picker-card.is-selected { background:var(--yomi-active-bg,#f2efe9); border-color:var(--yomi-border,#d8d3cb); box-shadow:none; }
.website-managed-dialog .website-picker-card-check { background:transparent; }
.website-managed-dialog .website-picker-card-check input { accent-color:var(--yomi-text-primary,#263238); }
.website-managed-dialog .website-picker-card-thumb { background:var(--yomi-card-bg,#fff); }
.website-managed-dialog .website-picker-card-price,
.website-managed-dialog .website-picker-count-highlight { color:var(--yomi-text-primary,#263238); }
.website-managed-dialog .website-product-picker-modal-body::-webkit-scrollbar { width:6px; }
.website-managed-dialog .website-product-picker-modal-body::-webkit-scrollbar-track { background:transparent; }
.website-managed-dialog .website-product-picker-modal-body::-webkit-scrollbar-thumb { background:transparent; border-radius:999px; }
.website-managed-dialog .website-product-picker-modal-body.is-scrollbar-hot { scrollbar-color:rgba(148,163,184,.45) transparent; }
.website-managed-dialog .website-product-picker-modal-body.is-scrollbar-hot::-webkit-scrollbar-thumb { background:rgba(148,163,184,.45); }

/* Giữ hàng chọn trung tính; cô lập danh sách cuộn khỏi phần còn lại của trang. */
.website-managed-dialog .website-picker-card.is-selected,
.website-managed-dialog .website-picker-card.is-selected:hover { background:var(--yomi-card-bg,#fff); border-color:var(--yomi-border,#e2e8f0); box-shadow:none; }
.website-managed-dialog .website-product-picker-modal-body { overscroll-behavior:contain; overflow-anchor:none; scroll-behavior:auto; }
.website-managed-dialog .website-product-picker-list .website-picker-card { contain:layout style; transition:none; }
.website-managed-dialog .website-product-picker-list .website-picker-card-thumb { contain:strict; }
.website-selected-products-open { font:inherit; text-align:left; border:0; background:transparent; padding:0; color:inherit; cursor:pointer; min-width:0; }
.website-selected-products-open:hover { text-decoration:underline; }
.website-selected-products-open:focus-visible { outline:2px solid var(--yomi-primary,#2563eb); outline-offset:2px; }

.website-category-picker-list { display:flex; flex-direction:column; gap:8px; }
.website-category-picker-row { display:flex; align-items:center; gap:12px; width:100%; padding:12px; text-align:left; background:var(--yomi-card-bg,#fff); color:var(--yomi-text-primary,#263238); border:1px solid var(--yomi-border,#e2e8f0); border-radius:6px; cursor:pointer; }
.website-category-picker-row input { pointer-events:none; accent-color:var(--yomi-text-primary,#263238); }
.website-category-picker-row small { display:block; margin-top:4px; color:var(--yomi-text-secondary,#64748b); }
.website-category-picker-row:hover { background:var(--yomi-hover-bg,#f7f5f1); }

/* Ảnh mất hoặc link ảnh thử đã hết: giữ khung để chọn tải lại. */
.website-banner-image-fallback[hidden] { display:none; }
.website-banner-image-fallback { min-height:180px; box-sizing:border-box; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; margin:12px 0; border:2px dashed #cbd5e1; border-radius:8px; background:#f8fafc; color:#334155; cursor:pointer; }
.website-banner-image-fallback span { font-size:12px; }
.web-banner-single-wrapper.has-missing-image > :is(.web-banner-single-img,.web-banner-single-overlay,.website-banner-action) { display:none; }

.website-col-inspector .website-banner-image-field { order:-1; }
.website-col-inspector .website-spacing-options { position:static; }
.website-action-colors { display:flex; gap:16px; }
.website-action-colors label { display:flex; align-items:center; gap:8px; }
.website-action-colors input { width:32px; height:28px; padding:2px; border:1px solid var(--yomi-border,#cbd5e1); border-radius:4px; background:#fff; cursor:pointer; }
.website-preview-modal-window [data-banner-whole-click="true"] { cursor:pointer; }

.website-action-colors input[type="color"] { appearance:none; -webkit-appearance:none; box-sizing:border-box; width:24px; height:24px; min-width:24px; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; }
.website-action-colors input[type="color"]::-webkit-color-swatch-wrapper { padding:0; }
.website-action-colors input[type="color"]::-webkit-color-swatch { border:1px solid var(--yomi-border,#cbd5e1); border-radius:0; }
.website-action-colors input[type="color"]::-moz-color-swatch { border:1px solid var(--yomi-border,#cbd5e1); border-radius:0; }
.website-action-colors input[type="color"]:focus-visible { outline:2px solid var(--yomi-primary,#2563eb); outline-offset:3px; }
.website-selected-target-open { font:inherit; text-align:left; border:0; background:transparent; padding:0; color:inherit; cursor:pointer; min-width:0; }
.website-selected-target-open:hover { text-decoration:underline; }
.website-selected-target-open:focus-visible { outline:2px solid var(--yomi-primary,#2563eb); outline-offset:2px; }

/* Banner trình chiếu giữ nguyên ảnh và hé banner tiếp theo. */
.website-carousel-track { display:flex; gap:12px; width:100%; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x proximity; overscroll-behavior-x:contain; scrollbar-width:thin; scrollbar-color:transparent transparent; align-items:stretch; }
.website-carousel-slide { flex:0 0 auto; height:100%; min-width:0; scroll-snap-align:start; }
.website-carousel-slide > .web-preview-banner-single, .website-carousel-slide .web-banner-single-wrapper { height:100%; }
.website-carousel-slide .web-banner-single-img { width:100%; height:100%; object-fit:contain; transform:none; }
.website-carousel-slide .web-preview-banner-single-empty { height:100%; min-height:0; box-sizing:border-box; margin:0; }
.website-carousel-slide .website-banner-image-fallback { height:100%; min-height:0; margin:0; }
.website-slide-editor { display:flex; flex-direction:column; gap:14px; border-bottom:1px solid var(--yomi-border,#e2e8f0); padding-bottom:16px; }
.website-slide-editor > header { display:flex; justify-content:space-between; align-items:center; }
.website-slide-editor .website-banner-image-field { order:-1; }
.website-slide-editor > header { order:-2; }
.website-carousel-track::-webkit-scrollbar { height:6px; }
.website-carousel-track::-webkit-scrollbar-thumb { background:transparent; border-radius:999px; }
.website-carousel-track.is-scrollbar-hot { scrollbar-color:#94a3b8 transparent; }
.website-carousel-track.is-scrollbar-hot::-webkit-scrollbar-thumb { background:#94a3b8; }

.website-carousel-track.is-panning { scroll-snap-type:none; cursor:grabbing; user-select:none; }

.website-col-inspector .website-add-banner { justify-content:center; text-align:center; font-weight:600; background:var(--yomi-active-bg,#f2efe9); border-color:var(--yomi-border,#d8d3cb); min-height:40px; }
.website-col-inspector .website-add-banner:hover { background:var(--yomi-hover-bg,#e9e5dd); }
.web-preview-banner-single, .web-banner-single-wrapper, .website-carousel-slide { border-radius:10px; overflow:hidden; }
.website-selected-products-open { display:flex; align-items:center; gap:8px; }
.website-selected-product-thumb { width:40px; height:40px; object-fit:contain; flex-shrink:0; border-radius:4px; }
.website-product-detail-backdrop { position:fixed; inset:0; z-index:10020; background:#0f172a70; display:flex; align-items:center; justify-content:center; padding:16px; }
.website-product-detail-body { display:flex; gap:20px; padding:20px; overflow-y:auto; }
.website-product-detail-body > img { width:45%; object-fit:contain; align-self:flex-start; }
.website-product-detail-body h2 { font-size:20px; }
@media(max-width:560px) { .website-product-detail-body { flex-direction:column; } .website-product-detail-body > img { width:100%; } }

/* Bo trực tiếp mặt ảnh; không chỉ bo khung bên ngoài. */
.web-preview-banner-single .web-banner-single-img { border-radius:10px; clip-path:inset(0 round 10px); }
.website-carousel-track { max-height:400px; }
.is-mobile-mode .website-carousel-track { max-height:280px; }
.website-carousel-slide .web-preview-banner-single { padding:0; margin:0; width:100%; }
.website-carousel-slide .web-banner-single-wrapper { width:100%; }
.website-carousel-slide .web-banner-single-img { display:block; border-radius:10px; object-fit:contain; }
@media(max-width:560px) { .website-carousel-track { max-height:280px; } }

.web-preview-banner-single:hover .web-banner-single-img { transform:none; }

/* Ảnh và khung cùng tỷ lệ: không tạo dải nền quanh ảnh object-fit. */
.web-preview-banner-single, .website-carousel-slide { background:transparent; border:0; box-shadow:none; border-radius:0; }
.web-banner-single-wrapper { background:transparent; border:0; box-shadow:none; border-radius:10px; }
.website-carousel-slide .web-banner-single-img { object-fit:contain; padding:0; margin:0; }

/* Luôn dành rãnh cuộn ngang; không để thanh cuộn cắt mất hai góc dưới. */
.website-carousel-track { overflow-x:scroll; }

.web-preview-banner-single-empty { height:160px; min-height:160px; display:flex; align-items:center; justify-content:center; }

/* Ba mẫu banner trong thư viện dùng cùng chiều cao xem nhanh. */
.website-component-group[data-group-type="banner"] .website-variant-preview-container { height:72px; min-height:72px; max-height:72px; aspect-ratio:auto; width:100%; max-width:none; }

/* Lưới tự chia ô theo số ảnh và tỷ lệ toàn khung. */
.website-auto-image-grid { position:relative; width:100%; border-radius:10px; overflow:hidden; }
.website-auto-grid-cell { position:absolute; box-sizing:border-box; padding:4px; }
.website-auto-grid-cell > .web-preview-banner-single, .website-auto-grid-cell .web-banner-single-wrapper { width:100%; height:100%; }
.website-auto-grid-cell .web-banner-single-img { width:100%; height:100%; object-fit:cover; object-position:var(--image-x,50%) var(--image-y,50%); }
.website-auto-grid-cell .web-preview-banner-single-empty { width:100%; height:100%; min-height:0; padding:12px; overflow:hidden; }
.website-auto-grid-cell .website-banner-image-fallback { height:100%; min-height:0; margin:0; }
.website-grid-ratio-menu { position:relative; }
.website-grid-ratio-menu > summary { list-style:none; cursor:pointer; }
.website-grid-ratio-menu > summary::-webkit-details-marker { display:none; }
.website-col-inspector .website-grid-ratio-menu .website-link-dropdown { position:static; }
.website-add-banner:disabled { opacity:.5; cursor:default; }


.website-grid-controls { order:-1; }

.website-col-canvas, .website-inspector-scroll-body { overflow-anchor:none; }

.website-canvas-workspace { overflow-anchor:none; }

/* Đổi thứ tự và chỉnh vùng ảnh trực tiếp trên lưới canvas. */
.website-canvas-block .website-auto-grid-cell:has(.web-banner-single-img) { cursor:grab; }
.website-auto-grid-cell.is-grid-dragging { opacity:.4; }
.website-auto-grid-cell.is-grid-drop-target { outline:3px solid var(--yomi-primary,#2563eb); outline-offset:-5px; background:var(--yomi-active-bg,#f2efe9); }
.website-grid-drag-preview { position:fixed; width:100px; height:90px; z-index:20000; pointer-events:none; overflow:hidden; border-radius:8px; box-shadow:0 6px 24px #0004; opacity:.85; }
.website-grid-drag-preview img { width:100%; height:100%; object-fit:cover; }
.website-auto-grid-cell.is-crop-editing { outline:2px solid var(--yomi-primary,#2563eb); outline-offset:-5px; cursor:move; touch-action:none; }
.website-grid-crop-bar { position:absolute; left:8px; right:8px; bottom:8px; z-index:8; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 8px; border-radius:6px; background:#172b4de6; color:#fff; font:12px var(--yomi-font-sans,Inter,sans-serif); }
.website-grid-crop-bar button { border:1px solid #ffffff80; border-radius:4px; background:#fff; color:#172b4d; padding:4px 8px; cursor:pointer; }
.website-grid-touch-drag, .website-grid-touch-crop { display:none; }
.website-canvas-block .website-auto-grid-cell:focus-visible { outline:2px solid var(--yomi-primary,#2563eb); outline-offset:-5px; }
@media(pointer:coarse) {
  .website-canvas-block .website-grid-touch-drag { display:flex; position:absolute; top:8px; right:8px; z-index:7; align-items:center; justify-content:center; width:32px; height:32px; border:1px solid #cbd5e1; border-radius:6px; background:#fff; color:#172b4d; touch-action:none; }
  .website-grid-touch-drag > * { width:60%; height:60%; }
  .website-canvas-block .website-grid-touch-crop { display:block; position:absolute; bottom:8px; left:8px; z-index:7; border:1px solid #cbd5e1; border-radius:6px; background:#fff; color:#172b4d; padding:6px 8px; font-size:12px; }
  .is-crop-editing .website-grid-touch-drag, .is-crop-editing .website-grid-touch-crop { display:none; }
}

.website-grid-edit-hint { color:var(--yomi-text-secondary,#64748b); font-size:12px; line-height:1.5; }

/* Chỉ xem trước bố cục khi kéo tới mép, không phủ khung hoặc nhãn hướng. */
.website-grid-drop-guide, .website-grid-layout-preview { position:absolute; inset:0; pointer-events:none; }
.website-grid-layout-preview { z-index:10; background:#ffffffbb; }
.website-grid-layout-preview-cell { position:absolute; box-sizing:border-box; padding:4px; }
.website-grid-layout-preview-cell img { width:100%; height:100%; object-fit:cover; border-radius:8px; }

/* Mép chung của ô ảnh: rê vào hiện đường kéo, không chặn phần ảnh. */
.website-grid-resize-layer { position:absolute; inset:0; pointer-events:none; z-index:9; }
.website-grid-resize-handle { position:absolute; pointer-events:auto; touch-action:none; outline:none; }
.website-grid-resize-handle.axis-x { width:12px; transform:translateX(-50%); cursor:col-resize; }
.website-grid-resize-handle.axis-y { height:12px; transform:translateY(-50%); cursor:row-resize; }
.website-grid-resize-handle::after { content:''; position:absolute; background:transparent; border-radius:3px; }
.website-grid-resize-handle.axis-x::after { top:6px; bottom:6px; width:3px; left:50%; transform:translateX(-50%); }
.website-grid-resize-handle.axis-y::after { left:6px; right:6px; height:3px; top:50%; transform:translateY(-50%); }
.website-grid-resize-handle:hover::after, .website-grid-resize-handle:focus-visible::after, .website-grid-resize-handle.is-resizing::after { background:var(--yomi-primary,#2563eb); }
.is-grid-resizing [data-grid-resize]:not(.is-resizing) { visibility:hidden; }
.website-grid-resize-feedback { position:absolute; z-index:13; left:50%; top:10px; transform:translateX(-50%); padding:6px 10px; border-radius:6px; background:#172b4de6; color:#fff; font:12px var(--yomi-font-sans,Inter,sans-serif); pointer-events:none; }
@media(pointer:coarse) { .website-grid-resize-handle.axis-x { width:18px; } .website-grid-resize-handle.axis-y { height:18px; } }

/* Lề nội dung banner bằng bài viết; tỷ lệ chỉ tính trên vùng ảnh. */
.website-banner-content-inset { box-sizing:border-box; width:100%; padding:0 14px; }
.website-auto-image-grid { box-sizing:border-box; padding:0; border:0; height:auto; min-height:0; }

/* Danh mục dạng thẻ kéo ngang, không hiện rãnh cuộn. */
.web-preview-cat-pills { scrollbar-width:none; cursor:grab; user-select:none; touch-action:pan-x pan-y; overscroll-behavior-x:contain; border-radius:6px; }
.web-preview-cat-pills::-webkit-scrollbar { display:none; }
.web-preview-cat-pills.is-panning { cursor:grabbing; }
.web-preview-cat-pills .web-cat-pill { flex:0 0 auto; box-sizing:border-box; border-radius:6px; }

/* Ngành hàng ảnh: ba thẻ và một phần thẻ kế tiếp trên mọi khung xem. */
.web-preview-cat-grid { display:flex; gap:10px; overflow-x:auto; overflow-y:hidden; padding:0 14px; scrollbar-width:none; cursor:grab; user-select:none; overscroll-behavior-x:contain; }
.web-preview-cat-grid::-webkit-scrollbar { display:none; }
.web-preview-cat-grid.is-panning { cursor:grabbing; }
.web-preview-cat-grid .web-cat-card { flex:0 0 calc((100% - 30px)/3.35); min-width:0; }
.web-preview-cat-grid .web-cat-img { box-sizing:border-box; border-radius:6px; overflow:hidden; background-color:var(--yomi-hover-bg,#f1f5f9); }
.web-preview-cat-grid .web-cat-card strong { white-space:normal; }
.website-category-image-setting { display:flex; flex-direction:column; gap:8px; padding:12px 0; border-bottom:1px solid var(--yomi-border,#e2e8f0); }
.website-category-image-setting img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:6px; }
.website-category-image-setting small,.website-category-image-setting span { color:var(--yomi-text-secondary,#64748b); font-size:12px; }
.website-category-image-setting label { cursor:pointer; text-align:center; }

.website-category-image-preview,.website-category-image-upload { box-sizing:border-box; width:50%; aspect-ratio:1; display:flex; flex-direction:column; gap:8px; align-items:center; justify-content:center; border-radius:6px; overflow:hidden; background:var(--yomi-hover-bg,#f7f5f1); }
.website-category-image-setting :is(.website-category-image-preview,.website-category-image-upload) img { display:block; width:100%; height:100%; aspect-ratio:1; object-fit:cover; }
.website-category-image-upload { border:1px dashed var(--yomi-border,#cbd5e1); cursor:pointer; }
.website-category-image-upload:hover { border-color:var(--yomi-primary,#2563eb); }
.website-category-image-upload > .action-managed-icon { width:24px; height:24px; color:var(--yomi-text-secondary,#64748b); }
.website-category-image-upload .action-managed-icon svg { width:100%; height:100%; }

/* Hai mẫu danh mục dùng cùng khung mô phỏng gọn. */
.website-component-group[data-group-type="categories"] .website-variant-preview-container { width:100%; max-width:none; height:52px; min-height:52px; max-height:52px; aspect-ratio:auto; margin:0; }
.website-category-image-setting { border-bottom:0; }
.website-category-image-preview,.website-category-image-upload { width:35%; }

/* Mẫu danh sách sản phẩm gọn hơn, ngang bằng mẫu danh mục. */
.website-component-group[data-group-type="product_list"] .website-variant-preview-container { width:100%; max-width:none; aspect-ratio:auto; height:134px; min-height:134px; max-height:134px; margin:0; }
.website-product-data-message { padding:8px 0; color:var(--yomi-text-secondary,#64748b); font-size:12px; }

.website-product-see-more { display:block; margin:18px auto 0; padding:9px 24px; background:var(--yomi-card-bg,#fff); color:var(--yomi-text-primary,#263238); border:1px solid var(--yomi-border,#cbd5e1); border-radius:6px; font:inherit; cursor:pointer; }
.website-product-see-more:hover { background:var(--yomi-hover-bg,#f7f5f1); }
.website-list-products-window { width:min(760px,94vw); max-height:90vh; display:flex; flex-direction:column; overflow:hidden; border-radius:10px; background:var(--yomi-card-bg,#fff); }
.website-list-products-body { overflow:auto; padding:16px 0; }

.website-list-products-window .website-category-picker-row input { pointer-events:auto; }

.web-product-grid.cols-slider { scrollbar-width:none; cursor:grab; overscroll-behavior-x:contain; user-select:none; }
.web-product-grid.cols-slider::-webkit-scrollbar { display:none; }
.web-product-grid.cols-slider.is-panning { cursor:grabbing; }
.web-product-grid.cols-slider .web-prod-item { flex:0 0 42%; min-width:0; }

/* Hai hàng sản phẩm cùng nằm trong một vùng cuộn ngang. */
.web-product-grid.cols-slider { display:grid; grid-template-columns:none; grid-template-rows:repeat(2,auto); grid-auto-flow:column; grid-auto-columns:42%; align-items:start; }
.web-product-grid.cols-slider .web-prod-item { width:100%; min-width:0; }

.website-component-group[data-group-type="featured_products"] .website-variant-preview-container { width:100%; max-width:none; aspect-ratio:auto; height:134px; min-height:134px; max-height:134px; margin:0; }

.website-spotlight-badge-field { position:relative; }
.website-spotlight-badge-field > input { padding-right:70px; }
.website-spotlight-badge-field .website-action-colors { position:absolute; right:8px; top:50%; transform:translateY(-50%); display:flex; gap:6px; }
.website-spotlight-image-select { display:flex; align-items:center; justify-content:center; width:96px; height:96px; padding:0; overflow:hidden; background:var(--yomi-hover-bg,#f7f5f1); color:var(--yomi-text-primary,#263238); border:1px solid var(--yomi-border,#cbd5e1); border-radius:6px; cursor:pointer; }
.website-spotlight-image-select img { width:100%; height:100%; object-fit:cover; }
.website-spotlight-image-gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding:16px; }
.website-spotlight-image-gallery button { padding:0; aspect-ratio:1; border:1px solid var(--yomi-border,#cbd5e1); border-radius:6px; background:var(--yomi-card-bg,#fff); overflow:hidden; cursor:pointer; }
.website-spotlight-image-gallery img { width:100%; height:100%; object-fit:contain; }

/* Dùng lớp màu mua hàng chung mobile-buy-now, chỉ chỉnh hình dáng nút tiêu điểm. */
.website-spotlight-buy { display:inline-block; min-height:0; padding:10px 22px; border-radius:4px; text-align:center; text-decoration:none; font-size:12px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; }

/* Cụm thông tin theo giao diện Mobile của Sản phẩm, giới hạn trong Spotlight. */
.web-spotlight-details { min-width:0; --pc-text:var(--yomi-text-primary,#263238); --pc-muted:var(--yomi-text-secondary,#64748b); --pc-border:var(--yomi-border,#d9dee7); --pc-soft:var(--yomi-hover-bg,#f5f5f3); }
.web-spotlight-details .product-store-buy{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-top:14px;padding:16px;border-radius:14px;background:linear-gradient(135deg,color-mix(in srgb,var(--yomi-primary,#1677ff) 10%,#fff),#fff);box-shadow:0 8px 24px rgba(16,24,40,.08)}
.web-spotlight-details .product-store-buy>div{display:grid;gap:4px}
.web-spotlight-details .product-store-buy span{color:var(--pc-muted);font-size:13px}
.web-spotlight-details .product-store-buy strong{font-size:24px;line-height:1.1;color:var(--yomi-primary,#1677ff)}
.web-spotlight-details .product-store-buy p{margin:0;padding:6px 9px;border-radius:999px;font-size:12px;font-weight:700}
.web-spotlight-details .product-store-buy .is-available{background:#e7f8ef;color:#027a48}
.web-spotlight-details .product-store-buy .is-empty{background:#feeceb;color:#b42318}
.web-spotlight-details .product-store-options,.web-spotlight-details .product-store-section{margin-top:18px}
.web-spotlight-details .product-store-options h2,.web-spotlight-details .product-store-section>h2{margin:0 0 10px;color:var(--yomi-panel-title-text,#111);font:750 17px/1.35 var(--yomi-panel-title-text-font,inherit)}
.web-spotlight-details .product-store-options>div{display:flex;flex-wrap:wrap;gap:8px}
.web-spotlight-details .product-store-options span{padding:8px 12px;border:1px solid var(--pc-border);border-radius:9px;background:#fff;color:var(--pc-text);font-size:14px}
.web-spotlight-details .product-store-section{padding:15px;border-radius:14px;background:var(--pc-soft)}
.web-spotlight-details .product-store-spec{display:grid;grid-template-columns:minmax(110px,.8fr) minmax(0,1.2fr);gap:12px;padding:9px 0;border-bottom:1px solid color-mix(in srgb,var(--pc-border) 75%,transparent)}
.web-spotlight-details .product-store-spec:last-child{border-bottom:0}
.web-spotlight-details .product-store-spec span{color:var(--pc-muted);font-size:13px}
.web-spotlight-details .product-store-spec strong{text-align:right;font-size:14px;font-weight:600}
.web-spotlight-details .product-store-policy{background:color-mix(in srgb,#e7f8ef 62%,var(--yomi-card-bg,#fff))}
.web-spotlight-details .product-store-description{padding:0;background:transparent}
.web-spotlight-details .product-store-description .product-description{margin:0;max-height:min(520px,58vh);font-size:16px;line-height:1.7;color:var(--pc-text)}
.web-spotlight-details .product-store-description .product-description h2{font-size:22px}
.web-spotlight-details .product-store-description .product-description h3{font-size:20px}
.web-spotlight-details .product-store-identity{display:grid;gap:5px;margin-top:15px}
.web-spotlight-details .product-store-identity h1{margin:0;color:var(--yomi-panel-title-text,#111);font:800 22px/1.3 var(--yomi-panel-title-text-font,inherit)}
.web-spotlight-details .product-store-identity .product-code-link{justify-self:start}
.web-spotlight-details .product-store-buy .product-store-original-price{color:var(--pc-muted);font-size:13px;text-decoration:line-through;text-decoration-thickness:1px}

.web-spotlight-details .product-code-link { color:#58738e; }
.web-spotlight-details .product-store-identity { margin-top:0; }
.web-spotlight-details .product-store-buy { flex-wrap:wrap; }
.web-spotlight-details .website-spotlight-buy { margin-top:18px; }
.web-spotlight-details .product-description { white-space:pre-wrap; }

/* Tiêu điểm gọn: tên, giá, lợi ích, đặt hàng, chính sách. */
.website-spotlight-compact-name h1 { margin:0; color:var(--yomi-text-primary,#171717); font-size:clamp(18px,2vw,26px); font-weight:750; line-height:1.3; }
.website-spotlight-compact-price { display:flex; align-items:baseline; flex-wrap:wrap; gap:10px; margin:14px 0 18px; }
.website-spotlight-compact-price strong { font-size:30px; line-height:1.2; font-weight:750; color:#946033; }
.website-spotlight-compact-price del { color:var(--yomi-text-secondary,#64748b); font-size:13px; }
.website-spotlight-benefits { display:flex; flex-direction:column; gap:16px; border-top:1px solid var(--yomi-border,#e5e7eb); padding-top:18px; }
.website-spotlight-benefit { display:flex; align-items:center; gap:12px; }
.website-spotlight-benefit-icon { width:42px; height:42px; flex:0 0 42px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--yomi-hover-bg,#f6f3ef); color:var(--yomi-text-primary,#171717); }
.website-spotlight-benefit-icon .action-managed-icon { width:23px; height:23px; }
.website-spotlight-benefit > div,.website-spotlight-policy > div { display:flex; flex-direction:column; gap:4px; min-width:0; }
.website-spotlight-benefit strong { font-size:14px; font-weight:650; line-height:1.4; }
.website-spotlight-benefit div > span { color:var(--yomi-text-secondary,#64748b); font-size:13px; line-height:1.5; }
.web-spotlight-details .website-spotlight-buy { position:relative; display:flex; justify-content:center; align-items:center; width:100%; box-sizing:border-box; padding:14px 40px; margin-top:22px; border-radius:10px; font-size:16px; }
.website-spotlight-buy-arrow { position:absolute; right:18px; font-size:24px; font-weight:400; }
.website-spotlight-policies { display:flex; flex-wrap:wrap; gap:12px 0; margin-top:20px; }
.website-spotlight-policy { display:flex; flex:1 1 90px; gap:8px; align-items:center; padding:0 10px; border-left:1px solid var(--yomi-border,#e5e7eb); min-width:0; box-sizing:border-box; }
.website-spotlight-policy:first-child { padding-left:0; border-left:0; }
.website-spotlight-policy-icon { display:flex; flex:0 0 26px; }
.website-spotlight-policy-icon .action-managed-icon { width:26px; height:26px; }
.website-spotlight-policy strong { font-size:12px; font-weight:500; line-height:1.4; }
.website-spotlight-policy div > span { color:var(--yomi-text-secondary,#64748b); font-size:12px; line-height:1.4; }

/* Cụm thông tin bị giới hạn theo ảnh, không kéo giãn chiều cao khối. */
.web-preview-featured-spotlight { align-items:stretch; }
.web-spotlight-details { contain:size; min-height:0; display:flex; flex-direction:column; overflow:hidden; }
.website-spotlight-compact-name { flex:0 0 auto; min-width:0; }
.website-spotlight-compact-name h1 { display:block; white-space:nowrap; overflow:hidden; text-overflow:clip; mask-image:linear-gradient(to right,#000 calc(100% - 24px),transparent); }
.website-spotlight-compact-price { flex:0 0 auto; margin:10px 0 12px; }
.website-spotlight-benefits { flex:1 1 auto; min-height:0; gap:0; padding-top:8px; overflow:auto; scrollbar-width:thin; scrollbar-color:transparent transparent; }
.website-spotlight-benefits:hover { scrollbar-color:var(--yomi-border,#cbd5e1) transparent; }
.website-spotlight-benefit { display:block; padding:7px 0; }
.website-spotlight-benefit > div { display:flex; flex-direction:row; align-items:baseline; justify-content:space-between; gap:8px; min-width:0; }
.website-spotlight-benefit strong,.website-spotlight-benefit div > span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; font-size:13px; line-height:1.4; }
.website-spotlight-benefit strong { flex:1; }
.website-spotlight-benefit div > span { flex:0 1 55%; text-align:right; }
.web-spotlight-details .website-spotlight-buy { flex:0 0 auto; min-height:40px; margin-top:12px; padding:10px 36px; background:var(--yomi-primary,#c56d52); color:var(--yomi-primary-text,#fff); border:0; }
.website-spotlight-policies { flex:0 0 auto; margin-top:12px; gap:8px 0; }

.web-spotlight-details { container-type:inline-size; container-name:spotlight-info; }
@container spotlight-info (max-width:220px) {
  .website-spotlight-compact-name h1 { font-size:16px; }
  .website-spotlight-compact-price { margin:6px 0; }
  .website-spotlight-compact-price strong { font-size:22px; }
  .website-spotlight-compact-price del { font-size:10px; }
  .website-spotlight-benefits { padding-top:3px; }
  .website-spotlight-benefit { padding:3px 0; }
  .website-spotlight-benefit strong,.website-spotlight-benefit div > span { font-size:10px; }
  .website-spotlight-buy { min-height:30px !important; padding:7px 24px !important; margin-top:6px !important; font-size:11px !important; }
  .website-spotlight-buy-arrow { right:7px; font-size:18px; }
  .website-spotlight-policies { margin-top:6px; }
  .website-spotlight-policy { flex-basis:60px; padding:0 4px; gap:4px; }
  .website-spotlight-policy strong,.website-spotlight-policy div > span { font-size:10px; }
  .website-spotlight-policy-icon { flex-basis:18px; }
  .website-spotlight-policy-icon .action-managed-icon { width:18px; height:18px; }
}

.website-spotlight-options { display:flex; flex-direction:column; gap:8px; flex:0 1 auto; min-height:0; max-height:40%; overflow:auto; scrollbar-width:thin; scrollbar-color:transparent transparent; }
.website-spotlight-options:hover { scrollbar-color:var(--yomi-border,#cbd5e1) transparent; }
.website-spotlight-option-row { display:flex; gap:8px; align-items:baseline; padding-top:6px; }
.website-spotlight-option-row > strong { flex:0 0 34px; font-size:12px; font-weight:600; }
.website-spotlight-option-row > div { display:flex; flex-wrap:wrap; gap:5px; }
.website-spotlight-option-row button { background:var(--yomi-card-bg,#fff); color:var(--yomi-text-primary,#263238); border:1px solid var(--yomi-border,#cbd5e1); border-radius:5px; padding:4px 8px; font:inherit; font-size:12px; cursor:pointer; }
.website-spotlight-option-row button[aria-pressed="true"] { color:var(--yomi-primary,#1677ff); border-color:var(--yomi-primary,#1677ff); background:color-mix(in srgb,var(--yomi-primary,#1677ff) 8%,white); }
.website-spotlight-option-row button:disabled { opacity:.35; cursor:not-allowed; text-decoration:line-through; }

/* Bộ đôi: thẻ ảnh lớn, yêu thích, tên, giá và giỏ hàng. */
.web-preview-featured-duo .web-duo-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.web-preview-featured-duo .web-duo-card { min-width:0; text-align:left; background:transparent; border:0; box-shadow:none; padding:0; }
.web-preview-featured-duo .web-duo-img { position:relative; width:100%; margin:0; border-radius:8px; overflow:hidden; background-size:cover; background-position:center; }
.web-preview-featured-duo .web-duo-card h4 { margin:12px 12px 6px; font-size:14px; line-height:1.4; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.website-duo-price-row { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:0 12px 14px; }
.website-duo-price-row .web-price { color:#996035; font-size:24px; line-height:1.3; font-weight:700; }
.website-duo-favorite,.website-duo-cart { display:flex; align-items:center; justify-content:center; padding:0; flex-shrink:0; border:0; border-radius:50%; cursor:pointer; color:var(--yomi-text-primary,#202020); }
.website-duo-favorite { position:absolute; top:14px; right:14px; width:34px; height:34px; background:#fff; }
.website-duo-cart { width:42px; height:42px; background:#f4f0ec; }
.website-duo-favorite .action-managed-icon { width:20px; height:20px; }
.website-duo-cart .action-managed-icon { width:24px; height:24px; }
.website-duo-favorite[aria-pressed="true"] { color:#c04444; }
.website-duo-favorite[aria-pressed="true"] svg { fill:currentColor; }
.website-duo-cart:disabled { opacity:.35; cursor:default; }
.is-mobile-frame .web-preview-featured-duo .web-duo-card h4 { margin:8px 3px 5px; font-size:12px; }
.is-mobile-frame .website-duo-price-row { padding:0 3px 10px; }
.is-mobile-frame .website-duo-price-row .web-price { font-size:18px; }
.is-mobile-frame .website-duo-cart { width:32px; height:32px; }

/* Tất cả tên sản phẩm trên trang chủ dùng một hàng mờ dần cuối. */
.web-preview-product-section .web-prod-meta h4,.web-preview-featured-duo .web-duo-card h4,.website-spotlight-compact-name h1 { display:block; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:clip; -webkit-line-clamp:unset; line-clamp:unset; mask-image:linear-gradient(to right,#000 calc(100% - 20px),transparent); }
.website-duo-prices { min-width:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px; }
.website-duo-prices .web-old-price { font-size:12px; color:var(--yomi-text-secondary,#8793a0); }

.website-duo-inspector-name { display:block; min-width:0; white-space:nowrap; overflow:hidden; mask-image:linear-gradient(to right,#000 calc(100% - 20px),transparent); }
.website-duo-inspector-product + .website-duo-inspector-product { padding-top:14px; border-top:1px solid var(--yomi-border,#e5e7eb); }

.website-duo-heading { text-align:center; padding:8px 16px 22px; }
.website-duo-heading h3 { margin:0; color:var(--yomi-text-primary,#202020); font-size:28px; font-weight:750; line-height:1.25; letter-spacing:-.025em; }
.website-duo-heading h3::after { content:''; display:block; width:42px; height:3px; border-radius:2px; margin:12px auto 0; background:#996035; }
.website-duo-heading p { max-width:560px; margin:12px auto 0; color:var(--yomi-text-secondary,#64748b); font-size:14px; line-height:1.6; white-space:pre-wrap; overflow-wrap:anywhere; }
.is-mobile-frame .website-duo-heading { padding:6px 4px 18px; }
.is-mobile-frame .website-duo-heading h3 { font-size:23px; }
.is-mobile-frame .website-duo-heading p { font-size:13px; }

.website-duo-heading h3::after { display:none; }
.website-spotlight-description { flex:1 1 auto; min-height:0; overflow:auto; scrollbar-width:thin; scrollbar-color:transparent transparent; white-space:pre-wrap; overflow-wrap:anywhere; font-size:13px; line-height:1.6; color:var(--yomi-text-secondary,#64748b); }
.website-spotlight-description:hover { scrollbar-color:var(--yomi-border,#cbd5e1) transparent; }
.website-spotlight-see-product { display:block; align-self:flex-start; flex:0 0 auto; margin:12px 0 0; padding:0; border:0; border-radius:0; box-shadow:none; background:transparent; color:var(--yomi-text-primary,#263238); font:inherit; font-size:13px; font-weight:400; text-transform:none; letter-spacing:normal; cursor:pointer; }
.website-spotlight-see-product:hover { text-decoration:underline; }
.website-spotlight-see-product:disabled { opacity:.5; cursor:default; }

.web-preview-product-section,.web-product-grid,.web-prod-item,.web-prod-meta { min-width:0; box-sizing:border-box; }
.web-preview-product-section { width:100%; }
.web-prod-thumb { min-width:0; max-width:100%; box-sizing:border-box; }
.web-prod-pricing { display:flex; flex-wrap:wrap; align-items:baseline; gap:3px 6px; }

/* Ngành hàng kéo tới mép phải, giữ lề trái theo nội dung. */
.web-preview-cat-pills,.web-preview-cat-grid { padding-right:0; }

/* Lề ngoài ngành hàng cố định; vùng trượt chỉ cuộn bên trong lề. */
.website-category-content-inset { width:100%; min-width:0; box-sizing:border-box; padding:0 14px; }
.website-category-content-inset .web-preview-cat-grid { padding:0; width:100%; min-width:0; box-sizing:border-box; }
.website-category-content-inset .web-preview-cat-pills { padding:6px 0; width:100%; min-width:0; box-sizing:border-box; }
.website-carousel-track,.website-carousel-track.is-scrollbar-hot { scrollbar-width:none; }
.website-carousel-track::-webkit-scrollbar { display:none; width:0; height:0; }

.web-spotlight-details .website-spotlight-description { flex:0 1 auto; }
.website-spotlight-see-product { display:inline-flex; align-items:center; gap:7px; margin-top:8px; }

.website-news-featured .web-arts-grid { grid-template-columns:1fr; }
.website-news-featured .web-art-img { aspect-ratio:16/9; }
.website-news-picker-row { display:flex; gap:8px; align-items:center; padding:8px 0; }

.website-imported-article { display:flex; gap:18px; text-align:left; padding:18px; border:1px solid var(--yomi-border,#ddd); border-radius:10px; margin:16px 0; }
.website-imported-article > img { width:140px; height:100px; object-fit:cover; border-radius:6px; }
.website-imported-article h3 { margin:0 0 8px; }
.website-imported-article p { overflow-wrap:anywhere; font-size:13px; }
@media(max-width:600px){.website-imported-article { flex-direction:column; }}

.website-news-pagination { padding:14px 0; border-top:1px solid var(--yomi-border,#ddd); }
.website-news-page-size { position:relative; font-size:13px; }
.website-news-page-size summary { list-style:none; cursor:pointer; padding:7px 10px; background:var(--yomi-card-bg,#fff); border:1px solid var(--yomi-border,#ddd); border-radius:6px; }
.website-news-page-size summary::-webkit-details-marker { display:none; }
.website-news-page-size > div { position:absolute; bottom:100%; right:0; z-index:10; min-width:110px; padding:4px; background:var(--yomi-card-bg,#fff); border:1px solid var(--yomi-border,#ddd); border-radius:6px; }
.website-news-page-size button { display:block; width:100%; padding:7px 10px; text-align:left; border:0; background:transparent; color:var(--yomi-text-primary,#263238); cursor:pointer; }

.website-page-websiteContent { overflow:hidden; display:flex; flex-direction:column; }
.website-page-websiteContent > .website-content { flex:1; min-height:0; height:100%; display:flex; flex-direction:column; padding:0; overflow:hidden; }
.website-content-toolbar { flex:0 0 auto; display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--yomi-border,#ddd); background:var(--yomi-card-bg,#fff); }
.website-content-search { flex:1; min-width:120px; height:36px; padding:0 12px; border:1px solid var(--yomi-border,#ddd); border-radius:6px; background:var(--yomi-form-bg,#fff); color:var(--yomi-text-primary,#263238); font:inherit; font-size:13px; }
.website-content-toolbar .website-content-tabs { display:flex; gap:6px; flex-wrap:wrap; }
.website-content-tabs button { padding:8px 12px; border:0; border-radius:6px; color:var(--yomi-text-primary,#263238); background:transparent; font:inherit; font-size:13px; cursor:pointer; }
.website-content-tabs button[aria-pressed="true"] { background:var(--yomi-hover-bg,#f2eeea); font-weight:600; }
.website-content-add { display:flex; align-items:center; justify-content:center; width:36px; height:36px; flex:0 0 36px; border:1px solid var(--yomi-border,#ddd); border-radius:6px; background:var(--yomi-card-bg,#fff); color:var(--yomi-primary,#1677ff); cursor:pointer; }
.website-content-add .action-managed-icon { width:22px; height:22px; }
.website-content #website-panel-articles { flex:1; min-height:0; display:flex; flex-direction:column; overflow:hidden; padding:0; }
.website-content .website-imported-articles { flex:1; min-height:0; overflow-y:auto; padding:0 16px; scrollbar-width:thin; scrollbar-color:transparent transparent; }
.website-content .website-imported-articles:hover { scrollbar-color:var(--yomi-border,#cbd5e1) transparent; }
.website-content .website-imported-articles::-webkit-scrollbar { width:6px; }
.website-content .website-imported-articles::-webkit-scrollbar-thumb { background:transparent; border-radius:6px; }
.website-content .website-imported-articles:hover::-webkit-scrollbar-thumb { background:var(--yomi-border,#cbd5e1); }
.website-content .website-news-pagination { flex:0 0 auto; padding:7px 16px; background:var(--yomi-card-bg,#fff); }
.website-news-editor { width:min(620px,92vw); box-sizing:border-box; padding:20px; border:1px solid var(--yomi-border,#ddd); border-radius:12px; background:var(--yomi-card-bg,#fff); color:var(--yomi-text-primary,#263238); }
.website-news-editor::backdrop { background:#10182866; }
.website-news-editor header { display:flex; align-items:center; justify-content:space-between; }
.website-news-editor header button { width:30px; height:30px; border:0; background:transparent; color:inherit; cursor:pointer; }
.website-news-editor header .action-managed-icon { width:18px; height:18px; }
.website-news-editor label { display:flex; flex-direction:column; gap:6px; margin:12px 0; }
.website-news-editor input,.website-news-editor textarea,.website-news-editor select { box-sizing:border-box; width:100%; padding:9px; border:1px solid var(--yomi-border,#ddd); border-radius:6px; background:var(--yomi-form-bg,#fff); color:inherit; font:inherit; }
.website-news-editor footer button { padding:9px 16px; border:0; border-radius:6px; background:var(--yomi-primary,#1677ff); color:var(--yomi-primary-text,#fff); cursor:pointer; }
.website-news-editor p { font-size:12px; }
@media(max-width:760px){.website-content-toolbar{gap:6px;padding:10px;flex-wrap:wrap}.website-content-search{flex-basis:calc(100% - 48px)}.website-content-toolbar .website-content-tabs{order:3;width:100%}.website-content .website-news-pagination{padding:6px 10px}}

/* Bộ lọc nhanh cùng nền, lựa chọn hiện hành nổi trên nền nhóm. */
.website-content-toolbar .website-content-search { flex:0 1 360px; width:360px; max-width:100%; }
.website-content-toolbar .website-content-tabs { display:inline-flex; flex-wrap:nowrap; gap:3px; padding:4px; border:1px solid var(--yomi-border,#e1e4e8); border-radius:8px; background:var(--yomi-hover-bg,#f1f3f5); }
.website-content-toolbar .website-content-tabs button { white-space:nowrap; padding:6px 12px; border:1px solid transparent; border-radius:5px; background:transparent; color:var(--yomi-text-secondary,#64748b); transition:background .15s,box-shadow .15s,color .15s; }
.website-content-toolbar .website-content-tabs button:hover { color:var(--yomi-text-primary,#263238); }
.website-content-toolbar .website-content-tabs button[aria-pressed="true"] { background:var(--yomi-card-bg,#fff); color:var(--yomi-text-primary,#263238); border-color:var(--yomi-border,#e1e4e8); box-shadow:0 1px 4px #1018281f; font-weight:600; }
.website-content-toolbar .website-content-add { margin-left:auto; }
@media(max-width:760px){.website-content-toolbar .website-content-search{flex:1 1 calc(100% - 48px);width:auto}.website-content-toolbar .website-content-tabs{width:auto;max-width:100%;overflow-x:auto}.website-content-toolbar .website-content-tabs button{padding:6px 9px}}

.website-about-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 0; }
.website-about-head h2 { margin:0; }
.website-about-head button { display:flex; align-items:center; gap:6px; padding:8px 12px; border:1px solid var(--yomi-border,#ddd); border-radius:6px; background:var(--yomi-card-bg,#fff); color:var(--yomi-text-primary,#263238); cursor:pointer; }
.website-about-head .action-managed-icon { width:18px; height:18px; }
.website-about-body { max-width:900px; margin:0 auto; padding:0 0 24px; line-height:1.7; overflow-wrap:anywhere; }
.website-about-body img,.website-about-editor img { max-width:100%!important; height:auto!important; }
.website-about-body table { max-width:100%; display:block; overflow:auto; }
.website-news-editor:has([data-rich-article]:not([hidden])) { width:min(1000px,94vw); max-height:92vh; overflow:auto; }
.website-about-editor { min-height:300px; max-height:55vh; overflow:auto; border:1px solid var(--yomi-border,#ddd); border-radius:6px; padding:16px; line-height:1.7; background:var(--yomi-card-bg,#fff); color:var(--yomi-text-primary,#263238); }
.website-about-editor-tools { display:flex; gap:6px; padding:8px 0; }
.website-about-editor-tools button { padding:6px 10px; border:1px solid var(--yomi-border,#ddd); border-radius:5px; background:var(--yomi-card-bg,#fff); color:inherit; cursor:pointer; }

.website-news-editor [hidden] { display:none!important; }

.website-content-toolbar .website-content-tabs { margin-left:auto; }
.website-content-toolbar .website-content-add { margin-left:0; }
@media(max-width:760px){.website-content-toolbar .website-content-tabs{order:0;margin-left:auto;width:auto}.website-content-toolbar .website-content-search{flex:1 1 160px}.website-content-toolbar{flex-wrap:wrap}}

/* Tin tức: ảnh cùng chiều cao, ngang theo tỷ lệ gốc, không ép hai cột. */
.web-preview-articles-cards .website-news-track { display:flex; grid-template-columns:none; gap:14px; overflow-x:auto; scrollbar-width:none; cursor:grab; overscroll-behavior-x:contain; }
.website-news-track::-webkit-scrollbar { display:none; }
.website-news-track.is-panning { cursor:grabbing; }
.website-news-track .web-art-card { flex:0 0 auto; width:max-content; display:grid; grid-template-columns:min-content; min-width:0; }
.website-news-track .website-news-image { display:block; height:180px; width:auto; max-width:none; border-radius:6px; object-fit:contain; }
.website-news-featured .website-news-track .website-news-image { height:260px; }
.website-news-track .web-art-meta { min-width:0; padding-top:10px; overflow-wrap:anywhere; }
.website-news-track .web-art-meta h4 { margin:0 0 6px; }
.website-news-track .web-art-meta p { margin:0; font-size:12px; line-height:1.5; color:var(--yomi-text-secondary,#64748b); }
.is-mobile-frame .website-news-track .website-news-image { height:150px; }
.is-mobile-frame .website-news-featured .website-news-track .website-news-image { height:210px; }

.website-news-track { align-items:start; }
.website-news-track .web-art-card { align-content:start; grid-auto-rows:max-content; }
.website-news-track .web-art-meta { align-self:start; text-align:left; }
.website-news-track .web-art-meta h4 { font-size:13px; line-height:1.4; height:2.8em; overflow:hidden; display:block; }
.website-news-more-row { display:flex; justify-content:flex-end; padding-top:12px; }
.website-news-more { display:inline-flex; gap:7px; align-items:center; color:var(--yomi-text-primary,#263238); font:inherit; font-size:13px; font-weight:400; text-decoration:none; background:transparent; border:0; }
.website-news-more:hover { text-decoration:underline; }

/* Giới hạn dòng Tin tức; chỉ làm mờ cuối dòng khi còn nội dung bị cắt. */
.website-news-track .web-art-meta p { height:4.5em; overflow:hidden; display:block; }
.website-news-track .web-art-meta h4.is-text-overflowing,
.website-news-track .web-art-meta p.is-text-overflowing {
  mask-image:linear-gradient(#000,#000),linear-gradient(to right,#000 55%,transparent);
  mask-size:100% calc(100% - var(--news-line-height)),100% var(--news-line-height);
  mask-position:top,bottom; mask-repeat:no-repeat;
}
.website-news-track .web-art-meta h4 { --news-line-height:1.4em; }
.website-news-track .web-art-meta p { --news-line-height:1.5em; }

/* Tin tức tiêu điểm: ba bài dọc, ảnh trái và nội dung phải. */
.web-preview-articles-cards.website-news-featured .website-news-track { display:flex; flex-direction:column; gap:18px; overflow:visible; cursor:default; }
.website-news-featured .website-news-track .web-art-card { display:grid; grid-template-columns:minmax(0,38%) minmax(0,1fr); gap:16px; width:100%; align-items:start; }
.website-news-featured .website-news-track .website-news-image { height:120px; width:auto; max-width:100%; object-fit:contain; }
.website-news-featured .website-news-track .web-art-meta { padding-top:0; }
.is-mobile-frame .website-news-featured .website-news-track .web-art-card { gap:12px; }
.is-mobile-frame .website-news-featured .website-news-track .website-news-image { height:110px; }

/* Trải nghiệm khách hàng: dùng danh sách và phân trang cố định của quản lý. */
.website-page-websiteExperiences { overflow:hidden; display:flex; flex-direction:column; }
.website-page-websiteExperiences > .website-content { flex:1; min-height:0; height:100%; display:flex; flex-direction:column; padding:0; overflow:hidden; }
.website-experiences #website-panel-reviews { display:flex; flex-direction:column; flex:1; min-height:0; overflow:hidden; }
.website-experiences .website-content-toolbar > strong { margin-left:auto; font-size:14px; }
.website-experience-row { display:flex; gap:14px; padding:18px 0; border-bottom:1px solid var(--yomi-border,#ddd); }
.website-experience-avatar { width:44px; height:44px; flex:0 0 44px; border-radius:50%; overflow:hidden; display:grid; place-items:center; background:var(--yomi-hover-bg,#f2eeea); color:var(--yomi-text-primary,#263238); }
.website-experience-avatar img { width:100%; height:100%; object-fit:cover; }
.website-experience-body { flex:1; min-width:0; }
.website-experience-body header { display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; }
.website-experience-body small { display:block; margin-top:4px; color:var(--yomi-text-secondary,#64748b); }
.website-experience-body p { margin:8px 0 0; white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.5; }
.website-review-rating { color:#ad712b; font-size:15px; letter-spacing:1px; }
.website-review-rating > span { color:var(--yomi-text-secondary,#64748b); }
.website-experiences .website-news-pagination { min-height:40px; padding:0 16px; display:flex; align-items:center; }
.website-experiences .website-news-pagination > * { width:100%; }

/* Hai bố cục đánh giá: thẻ trượt ngang và ba hàng tiêu điểm. */
.website-review-track { gap:14px; }
.website-review-track.is-review-slider { display:flex; overflow-x:auto; scrollbar-width:none; cursor:grab; touch-action:pan-x pan-y; }
.website-review-track.is-review-slider::-webkit-scrollbar { display:none; }
.website-review-track.is-panning { cursor:grabbing; }
.website-review-track.is-review-featured { display:flex; flex-direction:column; }
.website-review-track .web-review-card { display:flex; align-items:flex-start; gap:12px; min-width:0; box-sizing:border-box; background:var(--yomi-card-bg,#fff); border:1px solid var(--yomi-border,#e5e7eb); border-radius:8px; box-shadow:none; }
.website-review-track.is-review-slider .web-review-card { flex:0 0 280px; }
.website-review-track .web-review-avatar { display:grid; place-items:center; width:38px; height:38px; flex:0 0 38px; border-radius:50%; overflow:hidden; color:var(--yomi-text-primary,#263238); background:var(--yomi-hover-bg,#f2eeea); font-size:14px; }
.website-review-track .web-review-avatar img { display:block; width:100%; height:100%; object-fit:cover; }
.website-review-track .web-review-content { flex:1; min-width:0; }
.website-review-track .web-review-author strong { font-size:13px; line-height:1.5; white-space:nowrap; overflow:hidden; mask-image:linear-gradient(to right,#000 85%,transparent); color:inherit; }
.website-review-track .web-review-verified { display:flex; align-items:center; gap:4px; margin-top:3px; font-size:11px; line-height:16px; color:var(--yomi-text-secondary,#64748b); }
.web-review-verified-icon { display:inline-flex; align-items:center; justify-content:center; width:13px; height:13px; background:transparent; color:#1688eb; border-radius:0; flex:0 0 13px; }
.web-review-verified-icon .action-managed-icon { width:10px; height:10px; }
.website-review-track .web-review-stars { margin:7px 0 6px; line-height:16px; }
.website-review-track .web-review-quote { margin:0; font-size:12px; line-height:1.5; height:3em; overflow:hidden; font-style:normal; color:var(--yomi-text-secondary,#64748b); overflow-wrap:anywhere; }
.website-review-track .web-review-quote.is-text-overflowing { mask-image:linear-gradient(#000,#000),linear-gradient(to right,#000 55%,transparent); mask-size:100% calc(100% - 1.5em),100% 1.5em; mask-position:top,bottom; mask-repeat:no-repeat; }
.is-mobile-frame .website-review-track.is-review-slider .web-review-card { flex-basis:85%; }
.website-variant-item[data-drag-type="testimonials"] .website-variant-preview-container { height:100px; aspect-ratio:auto; }

.website-review-track .web-review-card { padding:12px; }
.website-review-track .web-review-stars { margin-top:5px; }

/* Chính sách bán hàng: một thẻ cho mỗi mục, kéo/vuốt ngang. */
.website-policy-section { padding:0 14px; min-width:0; }
.website-policy-track { display:flex; gap:12px; overflow-x:auto; scrollbar-width:none; cursor:grab; }
.website-policy-track::-webkit-scrollbar { display:none; }
.website-policy-track.is-panning { cursor:grabbing; }
.website-policy-card { flex:0 0 42%; min-width:0; box-sizing:border-box; padding:16px 12px; text-align:center; border:1px solid var(--yomi-border,#e5e7eb); border-radius:8px; background:var(--yomi-card-bg,#fff); }
.website-policy-card strong { display:block; font-size:12px; line-height:1.5; overflow-wrap:anywhere; }
.website-policy-card p { margin:6px 0 0; font-size:11px; line-height:1.5; color:var(--yomi-text-secondary,#64748b); white-space:pre-wrap; overflow-wrap:anywhere; }
.is-mobile-frame .website-policy-card { flex-basis:78%; }
.website-policy-editor { display:flex; flex-direction:column; gap:16px; padding:0 0 20px; margin:0; border-bottom:1px solid var(--yomi-border,#ddd); }
.website-policy-editor + .website-policy-editor { padding-top:6px; }
.website-policy-editor > header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }


.website-policy-avatar { display:grid; place-items:center; width:48px; height:48px; border-radius:50%; overflow:hidden; margin:0 auto 10px; background:var(--yomi-hover-bg,#f2eeea); color:var(--yomi-text-secondary,#64748b); }
.website-policy-avatar img { display:block; width:100%; height:100%; object-fit:cover; pointer-events:none; }
.website-policy-avatar .action-managed-icon { width:24px; height:24px; pointer-events:none; }
.website-policy-image-control { display:flex; align-items:flex-start; gap:8px; }
.website-policy-image-upload { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; width:80px; height:80px; overflow:hidden; border:1px dashed var(--yomi-border,#cbd5e1); border-radius:8px; background:var(--yomi-card-bg,#fff); color:var(--yomi-text-secondary,#64748b); cursor:pointer; font-size:12px; }
.website-policy-image-upload img { width:100%; height:100%; object-fit:cover; }
.website-policy-image-upload .action-managed-icon { width:24px; height:24px; }
.website-policy-image-upload:focus-within { outline:2px solid var(--yomi-primary,#1677ff); outline-offset:2px; }

/* Khung thiết kế cố định; chỉ nội dung từng cột/cuộn xem trước di chuyển. */
.website-page-websiteDesigner .website-designer-container { border-radius:14px; isolation:isolate; }
.website-page-websiteDesigner .website-topbar { position:sticky; top:0; flex:0 0 54px; }
.website-page-websiteDesigner .website-3col-layout { grid-template-columns:310px minmax(0,1fr) 310px; min-width:0; }
.website-page-websiteDesigner .website-col-canvas { min-width:0; overflow:hidden; }
.website-page-websiteDesigner .website-canvas-workspace { box-sizing:border-box; display:flex; align-items:flex-start; overflow:auto; padding:16px 20px; }
.website-page-websiteDesigner .website-canvas-workspace > .website-drop-target { display:none; }
.website-page-websiteDesigner .website-canvas-frame { flex-shrink:0; height:100%; min-height:0; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:transparent transparent; box-sizing:border-box; transition:none; }
.website-page-websiteDesigner .website-canvas-frame:hover { scrollbar-color:var(--yomi-border,#cbd5e1) transparent; }
.website-page-websiteDesigner .website-canvas-frame::-webkit-scrollbar { width:6px; height:6px; }
.website-page-websiteDesigner .website-canvas-frame::-webkit-scrollbar-thumb { background:transparent; border-radius:6px; }
.website-page-websiteDesigner .website-canvas-frame:hover::-webkit-scrollbar-thumb { background:var(--yomi-border,#cbd5e1); }
.website-page-websiteDesigner .website-canvas-frame.is-desktop-frame { width:700px; min-width:700px; max-width:700px; border-radius:12px; }
.website-page-websiteDesigner .website-canvas-frame.is-mobile-frame { width:390px; min-width:390px; max-width:390px; border-radius:28px; }
@media(max-width:1024px){
 .website-page-websiteDesigner .website-3col-layout { flex:1; height:auto; }
 .website-page-websiteDesigner .website-mobile-tabs { flex-shrink:0; }
 .website-page-websiteDesigner .website-canvas-frame.is-desktop-frame { margin:0 auto; }
}

/* Thanh cuộn nằm ngoài mặt nội dung Desktop; Mobile ẩn hoàn toàn. */
.website-page-websiteDesigner .website-canvas-scroll-shell { flex-shrink:0; height:100%; min-height:0; margin:0 auto; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; box-sizing:content-box; }
.website-page-websiteDesigner .website-canvas-scroll-shell.is-desktop-scroll { width:700px; padding-right:8px; scrollbar-gutter:stable; scrollbar-width:thin; scrollbar-color:transparent transparent; }
.website-page-websiteDesigner .website-canvas-scroll-shell.is-desktop-scroll:hover { scrollbar-color:var(--yomi-border,#cbd5e1) transparent; }
.website-page-websiteDesigner .website-canvas-scroll-shell.is-desktop-scroll::-webkit-scrollbar { width:6px; }
.website-page-websiteDesigner .website-canvas-scroll-shell.is-desktop-scroll::-webkit-scrollbar-thumb { background:transparent; border-radius:6px; }
.website-page-websiteDesigner .website-canvas-scroll-shell.is-desktop-scroll:hover::-webkit-scrollbar-thumb { background:var(--yomi-border,#cbd5e1); }
.website-page-websiteDesigner .website-canvas-scroll-shell.is-mobile-scroll { width:390px; scrollbar-width:none; border-radius:28px; }
.website-page-websiteDesigner .website-canvas-scroll-shell.is-mobile-scroll::-webkit-scrollbar { display:none; width:0; height:0; }
.website-page-websiteDesigner .website-canvas-scroll-shell .website-canvas-frame { height:auto; min-height:100%; overflow:hidden; margin:0; scrollbar-width:none; }
.website-page-websiteDesigner .website-canvas-scroll-shell .website-canvas-frame::-webkit-scrollbar { display:none; }

/* Viền điện thoại thuộc khung cố định, không cuộn theo nội dung. */
.website-page-websiteDesigner .website-canvas-scroll-shell .website-canvas-frame { overflow:clip; }
.website-page-websiteDesigner .website-canvas-scroll-shell.is-mobile-scroll { box-sizing:border-box; border:8px solid #1e293b; border-radius:28px; background:var(--yomi-card-bg,#fff); }
.website-page-websiteDesigner .website-canvas-scroll-shell.is-mobile-scroll .website-canvas-frame.is-mobile-frame { width:100%; min-width:0; max-width:none; border:0; border-radius:0; }

/* Header tối giản: logo — tìm kiếm/quét mã — giỏ hàng. */
.web-hdr-minimal { padding:0; }
.web-hdr-minimal .web-announcement-bar { margin:0; border-radius:0; }
.web-hdr-minimal-row { display:flex; align-items:center; gap:10px; padding:14px; }
.web-hdr-minimal-brand { flex-shrink:0; max-width:25%; overflow:hidden; white-space:nowrap; font-size:18px; }
.web-hdr-search { display:flex; flex:1; min-width:0; align-items:center; gap:6px; height:42px; padding:0 10px; background:#f3f3f3; border:0; border-radius:14px; color:#555; }
.web-hdr-search .action-managed-icon { width:18px; height:18px; flex-shrink:0; }
.web-hdr-search input[type="search"] { flex:1; min-width:0; width:100%; background:transparent; border:0; outline:0; font:inherit; font-size:12px; color:inherit; }
.web-hdr-search button { display:flex; align-items:center; justify-content:center; width:28px; height:28px; padding:0; border:0; border-radius:6px; background:transparent; color:inherit; cursor:pointer; }
.web-hdr-search:focus-within { outline:1px solid #aab4bf; }
.web-hdr-search button:focus-visible { outline:2px solid #1677ff; }
.web-hdr-minimal-row .web-cart-svg { width:22px; height:22px; }
.website-canvas-block[data-block-type="header"].spacing-small { padding-top:8px; padding-bottom:8px; }
.website-canvas-block[data-block-type="header"].spacing-medium { padding-top:14px; padding-bottom:14px; }
.website-canvas-block[data-block-type="header"].spacing-large { padding-top:22px; padding-bottom:22px; }
.website-page-websiteDesigner .website-canvas-workspace { padding-top:0; }

.web-hdr-minimal .web-announcement-bar { padding-top:9px; padding-bottom:0; line-height:1.4; }
.web-hdr-minimal-row { padding-top:5px; }
.web-header-brand-image { display:block; max-width:100%; width:auto; height:32px; object-fit:contain; }
.web-hdr-minimal-brand > strong { font-size:18px; }

/* Header ghim trong vùng xem trước, tách khung khỏi thanh công cụ. */
.website-page-websiteDesigner .website-canvas-workspace { padding-top:20px; }
.website-canvas-frame > .website-canvas-block[data-block-type="header"] { position:sticky; top:0; z-index:30; background:var(--yomi-card-bg,#fff); }

.web-header-category-menu { position:relative; flex-shrink:0; }
.web-header-category-menu summary { display:flex; align-items:center; justify-content:center; width:26px; height:30px; list-style:none; cursor:pointer; }
.web-header-category-menu summary::-webkit-details-marker { display:none; }
.web-header-category-menu .action-managed-icon { width:21px; height:21px; }
.web-header-category-menu > div { position:absolute; top:100%; left:0; z-index:45; min-width:170px; max-height:260px; overflow:auto; background:var(--yomi-card-bg,#fff); color:var(--yomi-text-primary,#263238); border:1px solid var(--yomi-border,#ddd); border-radius:8px; padding:6px; box-shadow:0 4px 16px #0001; }
.web-header-category-menu > div span { display:block; padding:8px; font-size:12px; }
.web-header-category-strip { display:flex; gap:18px; overflow:auto; scrollbar-width:none; padding:0 14px 12px; cursor:grab; }
.web-header-category-strip::-webkit-scrollbar { display:none; }
.web-header-category-strip span { white-space:nowrap; font-size:12px; }
.website-header-option { display:flex!important; align-items:center; gap:7px; margin-bottom:10px; }
.web-hdr-search { color:inherit; }

.website-brand-inline { display:flex; align-items:center; min-height:36px; padding:0 8px 0 10px; border:1px solid var(--yomi-border,#cbd5e1); border-radius:6px; background:var(--yomi-card-bg,#fff); }
.website-brand-inline-value { min-width:0; flex:1; font-size:13px; }
.website-brand-inline-value img { display:block; max-width:100%; height:32px; object-fit:contain; padding:3px 0; }
.website-brand-name-inline { width:100%; border:0; outline:0; padding:0; height:34px; font:inherit; background:transparent; color:inherit; }
.website-brand-inline-menu { position:relative; }
.website-brand-inline-menu summary { list-style:none; cursor:pointer; display:flex; padding:4px; }
.website-brand-inline-menu summary::-webkit-details-marker { display:none; }
.website-brand-inline-menu .action-managed-icon { width:18px; height:18px; }
.website-brand-inline-menu > div { min-width:180px; right:0; left:auto; }

.website-brand-inline { position:relative; cursor:pointer; }
.website-brand-inline-menu summary { display:none; }
.website-brand-inline-menu { position:static; }
.website-brand-inline-menu > .website-link-dropdown { left:0; right:0; top:100%; }

/* Dropdown thương hiệu nổi dưới ô, không tham gia bố cục giá trị. */
.website-col-inspector .website-brand-inline-menu > .website-link-dropdown { position:absolute; top:calc(100% + 4px); left:-1px; right:-1px; min-width:0; margin:0; z-index:40; box-sizing:border-box; }
.website-brand-inline { height:36px; box-sizing:border-box; }
.website-header-colors { display:flex; align-items:center; gap:16px; margin-bottom:16px; }
.website-col-inspector .website-header-colors label { display:flex; align-items:center; gap:7px; margin:0; white-space:nowrap; font:inherit; font-size:13px; }
.website-header-colors input[type="color"] { appearance:none; width:24px; height:24px; padding:0; border:1px solid var(--yomi-border,#cbd5e1); border-radius:0; background:transparent; cursor:pointer; }
.website-header-colors input[type="color"]::-webkit-color-swatch-wrapper { padding:0; }
.website-header-colors input[type="color"]::-webkit-color-swatch { border:0; }
.website-header-colors input[type="color"]::-moz-color-swatch { border:0; }

.website-col-inspector .website-spacing-inline { display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:8px; position:relative; }
.website-col-inspector .website-spacing-inline > label { margin:0; white-space:nowrap; }
.website-col-inspector .website-spacing-inline > .website-link-dropdown-button { width:auto; min-height:28px; height:auto; padding:4px 8px; border:1px solid var(--yomi-border,#cbd5e1); background:var(--yomi-card-bg,#fff); color:var(--yomi-text-primary,#263238); font-size:12px; text-align:right; }
.website-col-inspector .website-spacing-inline > .website-spacing-options { position:absolute; top:calc(100% + 4px); left:auto; right:0; width:max-content; min-width:0; max-width:100%; z-index:40; }
.website-col-inspector .website-spacing-inline > .website-spacing-options button { white-space:nowrap; }
.website-brand-inline-value img { height:24px; padding:0; width:auto; max-width:100%; object-fit:contain; object-position:left center; }

/* Header nằm ngoài vùng cuộn nội dung, giữ nguyên vị trí khi lăn chuột. */
.website-page-websiteDesigner .website-canvas-scroll-shell { overflow:hidden; }
.website-page-websiteDesigner .website-canvas-scroll-shell .website-canvas-frame { display:flex; flex-direction:column; height:100%; min-height:0; }
.website-canvas-frame > .website-canvas-block[data-block-type="header"] { position:relative; top:auto; flex-shrink:0; }
.website-canvas-frame > .website-drop-target { flex-shrink:0; }
.website-canvas-content-scroll { flex:1; min-height:0; overflow-y:auto; overflow-x:clip; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:transparent transparent; }
.website-canvas-content-scroll:hover { scrollbar-color:var(--yomi-border,#cbd5e1) transparent; }
.website-canvas-content-scroll::-webkit-scrollbar { width:6px; }
.website-canvas-content-scroll::-webkit-scrollbar-thumb { background:transparent; border-radius:6px; }
.website-canvas-content-scroll:hover::-webkit-scrollbar-thumb { background:var(--yomi-border,#cbd5e1); }
.is-mobile-scroll .website-canvas-content-scroll { scrollbar-width:none; }
.is-mobile-scroll .website-canvas-content-scroll::-webkit-scrollbar { display:none; }
.website-col-inspector .website-spacing-inline > .website-spacing-options button { text-align:right; }

/* Ô chọn và menu khoảng cách dùng cùng kích thước/chữ. */
.website-col-inspector .website-spacing-inline > .website-link-dropdown-button,
.website-col-inspector .website-spacing-inline > .website-spacing-options { width:126px; box-sizing:border-box; }
.website-col-inspector .website-spacing-inline > .website-link-dropdown-button,
.website-col-inspector .website-spacing-inline > .website-spacing-options button { font-family:inherit; font-size:12px; font-weight:400; line-height:18px; text-align:right; }
/* Chừa rãnh cuộn bên ngoài bề ngang nội dung Desktop 700px. */
.website-page-websiteDesigner .website-canvas-scroll-shell.is-desktop-scroll { width:714px; padding-right:0; scrollbar-gutter:auto; }
.website-page-websiteDesigner .is-desktop-scroll .website-canvas-frame.is-desktop-frame { width:714px; min-width:714px; max-width:714px; border:0; border-radius:12px; overflow:visible; }
.is-desktop-scroll .website-canvas-frame > .website-canvas-block[data-block-type="header"],
.is-desktop-scroll .website-canvas-frame > .website-drop-target { width:700px; box-sizing:border-box; }
.is-desktop-scroll .website-canvas-content-scroll { width:714px; box-sizing:border-box; padding-right:8px; scrollbar-gutter:stable; }

.website-col-inspector .website-banner-title-field { order:-2; }
.website-slide-editor > header { order:-3; justify-content:flex-end; }
.website-slide-editor > header:empty { display:none; }
.website-slide-editor > header:not(:has(button)):not(:has(strong)) { display:none; }

.website-banner-action-field { position:relative; }
.website-col-inspector .website-banner-action-field > input { padding-right:68px; }
.website-banner-action-field .website-action-colors { position:absolute; right:8px; top:50%; transform:translateY(-50%); display:flex; gap:6px; margin:0; }
.website-col-inspector .website-banner-action-field .website-color-tooltip { position:relative; display:flex; margin:0; }
.website-color-tooltip:is(:hover,:focus-within)::after { content:attr(data-tooltip); position:absolute; bottom:calc(100% + 8px); right:0; width:max-content; padding:8px 12px; border:1px solid var(--yomi-border,#cbd5e1); border-radius:var(--yomi-radius-sm,6px); background:var(--yomi-primary,#172b4d); color:#fff; font-family:inherit; font-size:12px; font-weight:400; line-height:1.45; box-shadow:0 4px 14px #172b4d20; pointer-events:none; z-index:50; }

.website-slide-editor-inline-title { position:relative; }
.website-slide-editor-inline-title > header { position:absolute; top:0; right:0; z-index:2; }
.website-slide-editor-inline-title .website-banner-title-field > label { min-height:26px; display:flex; align-items:center; padding-right:34px; box-sizing:border-box; }

.website-col-inspector .website-grid-ratio-inline { display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:8px; }
.website-col-inspector .website-grid-ratio-inline > label { margin:0; }
.website-grid-ratio-inline .website-grid-ratio-menu { width:126px; }
.website-col-inspector .website-grid-ratio-inline summary.website-link-dropdown-button { box-sizing:border-box; width:126px; height:28px; min-height:28px; padding:4px 8px; font-family:inherit; font-size:12px; font-weight:400; line-height:18px; text-align:right; justify-content:flex-end; }
.website-col-inspector .website-grid-ratio-inline .website-link-dropdown { position:absolute; top:calc(100% + 4px); left:auto; right:0; width:126px; box-sizing:border-box; z-index:40; }
.website-grid-ratio-inline .website-link-dropdown button { text-align:right; font-family:inherit; font-size:12px; }

.website-col-inspector .website-spacing-inline > .website-link-dropdown-button,
.website-grid-ratio-inline .website-grid-ratio-menu { flex:0 0 126px; min-width:126px; }
.website-drawer-form:has(.website-slide-editor) > .website-spacing-inline { padding-bottom:14px; border-bottom:1px solid var(--yomi-border,#e2e8f0); }
.website-col-inspector .website-add-banner[data-action="add-carousel-slide"] { background:var(--yomi-card-bg,#fff); color:var(--yomi-text-primary,#263238); border:1px solid var(--yomi-border,#cbd5e1); }
.website-col-inspector .website-add-banner[data-action="add-carousel-slide"]:hover { background:var(--yomi-hover-bg,#f1f5f9); }

.website-col-inspector .website-category-source-menu { margin-left:auto; margin-right:0; }
.website-col-inspector .website-category-source-menu > summary { margin:0; }
.website-col-inspector .website-spacing-inline > .website-link-dropdown-button { height:28px; margin:0 0 0 auto; justify-content:flex-end; }
.website-col-inspector .website-category-image-setting { align-items:center; text-align:center; padding:12px; border:1px solid var(--yomi-border,#cbd5e1); border-radius:6px; background:var(--yomi-card-bg,#fff); box-sizing:border-box; }
.website-col-inspector .website-category-image-setting > strong,
.website-col-inspector .website-category-image-setting > small { width:100%; text-align:center; overflow-wrap:anywhere; }
.website-col-inspector .website-category-image-setting > .website-category-image-upload { margin:0; }
.website-col-inspector .website-list-image-select { flex:0 0 80px; width:80px; height:80px; padding:0; overflow:hidden; border:1px solid var(--yomi-border,#cbd5e1); border-radius:6px; background:var(--yomi-card-bg,#fff); cursor:pointer; }
.website-list-image-select img { display:block; width:100%; height:100%; object-fit:cover; }
.website-list-image-select:hover { border-color:var(--yomi-primary,#2563eb); }
.website-list-image-select:focus-visible { outline:2px solid var(--yomi-primary,#2563eb); outline-offset:2px; }

/* Cho thanh thao tác Header nổi ra ngoài khung, nội dung vẫn cuộn riêng. */
.website-page-websiteDesigner .website-canvas-workspace { padding-top:40px; }
.website-page-websiteDesigner .website-canvas-scroll-shell,
.website-page-websiteDesigner .website-canvas-scroll-shell .website-canvas-frame { overflow:visible; }
.website-canvas-frame > .website-canvas-block[data-block-type="header"] > .website-canvas-block-body { border-radius:12px 12px 0 0; overflow:hidden; }
.is-mobile-scroll .website-canvas-frame > .website-canvas-block[data-block-type="header"] > .website-canvas-block-body { border-radius:20px 20px 0 0; }
.website-canvas-content-scroll { border-radius:0 0 12px 12px; }
.is-mobile-scroll .website-canvas-content-scroll { border-radius:0 0 20px 20px; }

.website-policy-title-row { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.website-policy-title-row > label { margin:0; }
.website-policy-editor > .website-form-group > label { display:flex; align-items:center; min-height:26px; margin:0; }
.website-policy-image-frame { position:relative; flex:0 0 80px; width:80px; height:80px; }
.website-policy-image-frame > .website-policy-image-upload { box-sizing:border-box; margin:0; }
.website-policy-image-frame > .website-btn-icon-mini { position:absolute; top:3px; right:3px; z-index:1; background:transparent; border:0; box-shadow:none; color:var(--yomi-text-secondary,#64748b); }
.website-policy-image-frame > .website-btn-icon-mini:hover { background:transparent; border:0; color:var(--yomi-primary,#1677ff); }
.website-policy-image-frame > .website-btn-icon-mini:focus-visible { outline:2px solid var(--yomi-primary,#1677ff); outline-offset:1px; }
.website-policy-image-control > small { flex:1; min-width:0; align-self:center; color:var(--yomi-text-secondary,#64748b); font-size:11px; line-height:1.5; }
.web-ftr-full .web-ftr-top { display:block; }
.web-ftr-full .web-ftr-brand { display:flex; flex-direction:column; gap:10px; min-width:0; }
.web-ftr-full .web-ftr-brand p { margin:0; }
.website-store-contact { display:flex; align-items:flex-start; gap:8px; overflow-wrap:anywhere; }
.website-store-contact svg { flex:0 0 16px; width:16px; height:16px; }
.website-store-contact a { color:inherit; text-decoration:none; overflow-wrap:anywhere; }
.web-ftr-full .web-ftr-socials { display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:center; margin-top:16px; }
.web-ftr-socials a { display:flex; align-items:center; justify-content:center; width:28px; height:28px; color:inherit; text-decoration:none; }
.web-ftr-socials svg { width:22px; height:22px; }
.web-ftr-socials a:hover { color:var(--yomi-primary,#1677ff); }
.web-ftr-socials a:focus-visible { outline:2px solid var(--yomi-primary,#1677ff); outline-offset:3px; border-radius:4px; }
.website-canvas-frame > .website-canvas-block[data-block-type="fixed_footer"] { flex:0 0 auto; padding:0; background:#fff; z-index:31; width:700px; box-sizing:border-box; border-radius:0 0 12px 12px; }
.is-mobile-scroll .website-canvas-frame > .website-canvas-block[data-block-type="fixed_footer"] { width:100%; border-radius:0 0 20px 20px; }
.website-canvas-frame > .website-canvas-block[data-block-type="fixed_footer"] + .website-drop-target { display:none; }
.website-home-footer { display:flex; align-items:center; justify-content:space-around; min-height:60px; padding:8px 12px max(8px,env(safe-area-inset-bottom)); border-top:1px solid #eee; box-sizing:border-box; color:#171717; background:#fff; border-radius:inherit; }
.website-home-footer > :is(a,button) { display:flex; flex:1; flex-direction:column; align-items:center; justify-content:center; gap:5px; min-width:0; min-height:44px; padding:0; border:0; border-radius:4px; background:transparent; color:inherit; font:inherit; font-size:10px; text-decoration:none; cursor:pointer; }
.website-home-footer svg { width:20px; height:20px; }
.website-home-footer > :is(a,button):hover { color:var(--yomi-primary,#1677ff); }
.website-home-footer > :is(a,button):focus-visible { outline:2px solid var(--yomi-primary,#1677ff); outline-offset:1px; }
.website-variant-preview-container .website-home-footer { min-height:52px; padding:4px; pointer-events:none; }
.website-variant-preview-container .website-home-footer svg { width:14px; height:14px; }
.website-variant-preview-container .website-home-footer span { font-size:7px; }
.website-home-footer { overflow-x:auto; scrollbar-width:none; }
.website-home-footer > :is(a,button) { flex:1 0 56px; }
.website-home-footer::-webkit-scrollbar { display:none; }
.website-footer-options { display:flex; flex-direction:column; gap:12px; }
.website-footer-option { display:flex; flex-direction:column; gap:8px; padding:12px; border:1px solid var(--yomi-border,#cbd5e1); border-radius:6px; background:var(--yomi-card-bg,#fff); }
.website-footer-option-toggle { display:flex; align-items:center; gap:8px; margin:0; cursor:pointer; }
.website-footer-option-toggle input { appearance:none; width:16px; height:16px; flex:0 0 16px; margin:0; border:1px solid var(--yomi-border,#cbd5e1); border-radius:3px; background:var(--yomi-card-bg,#fff); cursor:pointer; }
.website-footer-option-toggle input:checked { background:var(--yomi-primary,#1677ff); border-color:var(--yomi-primary,#1677ff); box-shadow:inset 0 0 0 3px var(--yomi-card-bg,#fff); }
.website-footer-option-toggle input:checked { background:var(--yomi-primary,#1677ff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3 8 3 3 7-7' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat; box-shadow:none; }
.website-footer-system-value { padding:8px 10px; border:1px solid var(--yomi-border,#cbd5e1); border-radius:6px; background:var(--yomi-hover-bg,#f7f8fa); font-size:12px; overflow-wrap:anywhere; }
.website-child-page { padding:0 16px; width:100%; box-sizing:border-box; }
.website-child-page h1 { margin:14px 0; font-size:22px; }
.website-child-gallery { display:flex; overflow-x:auto; gap:10px; scroll-snap-type:x mandatory; }
.website-child-gallery img { width:100%; flex:0 0 100%; aspect-ratio:1; object-fit:contain; scroll-snap-align:start; }
.website-child-description { white-space:pre-wrap; overflow-wrap:anywhere; }
.website-child-page .web-prod-item { cursor:pointer; }
.website-child-page .website-news-more-row { display:none; }
.website-theme-row:has(.website-theme-pages) { flex-wrap:wrap; }
.website-theme-pages { display:flex; flex-direction:column; gap:4px; flex:0 0 100%; min-width:0; padding-top:10px; margin-top:8px; border-top:1px solid var(--yomi-border,#cbd5e1); }
.website-theme-page { display:flex; flex-direction:column; gap:3px; padding:8px 10px; text-align:left; border:1px solid transparent; border-radius:6px; background:var(--yomi-card-bg,#fff); color:var(--yomi-text-primary,#172b4d); font:inherit; cursor:pointer; }
.website-theme-page span { font-size:10px; color:var(--yomi-text-secondary,#64748b); }
.website-theme-page strong { font-size:12px; font-weight:500; overflow-wrap:anywhere; }
.website-theme-page:hover { background:var(--yomi-hover-bg,#f1f5f9); }
.website-theme-page.is-current { background:var(--yomi-hover-bg,#f1f5f9); border-color:var(--yomi-primary,#1677ff); }
.website-theme-page:focus-visible { outline:2px solid var(--yomi-primary,#1677ff); outline-offset:1px; }
.website-theme-subpages { display:flex; flex-direction:column; gap:4px; margin-left:14px; padding-left:8px; border-left:1px solid var(--yomi-border,#cbd5e1); }
.is-child-page .website-canvas-content-scroll .website-block-toolbar { top:4px; max-width:calc(100% - 8px); box-sizing:border-box; }
.is-child-page .website-block-toolbar .website-block-label { min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.website-domain-panel { max-width:800px; margin:0 0 18px; }
.website-domain-panel form { display:flex; flex-direction:column; gap:16px; max-width:560px; }
.website-domain-panel form > label { display:flex; flex-direction:column; gap:8px; font-size:13px; }
.website-domain-panel form > .website-domain-check { flex-direction:row; align-items:center; }
.website-domain-panel li { margin:12px 0; line-height:1.6; }
.website-domain-panel p { line-height:1.6; font-size:13px; }
.website-carousel-track.website-auto-banner { gap:0; max-height:none; scroll-snap-type:x mandatory; }
.website-auto-banner > .website-carousel-slide { flex:0 0 100%; min-width:100%; max-width:100%; scroll-snap-align:start; }
.website-auto-banner .web-banner-single-img { object-fit:cover; width:100%; height:100%; }
.website-grid-ratio-inline:has([data-current-ratio="300:157"]) summary { white-space:nowrap; }
.website-col-inspector .website-grid-ratio-inline:has([data-current-ratio="300:157"]) .website-grid-ratio-menu,
.website-col-inspector .website-grid-ratio-inline:has([data-current-ratio="300:157"]) summary.website-link-dropdown-button,
.website-col-inspector .website-grid-ratio-inline:has([data-current-ratio="300:157"]) .website-link-dropdown { width:174px; min-width:174px; flex-basis:174px; }
.website-carousel-shell { position:relative; width:100%; }
.website-carousel-indicators { position:absolute; left:50%; bottom:8px; transform:translateX(-50%); display:flex; align-items:center; justify-content:center; gap:6px; z-index:4; max-width:95%; }
.website-carousel-indicators button { display:flex; align-items:center; justify-content:center; width:24px; height:18px; padding:0; border:0; border-radius:2px; background:transparent; cursor:pointer; }
.website-carousel-indicators button span { display:block; width:24px; height:2px; border-radius:1px; background:rgba(255,255,255,.6); box-shadow:0 0 2px #0008; }
.website-carousel-indicators button[aria-current="true"] span { background:#fff; height:3px; }
.website-carousel-indicators button:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.website-block-toolbar.website-floating-block-toolbar { position:fixed; display:flex; right:auto; z-index:1000; box-sizing:border-box; margin:0; }
.website-floating-block-toolbar .website-block-label { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.website-floating-block-toolbar .website-block-buttons { flex:0 0 auto; }
.web-preview-header { border-bottom:0; }
.website-child-list-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:34px; margin:0 0 10px; }
.website-child-list-heading h1 { margin:0; font-size:20px; line-height:1.3; }
.website-child-filter { position:relative; margin-left:auto; flex:0 0 auto; font-size:12px; }
.website-child-filter summary { list-style:none; cursor:pointer; }
.website-child-filter summary::-webkit-details-marker { display:none; }
.website-child-filter > summary { display:flex; align-items:center; gap:5px; min-height:30px; padding:3px 8px; box-sizing:border-box; border:1px solid var(--yomi-border,#cbd5e1); border-radius:6px; background:var(--yomi-card-bg,#fff); color:var(--yomi-text-primary,#172b4d); }
.website-child-filter > summary svg { width:16px; height:16px; }
.website-child-filter-panel { position:absolute; top:calc(100% + 6px); right:0; width:270px; max-width:calc(100vw - 70px); padding:12px; display:flex; flex-direction:column; gap:12px; box-sizing:border-box; border:1px solid var(--yomi-border,#cbd5e1); border-radius:8px; background:var(--yomi-card-bg,#fff); color:var(--yomi-text-primary,#172b4d); box-shadow:0 6px 20px #172b4d26; z-index:40; }
.website-child-filter-panel > label { display:flex; flex-direction:column; gap:6px; }
.website-child-filter-panel input { background:var(--yomi-card-bg,#fff); color:var(--yomi-text-primary,#172b4d); border:1px solid var(--yomi-border,#cbd5e1); }
.website-child-filter-categories > summary { padding:8px; border:1px solid var(--yomi-border,#cbd5e1); border-radius:6px; background:var(--yomi-card-bg,#fff); }
.website-child-filter-categories > div { display:flex; flex-direction:column; max-height:180px; overflow:auto; padding-top:6px; }
.website-child-filter-panel button { padding:7px 9px; text-align:left; border:1px solid var(--yomi-border,#cbd5e1); border-radius:5px; background:var(--yomi-card-bg,#fff); color:var(--yomi-text-primary,#172b4d); font:inherit; cursor:pointer; }
.website-child-filter-panel button:hover,.website-child-filter-panel button[aria-pressed="true"] { background:var(--yomi-hover-bg,#f1f5f9); }
.website-child-filter-actions { display:flex; justify-content:flex-end; gap:8px; }
.website-child-filter-actions button:last-child { background:var(--yomi-primary,#1677ff); color:#fff; }
.website-child-filter :is(summary,button,input):focus-visible { outline:2px solid var(--yomi-primary,#1677ff); outline-offset:2px; }
.website-child-list-heading { align-items:center; min-height:38px; }
.website-child-list-heading h1 { display:flex; align-items:center; min-height:34px; }
.website-child-filter > summary { min-height:34px; line-height:20px; }
.website-child-filter-panel { max-height:60vh; overflow-y:auto; overscroll-behavior:contain; }
.is-mobile-frame .website-child-list-heading { position:relative; }
.is-mobile-frame .website-child-filter { position:static; }
.is-mobile-frame .website-child-filter-panel { left:0; right:0; width:100%; max-width:none; }
.website-child-filter-panel { width:460px; gap:24px; padding:0 16px 16px; }
.website-child-filter-top { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 -16px; padding:12px; background:var(--yomi-hover-bg,#f7f9fb); }
.website-child-filter-sort { position:relative; }
.website-child-filter-sort > div { position:absolute; top:calc(100% + 8px); right:0; min-width:150px; display:flex; flex-direction:column; padding:5px; border:1px solid var(--yomi-border,#dce3ed); border-radius:6px; background:var(--yomi-card-bg,#fff); box-shadow:0 4px 14px #172b4d20; z-index:2; }
.website-child-filter-group h3 { margin:0 0 14px; font-size:13px; font-weight:400; }
.website-child-filter-chips { display:flex; flex-wrap:wrap; gap:9px; }
.website-child-filter-chips button { min-width:34px; height:34px; padding:5px 9px; border-radius:0; text-align:center; border:1px solid var(--yomi-border,#dce3ed); }
.website-child-filter-chips button[aria-pressed="true"] { outline:2px solid var(--yomi-primary,#172b4d); outline-offset:1px; }
.website-child-filter-chips button.is-color-chip { width:34px; padding:0; background:var(--swatch); }
.website-child-filter-chips button.is-color-chip:hover,.website-child-filter-chips button.is-color-chip[aria-pressed="true"] { background:var(--swatch); }
.website-child-filter-actions { padding-top:16px; border-top:1px solid var(--yomi-border,#dce3ed); }
.website-child-filter-actions button:first-child { border:0; text-decoration:underline; }
.website-child-filter-actions button:last-child { border-radius:0; background:var(--yomi-primary,#111); padding:9px 18px; }
.website-footer-option-toggle input:focus-visible { outline:2px solid var(--yomi-primary,#1677ff); outline-offset:2px; }
.website-footer-display-picker > summary { list-style:none; cursor:pointer; }
.website-footer-display-picker > summary::-webkit-details-marker { display:none; }
.website-footer-display-picker > .website-footer-options { margin-top:8px; padding:12px; border:1px solid var(--yomi-border,#cbd5e1); border-radius:6px; background:var(--yomi-card-bg,#fff); }
.website-footer-selected-items { display:flex; flex-direction:column; gap:12px; }
.website-footer-display-picker { position:relative; }
.website-footer-display-picker > .website-footer-options { position:absolute; top:100%; left:0; right:0; z-index:60; max-height:320px; overflow-y:auto; box-shadow:0 6px 20px #172b4d20; }
.website-footer-selected-label { display:flex; align-items:center; gap:8px; }
.website-footer-selected-label svg { width:20px; height:20px; flex:0 0 20px; }
[data-footer-key][draggable="true"] { cursor:grab; }
.website-page-websiteDesigner .website-canvas-scroll-shell.is-mobile-scroll { border-radius:28px; }
.is-mobile-scroll .website-canvas-frame { border-radius:20px; background-clip:padding-box; }
.is-mobile-scroll .website-canvas-frame > .website-canvas-block[data-block-type="header"] { overflow:clip; border-radius:20px 20px 0 0; }
.is-mobile-scroll .website-canvas-frame > .website-canvas-block[data-block-type="fixed_footer"] { overflow:clip; border-radius:0 0 20px 20px; }
/* Cắt toàn bộ nội dung theo mép trong của viền điện thoại. */
.website-page-websiteDesigner .website-canvas-scroll-shell.is-mobile-scroll .website-canvas-frame.is-mobile-frame { overflow:clip; border-radius:20px; isolation:isolate; clip-path:inset(0 round 20px); }
.website-page-websiteDesigner .website-canvas-workspace { padding-top:0; }
.website-page-websiteDesigner .website-canvas-scroll-shell.is-desktop-scroll,
.website-page-websiteDesigner .is-desktop-scroll .website-canvas-frame.is-desktop-frame { width:700px; min-width:700px; max-width:700px; }
.is-desktop-scroll .website-canvas-content-scroll { width:700px; padding-right:0; scrollbar-gutter:auto; }
.website-canvas-content-scroll { scrollbar-width:none; }
.website-canvas-content-scroll::-webkit-scrollbar { display:none; width:0; }
.website-canvas-frame > .website-canvas-block[data-block-type="header"] { border-radius:12px 12px 0 0; }
.is-mobile-scroll .website-canvas-frame > .website-canvas-block[data-block-type="header"] { border-radius:20px 20px 0 0; }
.website-canvas-frame > .website-canvas-block[data-block-type="fixed_footer"] .website-home-footer { border-radius:0 0 12px 12px; }
.is-mobile-scroll .website-canvas-frame > .website-canvas-block[data-block-type="fixed_footer"] .website-home-footer { border-radius:0 0 20px 20px; }
.website-canvas-block[data-block-type="header"] > .website-block-toolbar { position:fixed; top:var(--header-toolbar-top,0); left:var(--header-toolbar-left,0); right:auto; z-index:1000; }

/* Màu khung lọc độc lập với giao diện quản trị. */
.website-child-filter { color:var(--filter-text,#172b4d); }
.website-child-filter .website-child-filter-panel,
.website-child-filter .website-child-filter-top,
.website-child-filter .website-child-filter-sort > div,
.website-child-filter .website-child-filter-panel button,
.website-child-filter > summary { background:var(--filter-bg,#fff); color:var(--filter-text,#172b4d); }
.website-child-filter .website-child-filter-panel button:hover,
.website-child-filter .website-child-filter-panel button[aria-pressed="true"] { background:color-mix(in srgb,var(--filter-text) 10%,var(--filter-bg)); }
.website-child-filter .website-child-filter-sort > div { padding:4px; overflow:hidden; }
.website-child-filter .website-child-filter-sort > div > button { border:0; border-radius:0; box-shadow:none; width:100%; }
.website-child-filter .website-child-filter-sort > div > button:focus-visible { outline-offset:-2px; }
.website-child-filter .website-child-filter-actions button:last-child { background:var(--filter-text,#172b4d); color:var(--filter-bg,#fff); }

.website-child-page .website-child-list-heading { display:flex; align-items:center; box-sizing:border-box; min-height:42px; padding:4px 0; margin:0 0 8px; }
.website-child-page .website-child-list-heading h1 { margin:0; padding:0; min-height:34px; display:flex; align-items:center; line-height:1.3; }
.website-child-page .website-child-list-heading > .website-child-filter { align-self:center; margin-top:0; margin-bottom:0; }

/* Hàng tiêu đề tự có đệm cân hai phía, không cộng thêm lề trên của khối danh sách. */
.website-canvas-block:has(> .website-canvas-block-body > .website-child-list) { padding-top:0; }

.website-designer-mode-label { font-size:12px; color:var(--yomi-text-primary,#172b4d); white-space:nowrap; }
@media(max-width:600px) { .website-designer-mode-label { max-width:90px; white-space:normal; text-align:right; font-size:11px; } }

/* Trang chi tiết lấy bố cục từ tab Mobile của danh mục sản phẩm. */
.website-child-product { min-width:0; padding-bottom:12px; }
.website-product-gallery { display:grid; gap:8px; }
.website-product-main-image { display:block; width:100%; height:auto; object-fit:contain; border-radius:14px; background:#f7f7f5; }
.website-product-thumbnails { display:flex; gap:7px; overflow-x:auto; padding:2px; }
.website-product-thumbnails button { flex:0 0 calc((100% - 21px)/4); min-width:0; padding:0; border:1px solid transparent; border-radius:8px; background:#f7f7f5; cursor:pointer; }
.website-product-thumbnails button[aria-pressed="true"] { border-color:currentColor; }
.website-product-thumbnails img { display:block; width:100%; aspect-ratio:1; object-fit:cover; border-radius:7px; }
.website-product-image-empty { display:grid; place-items:center; aspect-ratio:1; border-radius:14px; background:#f1f5f9; color:#64748b; }
.website-product-identity { display:grid; gap:5px; margin-top:15px; }
.website-child-page .website-product-identity h1 { margin:0; font-size:22px; line-height:1.3; font-weight:800; }
.website-product-identity small { opacity:.7; font-size:12px; }
.website-product-buy { display:flex; align-items:end; justify-content:space-between; gap:12px; margin-top:14px; padding:16px; border-radius:14px; background:linear-gradient(135deg,#edf5ff,#fff); box-shadow:0 8px 24px #10182814; }
.website-product-buy > div { display:grid; gap:4px; }
.website-product-buy span { font-size:13px; opacity:.7; }
.website-product-buy .web-price { font-size:24px; line-height:1.1; }
.website-product-buy del { font-size:12px; opacity:.6; }
.website-product-buy p { margin:0; padding:6px 9px; border-radius:999px; font-size:12px; font-weight:700; }
.website-product-buy .is-available { background:#e7f8ef; color:#027a48; }
.website-product-buy .is-empty { background:#feeceb; color:#b42318; }
.website-product-options,.website-product-section { margin-top:18px; }
.website-child-product h2 { margin:0 0 10px; font-size:17px; line-height:1.35; font-weight:750; }
.website-product-options > div { display:flex; flex-wrap:wrap; gap:8px; }
.website-product-options span { padding:8px 12px; border:1px solid #dce3ed; border-radius:9px; background:#fff; color:#172b4d; font-size:14px; }
.website-product-section { padding:15px; border-radius:14px; background:#f5f7fa; }
.website-product-spec { display:grid; grid-template-columns:minmax(90px,.8fr) minmax(0,1.2fr); gap:12px; padding:9px 0; border-bottom:1px solid #dce3ed; overflow-wrap:anywhere; }
.website-product-spec:last-child { border-bottom:0; }
.website-product-spec > span { opacity:.7; font-size:13px; }
.website-product-spec > strong { text-align:right; font-size:14px; font-weight:600; }
.website-product-policy { background:#eef9f3; }
.website-product-description { padding:0; background:transparent; }
.website-product-description .website-child-description { max-height:290px; overflow:hidden; font-size:16px; line-height:1.7; overflow-wrap:anywhere; }
.website-product-description.is-expanded .website-child-description { max-height:none; }
.website-child-description img { display:block; max-width:100%; height:auto; }
.website-product-description > button { display:flex; justify-content:center; align-items:center; gap:7px; width:100%; min-height:40px; margin-top:6px; border:0; border-radius:4px; background:#fff; color:#172b4d; font:inherit; cursor:pointer; }
.website-child-product button:focus-visible { outline:2px solid #1677ff; outline-offset:2px; }
.is-mobile-frame .website-product-identity h1 { font-size:20px; }
.is-mobile-frame .website-product-buy { padding:14px; flex-wrap:wrap; }
.is-mobile-frame .website-product-buy .web-price { font-size:22px; }
.is-mobile-frame .website-product-description .website-child-description { max-height:250px; }
.is-mobile-frame .website-product-description.is-expanded .website-child-description { max-height:none; }

/* Đặt hàng trong khung xem sản phẩm, không mở trang khác. */
.website-canvas-frame { position:relative; }
.website-product-order-button { display:block; width:100%; min-height:44px; margin:16px 0 0; padding:10px 16px; border:1px solid #f30e20; border-radius:6px; background:#f30e20; color:#fff; font-family:inherit; font-size:15px; font-weight:600; line-height:1.3; cursor:pointer; }
.website-product-order-button:disabled { background:#adb5bd; border-color:#adb5bd; cursor:default; }
.website-checkout-overlay { position:absolute; inset:0; z-index:100; display:flex; align-items:flex-end; background:#15223866; overflow:hidden; border-radius:inherit; }
.website-checkout-sheet { display:flex; flex-direction:column; width:100%; max-height:96%; box-sizing:border-box; border:1px solid #dce3ed; border-radius:16px 16px 0 0; background:#fff; color:#152536; box-shadow:0 -5px 28px #0002; animation:website-checkout-rise .22s ease-out; text-align:left; }
@keyframes website-checkout-rise { from { transform:translateY(100%); } to { transform:translateY(0); } }
.website-checkout-sheet > header { flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; padding:7px 12px 10px; border-bottom:1px solid #e8edf2; }
.website-checkout-sheet > header > div { flex:1; }
.website-checkout-handle { display:block; width:34px; height:4px; margin:0 auto 7px; border-radius:3px; background:#d0d6df; }
.website-checkout-sheet h2 { margin:0; font-size:17px; line-height:1.3; }
.website-checkout-sheet h2 small { color:#64748b; font-size:12px; font-weight:400; }
.website-checkout-sheet button { cursor:pointer; font-family:inherit; }
.website-checkout-sheet > header button,.website-checkout-item > button { width:30px; height:30px; padding:0; border:0; border-radius:4px; background:transparent; color:#667587; font-size:24px; }
.website-checkout-form { display:flex; flex-direction:column; min-height:0; overflow:hidden; margin:0; }
.website-checkout-scroll { min-height:0; overflow-y:auto; overscroll-behavior:contain; display:flex; flex-direction:column; gap:10px; padding:8px; }
.website-checkout-card { flex-shrink:0; min-width:0; border:1px solid #dce3ed; border-radius:4px; background:#fff; box-shadow:0 1px 2px #00000012; }
.website-checkout-card h3 { margin:0; padding:7px 9px; background:#f2faff; color:#075b94; font-size:13px; font-weight:500; }
.website-checkout-card-body { display:flex; flex-direction:column; gap:12px; padding:12px 9px; }
.website-checkout-item { position:relative; display:flex; align-items:center; gap:9px; padding:12px 7px; }
.website-checkout-item > img { flex:0 0 60px; width:60px; height:60px; object-fit:contain; border-radius:4px; }
.website-checkout-item > div { flex:1; min-width:0; }
.website-checkout-item strong { display:block; font-size:12px; font-weight:500; color:#075b94; overflow-wrap:anywhere; }
.website-checkout-item small { display:block; font-size:11px; }
.website-checkout-variant { display:grid; gap:3px; margin:5px 0; font-size:11px; }
.website-checkout-variant select { max-width:100%; }
.website-checkout-quantity { display:flex; align-items:center; gap:0; margin-top:6px; }
.website-checkout-quantity button,.website-checkout-quantity input { width:30px; height:28px; box-sizing:border-box; padding:0; text-align:center; border:1px solid #cbd1d9; border-radius:0; background:#fff; color:#172b4d; font-size:14px; }
.website-checkout-quantity input { width:34px; appearance:textfield; margin:0 -1px; }
.website-checkout-quantity input::-webkit-inner-spin-button { appearance:none; }
.website-checkout-quantity > span { margin-left:9px; font-size:11px; }
.website-checkout-pair { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:9px; }
.website-checkout-field { display:grid; gap:4px; min-width:0; font-size:12px; }
.website-checkout-sheet :is(input:not([type=checkbox]):not([type=radio]),select,textarea) { min-width:0; max-width:100%; box-sizing:border-box; border:1px solid #cbd1d9; border-radius:4px; background:#fff; color:#172b4d; font-family:inherit; font-size:13px; }
.website-checkout-field :is(input,select,textarea),.website-checkout-variant select { width:100%; min-height:34px; padding:7px; }
.website-checkout-sheet select { appearance:none; background-image:linear-gradient(45deg,transparent 50%,#64748b 50%),linear-gradient(135deg,#64748b 50%,transparent 50%); background-position:calc(100% - 12px) 50%,calc(100% - 8px) 50%; background-size:4px 4px,4px 4px; background-repeat:no-repeat; padding-right:24px; }
.website-checkout-sheet select:disabled { background-color:#f5f7fa; color:#8a95a4; }
.website-checkout-field textarea { resize:vertical; min-height:54px; }
.website-checkout-gender { display:flex; gap:16px; }
.website-checkout-gender label,.website-checkout-other { display:flex; align-items:center; gap:5px; font-size:12px; cursor:pointer; }
.website-checkout-sheet input:is([type=checkbox],[type=radio]) { appearance:none; flex:0 0 14px; width:14px; height:14px; margin:0; border:1px solid #9ba8b9; border-radius:3px; background:#fff; display:grid; place-items:center; }
.website-checkout-sheet input[type=radio] { border-radius:50%; }
.website-checkout-sheet input:is([type=checkbox],[type=radio]):checked { background:#1677ff; border-color:#1677ff; }
.website-checkout-sheet input:checked::after { content:'✓'; color:#fff; font:bold 11px/1 sans-serif; }
.website-checkout-coupon summary { display:flex; justify-content:space-between; gap:8px; list-style:none; font-size:12px; cursor:pointer; }
.website-checkout-coupon summary::-webkit-details-marker { display:none; }
.website-checkout-coupon summary span { color:#1677ff; }
.website-checkout-coupon[open] summary { margin-bottom:10px; }
.website-checkout-coupon small { display:block; margin-top:5px; color:#64748b; font-size:11px; }
.website-checkout-summary { flex:0 0 auto; padding:12px 9px 9px; border-top:1px solid #e0e5eb; background:#fff; }
.website-checkout-summary > div { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:8px; font-size:12px; }
.website-checkout-summary > small { display:block; color:#64748b; font-size:11px; }
.website-checkout-summary .website-checkout-total { font-size:17px; margin-top:10px; }
.website-checkout-total > strong:last-child { color:#f20c20; }
.website-checkout-summary > button { width:100%; min-height:40px; border:1px solid #f20c20; border-radius:4px; background:#f20c20; color:#fff; font-size:15px; }
.website-checkout-summary > button:disabled { background:#adb5bd; border-color:#adb5bd; cursor:default; }
.website-checkout-message { margin:8px 0; font-size:12px; color:#a33113; }
.website-checkout-message:empty { display:none; }
.website-checkout-sheet :is(button,input,select,textarea,summary):focus-visible { outline:2px solid #1677ff; outline-offset:2px; }
@media(prefers-reduced-motion:reduce) { .website-checkout-sheet { animation:none; } }

.website-checkout-sheet { outline:0; }

.website-shop-brand-home { display:inline-flex; align-items:center; color:inherit; text-decoration:none; }
.web-hdr-cart-btn[data-action="shop-cart"] { position:relative; display:inline-flex; align-items:center; justify-content:center; border:0; background:transparent; color:inherit; padding:0; cursor:pointer; }
[data-shop-cart-count] { position:absolute; top:-5px; right:-6px; min-width:15px; height:15px; padding:0 3px; box-sizing:border-box; border-radius:9px; background:#e8182c; color:#fff; font:10px/15px sans-serif; text-align:center; }
[data-shop-cart-count][hidden],.website-checkout-item[hidden] { display:none; }
.website-product-add-cart { width:100%; min-height:42px; margin-top:8px; border:1px solid currentColor; border-radius:6px; background:#fff; color:#172b4d; font:inherit; cursor:pointer; }
.website-product-add-cart:disabled { color:#98a2b3; cursor:default; }
.website-shop-overlay { position:absolute; inset:0; z-index:110; display:flex; align-items:flex-end; background:#15223866; border-radius:inherit; overflow:hidden; }
.website-shop-sheet { display:flex; flex-direction:column; width:100%; max-height:94%; min-height:200px; border-radius:16px 16px 0 0; border:1px solid #dce3ed; box-sizing:border-box; background:#fff; color:#172b4d; outline:0; animation:website-checkout-rise .22s ease-out; }
.website-shop-sheet > header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; border-bottom:1px solid #e4e8ef; }
.website-shop-sheet h2 { margin:0; font-size:17px; }
.website-shop-sheet button { cursor:pointer; font-family:inherit; }
.website-shop-sheet > header button,.website-shop-cart-row > button { width:30px; height:30px; border:0; border-radius:4px; background:transparent; color:#64748b; font-size:24px; padding:0; }
.website-shop-body { min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:12px; }
.website-shop-body > label { display:grid; gap:6px; margin:12px 0; font-size:13px; }
.website-shop-body :is(input,select) { width:100%; min-width:0; min-height:36px; box-sizing:border-box; padding:7px; border:1px solid #cbd5e1; border-radius:5px; background:#fff; color:#172b4d; font:inherit; }
.website-shop-sheet > footer { flex-shrink:0; padding:10px 12px 12px; border-top:1px solid #e4e8ef; }
.website-shop-sheet > footer:empty { display:none; }
.website-shop-sheet > footer small { display:block; margin:6px 0; color:#64748b; }
.website-shop-subtotal { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.website-shop-subtotal strong { color:#ed142b; font-size:18px; }
.website-shop-primary { display:block; width:100%; min-height:42px; margin-top:10px; border:1px solid #ed142b; border-radius:5px; background:#ed142b; color:#fff; font-size:15px; }
.website-shop-primary:disabled { border-color:#d0d5dd; background:#d0d5dd; cursor:default; }
[data-shop-message] { color:#b42318; font-size:12px; }
[data-shop-message]:empty { display:none; }
.website-shop-cart-row { display:flex; align-items:flex-start; gap:9px; padding:10px 0; border-bottom:1px solid #edf0f4; }
.website-shop-cart-row > img { width:70px; height:70px; object-fit:contain; border-radius:5px; }
.website-shop-cart-row > div { flex:1; min-width:0; }
.website-shop-cart-row strong,.website-shop-cart-row small { display:block; overflow-wrap:anywhere; }
.website-shop-cart-row strong { font-size:13px; }
.website-shop-cart-row small { margin-top:5px; font-size:12px; color:#64748b; }
.website-shop-cart-row b { display:block; margin-top:8px; color:#ed142b; }
.website-shop-cart-row .website-checkout-quantity > span { min-width:28px; margin:0; text-align:center; }
.website-shop-categories { display:flex; flex-direction:column; gap:6px; }
.website-shop-categories button { display:flex; align-items:center; gap:12px; width:100%; min-height:50px; padding:8px; border:1px solid #e4e8ef; border-radius:6px; background:#fff; color:#172b4d; text-align:left; font:inherit; }
.website-shop-categories button:hover { background:#f3f6fa; }
.website-shop-categories img { width:40px; height:40px; object-fit:contain; border-radius:4px; }
.website-shop-categories strong { flex:1; font-size:14px; }
.website-shop-add-product { display:flex; align-items:center; gap:12px; }
.website-shop-add-product img { width:80px; height:80px; object-fit:contain; }
.website-shop-empty { text-align:center; padding:20px 8px; }
.website-shop-empty button,.website-shop-body > button { min-height:34px; padding:6px 10px; border:1px solid #cbd5e1; border-radius:5px; background:#fff; color:#172b4d; }
.website-shop-camera { position:relative; aspect-ratio:1; background:#172b4d; border-radius:8px; overflow:hidden; }
.website-shop-camera video { width:100%; height:100%; object-fit:cover; }
.website-shop-camera > span { position:absolute; inset:8%; border:0; border-radius:8px; box-shadow:0 0 0 100vmax #0007; background:linear-gradient(#fff,#fff) left top/32px 4px,linear-gradient(#fff,#fff) left top/4px 32px,linear-gradient(#fff,#fff) right top/32px 4px,linear-gradient(#fff,#fff) right top/4px 32px,linear-gradient(#fff,#fff) left bottom/32px 4px,linear-gradient(#fff,#fff) left bottom/4px 32px,linear-gradient(#fff,#fff) right bottom/32px 4px,linear-gradient(#fff,#fff) right bottom/4px 32px; background-repeat:no-repeat; pointer-events:none; }
.website-shop-scanner > header { position:relative; justify-content:center; border-bottom:0; padding:18px 44px 12px; }
.website-shop-scanner > header button { position:absolute; right:10px; top:12px; }
.website-shop-scanner .website-shop-body { padding-top:0; }
.website-shop-scanner-overlay { align-items:center; justify-content:center; padding:20px 24px; box-sizing:border-box; }
.website-shop-scanner { width:82%; max-width:300px; max-height:100%; min-height:0; background:transparent; border:0; border-radius:0; box-shadow:none; color:#fff; animation:none; }
.website-shop-scanner > header { flex-shrink:0; padding:8px 32px 16px; text-shadow:0 1px 4px #0009; }
.website-shop-scanner > header button { top:2px; right:0; color:#fff; }
.website-shop-scanner .website-shop-body { padding:0; }
.website-shop-scanner .website-shop-camera { background:transparent; }
.website-shop-scanner .website-shop-camera video { display:block; }
.website-shop-scanner .website-shop-camera > span { inset:0; box-shadow:none; }
.website-shop-scanner > footer { padding:8px 0 0; border:0; }
.website-shop-scanner .website-shop-body > p { text-shadow:0 1px 4px #0009; }
.website-shop-scanner .website-shop-camera.has-camera-error { background:#edf2f7; }
.website-shop-camera.has-camera-error .website-shop-camera-status { color:#334155; text-shadow:none; font-size:14px; line-height:1.6; }
.website-shop-camera-status { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; margin:0; padding:24px; box-sizing:border-box; text-align:center; color:#fff; text-shadow:0 1px 4px #0009; }
.website-shop-sheet :is(button,input,select,a):focus-visible { outline:2px solid #1677ff; outline-offset:2px; }
@media(prefers-reduced-motion:reduce) { .website-shop-sheet { animation:none; } }

.website-shop-body select { appearance:none; padding-right:26px; background-image:linear-gradient(45deg,transparent 50%,#64748b 50%),linear-gradient(135deg,#64748b 50%,transparent 50%); background-position:calc(100% - 12px) 50%,calc(100% - 8px) 50%; background-size:4px 4px,4px 4px; background-repeat:no-repeat; }
.website-shop-body input[type="number"] { appearance:textfield; }
.website-shop-body input[type="number"]::-webkit-inner-spin-button { appearance:none; }

.website-shop-brand-home:focus-visible,.web-hdr-cart-btn[data-action="shop-cart"]:focus-visible { outline:2px solid #1677ff; outline-offset:2px; }
.website-shop-sheet button:not(:disabled):hover { filter:brightness(.97); }
/* Hộp quét QR nổi, nền kính mờ theo mẫu. */
.website-shop-scanner { width:90%; max-width:300px; padding:12px 20px 20px; border:1px solid #ead8bb; border-radius:20px; background:#57493680; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow:0 12px 40px #0003; }
.website-shop-scanner > header { padding:4px 20px 0; }
.website-shop-scanner > header button { top:-5px; right:-12px; }
.website-shop-scanner .website-shop-scan-hint { margin:6px 0 18px; color:#fff; text-align:center; font-size:12px; }
.website-shop-scanner .website-shop-camera { border-radius:14px; }
.website-shop-scanner .website-shop-camera.has-camera-error { background:#f6eee5b8; }
.website-shop-camera-status { flex-direction:column; gap:8px; padding:20px 10px; }
.website-shop-camera.has-camera-error .website-shop-camera-status { color:#292522; font-size:12px; line-height:1.35; }
.website-shop-camera-status p { margin:0; }
.website-shop-camera-status strong { font-size:13px; }
.website-shop-camera-icon { position:relative; width:48px; height:48px; display:grid; place-items:center; border-radius:50%; background:#f4dcd299; color:#393939; }
.website-shop-camera-icon svg { width:30px; height:30px; }
.website-shop-camera-icon b { position:absolute; right:0; bottom:0; display:grid; place-items:center; width:16px; height:16px; border-radius:50%; background:#dc1738; color:#fff; font:700 12px sans-serif; }
.website-shop-camera-status button { width:88%; padding:7px 8px; border:1px solid #a85a36; border-radius:20px; background:#a85a36; color:#fff; font:inherit; }

.website-shop-scanner .website-shop-camera > span { background:none; border:4px solid #fff; border-radius:inherit; box-sizing:border-box; --scan-corners:linear-gradient(#000 0 0) top left/30px 30px no-repeat,linear-gradient(#000 0 0) top right/30px 30px no-repeat,linear-gradient(#000 0 0) bottom left/30px 30px no-repeat,linear-gradient(#000 0 0) bottom right/30px 30px no-repeat; -webkit-mask:var(--scan-corners); mask:var(--scan-corners); }.website-product-selection-order { display:inline-grid; place-items:center; flex:0 0 24px; width:24px; height:24px; border-radius:50%; background:var(--yomi-primary,#1677ff); color:#fff; font-size:12px; }
.web-product-grid.cols-slider[data-auto-products] { grid-template-rows:auto; grid-auto-columns:calc((100% - 36px) / 3.5); column-gap:12px; scroll-snap-type:x proximity; }
.web-product-grid[data-auto-products] .web-prod-item { scroll-snap-align:start; }
.website-category-picker-row .website-product-selection-image { position:relative; display:block; flex:0 0 48px; width:48px; height:48px; }
.website-product-selection-image .website-product-selection-order { position:absolute; top:0; right:0; width:18px; height:18px; font-size:11px; line-height:1; pointer-events:none; }
.website-category-picker-row .website-product-selection-text { flex:1; min-width:0; overflow-wrap:anywhere; line-height:1.4; }
.website-product-selection-image > img { display:block; width:48px; height:48px; }
.website-custom-search { display:grid; gap:6px; margin-bottom:12px; font-size:13px; }
.website-custom-search input { width:100%; box-sizing:border-box; }
.website-custom-products-window { width:min(507px,94vw); max-height:72vh; }
.website-custom-products-window > .website-list-products-body { padding:12px 14px; box-sizing:border-box; min-height:0; }
.website-custom-products-window > .website-product-picker-modal-header { gap:10px; padding:12px 14px; }
.website-custom-products-window .website-product-picker-modal-header h4 { flex:0 0 auto; font-size:16px; white-space:nowrap; }
.website-custom-products-window .website-custom-search-input { flex:1 1 0; min-width:0; width:0; }
.website-custom-products-window .website-modal-close-btn { flex-shrink:0; }
@media(max-width:480px){.website-custom-products-window > .website-product-picker-modal-header{gap:6px;padding:10px}.website-custom-products-window .website-product-picker-modal-header h4{font-size:14px}.website-custom-products-window .website-custom-search-input{font-size:12px;padding:6px;}}
.website-category-menu-options { display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.website-category-menu-options .website-footer-option-toggle { min-height:30px; gap:10px; }
.website-category-menu-options input { appearance:none; border:1px solid #94a3b8; border-radius:3px; background:var(--yomi-card-bg,#fff); box-sizing:border-box; width:18px; height:18px; flex:0 0 18px; box-shadow:none; }
.website-category-menu-options input:checked { border:1px solid #1677ff; box-shadow:none; background:var(--yomi-card-bg,#fff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='m3 9 4 4 8-9' fill='none' stroke='%231677ff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat; }
.website-category-menu-options .website-footer-option-toggle > span:first-of-type { flex:1; }
.website-category-menu-grip { color:var(--yomi-text-secondary,#64748b); cursor:grab; }
.website-shop-categories + .website-shop-categories { margin-top:6px; }
.website-shop-categories { gap:0; }
.website-shop-categories button { border:0; border-bottom:1px solid #e4e8ef; border-radius:0; padding:12px 4px; }
.website-shop-categories + .website-shop-categories { margin-top:0; }
.website-information-page { padding:20px 16px; overflow-wrap:anywhere; }
.website-information-page img { max-width:100%; height:auto; }
.website-information-link { display:block; width:100%; padding:14px 0; text-align:left; color:inherit; background:transparent; border:0; border-bottom:1px solid #e4e8ef; border-radius:0; font:inherit; cursor:pointer; }
.website-information-review { padding:16px 0; border-bottom:1px solid #e4e8ef; }
.website-information-link:focus-visible { outline:2px solid #1677ff; outline-offset:2px; }
.website-reviews-page .website-news-pagination { position:sticky; bottom:0; background:var(--yomi-card-bg,#fff); padding:10px 0; z-index:1; }
.website-reviews-page .yomi-pagination { flex-wrap:wrap; gap:8px; }
.website-reviews-page .yomi-pagination-controls { flex-wrap:wrap; gap:4px; max-width:100%; }
.is-mobile-frame .website-reviews-page .yomi-pagination-size { flex-basis:100%; font-size:12px; }
.website-reviews-page .website-experience-avatar img { width:100%; height:100%; object-fit:cover; }
/* Bảng DNS trong cấu hình tên miền, không tác động các màn hình khác. */
.website-domain-workspace .website-domain-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:16px}
.website-domain-workspace .website-domain-table-wrap{overflow:auto;margin-top:16px}
.website-domain-workspace .website-domain-table{border-collapse:collapse;width:100%;text-align:left}
.website-domain-workspace .website-domain-table th,.website-domain-workspace .website-domain-table td{padding:12px;border-bottom:1px solid #dce3ec;vertical-align:top}
.website-domain-workspace .website-domain-table code{overflow-wrap:anywhere;white-space:normal}
.website-domain-workspace .website-domain-copy{position:relative;display:inline-block;max-width:100%;padding:5px 7px;margin:2px 0;border:1px solid transparent;border-radius:5px;background:#fff;color:#172033;font:inherit;text-align:left;cursor:copy;overflow-wrap:anywhere}
.website-domain-workspace .website-domain-copy:hover{background:#e9f2f5;border-color:#cbd5e1}
.website-domain-workspace .website-domain-copy:focus-visible{outline:2px solid #2563eb;outline-offset:2px;background:#eff6ff;border-color:#2563eb}
.website-domain-workspace .website-domain-copy[data-copy-status]::after{content:attr(data-copy-status);display:inline-block;margin-left:8px;padding:3px 6px;border:1px solid #bbf7d0;border-radius:5px;background:#ecfdf5;color:#15803d;font-size:12px;font-weight:600}
.website-domain-workspace .website-domain-field-label{display:block;margin-top:6px;font-size:12px;line-height:1.5;color:#526175}
.website-domain-workspace .website-domain-verified{display:flex;align-items:center;gap:8px;color:#15803d;font-weight:600}
.website-domain-workspace .website-domain-verified>span{display:inline-flex;width:24px;height:24px;align-items:center;justify-content:center;border:1px solid #86efac;border-radius:50%;background:#dcfce7;color:#15803d;font-weight:700}
.website-domain-workspace .website-domain-copy-message{min-height:20px;color:#15803d}
.website-domain-workspace .website-domain-nameservers{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin:16px 0}
.website-domain-workspace .website-domain-nameserver{display:flex;flex-direction:column;gap:4px;max-width:100%;padding:12px 16px;border:1px solid #dce3ec;border-radius:8px;background:#f8fafc}
.website-domain-workspace .website-domain-guide{padding-left:24px;line-height:1.7}
.website-domain-workspace .website-domain-guide li{margin:8px 0}