/* ==========================================================================
   GLOBAL RESET & ACCESSIBILITY
   ========================================================================== */
html,
body {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  /* Thay đổi optimizeLegibility thành optimizeSpeed trên Windows để tránh lỗi dính chữ */
  text-rendering: optimizeSpeed !important;
}

:focus-visible {
  outline: var(--md-sys-outline-width) solid var(--md-sys-color-primary) !important;
  outline-offset: var(--md-sys-outline-offset) !important;
}

html,
body,
p,
a,
span,
li,
td,
th,
input,
select,
textarea,
button,
.nav,
.nav-top-link,
.menu-item,
.price {
  font-family: var(--md-sys-font-brand) !important;
}

h3,
h4,
h5,
h6,
.heading-font {
  font-family: var(--md-sys-font-brand) !important;
  font-weight: 500;
}

b,
strong,
h1,
h2 {
  font-family: var(--md-sys-font-brand) !important;
  font-weight: 600 !important;
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {

  body,
  p,
  a,
  span,
  li,
  td,
  th,
  input,
  select,
  textarea,
  button,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    /* Tạo một lớp bóng đổ viền cực mờ, ép Windows bật chế độ làm mượt (Anti-aliasing) phần cứng */
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004) !important;
  }

  /* Với các nét chữ Regular (400) bị quá mảnh trên Windows, thêm một chút viền tàng hình để tạo độ dày */
  p,
  span,
  li,
  a,
  td,
  th,
  div {
    -webkit-text-stroke: 0.2px rgba(0, 0, 0, 0.1);
  }

  /* Không áp dụng text-stroke cho các thẻ đã in đậm (Bold) để tránh chữ bị lem */
  b,
  strong,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  .product-title {
    -webkit-text-stroke: 0 !important;
  }
}

/* ==========================================================================
   MATERIAL DESIGN 3 DEFAULT
   ========================================================================== */
.mg-top-vertical {
  margin-top: 16px;
}
.mg-bottom-vertical {
  margin-bottom: 16px;
}
.mg-start-vertical {
  margin-left: 16px;
}
.mg-end-vertical {
  margin-right: 16px;
}
.border-radius-img img {
  border-radius: var(--md-sys-shape-corner-md);
}

/* ==========================================================================
   MATERIAL DESIGN 3 COMPONENTS (11 CORE)
   ========================================================================== */

button.m3-btn,
.m3-btn {
  --btn-ellipsis-lines: 1;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 40px !important;
  padding: 0 16px !important;
  font: var(--md-sys-typescale-label-large) !important;
  border-radius: var(--md-sys-shape-corner-md) !important;
  border: none !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: all var(--md-sys-duration-short) var(--md-sys-motion-snappy) !important;
  user-select: none;
  box-sizing: border-box;
  width: 100%;
  margin: 0 !important;
  box-shadow: var(--md-sys-elevation-level-0);
}

button.m3-btn:hover,
.m3-btn:hover {
  box-shadow: var(--md-sys-elevation-level-2) !important;
}

button.m3-btn span,
.m3-btn span {
  text-overflow: ellipsis;
  word-break: break-word;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--btn-ellipsis-lines);
  display: -webkit-box;
  overflow: hidden;
}

button.m3-btn:focus,
.m3-btn:focus {
  outline: none;
}

button.m3-btn:focus-visible,
.m3-btn:focus-visible {
  outline: 2px solid var(--md-sys-color-on-surface) !important;
}

button.m3-btn-filled,
.m3-btn-filled {
  background: var(--md-sys-color-primary-gradient) !important;
  color: var(--md-sys-color-on-primary) !important;
  box-shadow: var(--md-sys-elevation-level-0);
}

button.m3-btn-filled:hover,
.m3-btn-filled:hover {
  box-shadow: var(--md-sys-elevation-level-2) !important;
  filter: brightness(0.95);
  background: var(--md-sys-color-primary-gradient-hover) !important;
}

button.m3-btn-tonal,
.m3-btn-tonal {
  background-color: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  box-shadow: var(--md-sys-elevation-level-1);
}

button.m3-btn-tonal:hover,
.m3-btn-tonal:hover {
  background-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}

button.m3-btn-outlined,
.m3-btn-outlined {
  background: transparent;
  border: 1px solid var(--md-sys-color-outline) !important;
  color: var(--md-sys-color-primary);
}

button.m3-btn-text,
.m3-btn-text {
  background-color: transparent !important;
  color: var(--md-sys-color-primary) !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 12px !important;
  /* Padding ngang nhỏ hơn nút filled */
}

button.m3-btn-text:hover,
.m3-btn-text:hover {
  background-color: var(--md-sys-color-surface-variant) !important;
  /* Lớp phủ mờ khi hover */
  box-shadow: none !important;
}

button.m3-fab,
.m3-fab {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 56px !important;
  height: 56px !important;
  /* Chuẩn kích thước FAB */
  border-radius: var(--md-sys-shape-corner-lg, 16px) !important;
  background-color: var(--md-sys-color-primary-container) !important;
  color: var(--md-sys-color-on-primary-container) !important;
  box-shadow: var(--md-sys-elevation-level-3) !important;
  border: none !important;
  cursor: pointer !important;
  transition: all var(--md-sys-duration-short) var(--md-sys-motion-snappy) !important;
  margin: 0 !important;
  padding: 16px !important;
}

button.m3-fab:hover,
.m3-fab:hover {
  box-shadow: var(--md-sys-elevation-level-4) !important;
  filter: brightness(0.95);
}

button.m3-fab:focus-visible,
.m3-fab:focus-visible {
  outline: 2px solid var(--md-sys-color-on-surface) !important;
}

/* ==========================================================================
  <!-- Ví dụ Icon Button -->
  <button class="m3-icon-btn">
    <i class="material-icons">favorite</i>
  </button>
  ========================================================================== */
button.m3-icon-btn,
.m3-icon-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  height: 48px !important;
  /* Touch target chuẩn */
  padding: 12px !important;
  border-radius: 50% !important;
  /* Bo tròn hoàn toàn */
  background-color: transparent !important;
  color: var(--md-sys-color-secondary) !important;
  border: none !important;
  cursor: pointer !important;
  transition: all var(--md-sys-duration-short) var(--md-sys-motion-snappy) !important;
  margin: 0 !important;
}

button.m3-icon-btn:hover,
.m3-icon-btn:hover {
  background-color: var(--md-sys-color-surface-variant) !important;
}

button.m3-icon-btn:focus-visible,
.m3-icon-btn:focus-visible {
  outline: 2px solid var(--md-sys-color-on-surface) !important;
}

/* Variant: Filled Icon Button */
button.m3-icon-btn-filled,
.m3-icon-btn-filled {
  background-color: var(--md-sys-color-primary) !important;
  color: var(--md-sys-color-on-primary) !important;
}

button.m3-icon-btn-filled:hover,
.m3-icon-btn-filled:hover {
  filter: brightness(0.95);
  background-color: var(--md-sys-color-primary) !important;
}

/* ==========================================================================
   SEGMENTED BUTTONS
   Chỉ cần bọc các class .m3-btn hoặc button thường vào trong .m3-segmented-btn-group. Nó sẽ tự động xóa viền cong bên trong và giữ bo góc mượt mà bên ngoài.
   <!-- Ví dụ Segmented Button -->
  <div class="m3-segmented-btn-group">
    <button class="m3-btn">Ngày</button>
    <button class="m3-btn active">Tuần</button>
    <button class="m3-btn">Tháng</button>
  </div>
   ========================================================================== */
.m3-segmented-btn-group {
  display: inline-flex !important;
  align-items: center !important;
  border-radius: var(--md-sys-shape-corner-full, 100px) !important;
  /* Hình viên thuốc */
  border: 1px solid var(--md-sys-color-outline) !important;
  overflow: hidden !important;
  width: fit-content !important;
}

.m3-segmented-btn-group button,
.m3-segmented-btn-group .m3-btn {
  height: 40px !important;
  /* Kích thước chuẩn cho segmented */
  border-radius: 0 !important;
  /* Xóa bo góc mặc định của m3-btn */
  background-color: transparent !important;
  color: var(--md-sys-color-on-surface) !important;
  border: none !important;
  border-right: 1px solid var(--md-sys-color-outline) !important;
  width: auto !important;
  min-width: 48px !important;
  box-shadow: none !important;
}

.m3-segmented-btn-group button:last-child,
.m3-segmented-btn-group .m3-btn:last-child {
  border-right: none !important;
  /* Nút cuối không có viền phải */
}

.m3-segmented-btn-group button:hover,
.m3-segmented-btn-group .m3-btn:hover {
  background-color: var(--md-sys-color-surface-variant) !important;
}

/* Trạng thái được chọn (Active) */
.m3-segmented-btn-group button.active,
.m3-segmented-btn-group .m3-btn.active {
  background-color: var(--md-sys-color-surface-container) !important;
  color: var(--md-sys-color-on-surface) !important;
}

/* 2. CHECKBOX */
.m3-checkbox-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: var(--md-sys-color-on-surface);
  user-select: none;
}

.m3-checkbox-wrapper input {
  display: none;
}

.m3-checkbox-box {
  width: 18px;
  height: 18px;
  border: 2px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-xs);
  position: relative;
  transition: all var(--md-sys-duration-short) ease;
  box-sizing: border-box;
}

.m3-checkbox-wrapper input:checked+.m3-checkbox-box {
  background-color: var(--md-sys-color-primary);
  border-color: var(--md-sys-color-primary);
}

.m3-checkbox-wrapper input:checked+.m3-checkbox-box::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 4px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* 3. CHIPS */
/* Nhóm chip mặc định: Tự động xuống dòng khi màn hình nhỏ (điện thoại) */
.m3-chip-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  /* Cho phép các chip rớt xuống dòng */
  padding-bottom: 4px;
}

/* Nhóm chip ngang (Horizontal): Không xuống dòng, cuộn ngang trên điện thoại */
.m3-chip-group-horizontal {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow-x: auto;
  /* Cho phép cuộn ngang */
  padding-bottom: 4px;

  width: 100%; 
  max-width: 100%; /* Giới hạn không cho tràn khỏi thẻ cha */

  /* Ẩn thanh cuộn để giao diện mobile giống app Native */
  -ms-overflow-style: none;
  /* IE và Edge */
  scrollbar-width: none;
  /* Firefox */
}

/* Ẩn thanh cuộn cho Chrome, Safari và Opera */
.m3-chip-group-horizontal::-webkit-scrollbar {
  display: none;
}

@media (max-width: 768px) {
  .m3-chip-group-horizontal {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* Giúp vuốt mượt trên iOS */
    scrollbar-width: none;
  }

  .m3-chip-group-horizontal .m3-chip {
    flex-shrink: 0; /* Bắt buộc các chip giữ nguyên chiều rộng, không bị ép nhỏ */
  }
}

p.m3-chip-title,
.m3-chip-title {
  display: flex;
  align-items: center;
  white-space: nowrap;
  font: var(--md-sys-typescale-body-small);
  color: var(--md-sys-color-on-surface);
  margin: 0;
}

.m3-chip {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 16px;
  font: var(--md-sys-typescale-label-medium);
  border-radius: var(--md-sys-shape-corner-sm);
  border: 1px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  cursor: pointer;
  flex-shrink: 0;
  /* Giúp chip không bị bóp méo khi nằm trong nhóm lướt ngang */
  transition: all var(--md-sys-duration-short) ease;
  text-transform: capitalize;
}

.m3-chip.is-active,
.m3-chip.active {
  background-color: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  border-color: transparent;
  font-weight: 500;
}

/* Định dạng hình ảnh logo trong Chip */
.m3-chip-icon {
  width: 20px;
  height: 20px;
  border-radius: var(--md-sys-shape-corner-full);
  /* Bo tròn 100px theo khai báo hệ thống */
  object-fit: cover;
  margin-right: 8px;
  margin-left: -8px;
  /* Bù trừ lại padding-left 16px mặc định của .m3-chip */
}

/* Bổ sung trạng thái Hover cho Chip gốc */
.m3-chip:hover {
  background-color: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface);
  border-color: var(--md-sys-color-secondary);
}

/* 4. DIALOGS (Hiệu ứng trượt) */
.m3-dialog-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  transition: background-color 0.25s ease-in-out;
}

.m3-dialog {
  width: 90%;
  max-width: 560px;
  max-height: 90vh;
  background: var(--md-sys-color-surface-container-high);
  border-radius: 28px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--md-sys-elevation-level-3);
  opacity: 0;
  transform: translateY(20px);
  transition-property: opacity, transform;
  transition-duration: 0.35s;
  transition-timing-function: var(--md-sys-motion-snappy);
  overflow: hidden;
}

.m3-dialog.is-open {
  opacity: 1;
  transform: translateY(0);
}

.m3-dialog-header {
  padding: 24px 24px 16px;
  flex-shrink: 0;
}

.m3-dialog-title {
  margin: 0;
  font: var(--md-sys-typescale-headline-small);
  color: var(--md-sys-color-on-surface);
}

.m3-dialog-body {
  padding: 0 24px;
  overflow-y: auto;
  font: var(--md-sys-typescale-body-medium);
  color: var(--md-sys-color-secondary);
}

.m3-dialog-body::-webkit-scrollbar {
  width: 4px;
  display: none;
}

.m3-dialog-body:hover::-webkit-scrollbar {
  display: block;
}

.m3-dialog-body::-webkit-scrollbar-thumb {
  background: var(--md-sys-color-outline-variant);
  border-radius: 4px;
}

.m3-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 24px 24px;
  flex-shrink: 0;
}

/* 5. LISTS */
.m3-list {
  list-style: none;
  margin: 0;
  padding: 8px 0;
  background: var(--md-sys-color-surface);
}

.m3-list-item {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 8px 16px;
  transition: background-color var(--md-sys-duration-short) ease;
}

.m3-list-item:hover {
  background-color: var(--md-sys-color-surface-container);
}

.m3-list-text {
  display: flex;
  flex-direction: column;
}

.m3-list-headline {
  font: var(--md-sys-typescale-body-large);
  color: var(--md-sys-color-on-surface);
}

.m3-list-supporting {
  font: var(--md-sys-typescale-body-medium);
  color: var(--md-sys-color-secondary);
}

a.m3-list-item {
  text-decoration: none;
  border-radius: var(--md-sys-shape-corner-sm);
  margin-bottom: 2px;
  padding: 8px 12px !important;
}

a.m3-list-item:hover {
  background-color: var(--md-sys-color-surface-container-high) !important;
}

.m3-list-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--md-sys-shape-corner-full);
  object-fit: cover;
  margin-right: 16px;
  flex-shrink: 0;
  border: 1px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface);
}

/* 6. MENUS */
.m3-menu {
  min-width: 200px;
  background: var(--md-sys-color-surface-container);
  border-radius: var(--md-sys-shape-corner-xs);
  box-shadow: var(--md-sys-elevation-level-2);
  padding: 8px 0;
}

.m3-menu-item {
  height: 48px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  font: var(--md-sys-typescale-label-large);
  color: var(--md-sys-color-on-surface);
  cursor: pointer;
  transition: background-color var(--md-sys-duration-short) ease;
}

.m3-menu-item:hover {
  background-color: var(--md-sys-color-surface-container-high);
}

/* 7. SEARCH BAR */
.m3-search-bar {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 720px;
  height: 56px;
  border-radius: var(--md-sys-shape-corner-lg);
  background-color: var(--md-sys-color-surface-container);
  padding: 0 16px;
  gap: 12px;
  box-sizing: border-box;
  transition: all var(--md-sys-duration-short) ease;
}

.m3-search-bar:focus-within {
  background-color: var(--md-sys-color-surface-container);
  box-shadow: var(--md-sys-elevation-level-2);
}

.m3-search-bar input {
  border: none;
  outline: none;
  background: transparent;
  flex: 1;
  font: var(--md-sys-typescale-body-large);
  color: var(--md-sys-color-on-surface);
}

/* 8. TABS */
.m3-tabs {
  display: flex;
  border-bottom: 1px solid var(--md-sys-color-surface-container-high);
}

.m3-tab {
  flex: 1;
  text-align: center;
  height: 48px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font: var(--md-sys-typescale-title-small);
  color: var(--md-sys-color-secondary);
}

.m3-tab.is-active {
  color: var(--md-sys-color-primary);
}

.m3-tab-indicator {
  display: none;
  position: absolute;
  bottom: 0;
  height: 3px;
  width: 40px;
  background-color: var(--md-sys-color-primary);
  border-radius: 3px 3px 0 0;
}

.m3-tab.is-active .m3-tab-indicator {
  display: block;
}

/* 9. TOOLBARS / TOP APP BAR */
.m3-top-app-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding: 0 24px;
  background-color: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: var(--md-sys-elevation-level-1);
}

.m3-brand-title {
  font: var(--md-sys-typescale-title-large);
  color: var(--md-sys-color-primary);
  font-weight: 700;
}

/* 10. M3 FORM COMPONENTS (SURFACE, TEXT FIELD, ALERTS) */
.m3-surface-container {
  background-color: var(--md-sys-color-surface);
  border: 0px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-lg);
  padding: 16px;
  box-shadow: var(--md-sys-elevation-level-1);
  margin: 16px 0;
}

.m3-surface-container:hover {
  box-shadow: var(--md-sys-elevation-level-2);
}

.m3-form-title {
  text-align: center;
  font: var(--md-sys-typescale-title-large);
  color: var(--md-sys-color-on-surface);
  margin: 0 0 24px 0;
}

.m3-form {
  margin: 0 !important
}

.m3-form-horizontal {
  display: flex;
  flex-direction: row; /* Ép các phần tử nằm ngang */
  align-items: center; /* Căn giữa các phần tử theo chiều dọc */
  gap: 12px; /* Khoảng cách giữa các phần tử (có thể tùy chỉnh) */
  width: 100%; /* Chiếm toàn bộ chiều rộng của thẻ cha */
}

/* 
  Target trực tiếp vào TẤT CẢ các thẻ con cấp 1 nằm trong form 
  (ví dụ: input, select, button, div...)
*/
.m3-form-horizontal > * {
  flex: 1 1 0%;
  min-width: 0;
  margin: 0;
}

.m3-honeypot {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0 !important;
  z-index: -1;
}

.m3-alert {
  padding: 12px 16px;
  border-radius: var(--md-sys-shape-corner-sm);
  margin-bottom: 24px;
  text-align: center;
  font: var(--md-sys-typescale-label-large);
}

.m3-alert-success {
  background-color: var(--md-sys-color-success-container);
  color: var(--md-sys-color-on-success-container);
  border: 1px solid var(--md-sys-color-success);
}

.m3-alert-warning {
  background-color: var(--md-sys-color-warning-container);
  color: var(--md-sys-color-on-warning-container);
  border: 1px solid var(--md-sys-color-warning);
}

.m3-alert-error {
  background-color: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
  border: 1px solid var(--md-sys-color-error);
}

.m3-text-field {
  position: relative;
  width: 100%;
}

.m3-text-field input {
  width: 100%;
  height: 48px;
  padding: 16px 16px 0;
  font: var(--md-sys-typescale-body-large);
  color: var(--md-sys-color-on-surface);
  background-color: transparent;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-xs);
  box-sizing: border-box;
  transition: border-color var(--md-sys-duration-short) ease, border-width var(--md-sys-duration-short) ease;
  outline: none;
}

.m3-text-field label {
  position: absolute;
  left: 16px;
  top: 12px;
  font: var(--md-sys-typescale-body-large);
  color: var(--md-sys-color-secondary);
  pointer-events: none;
  transition: all var(--md-sys-duration-short) var(--md-sys-motion-standard);
  background: var(--md-sys-color-surface);
  padding: 0 4px;
}

.m3-text-field input:hover {
  border-color: var(--md-sys-color-on-surface);
}

.m3-text-field input:focus {
  border-color: var(--md-sys-color-primary);
  border-width: 2px;
  padding-left: 15px;
}

.m3-text-field input:focus~label,
.m3-text-field input:not(:placeholder-shown)~label {
  top: -8px;
  left: 12px;
  font: var(--md-sys-typescale-label-small);
  color: var(--md-sys-color-primary);
}

.m3-text-field input:not(:focus):not(:placeholder-shown)~label {
  color: var(--md-sys-color-secondary);
}