.bg-rank {
  background-color: #F2D7B6; }

.separate-divide {
  height: 4px;
  width: 70px;
  background: #ff7948;
  background: linear-gradient(270deg, #ff7948 0%, #ffd787 100%);
  border-radius: 2px; }

.history-point {
  overflow: hidden; }
  .history-point .nav li {
    border-left: 1px solid #dee2e6; }
    .history-point .nav li:first-child {
      border-left: 0; }
  .history-point .nav a {
    text-align: center;
    color: var(--color-main);
    background-color: var(--light);
    padding: 1rem 0; }
    .history-point .nav a.active {
      background-color: var(--white);
      color: var(--color-highlight); }

.inner-buy-point input {
  opacity: 0;
  filter: opacity(0);
  visibility: hidden; }

.inner-buy-point input {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0; }

.inner-buy-point .form-check-label {
  border: 1px solid var(--color-main);
  border-radius: 8px;
  padding: 10px 15px;
  width: 100%;
  text-align: center;
  cursor: pointer; }

.inner-buy-point input[type="radio"]:checked + .form-check-label {
  background: var(--color-highlight);
  border-color: var(--color-highlight);
  color: #fff; }

.coupon-plan {
  margin-bottom: 3rem;
  -webkit-box-shadow: 0px 0.3rem 0.6rem -0.3rem rgba(0, 0, 0, 0.16);
  box-shadow: 0px 0.3rem 0.6rem -0.3rem rgba(0, 0, 0, 0.16); }
  .coupon-plan-price {
    text-align: center;
    background: #ff7948;
    position: relative;
    overflow: hidden;
    padding: 1rem 1rem 1.5rem;
    font-size: 1.2rem;
    min-height: 12rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column; }
    .coupon-plan-price span {
      display: block;
      font-size: 3.2rem;
      font-weight: bold; }
    .coupon-plan-price::after {
      content: '';
      position: absolute;
      top: 0.1rem;
      left: 0;
      background: url(data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAABQAAD/4QMraHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjMtYzAxMSA2Ni4xNDU2NjEsIDIwMTIvMDIvMDYtMTQ6NTY6MjcgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzYgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjdBNURGNURFNDI5MDExRUM5MDhDRTYwRDYxNzA1MjA4IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjdBNURGNURGNDI5MDExRUM5MDhDRTYwRDYxNzA1MjA4Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6N0E1REY1REM0MjkwMTFFQzkwOENFNjBENjE3MDUyMDgiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6N0E1REY1REQ0MjkwMTFFQzkwOENFNjBENjE3MDUyMDgiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7/7gAOQWRvYmUAZMAAAAAB/9sAhAACAgICAgICAgICAwICAgMEAwICAwQFBAQEBAQFBgUFBQUFBQYGBwcIBwcGCQkKCgkJDAwMDAwMDAwMDAwMDAwMAQMDAwUEBQkGBgkNCwkLDQ8ODg4ODw8MDAwMDA8PDAwMDAwMDwwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCAAOAAYDAREAAhEBAxEB/8QAbwABAQAAAAAAAAAAAAAAAAAABAkBAAMAAAAAAAAAAAAAAAAAAAMEBxAAAAUCBgMAAAAAAAAAAAAAAQIDBAUREiFBExQGBwAxUREAAQIEBQMFAAAAAAAAAAAAAQIDETESBAAhURMGQSIFcbEyFBX/2gAMAwEAAhEDEQA/AKGS3SUDH874pDpvHqkDPndpOUzHJuE1G7c6xbVAJQSmtzLUPuOE+ueKsNXjKApW2uoHMRBSkqnCR9MWKy5/dP8Ajrl0oSHmqCDA0kKWEmIjGIjr7ZllXvdA9j8XdyUOzLPl3QccjLk9gYNE4OBqVccdMREblLvVMg8DcO+X+80paBX3UDKiRq66amOGbNjjn5VwhpxW12bioHc+QommVWWSaZ4//9k=);
      width: 0.6rem;
      height: 100%;
      z-index: 9; }
  .coupon-plan:last-child {
    margin-bottom: 0; }

.member-attendance .list-date--item {
  cursor: pointer;
  background-color: var(--gray);
  color: var(--color-main); }
  .member-attendance .list-date--item:hover {
    background-color: var(--black);
    color: var(--white); }
  .member-attendance .list-date--item[checked="checked"] {
    cursor: context-menu;
    background-color: var(--black);
    color: var(--white); }

.avatar-upload {
  display: inline-block;
  border-radius: 50%;
  position: relative;
  overflow: hidden; }
  .avatar-upload .avatar-edit {
    position: absolute;
    bottom: -1px;
    width: 100%;
    text-align: center;
    z-index: 9; }
    .avatar-upload .avatar-edit input {
      display: none; }
    .avatar-upload .avatar-edit input + label {
      margin-bottom: 0;
      background: var(--black);
      cursor: pointer;
      font-weight: normal;
      transition: all .2s ease-in-out;
      width: 100%;
      color: #fff;
      font-size: 1.2rem; }
      .avatar-upload .avatar-edit input + label:hover {
        background: #5e5e5e; }
  .avatar-upload .avatar-preview > div {
    width: 8.9rem;
    height: 8.9rem;
    margin: 0 auto;
    background-size: cover;
    background-repeat: no-repeat; }
  .avatar-upload .avatar-preview > .wrap-preview {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center; }
  .avatar-upload .avatar-clear-image {
    cursor: pointer;
    position: absolute;
    top: auto;
    right: -1rem;
    bottom: -0.5rem;
    width: 2.2rem;
    height: 2.2rem;
    line-height: 2rem;
    border-radius: 50%;
    background-color: #ffffff;
    text-align: center;
    border: 1px solid transparent;
    box-shadow: 0px 0.2rem 0.4rem 0px rgba(0, 0, 0, 0.12); }

.filter-member .input-group-text {
  border: 0; }

.filter-member .btn-submit {
  padding: 0 1rem; }

.table-member th i {
  font-size: 1.8rem; }

.action-table {
  display: inline-block;
  width: 3rem;
  text-align: center; }
/* ===== Trang đăng nhập đại lý ===== */
.member-login {
  padding: 40px 0 30px;
}

.member-login-visual {
  height: 100%;
  min-height: 620px;
  border-radius: 16px;
  background-color: #fdecec;
  overflow: hidden;
}

.member-login-box {
  margin: 0 auto;
}

.member-login-title {
  margin-bottom: 28px;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-highlight);
}

.member-login-title-text {
  position: relative;
  display: inline-block;
}

.member-login-title-line {
  position: absolute;
  left: 0;
  bottom: -14px;
  width: 100%;
  height: auto;
}

.member-login-desc {
  margin-bottom: 28px;
  font-size: 15px;
  line-height: 1.6;
  color: #64748b;
}

/* Băng lý do bị đăng xuất. Vàng hổ phách chứ không đỏ: đỏ ở trang này là màu thương hiệu
   (tiêu đề, nút chính) nên băng đỏ đọc ra như trang trí, không ra lời cảnh báo. */
.member-login-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 20px;
  padding: 12px 16px;
  border: 1px solid #fde68a;
  border-radius: 10px;
  background-color: #fffbeb;
  font-size: 14px;
  line-height: 1.55;
  color: #92400e;
}

.member-login-notice i {
  margin-top: 2px;
  font-size: 16px;
}

.member-login-error {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  padding: 12px 16px;
  border: 1px solid #fecaca;
  border-radius: 10px;
  background-color: #fef2f2;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.55;
  color: #b91c1c;
}

.member-login-error i {
  margin-top: 2px;
  font-size: 16px;
}

.member-login-field {
  margin-bottom: 18px;
}

.member-login-label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #334155;
}

.member-login-input {
  background-color: #eef2fa;
  border-radius: 10px;
  overflow: hidden;
}

.member-login-input:focus-within {
  box-shadow: 0 0 0 2px rgba(222, 2, 4, 0.2);
}

.member-login-input .input-group-text {
  padding: 0 8px 0 16px;
  background-color: transparent;
  border: 0;
  font-size: 17px;
  color: #94a3b8;
}

.member-login-input .form-control {
  height: 48px;
  padding: 0 16px 0 8px;
  background-color: transparent;
  border: 0;
  box-shadow: none;
  font-size: 15px;
  color: #1e293b;
}

.member-login-input .form-control:focus {
  background-color: transparent;
  box-shadow: none;
}

.member-login-input .form-control::-webkit-input-placeholder {
  color: #94a3b8;
}

.member-login-input .form-control::placeholder {
  color: #94a3b8;
}

.member-login-input .form-control:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #eef2fa inset;
  -webkit-text-fill-color: #1e293b;
}

.member-login-forgot {
  margin-bottom: 22px;
  text-align: right;
}

.member-login-forgot a {
  font-size: 14px;
  color: #475569;
}

.member-login-forgot a:hover {
  color: var(--color-highlight);
}

.member-login-submit {
  height: 48px;
  border: 0;
  border-radius: 10px;
  background-color: var(--color-highlight);
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  transition: background-color 0.2s;
}

.member-login-submit:hover,
.member-login-submit:focus {
  background-color: #c50d00;
  color: #ffffff;
}

.member-login-register {
  margin-top: 18px;
  text-align: center;
  font-size: 14px;
  line-height: 1.6;
  color: #475569;
}

.member-login-register a {
  font-weight: 600;
  color: var(--color-highlight);
  text-decoration: underline;
}

.member-login-register a:hover {
  color: #c50d00;
}

.member-login-form label.error {
  display: block;
  width: 100%;
  margin-top: 6px;
  font-size: 13px;
  color: #dc2626;
}

@media (max-width: 991.98px) {
  .member-login {
    padding: 10px 0 0;
  }

  .member-login-visual-col {
    display: none;
  }

  .member-login-box {
    max-width: 520px;
    padding: 28px 22px 32px;
    background-color: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.08);
  }

  .member-login-title {
    font-size: 24px;
    text-align: center;
    margin-bottom: 15px;
  }
  .logo-section img {
    height: 40px;
}

.member-login-desc {
    text-align: center;
    font-size: 14px;
}
}

@media (min-width: 992px) {
  .member-register .member-login-visual-col {
    display: flex;
  }

  .member-register .member-login-visual {
    flex: 1 1 auto;
    min-height: 620px;
  }

  .member-register .member-login-visual .img-fluid {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.member-register .member-register-box {
  max-width: 620px;
  margin: auto;
  padding: 8px 0;
}

.member-register .member-login-title {
  margin-bottom: 15px;
  font-size: 30px;
}

.member-register .member-login-desc {
  margin-bottom: 22px;
}

.member-register .member-login-field {
  margin-bottom: 14px;
}

.member-register-required {
  color: #dc2626;
}

.member-login-hint {
  display: block;
  margin-top: 6px;
  color: #6b7280;
  font-size: 12px;
  line-height: 1.5;
}

.member-register .member-login-submit {
  margin-top: 8px;
}

/* Select tỉnh thành / quận huyện (bootstrap-select) */
.member-register-select {
  position: relative;
}

.member-register-select-icon {
  position: absolute;
  top: 0;
  left: 16px;
  z-index: 2;
  display: flex;
  align-items: center;
  height: 48px;
  font-size: 17px;
  color: #94a3b8;
  pointer-events: none;
}

.member-register .member-register-select .bootstrap-select {
  width: 100% !important;
}

.member-register .member-register-select .bootstrap-select > .dropdown-toggle {
  height: 48px;
  padding: 0 32px 0 44px;
  background-color: #eef2fa !important;
  border: 0;
  border-radius: 10px;
  box-shadow: none !important;
  outline: 0 !important;
  font-size: 15px;
  color: #1e293b;
}

.member-register .member-register-select .bootstrap-select > .dropdown-toggle:focus,
.member-register .member-register-select .bootstrap-select.show > .dropdown-toggle {
  box-shadow: 0 0 0 2px rgba(222, 2, 4, 0.2) !important;
}

.member-register .member-register-select .bootstrap-select > .dropdown-toggle.bs-placeholder,
.member-register .member-register-select .bootstrap-select > .dropdown-toggle.bs-placeholder:focus {
  color: #94a3b8;
}

.member-register .member-register-select .bootstrap-select > .dropdown-toggle .filter-option {
  display: flex;
  align-items: center;
}

.member-register .member-register-select .bootstrap-select .dropdown-menu {
  margin: 6px 0;
  padding: 8px;
  border: 0;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
}

/* o tim kiem trong dropdown */
.member-register-select .bootstrap-select .bs-searchbox {
  padding: 0 0 8px;
}

.member-register-select .bootstrap-select .bs-searchbox .form-control {
  height: 40px;
  padding: 0 14px;
  background-color: #eef2fa;
  border: 0;
  border-radius: 8px;
  box-shadow: none;
  font-size: 14px;
  color: #1e293b;
}

.member-register-select .bootstrap-select .bs-searchbox .form-control:focus {
  background-color: #ffffff;
  box-shadow: 0 0 0 2px rgba(222, 2, 4, 0.2);
}

/* danh sach lua chon */
.member-register-select .bootstrap-select .dropdown-menu li a.dropdown-item {
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.4;
  color: #334155;
  white-space: normal;
}

.member-register-select .bootstrap-select .dropdown-menu li a.dropdown-item:hover,
.member-register-select .bootstrap-select .dropdown-menu li a.dropdown-item:focus {
  background-color: #f1f5f9;
  color: #0f172a;
}

.member-register-select .bootstrap-select .dropdown-menu li a.dropdown-item.active,
.member-register-select .bootstrap-select .dropdown-menu li a.dropdown-item.selected,
.member-register-select .bootstrap-select .dropdown-menu li a.dropdown-item:active {
  background-color: rgba(222, 2, 4, 0.08);
  color: var(--color-highlight);
  font-weight: 600;
}

/* dong "-- Tinh thanh --" la option rong nen de mo */
.member-register-select .bootstrap-select .dropdown-menu li:first-child a.dropdown-item {
  color: #94a3b8;
  font-weight: 400;
}

.member-register-select .bootstrap-select .dropdown-menu .no-results {
  margin: 0;
  padding: 10px 12px;
  background-color: transparent;
  color: #94a3b8;
  font-size: 14px;
  white-space: normal;
}

.member-register-select .bootstrap-select .dropdown-menu .inner::-webkit-scrollbar {
  width: 6px;
}

.member-register-select .bootstrap-select .dropdown-menu .inner::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background-color: #cbd5e1;
}

@media (max-width: 991.98px) {
  .member-register {
    padding: 24px 0 40px;
  }

  .member-register .member-register-box {
    max-width: 620px;
    padding: 28px 22px 32px;
  }

  .member-register .member-login-title {
    font-size: 26px;
  }
}

/* ===== Dùng chung: nút đăng nhập mạng xã hội + popup đăng nhập ===== */
.member-login-social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 46px;
  margin-bottom: 12px;
  padding: 0 12px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background-color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  color: #334155;
}

.member-login-social-btn:hover {
  border-color: var(--color-highlight);
  color: var(--color-highlight);
}

.member-login-social-btn i {
  font-size: 18px;
}

.member-login-social-btn .fa-google {
  color: #ea4335;
}

.member-login-social-btn .fa-facebook {
  color: #1877f2;
}

.member-login-divider {
  margin-bottom: 20px;
  font-size: 14px;
  color: #64748b;
}

.member-login-modal {
  padding: 28px 24px 32px;
}

.member-login-modal-title {
  margin-bottom: 22px;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  color: var(--color-highlight);
}

.member-login>.container>.row {
    margin-right: -40px;
    margin-left: -40px;
}

.member-login>.container>.row>div {
    padding-right: 40px;
    padding-left: 40px;
}

.member-login-visual img {
    height: 665px;
    width: 100%;
    object-fit: cover;
}
.member-register .member-register-select .bootstrap-select .dropdown-menu ul.dropdown-menu {
    padding: 0;
}
/* ===== Menu tài khoản (sidebar khu vực thành viên) ===== */
.account-nav {
  background-color: #ffffff;
  border: 1px solid #eef2f7;
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
  overflow: hidden;
}

.account-nav-user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: linear-gradient(135deg, #fff1f1 0%, #ffffff 70%);
  border-bottom: 1px solid #f1f5f9;
}

.account-nav .avatar-upload {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: visible;
}

.account-nav .avatar-upload .avatar-preview {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  background-color: #f1f5f9;
  box-shadow: 0 0 0 3px #ffffff, 0 0 0 4px rgba(222, 2, 4, 0.18);
}

.account-nav .avatar-upload .avatar-preview > div {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.account-nav .avatar-upload .avatar-edit {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: auto;
  z-index: 9;
}

.account-nav .avatar-upload .avatar-edit input + label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-bottom: 0;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: var(--color-highlight);
  color: #ffffff;
  font-size: 11px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.account-nav .avatar-upload .avatar-edit input + label:hover {
  background: #b80103;
}

.account-nav .avatar-upload .avatar-clear-image {
  right: -0.4rem;
  bottom: 1.8rem;
}

.account-nav-identity {
  min-width: 0;
}

.account-nav-name {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: #0f172a;
  word-break: break-word;
}

.account-nav-sub {
  margin-top: 3px;
  font-size: 13px;
  color: #64748b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-nav-list {
  padding: 6px 10px 4px;
}

.account-nav-group + .account-nav-group {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid #f1f5f9;
}

.account-nav-label {
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #94a3b8;
}

.account-nav-item a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.35;
  color: #334155;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}

.account-nav-item a:hover {
  background-color: #f8fafc;
  color: #0f172a;
  text-decoration: none;
}

.account-nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background-color: #f1f5f9;
  color: #64748b;
  font-size: 15px;
  transition: background-color 0.2s, color 0.2s;
}

.account-nav-item a:hover .account-nav-icon {
  background-color: #fee2e2;
  color: var(--color-highlight);
}

.account-nav-text {
  flex: 1 1 auto;
  min-width: 0;
}

.account-nav-arrow {
  flex: 0 0 auto;
  font-size: 11px;
  color: #cbd5e1;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.2s, transform 0.2s;
}

.account-nav-item a:hover .account-nav-arrow {
  opacity: 1;
  transform: translateX(0);
}

.account-nav-item.active a {
  background-color: rgba(222, 2, 4, 0.07);
  color: var(--color-highlight);
  font-weight: 600;
}

.account-nav-item.active .account-nav-icon {
  background-color: var(--color-highlight);
  color: #ffffff;
}

.account-nav-item.active .account-nav-arrow {
  color: var(--color-highlight);
  opacity: 1;
  transform: translateX(0);
}

.account-nav-logout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  /* Lề ngang 10px = padding của `.account-nav-list`, để viền nút thẳng hàng với mép
     nền hover của các mục menu phía trên. */
  margin: 8px 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background-color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  color: #475569;
  transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}

.account-nav-logout:hover,
.account-nav-logout:focus {
  border-color: var(--color-highlight);
  background-color: #fff5f5;
  color: var(--color-highlight);
  text-decoration: none;
}

@media (min-width: 992px) {
  .account-nav {
    position: sticky;
    top: 24px;
  }
}

/* ----- Nút mở menu (chỉ khổ điện thoại) -----
   Ở khổ máy tính menu là cột dọc đứng thường trực nên nút này ẩn hẳn; `display: flex`
   được bật lại trong khối `@media (max-width: 767.98px)` bên dưới. */
.account-nav-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  height: 34px;
  padding: 0 12px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background-color: #f8fafc;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  color: #334155;
  transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}

.account-nav-toggle-text {
  white-space: nowrap;
}

.account-nav-toggle-arrow {
  flex: 0 0 auto;
  font-size: 11px;
  color: #94a3b8;
  transition: transform 0.2s, color 0.2s;
}

/* `aria-expanded` do bootstrap `collapse` tự lật, nên trạng thái mở/đóng của nút bám
   thẳng vào đó chứ không cần thêm một class riêng phải tự đồng bộ. */
.account-nav-toggle[aria-expanded="true"] {
  border-color: var(--color-highlight);
  background-color: #fff5f5;
  color: var(--color-highlight);
}

.account-nav-toggle[aria-expanded="true"] .account-nav-toggle-arrow {
  color: var(--color-highlight);
  transform: rotate(180deg);
}

/* Từ 768px trở lên menu KHÔNG gập nữa: ép phần thân mở thường trực. Cần `!important`
   vì thứ đang giấu nó là `.collapse:not(.show)` của bootstrap — đặc hiệu hơn hẳn một
   class trơn. `height`/`visibility` để phòng lúc đổi khổ màn ngay giữa chừng hoạt ảnh
   gập (`.collapsing` đang giữ `height: 0`). */
@media (min-width: 768px) {
  .account-nav-body {
    display: block !important;
    height: auto !important;
    visibility: visible !important;
  }
}

/* ----- Khổ điện thoại: menu gập lại, bấm mới mở -----
   Ở khổ <768px menu xếp CHỒNG LÊN TRÊN nội dung, nên chiều cao của nó chính là quãng
   khách phải cuộn qua trước khi thấy trang. Bản dọc cao 447px trên khổ 390x844 — 53%
   màn hình, chưa kể header — nghĩa là mở /member/dashboard ra thì chỉ thấy menu.

   Nên ở khổ này chỉ còn HÀNG NHẬN DIỆN đứng lại: avatar, tên, và nút mang tên trang
   đang đứng. Cả danh sách mục lẫn nút đăng xuất nằm trong `.account-nav-body`, đóng
   sẵn, bấm nút mới mở ra.

   Cái lợi so với lối trải mọi mục ra: chiều cao KHÔNG phụ thuộc số mục. Mở lại ba nhóm
   menu đang tạm ẩn (`show_extra_nav_groups` bên `element_menu.tpl`) thì hàng nhận diện
   vẫn đúng bấy nhiêu, chỉ phần mở ra dài thêm. */
@media (max-width: 767.98px) {
  /* `position: relative` = mốc neo cho tấm menu phủ bên dưới. `overflow: visible` là
     bắt buộc đi kèm: khung mặc định `overflow: hidden` để bo góc, mà nó cắt luôn cả
     tấm phủ thò ra ngoài — menu mở ra sẽ cụt ngay dưới hàng nhận diện. Bỏ được vì ở
     khổ này không còn gì cần cắt: hàng nhận diện đã bỏ nền gradient, nền trắng với
     góc bo là của chính `.account-nav`. */
  .account-nav {
    position: relative;
    overflow: visible;
  }

  .account-nav-toggle {
    display: flex;
  }

  /* Dải gradient vốn để phân biệt phần nhận diện với danh sách bên dưới; ở đây danh
     sách đã gập đi nên nền trắng trơn là đủ. Vạch ngăn dời xuống `.account-nav-body`,
     tức là chỉ hiện khi menu mở. */
  .account-nav-user {
    gap: 10px;
    padding: 10px 12px;
    background: none;
    border-bottom: 0;
  }

  .account-nav-identity {
    flex: 1 1 auto;
  }

  .account-nav .avatar-upload,
  .account-nav .avatar-upload .avatar-preview {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
  }

  .account-nav .avatar-upload .avatar-preview {
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 3px rgba(222, 2, 4, 0.18);
  }

  .account-nav .avatar-upload .avatar-edit input + label {
    width: 18px;
    height: 18px;
    border-width: 1px;
    font-size: 8px;
  }

  .account-nav-name {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .account-nav-sub {
    margin-top: 1px;
    font-size: 12px;
  }

  /* Menu mở ra PHỦ LÊN TRÊN nội dung chứ không đẩy trang xuống: `position: absolute`
     tách nó khỏi dòng chảy, nên phần dưới đứng yên tại chỗ. Đẩy trang xuống thì mỗi
     lần mở menu cả trang lại nhảy một đoạn 320px rồi lúc đóng nhảy ngược lại — thứ
     khách đang nhìn trôi mất khỏi tầm mắt hai lần cho một cú bấm.

     Vì đã rời khỏi dòng chảy nên nó phải tự mang lấy nền, viền và bóng đổ — bằng
     không nó trong suốt và chữ của trang bên dưới hiện xuyên qua.

     z-index 50 = mức các tấm phủ trong lòng trang của theme này, dưới hẳn dải 99+
     của header và 1000+ của modal. */
  .account-nav-body {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    left: 0;
    z-index: 50;
    background-color: #ffffff;
    border: 1px solid #eef2f7;
    border-radius: 14px;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.16);
  }

  .account-nav-list {
    padding: 6px 8px 2px;
  }
}

/* ===== Khung hai cột khu tài khoản =====
   Mọi trang trong khu tài khoản (`Member`, `MemberWallet`, `MemberAffiliate`) dùng chung
   `.member-row` + hai cột `.member-col-nav` / `.member-col-main`. Toàn bộ khoảng cách của
   khung — lề trên/dưới trang, khe giữa menu và nội dung, bề rộng cột menu — khai một chỗ
   ở đây, thay vì rải `mx-n2` / `px-2` / `col-md-3` trên hai mươi ba file template.

   Hai thứ được sửa lại so với bản cũ:
   1. Khe giữa menu và nội dung 16px -> 15px, đúng khe mặc định của bootstrap.
   2. Cột menu cố định bề rộng từ md trở lên thay vì chạy theo `col-md-3`. Ở khổ md
      (container 720px) `col-md-3` chỉ còn 180px: trừ padding, icon 32px và mũi tên thì
      phần chữ còn ~60px, nhãn "Sản phẩm yêu thích" vỡ thành ba dòng. 260px là bề rộng
      đủ để nhãn dài nhất của menu nằm gọn một dòng ở mọi khổ.

   Lưu ý: khe và padding cột đều mang `!important` — tiện ích khoảng cách của bootstrap
   (`.px-2`, `.mx-n2`...) cũng mang `!important`, không đánh dấu thì lỡ trang nào còn sót
   một tiện ích trên hàng hay trên cột là khung lại lệch riêng ở đó. */
.member-row {
  margin-right: -7.5px !important;
  margin-left: -7.5px !important;
}

.member-row > [class*="col-"] {
  padding-right: 7.5px !important;
  padding-left: 7.5px !important;
}

/* Trang còn breadcrumb: khối `.p-3.mb-3` của nó đã cho sẵn 16px phía trên, bớt lại để
   tổng vẫn là 24px như những trang đã bỏ breadcrumb. */
.member-row.is-below-breadcrumb {
  padding-top: 8px;
}

/* `min-width: 0` cho cột nội dung: không có nó thì một cái bảng rộng (danh sách đơn) sẽ
   nong cột ra quá phần trống còn lại và đẩy cả hàng lệch. */
.member-col-main {
  min-width: 0;
}

@media (min-width: 1024px) {
  .member-col-nav {
    flex: 0 0 260px;
    max-width: 260px;
  }

  .member-col-main {
    flex: 1 1 0;
    max-width: calc(100% - 260px);
  }
}

@media (max-width: 767.98px) {
  .member-row.is-below-breadcrumb {
    padding-top: 4px;
  }

  /* Menu xếp chồng lên trên nội dung: khoảng cách là việc của khung, không phải của
     riêng `.account-nav` (trang nào ẩn menu ở mobile thì cột cũng biến mất theo). */
  .member-col-nav {
    margin-bottom: 12px;
  }
}

/* ============================================================================
   Tổng quan tài khoản (/member/dashboard) · `Member/dashboard.tpl`

   MỘT KHUNG DUY NHẤT cho cả trang. Bản trước là năm thẻ trắng rời, mỗi thẻ một viền
   một bóng đổ, cách nhau 16px — năm mẩu tin không dính gì nhau. Ở đây chỉ có
   `.dash-board`: các phần bên trong ngăn nhau bằng ĐƯỜNG KẺ (`border-top: 1px solid
   #f1f5f9`), không bằng khoảng trống, nên trang đọc liền một mạch.

   Cùng lý do ấy, bảng ô trạng thái (`.dash-stat-grid`) không dùng `gap` để tách ô. Nó
   dùng `gap: 1px` trên nền `#eef2f7`: khe 1px chính là đường kẻ, các ô dính liền thành
   một bảng thay vì rơi ra thành từng thẻ con. Số ô vì vậy phải chia hết cho số cột ở
   MỌI khổ — 8 ô chạy 4 hoặc 2 cột, không bao giờ 3. Đặt số cột không chia hết là để lại
   một ô trống, mà ô trống trong lưới kiểu này không phải khoảng trắng: nó là một mảng
   xám `#eef2f7` lộ ra.

   Dải số liệu (`.dash-summary`) cố ý đi ngược lối ấy — `gap` thật và thẻ có nền riêng —
   vì mấy thẻ đó KHÔNG cùng một bảng với nhau.

   Ngoại lệ duy nhất là dải nhận diện `.dash-hero`: nền tối. Nó là thứ đầu tiên mắt
   chạm tới và là phần duy nhất không dẫn đi đâu bắt buộc, nên nó phải tách hẳn khỏi
   phần trắng bên dưới. Màu nền lấy `--color-main`, quầng sáng lấy `--color-highlight`.

   Khung ngoài giữ đúng ngôn ngữ của khu tài khoản (`.address-book`, `.member-wishlist`,
   `.account-nav`): nền trắng, viền #eef2f7, bóng nhẹ — chỉ bo tròn to hơn (18px) vì nó
   ôm trọn cả trang chứ không phải một khối.
   ========================================================================= */
.member-dashboard {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dash-board {
  overflow: hidden;
  background-color: #ffffff;
  border: 1px solid #eef2f7;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.07);
}

/* ----- 1. Dải nhận diện ----- */
.dash-hero {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 24px;
  padding: 26px 24px;
  background: linear-gradient(135deg, #111c2d 0%, #1b2a44 55%, #3b1622 100%);
}

/* Quầng đỏ ở góc phải: `pointer-events: none` để nó không nuốt cú bấm vào ô số và hai
   nút nằm ngay dưới nó. */
.dash-hero::after {
  content: '';
  position: absolute;
  top: -130px;
  right: -80px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(222, 2, 4, 0.4) 0%, rgba(222, 2, 4, 0) 70%);
  pointer-events: none;
}

.dash-hero > * {
  position: relative;
  z-index: 1;
}

.dash-hero-who {
  flex: 1 1 300px;
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.dash-hero-avatar {
  position: relative;
  flex: 0 0 74px;
  width: 74px;
  height: 74px;
}

.dash-hero-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background-color: #f1f5f9;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.16);
}

/* Dấu tích tài khoản đã xác thực. Viền cùng màu nền dải để nó trông như khoét vào ảnh
   đại diện chứ không phải dán đè lên. */
.dash-hero-check {
  position: absolute;
  right: -2px;
  bottom: -2px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 2px solid #16233a;
  border-radius: 50%;
  background-color: #22c55e;
  color: #ffffff;
  font-size: 11px;
}

.dash-hero-text {
  min-width: 0;
}

.dash-hero-hello {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.dash-hero-name {
  margin: 2px 0 0;
  font-size: 23px;
  font-weight: 700;
  line-height: 1.3;
  color: #ffffff;
  word-break: break-word;
}

.dash-hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 11px;
}

.dash-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.1);
  font-size: 12.5px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.86);
}

.dash-chip i {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
}

.dash-hero-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}

.dash-hero-figures {
  display: flex;
  gap: 12px;
}

.dash-figure {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 132px;
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  background-color: rgba(255, 255, 255, 0.08);
  transition: background-color 0.2s, border-color 0.2s;
}

a.dash-figure:hover,
a.dash-figure:focus {
  border-color: rgba(255, 255, 255, 0.3);
  background-color: rgba(255, 255, 255, 0.16);
  text-decoration: none;
}

.dash-figure-label {
  font-size: 12px;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.62);
}

.dash-figure-value {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.2;
  color: #ffffff;
  white-space: nowrap;
}

/* Đơn vị tiền nhỏ và nhạt hơn con số: nó là chú thích của con số, không phải một phần
   của con số. */
.dash-figure-value small {
  margin-left: 4px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
}

.dash-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.dash-hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.08);
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.dash-hero-btn:hover,
.dash-hero-btn:focus {
  background-color: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.32);
  color: #ffffff;
  text-decoration: none;
}

.dash-hero-btn.is-primary {
  border-color: var(--color-highlight);
  background-color: var(--color-highlight);
}

.dash-hero-btn.is-primary:hover,
.dash-hero-btn.is-primary:focus {
  border-color: #b80103;
  background-color: #b80103;
  box-shadow: 0 6px 16px rgba(222, 2, 4, 0.35);
}

/* ----- Khuôn chung của các dải trắng ----- */
.dash-section {
  padding: 20px 24px 22px;
  border-top: 1px solid #f1f5f9;
}

.dash-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.dash-section-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: #0f172a;
}

.dash-section-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--color-highlight);
}

.dash-section-link:hover,
.dash-section-link:focus {
  color: #b80103;
  text-decoration: none;
}

.dash-section-link i {
  font-size: 11px;
  transition: transform 0.2s;
}

.dash-section-link:hover i {
  transform: translateX(3px);
}

/* ----- 2. Dải số liệu -----

   Ba (đôi khi bốn) thẻ tổng của cả tài khoản, đứng RIÊNG chứ không nằm trong khung bảng
   trạng thái bên dưới: chúng là tổng, không phải một chặng của đơn — nhét chung khung với
   tám ô trạng thái thì đọc như thể có trạng thái thứ chín.

   Vì đứng riêng nên ở đây dùng `gap` thật (10px) và thẻ có nền xám nhạt, ngược hẳn với
   lối "khe 1px làm đường kẻ" của hai bảng ô kia. Đó là chủ ý: khoảng hở nói rằng mấy thẻ
   này KHÔNG cùng một bảng với nhau. */
.dash-summary {
  padding: 18px 24px 20px;
  border-top: 1px solid #f1f5f9;
}

/* `grid-auto-flow: column` chứ không khai sẵn số cột: dải có 3 hay 4 thẻ tuỳ shop có thu
   phí vận chuyển hay không (xem chú thích ở template), khai `repeat(3, ...)` thì lúc có
   thẻ thứ tư nó rơi xuống hàng dưới một mình. */
.dash-summary-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 10px;
}

.dash-summary-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 14px;
  background-color: #f8fafc;
  border: 1px solid #eef2f7;
  border-radius: 12px;
  --sum: #64748b;
  --sum-bg: #eef2f7;
}

/* Chỉ thẻ nào là liên kết mới nhấc lên khi rê chuột — thẻ tổng không có đích để tới thì
   không được trông như bấm được. */
a.dash-summary-item:hover,
a.dash-summary-item:focus {
  border-color: rgba(222, 2, 4, 0.28);
  background-color: #fffafa;
  text-decoration: none;
}

.dash-summary-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background-color: var(--sum-bg);
  color: var(--sum);
  font-size: 15px;
}

.dash-summary-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.dash-summary-label {
  font-size: 12.5px;
  line-height: 1.3;
  color: #64748b;
}

.dash-summary-value {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  color: #0f172a;
}

.dash-summary-value small {
  margin-left: 2px;
  font-size: 11.5px;
  font-weight: 600;
  color: #94a3b8;
}

.dash-summary-item.is-money { --sum: #b45309; --sum-bg: #fff7e6; }
.dash-summary-item.is-shipping { --sum: #0e7490; --sum-bg: #e6f8fb; }
.dash-summary-item.is-product { --sum: #1a63bd; --sum-bg: #eaf4ff; }
.dash-summary-item.is-wishlist { --sum: var(--color-highlight); --sum-bg: #fee2e2; }

.dash-summary-arrow {
  flex: 0 0 auto;
  font-size: 11px;
  color: #cbd5e1;
  transition: color 0.2s, transform 0.2s;
}

a.dash-summary-item:hover .dash-summary-arrow {
  color: var(--color-highlight);
  transform: translateX(2px);
}

.dash-summary-note {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: #94a3b8;
}

/* ----- 3. Bảng thống kê đơn hàng -----

   Ba băng (bảng ô · dải phân bố · bảng tiền) nằm trong CÙNG một khung `.dash-stats-box`.
   Nền của khung chính là màu đường kẻ: các băng và các ô bên trong đều nền trắng, cách
   nhau đúng 1px, nên khe hở tự thành đường kẻ mà không cần khai `border` ở đâu cả.

   Bản trước để ba khung viền rời: dải phân bố trôi lơ lửng giữa hai hộp, trong khi nó
   chính là hình vẽ của bảng ô ngay trên nó. */
.dash-stats-box {
  overflow: hidden;
  background-color: #eef2f7;
  border: 1px solid #eef2f7;
  border-radius: 14px;
}

.dash-stat-grid {
  display: grid;
  /* 8 ô / 4 cột = đúng 2 hàng đầy, không ô trống nào (xem chú thích đầu khối) */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
}

/* `--stat` là màu của trạng thái, `--stat-bg` là bản pha loãng của chính nó. Icon, con số
   và ô đều đọc từ hai biến ấy, nên đổi màu một trạng thái chỉ sửa một dòng. Bộ màu cùng
   hệ với `.order-status-*` phía dưới file — trong cả khu tài khoản một trạng thái chỉ có
   một sắc. */
.dash-stat {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px 15px;
  background-color: #ffffff;
  transition: background-color 0.2s;
  --stat: #64748b;
  --stat-bg: #f1f5f9;
}

.dash-stat:hover,
.dash-stat:focus {
  background-color: #f8fafc;
  text-decoration: none;
}

/* Icon thay cho vạch màu bên trái của bản trước: vạch ấy mảnh quá để đọc ra màu, mà ô thì
   trống hoác — chỉ có một con số và một nhãn nằm trong 14px lề tứ phía. */
.dash-stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background-color: var(--stat-bg);
  color: var(--stat);
  font-size: 16px;
  transition: background-color 0.2s, color 0.2s;
}

.dash-stat-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.dash-stat-value {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--stat);
}

.dash-stat-title {
  font-size: 12.5px;
  line-height: 1.3;
  color: #64748b;
}

.dash-stat.is-all {
  background-color: #fff8f8;
  --stat: var(--color-highlight);
  --stat-bg: #fee2e2;
}

.dash-stat.is-all:hover {
  background-color: #fff1f1;
}

.dash-stat.is-draft { --stat: #b45309; --stat-bg: #fff7e6; }
.dash-stat.is-new { --stat: #1a63bd; --stat-bg: #eaf4ff; }
.dash-stat.is-confirm { --stat: #4338ca; --stat-bg: #eef0ff; }
.dash-stat.is-package { --stat: #c2410c; --stat-bg: #fff1e6; }
.dash-stat.is-export { --stat: #0e7490; --stat-bg: #e6f8fb; }
.dash-stat.is-done { --stat: #15803d; --stat-bg: #e9f9ef; }
.dash-stat.is-cancel { --stat: #57637a; --stat-bg: #f2f4f7; }

/* Ô rỗng lùi hẳn về xám để những ô có việc thật nổi lên trước. Vẫn bấm được — danh sách
   trống của đúng bộ lọc ấy cũng là một câu trả lời. Đặt SAU các luật màu ở trên để nó đè
   được lên cả `.is-all`. */
.dash-stat.is-empty {
  --stat: #cbd5e1;
  --stat-bg: #f8fafc;
}

.dash-stat.is-all.is-empty {
  background-color: #ffffff;
}

/* ----- 4. Đơn hàng gần đây -----

   Thẻ mềm (nền `#f8fafc`, không viền) chứ không phải dòng ngăn nhau bằng kẻ ngang như bản
   trước. Dòng kẻ + nội dung dồn về hai mép làm cả khối đọc ra một cái bảng rỗng ruột: mã
   đơn bên trái, tiền bên phải, ở giữa 500px trắng trơn.

   Cùng ngôn ngữ thẻ với `.dash-summary-item` ngay trên — trong một trang, thứ "bấm được và
   đứng riêng" chỉ nên có một kiểu. */
.dash-order-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dash-order {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  background-color: #f8fafc;
  border: 1px solid #eef2f7;
  border-radius: 12px;
  transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}

.dash-order:hover,
.dash-order:focus {
  border-color: rgba(222, 2, 4, 0.28);
  background-color: #fffafa;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
  text-decoration: none;
}

.dash-order-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

/* Mã đơn và nhãn trạng thái đi liền nhau: hai nửa của cùng một câu. */
.dash-order-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}

.dash-order-code {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #0f172a;
}

.dash-order-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: 12.5px;
  color: #94a3b8;
}

.dash-order-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.dash-order-meta-item i {
  font-size: 12px;
}

.dash-order-side {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
}

.dash-order-total {
  white-space: nowrap;
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
}

.dash-order-total small {
  margin-left: 2px;
  font-size: 11.5px;
  font-weight: 600;
  color: #94a3b8;
}

.dash-order-arrow {
  flex: 0 0 auto;
  font-size: 12px;
  color: #cbd5e1;
  transition: color 0.2s, transform 0.2s;
}

.dash-order:hover .dash-order-arrow {
  color: var(--color-highlight);
  transform: translateX(2px);
}


/* Khung rỗng: cùng khuôn với khung rỗng của `/member/order` và trang yêu thích — viên
   tròn nhạt bọc một icon, một câu, rồi một nút dẫn đi đâu đó. */
.dash-empty {
  padding: 30px 16px 34px;
  text-align: center;
}

.dash-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: #f8fafc;
  color: #cbd5e1;
  font-size: 26px;
}

.dash-empty-text {
  margin: 14px 0 16px;
  font-size: 14px;
  color: #64748b;
}

.dash-empty-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: 10px;
  background-color: var(--color-highlight);
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  transition: background-color 0.2s;
}

.dash-empty-action:hover,
.dash-empty-action:focus {
  background-color: #b80103;
  color: #ffffff;
  text-decoration: none;
}

/* ----- 5. Thông tin tài khoản -----

   MỘT dải, không phải hai cột "Địa chỉ | Hồ sơ" như bản trước. Hai cột ấy cao thấp lệch
   hẳn nhau (địa chỉ ba dòng, hồ sơ sáu) nên cột trái bỏ trống gần nửa chiều cao, mà đường
   kẻ dọc ở giữa lại càng làm khoảng trống ấy lộ ra. */
.dash-address {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 18px;
  padding: 14px 16px;
  background-color: #f8fafc;
  border: 1px solid #eef2f7;
  border-radius: 12px;
}

.dash-address-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background-color: #fee2e2;
  color: var(--color-highlight);
  font-size: 16px;
}

.dash-address.is-empty .dash-address-icon {
  background-color: #eef2f7;
  color: #94a3b8;
}

.dash-address-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.dash-address-label {
  font-size: 12.5px;
  line-height: 1.3;
  color: #64748b;
}

.dash-address-value {
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.45;
  color: #0f172a;
}

.dash-address.is-empty .dash-address-value {
  font-weight: 500;
  color: #94a3b8;
}

.dash-address-link {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--color-highlight);
}

.dash-address-link:hover,
.dash-address-link:focus {
  color: #b80103;
  text-decoration: none;
}

.dash-address-link i {
  font-size: 11px;
  transition: transform 0.2s;
}

.dash-address-link:hover i {
  transform: translateX(3px);
}

/* Nhãn nằm TRÊN giá trị, không phải nhãn trái — giá trị phải. Kiểu cũ bắt mắt bắc cầu qua
   một khoảng trắng để ghép nhãn với giá trị của nó; hàng kẻ chấm cũng không đỡ được, mà
   giá trị canh phải thì mỗi dòng lại bắt đầu ở một chỗ khác nhau. */
.dash-field-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px 20px;
}

.dash-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding-left: 12px;
  border-left: 2px solid #eef2f7;
}

.dash-field-label {
  font-size: 12px;
  line-height: 1.3;
  color: #94a3b8;
}

.dash-field-value {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  word-break: break-word;
  color: #0f172a;
}

/* Sắp hết hạn: đổi MÀU CHỮ, không thêm nền — ô nằm trong lưới sáu ô cùng khuôn, và băng
   cảnh báo ở trên đã nói to hơn rồi. */
.dash-field-value.is-warning {
  color: #b45309;
}

.dash-field-note {
  font-size: 12px;
  font-weight: 500;
  color: #94a3b8;
}

.dash-field-value.is-warning .dash-field-note {
  color: #d97706;
}

/* ----- 2b. Băng "sắp hết hạn" -----
   Không có nút bấm: khách không tự gia hạn được, việc ấy do shop làm. */
.dash-expiry-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  /* Le ngang bam theo padding cua `.dash-section`: de 0 thi vien vang dan thang
     vao mep the, tho ra so voi moi noi dung quanh no. */
  margin: 0 24px 20px;
  padding: 14px 16px;
  border: 1px solid #fde68a;
  border-radius: 14px;
  background-color: #fffbeb;
}

.dash-expiry-alert-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #fef3c7;
  font-size: 15px;
  color: #b45309;
}

.dash-expiry-alert-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.dash-expiry-alert-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: #92400e;
}

.dash-expiry-alert-text {
  font-size: 13px;
  line-height: 1.5;
  color: #a16207;
}


/* Cột nội dung của khu tài khoản KHÔNG rộng bằng viewport: nó luôn hẹp hơn 260px của
   cột menu cộng lề container. Vì vậy các mốc dưới đây sớm hơn cảm giác thường —
   ở 992px viewport, cột nội dung mới có ~685px; ở 768px chỉ còn ~445px. */
@media (max-width: 991.98px) {
  /* Hai ô số và hai nút tụt xuống thành hàng riêng: xếp cạnh khối tên ở khổ này thì tên
     chỉ còn ~110px và vỡ thành bốn dòng. */
  .dash-hero-side {
    width: 100%;
    align-items: stretch;
  }

  .dash-hero-figures {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dash-figure {
    min-width: 0;
    padding: 10px 12px;
  }

  .dash-hero-btn {
    flex: 1 1 0;
  }

  /* Lưới trường về hai cột: ba cột ở khổ này mỗi ô chỉ còn ~140px, một địa chỉ email
     dài vỡ thành ba dòng. */
  .dash-field-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* 8 ô / 2 cột = 4 hàng đầy. Giữ 4 cột ở đây thì mỗi ô chỉ còn ~110px, phần chữ ~84px,
     và ba nhãn dài nhất ("Chờ thanh toán", "Chờ vận chuyển", "Đang chuyển") đều vỡ đôi.
     Ba cột sẽ để trống hai ô ở hàng cuối, mà ô trống trong lưới kẻ 1px hiện ra thành một
     mảng xám. */
  .dash-stat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* Dải số liệu về MỘT cột, mỗi thẻ thành một dòng "icon · nhãn ——— số".

     Dàn ngang ba thẻ ở khổ này thì mỗi thẻ chỉ còn ~142px, nhãn "Sản phẩm yêu thích"
     xuống ba dòng mà con số vẫn phải nằm một dòng. Hai cột cũng không xong: dải có 3 hay
     4 thẻ tuỳ dữ liệu, số lẻ thì thẻ cuối trơ một mình nửa hàng. */
  .dash-summary-grid {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: minmax(0, 1fr);
  }

  .dash-summary-body {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
  }
}

@media (max-width: 767.98px) {
  .member-dashboard {
    gap: 14px;
  }

  .dash-hero {
    padding: 15px 15px;
  }
  .dash-hero-who {
    gap: 10px;
}
.dash-summary {
    padding: 15px;
}
  .dash-section {
    padding: 18px 16px 20px;
  }
  .dash-expiry-alert {
    margin: 0 16px 18px;
  }
  .dash-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }


}

@media (max-width: 575.98px) {
  .dash-hero-avatar {
    flex: 0 0 60px;
    width: 60px;
    height: 60px;
  }

  .dash-hero-name {
    font-size: 19px;
  }

  /* Mỗi nút một hàng: chia đôi thì "Thay đổi mật khẩu" vỡ thành hai dòng và hai nút cao
     thấp khác nhau. Xếp dọc thì cả hai đều là một dòng chữ giữa một vùng bấm rộng. */
  .dash-hero-btn {
    flex: 1 1 100%;
  }

  /* Ô thống kê co lại vừa đủ để nhãn dài nhất còn nằm một dòng: hai cột ở khổ này mỗi ô
     ~150px, giữ icon 38px và lề 14px thì phần chữ chỉ còn ~72px và "Chờ thanh toán" vỡ
     đôi. Bớt 6px icon và 8px lề là chữ có 88px — vừa đủ. */
  .dash-stat {
    gap: 10px;
    padding: 12px 10px;
  }

  .dash-stat-icon {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    font-size: 14px;
  }

  .dash-stat-value {
    font-size: 18px;
  }

  .dash-stat-title {
    font-size: 12px;
  }

  /* Lưới trường về một cột: hai cột ở khổ này mỗi ô chỉ ~155px, một địa chỉ email dài vỡ
     thành ba dòng. */
  .dash-field-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Băng địa chỉ: liên kết tụt xuống hàng riêng, chiếm cả hai cột. Để nó cùng hàng với
     địa chỉ thì phần chữ chỉ còn ~130px, mà địa chỉ đầy đủ luôn dài hơn thế. */
  .dash-address {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 10px 13px;
  }

  .dash-address-link {
    grid-column: 1 / -1;
  }

  /* Số tiền lên thẳng hàng với mã đơn thay vì canh giữa: ở khổ này phần bên trái cao tới
     bốn dòng (mã, nhãn trạng thái, giờ, số sản phẩm) nên canh giữa làm số tiền rơi vào
     quãng giữa hai dòng meta, chẳng dính vào dòng nào. */
  .dash-order {
    align-items: flex-start;
  }

  .dash-order-side {
    padding-top: 1px;
  }
}

/* ===== Sổ địa chỉ nhận hàng (/member/address) ===== */
.address-book {
  padding: 20px 22px 22px;
  background-color: #ffffff;
  border: 1px solid #eef2f7;
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
}

.address-book-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f1f5f9;
}

.address-book-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  color: #0f172a;
}

.address-book-add {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: 10px;
  background-color: var(--color-highlight);
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  transition: background-color 0.2s;
}

.address-book-add:hover,
.address-book-add:focus {
  background-color: #b80103;
  color: #ffffff;
  text-decoration: none;
}

.address-book-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.address-card {
  display: flex;
  flex-direction: column;
  padding: 16px;
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.address-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
}

.address-card.is-default {
  border-color: rgba(222, 2, 4, 0.35);
  background-color: #fffafa;
}

.address-card-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}

.address-card-name {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
}

.address-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  background-color: #fee2e2;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-highlight);
}

.address-card-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 14px;
}

.address-card-line {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13px;
  line-height: 1.5;
  color: #475569;
}

.address-card-line i {
  flex: 0 0 14px;
  width: 14px;
  margin-top: 2px;
  text-align: center;
  color: #94a3b8;
}

.address-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px dashed #e2e8f0;
}

.address-card-setdefault {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.4;
  color: #475569;
  transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}

.address-card-setdefault:hover {
  border-color: var(--color-highlight);
  background-color: #fff5f5;
  color: var(--color-highlight);
  text-decoration: none;
}

.address-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.address-card-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.4;
  color: #64748b;
  transition: color 0.2s, background-color 0.2s;
}

.address-card-action:hover {
  background-color: #f1f5f9;
  color: #0f172a;
  text-decoration: none;
}

.address-card-action.is-delete:hover {
  background-color: #fee2e2;
  color: var(--color-highlight);
}

.address-card-new {
  align-items: center;
  justify-content: center;
  flex-direction: row;
  gap: 8px;
  min-height: 140px;
  border-style: dashed;
  border-color: #cbd5e1;
  background-color: #f8fafc;
  font-size: 14px;
  font-weight: 600;
  color: #94a3b8;
  transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}

.address-card-new:hover {
  border-color: var(--color-highlight);
  background-color: #fff5f5;
  box-shadow: none;
  color: var(--color-highlight);
  text-decoration: none;
}

.address-book-empty {
  padding: 44px 20px 40px;
  text-align: center;
}

.address-book-empty > i {
  font-size: 42px;
  color: #cbd5e1;
}

.address-book-empty-text {
  margin: 14px 0 18px;
  font-size: 14px;
  color: #64748b;
}

@media (max-width: 991.98px) {
  .address-book-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .address-card-new {
    min-height: 76px;
  }
}

@media (max-width: 575.98px) {
  .address-book {
    padding: 16px 14px 18px;
  }

  .address-card-foot {
    align-items: flex-start;
  }

  .address-card-actions {
    margin-left: 0;
  }
}

/* ===== Sản phẩm yêu thích (/member/wishlist) =====
   Panel dùng cùng bộ giá trị với `.address-book` ở trên — các trang khu vực thành viên
   phải trông là một hệ. Thẻ sản phẩm bên trong không khai lại luật nào: nó là thẻ yêu
   thích dùng chung với `/yeu-thich` (`.wl-card` trong custom.css), ở đây chỉ chỉnh ba chỗ
   mà bối cảnh "nằm trong panel" đòi khác đi — xem lưới `.member-wishlist-grid` bên dưới. */
.member-wishlist {
  padding: 20px 22px 22px;
  background-color: #ffffff;
  border: 1px solid #eef2f7;
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
}

.member-wishlist-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f1f5f9;
}

.member-wishlist-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  color: #0f172a;
}

/* Viên đếm tổng, không phải một dòng chữ xám: đây là con số người ta mở trang để xem.
   Dùng đúng bộ giá trị của `.wishlist-summary` bên `/yeu-thich` (custom.css) — hai trang
   cùng trả lời một câu hỏi thì phải trả lời bằng cùng một hình dạng. */
.member-wishlist-count {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 13px;
  border: 1px solid #f7dcdc;
  border-radius: 40px;
  background: linear-gradient(135deg, #fff6f6 0%, #fffdfd 60%);
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
  color: #7c8494;
}

.member-wishlist-count > i {
  font-size: 12px;
  color: var(--color-highlight);
}

.member-wishlist-count strong {
  font-weight: 700;
  color: #0f172a;
}

/* Phân trang: cùng kiểu với `/dat-hang-nhanh` (`.quick-purchase .pagination` bên dưới) —
   nút bo tròn nền xám, trang đang đứng tô màu nhấn. Kiểu mặc định của bootstrap là ô vuông
   viền xanh, lạc hẳn khỏi bảng màu của khu tài khoản. */
.member-wishlist .pagination {
  margin-top: 22px;
  margin-bottom: 0;
  justify-content: center;
  gap: 6px;
}

/* `ul.pagination .page-item` (page.css) đệm 5px hai bên mỗi ô, cộng với `gap` ở trên thành
   khe 16px — thừa, và chính chỗ thừa ấy làm cả dải không nằm nổi một hàng trên điện thoại.
   Khe hở để `gap` lo một mình. */
.member-wishlist .pagination .page-item {
  padding-left: 0;
  padding-right: 0;
}

/* `width: auto` là bắt buộc: `.pagination .page-link` của page.css khoá cứng `width: 40px`,
   mà `min-width` không đè được một `width` đã khai. Không mở ra `auto` thì ô số vẫn 40px và
   `min-width`/`padding` bên dưới chẳng có tác dụng gì. */
.member-wishlist .pagination .page-item .page-link {
  width: auto;
  min-width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: #f5f6f9;
  color: #4b5563;
  font-size: 13px;
  font-weight: 600;
  transition: background .18s, color .18s;
}

.member-wishlist .pagination .page-item .page-link:hover {
  background: rgba(222, 2, 4, 0.08);
  color: var(--color-highlight);
  text-decoration: none;
}

.member-wishlist .pagination .page-item.active .page-link {
  background: var(--color-highlight);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(222, 2, 4, 0.28);
}

.member-wishlist .pagination .page-item.disabled .page-link {
  background: transparent;
  color: #c1c5d0;
}

/* Dưới 992px: cả dải có tới 11 ô — hai nút nhảy đầu/cuối, lùi/tiến, năm số và hai dấu
   "..." — cần ~430px. Cột nội dung ở đây chỉ rộng chừng ấy hoặc hẹp hơn cho tới 992px (khổ
   768px còn ~400px sau khi menu lấy 260px; điện thoại còn ~317px), nên dải vỡ thành hai
   hàng lệch nhau. Bỏ đi hai thứ KHÔNG mất đường đi nào:

   - dấu "..." (`.page-item.disabled` ở dải này chỉ dùng cho nó): không bấm được;
   - lùi/tiến (`.page-item-step`): chúng chính là hai con số đứng ngay cạnh số đang bật,
     bấm số 5 hay bấm mũi tên lùi ra cùng một trang.

   Hai nút nhảy đầu/cuối thì giữ — với danh sách vài chục trang, mất chúng là phải bấm
   tiến hàng chục lần. Còn lại 7 ô ~280px, nằm gọn một hàng ở cả khổ hẹp nhất mà không
   phải bóp nhỏ nút xuống dưới cỡ bấm được. */
@media (max-width: 991.98px) {
  .member-wishlist .pagination {
    gap: 5px;
  }

  .member-wishlist .pagination .page-item.disabled,
  .member-wishlist .pagination .page-item-step {
    display: none;
  }
}

/* Lưới thẻ yêu thích của `/member/wishlist`. Thẻ là `block/product/item_yeu_thich`
   (`.wl-card`, luật ở custom.css) — đúng thẻ đang bày ở `/yeu-thich`, không phải thẻ
   trang chủ `item_home`: ở đây khách vào để XỬ LÝ danh sách đã lưu (đối chiếu mã hàng,
   xem còn hàng không, thêm thẳng vào giỏ, bỏ thích), mà thẻ trang chủ chỉ có ảnh, tên,
   giá và một trái tim.

   `display: grid` + `gap` thay cho `.row` + `.col-* .mb-20` của bootstrap: khoảng cách
   giữa hai hàng là việc của LƯỚI, không phải của từng thẻ. `.mb-20` trong `custom.css`
   chỉ tồn tại bên trong `@media (min-width: 992px)` — đúng khổ hẹp cần khe hở nhất thì
   lại không có, hai hàng dính vào nhau — và thẻ cuối cùng luôn thừa một khoảng margin
   thò xuống dưới đáy panel.

   MỘT cột cho tới 1200px, hai cột từ đó. Thẻ này nằm ngang (ảnh trái, nội dung phải), cần
   khoảng 380px mới đọc trọn được tên sản phẩm và mã hàng. Cột nội dung ở đây đã mất 260px
   cho menu bên trái, nên nó hẹp hơn hẳn cột cùng khổ ở `/yeu-thich`:

   | khổ màn | container | cột nội dung | chia đôi |
   |---------|-----------|--------------|----------|
   | 768px   | 720       | ~445         | 210 — không đủ cho cả ảnh 92px lẫn chữ |
   | 992px   | 960       | ~670         | 327 — tên cụt ba chấm, mã hàng vỡ 3 dòng |
   | 1200px  | 1140      | ~865         | 424 — vừa |

   Nên mốc hai cột là 1200px, KHÔNG phải 992px như lưới cũ: ở 992px một cột rộng 670px đọc
   thoải mái hơn hai cột 327px chật cứng. */
.member-wishlist-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 1200px) {
  .member-wishlist-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

/* `.product-item` cho thẻ sẵn một cái bóng đổ, nhưng ở đây thẻ nằm TRONG panel trắng đã
   có bóng riêng — hai lớp bóng chồng nhau chỉ làm nền xám đục chứ không tách được thẻ ra
   khỏi panel. Để viền lo việc phân tách, còn bóng dành cho lúc rê chuột (`.wl-card:hover`
   trong custom.css) — lúc ấy nó mới nói lên điều gì. */
.member-wishlist-grid .wl-card {
  box-shadow: none;
}

/* Dải thẻ sản phẩm TRƯỢT NGANG ở trang Tổng quan (`.item-wishlist` trong
   `Member/dashboard.tpl`). Không ăn theo lưới ở trên: lưới `/member/wishlist` bày thẻ yêu
   thích nằm ngang, còn đây là thẻ trang chủ `item_home` xếp dọc, hai nhịp cột khác nhau.

   Chiều rộng slide do Swiper tính và gán inline, CSS ở đây chỉ lo phần Swiper không lo:
   chiều cao thẻ và hai nút mũi tên. */
.member-product-slider {
  position: relative;
}

/* `.swiper-slide` mặc định là `height: 100%`; để `auto` thì thẻ cao theo nội dung của nó
   thay vì bị kéo bằng thẻ cao nhất — giống hệt cách lưới đang bày. */
.member-product-slider .swiper-slide {
  height: auto;
}

/* Nút tròn nổi trên ảnh sản phẩm, không phải ở giữa thẻ: đặt giữa theo chiều cao thẻ thì
   mũi tên rơi đúng vào chỗ tên và giá. `top` tính theo phần ảnh (tỉ lệ 4:3) ở nửa trên. */
.member-product-slider .swiper-button-prev,
.member-product-slider .swiper-button-next {
  top: 34%;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: #ffffff;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.18);
  color: #0f172a;
  font-size: 16px;
}

.member-product-slider .swiper-button-prev {
  left: 6px;
}

.member-product-slider .swiper-button-next {
  right: 6px;
}

.member-product-slider .swiper-button-prev:hover,
.member-product-slider .swiper-button-next:hover {
  background-color: var(--color-highlight);
  color: #ffffff;
}

/* Dưới 768px vuốt tay là đủ; hai nút tròn đặt trên thẻ hẹp chỉ che mất ảnh sản phẩm. */
@media (max-width: 767.98px) {
  .member-product-slider .swiper-button-prev,
  .member-product-slider .swiper-button-next {
    display: none;
  }
}

/* Khung rỗng dùng chung `.wishlist-empty` khai ở custom.css — cùng một khối với
   `/yeu-thich`. Trước đây trang này có bản riêng (`.member-wishlist-empty`): cũng icon
   trái tim, cũng một câu, cũng một nút, nhưng icon trần màu xám thay vì viên tròn hồng,
   nên hai trang yêu thích của cùng một site rỗng ra hai kiểu khác nhau. */

@media (max-width: 575.98px) {
  .member-wishlist {
    padding: 16px 14px 18px;
  }
}

/* ===== Form một cột trong khu vực thành viên (đổi mật khẩu, ...) ===== */
.member-form-card {
  padding: 20px 22px 22px;
  background-color: #ffffff;
  border: 1px solid #eef2f7;
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
}

.member-form-head {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f1f5f9;
}

.member-form-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  color: #0f172a;
}

.member-form {
  max-width: 520px;
}

.member-form .required {
  color: var(--color-highlight);
}

/* Nút con mắt nằm trong ô nhập, không phải nút bootstrap nên phải tự khai nền/viền */
.member-form-eye {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 48px;
  padding: 0;
  border: 0;
  background-color: transparent;
  font-size: 15px;
  color: #94a3b8;
  cursor: pointer;
  transition: color 0.2s;
}

.member-form-eye:hover,
.member-form-eye:focus {
  color: var(--color-highlight);
  outline: 0;
}

.member-form-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 7px;
  font-size: 13px;
  color: #94a3b8;
}

.member-form-submit {
  min-width: 180px;
  margin-top: 6px;
}

/* jquery-validate gắn class `invalid-feedback` (bootstrap ẩn mặc định) nên phải mở lại */
.member-form label.error {
  display: block;
  width: 100%;
  margin-top: 6px;
  font-size: 13px;
  color: #dc2626;
}

@media (max-width: 575.98px) {
  .member-form-card {
    padding: 16px 14px 20px;
  }

  .member-form-submit {
    width: 100%;
  }
}

/* ===== Sửa thông tin cá nhân (/member/profile) =====
   Thẻ trắng và ô nhập dùng chung với trang đổi mật khẩu (`.member-form-card`,
   `.member-login-input`). Riêng của màn này: lưới hai cột, nhóm chọn giới tính, và
   dòng email/SĐT bị khoá — hai thứ ấy chỉ đổi được qua trang xác thực riêng. */
.member-form-wide {
  max-width: 760px;
}

.member-profile-section + .member-profile-section {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid #f1f5f9;
}

.member-profile-section-title {
  margin-bottom: 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #94a3b8;
}

/* Hai cột trên desktop; `.is-full` cho ô chiếm trọn hàng (họ và tên).
   Khoảng cách dọc vẫn do `.member-login-field` lo nên `row-gap` để 0. */
.member-profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 18px;
}

.member-profile-cell.is-full {
  grid-column: 1 / -1;
}

/* Ba nút chọn giới tính. Cao đúng 48px để thẳng hàng với ô ngày sinh bên cạnh. */
.member-profile-sex {
  display: flex;
  gap: 8px;
}

.member-profile-sex-item {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  cursor: pointer;
}

.member-profile-sex-item input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.member-profile-sex-item > span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 48px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 10px;
  background-color: #eef2fa;
  font-size: 14px;
  color: #475569;
  white-space: nowrap;
  transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}

.member-profile-sex-item:hover > span {
  color: var(--color-highlight);
}

.member-profile-sex-item input:checked + span {
  border-color: var(--color-highlight);
  background-color: #ffffff;
  font-weight: 600;
  color: var(--color-highlight);
}

.member-profile-sex-item input:focus-visible + span {
  box-shadow: 0 0 0 2px rgba(222, 2, 4, 0.2);
}

/* Dòng khoá: nền xám hơn ô nhập được, con trỏ không đổi thành `text` — nhìn là biết
   không gõ vào đây được, muốn đổi thì bấm link bên phải. */
.member-login-input.is-locked {
  background-color: #f8fafc;
  border: 1px solid #eef2f7;
}

.member-login-input.is-locked .input-group-text {
  color: #cbd5e1;
}

.member-profile-static {
  flex: 1 1 auto;
  min-width: 0;
  height: 46px;
  padding: 0 6px 0 8px;
  overflow: hidden;
  font-size: 15px;
  line-height: 46px;
  color: #64748b;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-profile-change {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-highlight);
  white-space: nowrap;
}

.member-profile-change:hover,
.member-profile-change:focus {
  color: #c50d00;
  text-decoration: underline;
}

.member-profile-foot {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid #f1f5f9;
}

.member-profile-foot .member-form-submit {
  margin-top: 0;
}

.member-profile-password {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  color: #475569;
}

.member-profile-password:hover,
.member-profile-password:focus {
  color: var(--color-highlight);
}

@media (max-width: 767.98px) {
  .member-profile-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 575.98px) {
  .member-profile-change span {
    display: none;
  }

  .member-profile-change {
    padding: 0 12px;
    font-size: 15px;
  }

  .member-profile-foot {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .member-profile-password {
    justify-content: center;
  }
}

/* ===== Đổi email / số điện thoại (/member/change-email, /member/change-phone) =====
   Hai trang dùng chung một khuôn ba bước: chọn nơi nhận mã → nhập mã → nhập giá trị
   mới. Đánh số vì thứ tự là bắt buộc — chưa lấy mã thì hai bước sau vô nghĩa.
   Thẻ trắng và ô nhập vẫn là `.member-form-card` / `.member-login-input` dùng chung
   với trang đổi mật khẩu và sửa thông tin. */
.member-form-sub {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: #64748b;
}

.member-verify-step + .member-verify-step {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid #f1f5f9;
}

/* Bước 2 và 3 khoá đến khi lấy được mã. Chưa có mã thì gõ email mới cũng vô ích, mà
   để form sáng rõ thì người dùng cứ gõ rồi ăn báo lỗi. Ô nhập được `disabled` ngay
   trong template nên khoá có hiệu lực cả lúc `member.js` chưa chạy xong; mở khoá là
   việc của `nhMember.verifyStep.unlock()` sau khi gửi mã thành công. */
.member-verify-step {
  transition: opacity 0.25s;
}

.member-verify-step.is-locked {
  opacity: 0.6;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.member-verify-step.is-locked input {
  cursor: not-allowed;
}

/* Ổ khoá nằm cuối tiêu đề chứ không thay số thứ tự: mờ đi rồi thì vẫn phải đọc được
   đây là bước mấy. */
.member-verify-lock {
  display: none;
  margin-left: 7px;
  font-size: 12px;
  color: #94a3b8;
  vertical-align: baseline;
}

.member-verify-step.is-locked .member-verify-lock {
  display: inline-block;
}

.member-verify-hint-locked {
  display: none;
}

.member-verify-step.is-locked .member-verify-hint-locked {
  display: block;
}

.member-verify-step.is-locked .member-verify-hint-open {
  display: none;
}

/* Ô nhập là thứ cuối cùng trong bước: bỏ khoảng đáy của `.member-login-field` để
   đường kẻ ngăn bước dưới không bị đẩy ra xa. */
.member-verify-step > .member-login-field:last-child {
  margin-bottom: 0;
}

.member-verify-step-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
}

.member-verify-step-no {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #eef2fa;
  font-size: 13px;
  font-weight: 700;
  line-height: 24px;
  text-align: center;
  color: #475569;
}

.member-verify-step-text {
  min-width: 0;
}

/* Ở bước 3 thẻ này là `<label for>` của ô nhập, nên phải tự khai `display`/`margin` —
   `label` mặc định là inline và bootstrap cho nó khoảng đáy. */
.member-verify-step-title {
  display: block;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  color: #0f172a;
}

.member-verify-step-title .required {
  color: var(--color-highlight);
}

.member-verify-step-desc {
  margin-top: 2px;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.5;
  color: #94a3b8;
  text-overflow: ellipsis;
}

/* Nơi nhận mã: radio ẩn, cả thẻ là vùng bấm — cùng lối với nhóm chọn giới tính ở
   `/member/profile`, khu tài khoản chỉ nên có một kiểu nút chọn. */
.member-verify-channels {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}

.member-verify-channel {
  display: block;
  margin: 0;
  cursor: pointer;
}

.member-verify-channel input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.member-verify-channel-box {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #eef2f7;
  border-radius: 10px;
  background-color: #f8fafc;
  transition: border-color 0.2s, background-color 0.2s;
}

.member-verify-channel:hover .member-verify-channel-box {
  border-color: #cbd5e1;
}

.member-verify-channel input:checked + .member-verify-channel-box {
  border-color: var(--color-highlight);
  background-color: #ffffff;
}

.member-verify-channel input:focus-visible + .member-verify-channel-box {
  box-shadow: 0 0 0 2px rgba(222, 2, 4, 0.2);
}

.member-verify-channel-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: #eef2fa;
  font-size: 16px;
  color: #64748b;
  transition: background-color 0.2s, color 0.2s;
}

.member-verify-channel input:checked + .member-verify-channel-box .member-verify-channel-icon {
  background-color: var(--color-highlight);
  color: #ffffff;
}

.member-verify-channel-text {
  flex: 1 1 auto;
  min-width: 0;
}

.member-verify-channel-name {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: #334155;
}

/* Email dài phải cắt bằng `...`, không được nong thẻ ra ngoài cột nội dung.
   `font-weight` khai lại vì cả khối nằm trong `<label>`, mà `page.css` cho `label`
   đậm 600 — không đè lại thì dòng địa chỉ đậm ngang với tên hình thức nhận mã. */
.member-verify-channel-value {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  font-size: 13px;
  font-weight: 400;
  color: #94a3b8;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-verify-channel-check {
  flex: 0 0 auto;
  font-size: 17px;
  color: #cbd5e1;
  transition: color 0.2s;
}

.member-verify-channel input:checked + .member-verify-channel-box .member-verify-channel-check {
  color: var(--color-highlight);
}

/* Nút gửi mã để dạng viền: nút chính của trang là "Xác nhận" ở cuối, hai nút đặc
   cùng màu thì không biết bấm cái nào trước. */
.member-verify-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border: 1px solid var(--color-highlight);
  border-radius: 10px;
  background-color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-highlight);
  transition: background-color 0.2s, color 0.2s;
}

.member-verify-send:hover,
.member-verify-send:focus {
  background-color: var(--color-highlight);
  color: #ffffff;
}

/* Lúc chưa đếm ngược `[nh-countdown]` rỗng: giấu đi cho nút khỏi thừa một khoảng.
   Khi đếm, `member.js` gắn thêm `.disable` (utilities.css) lo phần mờ + chặn bấm. */
.member-verify-send [nh-countdown] {
  font-size: 13px;
  font-weight: 500;
}

.member-verify-send [nh-countdown]:empty {
  display: none;
}

.member-verify-empty {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  border: 1px solid #fde2e1;
  border-radius: 10px;
  background-color: #fff5f5;
  font-size: 14px;
  line-height: 1.5;
  color: #b91c1c;
}

/* Năm ô mã. Chia đều bề rộng thay vì cố định như `.input-opt` ở `page.css`: cột nội
   dung của khu tài khoản hẹp hơn khung một cột của các trang xác thực cũ. */
.member-otp {
  display: flex;
  gap: 10px;
  max-width: 340px;
}

.member-otp input {
  flex: 1 1 0;
  min-width: 0;
  height: 56px;
  padding: 0;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background-color: #f8fafc;
  font-size: 22px;
  font-weight: 700;
  line-height: 54px;
  text-align: center;
  color: #0f172a;
  transition: border-color 0.2s, background-color 0.2s;
}

.member-otp input:focus {
  outline: 0;
  border-color: var(--color-highlight);
  background-color: #ffffff;
  box-shadow: 0 0 0 2px rgba(222, 2, 4, 0.15);
}

.member-verify-foot {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #f1f5f9;
}

.member-verify-foot .member-form-submit {
  margin-top: 0;
}

.member-verify-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  color: #475569;
}

.member-verify-back:hover,
.member-verify-back:focus {
  color: var(--color-highlight);
}

/* ===== Dat lai mat khau (/member/verify-forgot-password) =====
   Man nay muon the giua trang `.member-auth-card` cua /member/verify-email va khoi
   buoc `.member-verify-step` cua khu tai khoan; duoi day chi la phan rieng. */

/* `.no-member .box-member-section` (custom.css) la flex container nen hang ben trong
   co lai vua noi dung, khong theo be ngang khung nhin: trang nao noi dung hep thi bi
   bop lai, trang nao rong thi tran ra ngoai le. Ghim theo khung nhin nhu moi trang
   binh thuong khac.

   `overflow-x` la de chan rieng `.member-login > .container > .row`: hang do an ra
   -40px moi ben cho gian cot, o dung 1200px container vua bang khung nhin nen phan an
   ra loi han ra ngoai va de lai thanh cuon ngang. Chua o day de khong phai bop le 40px
   — do la khoang cach giua hai cot cua trang dang nhap. */
.no-member .box-member-section {
  overflow-x: hidden;
}

.no-member .box-member-section > .row {
  width: 100%;
}

/* O ma la o mot chu so, phai gon va gan vuong. `.member-otp input` de `flex: 1 1 0`
   nen o cot rong cua man nay chung gian ra thanh chu nhat bet; chan lai bang max-width,
   con lai de trong ben phai. Khung hep hon thi max-width khong bo buoc gi, nam o van co
   deu xuong vua cho. */
.member-reset .member-otp {
  gap: 12px;
}

.member-reset .member-otp input {
  max-width: 58px;
  height: 62px;
  line-height: 60px;
}

@media (max-width: 575.98px) {
  .member-reset .member-otp {
    gap: 8px;
  }

  .member-reset .member-otp input {
    max-width: 54px;
    height: 54px;
    line-height: 52px;
  }
}

/* `break-word` chu khong `break-all`: email dai thi cho xuong dong tron, dung cat
   giua chung thanh "xuanhieu3 / 796@gmail.com". */
.member-reset-email {
  color: #0f172a;
  overflow-wrap: break-word;
}

/* Gui lai ma la loi thoat phu, khong duoc nang ngang "Xac nhan": nut chu, khong vien.
   De chay inline nhu mot cau chu khong flex hai dau — cot rong 545px thi space-between
   nem nut ra tan mep phai, roi han khoi cau goi y no thuoc ve. */
.member-reset-resend {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.6;
  color: #94a3b8;
}

.member-reset-resend-action {
  margin-left: 6px;
  white-space: nowrap;
}

.member-reset-resend-btn {
  padding: 0;
  border: 0;
  background: none;
  font-size: 14px;
  font-weight: 600;
  vertical-align: baseline;
  color: var(--color-highlight);
}

.member-reset-resend-btn:hover,
.member-reset-resend-btn:focus {
  color: #c50d00;
  text-decoration: underline;
}

/* Dem nguoc thi `member.js` gan `.disable` len nut. Giau han nut di cho dong dem nguoc
   dung vao dung cho do — de ca hai thi doc ra hai thu nguoc nhau. */
.member-reset-resend-btn.disable {
  display: none;
}

.member-reset-countdown {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  color: #94a3b8;
}

.member-reset-countdown:empty {
  display: none;
}

.member-verify-step + .member-login-submit {
  margin-top: 26px;
}

@media (max-width: 575.98px) {
  .member-verify-send {
    width: 100%;
  }

  .member-otp {
    gap: 8px;
  }

  .member-otp input {
    height: 50px;
    font-size: 20px;
    line-height: 48px;
  }

  .member-verify-foot {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .member-verify-back {
    justify-content: center;
  }
}

/* ===== Đặt hàng nhanh (/dat-hang-nhanh) =====
   Trang riêng, NGOÀI khu thành viên — nhưng thẻ trắng bao ngoài vẫn mượn đúng khuôn của
   `.address-book` và `.member-wishlist` để các trang trong site nói chung một ngôn ngữ
   khung. Phần bên trong (`.qp-*`, `.quick-cart*`) là bố cục riêng của màn này.

   CSS và JS của màn này ở lại `member.css` / `member.js` dù trang đã ra ngoài khu thành
   viên: hai tệp ấy được `element/layout/css.tpl` và `js.tpl` nạp trên MỌI trang, tách ra
   thành tệp riêng chỉ thêm một lượt tải nữa cho toàn site mà không đổi được gì. */

/* Trang bỏ breadcrumb nên khoảng trống phía trên do chính nó lo. */
.quick-order-page {
  padding: 28px 0 48px;
}

/* Đầu trang dùng lại component tiêu đề của trang chủ (`title-index` + `title-small` +
   `title-name`, xem `custom.css` mục BLOCK_DANH_MUC_NOI_BAT). Component ấy chỉ được
   khai báo trong phạm vi từng khối ở trang chủ, không có bản dùng chung, nên chép lại
   nguyên xi ở đây theo đúng cách các khối khác trong theme vẫn làm.
   Đơn vị để rem như bản gốc — theme đổi cơ sở rem sang 9px từ 1280px trở xuống, viết
   px thì tiêu đề trang này sẽ lệch cỡ so với trang chủ ở màn vừa. */
.quick-order-page .title-index {
  display: block;
  position: relative;
  text-align: left;
  margin-bottom: 3rem;
}

.quick-order-page .title-index.center {
  text-align: center;
}

.quick-order-page .title-index.center .title-small {
  justify-content: center;
}

.quick-order-page .title-small {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  color: var(--color-highlight);
  font-size: 1.8rem;
  font-weight: 700;
}

.quick-order-page .title-small .triangle-left,
.quick-order-page .title-small .triangle-right {
  position: relative;
  display: inline-block;
  width: 4rem;
  height: 2px;
  background-color: var(--color-highlight);
}

.quick-order-page .title-small .triangle-left:before {
  position: absolute;
  content: "";
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1.2rem;
  height: 1.2rem;
  background-color: var(--color-highlight);
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
}

.quick-order-page .title-small .triangle-right:before {
  position: absolute;
  content: "";
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1.2rem;
  height: 1.2rem;
  background-color: var(--color-highlight);
  clip-path: polygon(0 0, 0 100%, 100% 50%);
}

.quick-order-page .title-name {
  margin-bottom: 0;
  font-size: 3.6rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-black);
}

/* Dòng mô tả không có trong component gốc ở trang chủ; giữ lại vì trang này cần một câu
   nói rõ mình làm gì, nhưng để nhạt và hẹp bề ngang cho tiêu đề vẫn là thứ đọc trước. */
.quick-order-page .title-sub {
  max-width: 62rem;
  margin: 1rem auto 0;
  font-size: 1.45rem;
  line-height: 1.5;
  color: #6b7280;
}

.quick-purchase {
  padding: 18px 20px 22px;
  background-color: #ffffff;
  border: 1px solid #f0f1f5;
  border-radius: 18px;
  box-shadow: 0 6px 24px rgba(17, 28, 45, 0.06);
}

/* Phân trang: nút vuông bo tròn, nút đang đứng tô màu nhấn — thay cho kiểu mặc định của
   bootstrap vốn vuông vức và viền xanh lạc khỏi bảng màu trang. */
.quick-purchase .pagination {
  margin-top: 18px;
  margin-bottom: 0;
  justify-content: center;
  gap: 6px;
}

.quick-purchase .pagination .page-item .page-link {
  min-width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: #f5f6f9;
  color: #4b5563;
  font-size: 13px;
  font-weight: 600;
  transition: background .18s, color .18s;
}

.quick-purchase .pagination .page-item .page-link:hover {
  background: rgba(222, 2, 4, 0.08);
  color: var(--color-highlight);
}

.quick-purchase .pagination .page-item.active .page-link {
  background: var(--color-highlight);
  color: #fff;
  box-shadow: 0 4px 12px rgba(222, 2, 4, 0.28);
}

.quick-purchase .pagination .page-item.disabled .page-link {
  background: transparent;
  color: #c1c5d0;
}

@media (max-width: 767.98px) {
  .quick-order-page {
    padding: 0;
  }

  /* Mobile: theo đúng bậc của trang chủ — tên trang xuống 2.4rem, hai vạch mũi tên ngắn
     lại cho dòng nhỏ không bị đẩy xuống hàng. */
  .quick-order-page .title-index {
    margin-bottom: 2.2rem;
  }

  .quick-order-page .title-small {
    gap: 1rem;
    font-size: 1.5rem;
  }

  .quick-order-page .title-small .triangle-left,
  .quick-order-page .title-small .triangle-right {
    width: 2.6rem;
  }

  .quick-order-page .title-name {
    font-size: 2.4rem;
  }

  .quick-order-page .title-sub {
    font-size: 1.4rem;
  }
}

@media (max-width: 575.98px) {
  .quick-purchase {
    padding: 14px 12px 18px;
    border-radius: 14px;
  }

  /* Dòng mô tả là thứ bỏ được đầu tiên khi màn hẹp: tiêu đề đã nói đủ. */
  .quick-order-page .title-sub {
    display: none;
  }
}

/* Nút mời mua sắm ở trạng thái rỗng — giống `/member/wishlist` */
.qp-empty-shop {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 20px;
  border-radius: 12px;
  background-color: var(--color-highlight);
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(222, 2, 4, 0.25);
  transition: background-color .2s, box-shadow .2s, transform .2s;
}

.qp-empty-shop:hover,
.qp-empty-shop:focus {
  background-color: #b80103;
  color: #ffffff;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(222, 2, 4, 0.32);
  transform: translateY(-1px);
}

/* =====================================================
   QUICK PURCHASE - MUA HÀNG NHANH
   ===================================================== */

/* Layout 2 panel */
.box-quick-buy {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  min-width: 0;
}
.quick-buy-left {
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;
  position: relative;
}
.qp-product-list,
.qp-product-row {
  max-width: 100%;
  min-width: 0;
}
.qp-product-row {
  box-sizing: border-box;
}
.quick-buy-right {
  width: 348px;
  flex-shrink: 0;
  position: sticky;
  top: 20px;
  align-self: flex-start;
}

/* Loading state */
.quick-buy-left.qp-loading,
[nh-quick-buy="left"].qp-loading {
  opacity: .6;
  pointer-events: none;
}

/* Search bar */
.qp-search-bar {
  position: relative;
  margin-bottom: 12px;
}
.qp-search-bar .qp-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #9aa0b4;
  font-size: 14px;
  pointer-events: none;
  transition: color .2s;
}
.qp-search-bar:focus-within .qp-search-icon {
  color: var(--color-highlight);
}
/* Nền xám, viền trong suốt cho tới khi gõ vào: lúc nghỉ ô tìm kiếm không cần giành sự
   chú ý với danh sách hàng ngay dưới nó. */
.qp-search-bar .qp-search-input {
  width: 100%;
  height: 44px;
  padding: 0 40px;
  border: 1.5px solid transparent;
  border-radius: 12px;
  background: #f5f6f9;
  font-size: 14px;
  color: var(--color-main);
  outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.qp-search-bar .qp-search-input:focus {
  background: #fff;
  border-color: var(--color-highlight);
  box-shadow: 0 0 0 3px rgba(222, 2, 4, .10);
}
.qp-search-bar .qp-search-input::placeholder {
  color: #b8bccc;
}
.qp-search-bar .qp-search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border: 0;
  background: #f3f4f7;
  color: #6b7186;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
  transition: background .2s, color .2s;
}
.qp-search-bar .qp-search-clear:hover {
  background: rgba(222, 2, 4, .10);
  color: var(--color-highlight);
}

/* Category filter chips */
.qp-cat-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.qp-cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  background: #f4f5f8;
  color: #4b5563;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .2s, background .2s, color .2s, box-shadow .2s;
  max-width: 100%;
}
.qp-cat-chip:hover {
  background: rgba(222, 2, 4, .07);
  color: var(--color-highlight);
}
.qp-cat-chip.is-active {
  background: var(--color-highlight);
  border-color: var(--color-highlight);
  color: #fff;
  box-shadow: 0 4px 12px rgba(222, 2, 4, .25);
}
.qp-cat-chip__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 160px;
}
.qp-cat-chip__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(17, 28, 45, .07);
  color: #6b7186;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}
.qp-cat-chip.is-active .qp-cat-chip__count {
  background: rgba(255, 255, 255, .25);
  color: #fff;
}

/* Product list - compact list dọc */
.qp-product-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

/* Row sản phẩm */
.qp-product-row {
  background: #fff;
  border: 1.5px solid #eff1f5;
  border-radius: 14px;
  padding: 12px;
  display: flex;
  gap: 14px;
  align-items: center;
  transition: border-color .2s, box-shadow .2s, transform .2s;
  position: relative;
}
.qp-product-row:has(.qp-dd.is-open) {
  z-index: 30;
}
.qp-product-row:hover {
  border-color: rgba(222, 2, 4, .35);
  box-shadow: 0 8px 22px rgba(17, 28, 45, .09);
  transform: translateY(-1px);
}

/* Ảnh thumb nhỏ */
.qp-row-thumb {
  flex-shrink: 0;
  width: 84px;
  height: 84px;
  display: block;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #f5f6f8;
}
.qp-row-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.qp-badge-bought,
.qp-badge-stock {
  position: absolute;
  top: 4px;
  left: 4px;
  background: var(--color-highlight);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 999px;
  line-height: 1.2;
  white-space: nowrap;
}

/* Hết hàng đứng đúng chỗ huy hiệu "3x" và loại trừ nhau với nó. Xám chứ không đỏ:
   đây là trạng thái của hàng, không phải lỗi của người đang nhìn. */
.qp-badge-stock {
  background: #6c757d;
}

/* Main — hai cột: trái là tên/mã/phiên bản, phải là giá và nút thêm giỏ. Trước đây
   phần điều khiển nằm thành một hàng riêng phía dưới, nên nhìn như bị tụt dòng. */
.qp-row-main {
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.qp-row-name {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* Cột phải bám mép phải, rộng bao nhiêu là do giá và ô số lượng quyết định. */
.qp-row-side {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.qp-row-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-main);
  line-height: 1.35;
  text-decoration: none;
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  margin-bottom: 5px;
}
.qp-row-title:hover {
  color: var(--color-highlight);
}
/* Mã hàng: dòng nhạt dưới tên. Nhãn và con mã là hai cột — nhãn không co, con mã ăn
   hết chỗ còn lại và cắt bằng "…" nên dù mã dài cỡ nào cũng không đẩy xuống dòng.
   `baseline` để nhãn và con mã (khác cỡ, khác bộ chữ) đứng cùng một đường chân chữ. */
.qp-row-sku {
  display: flex;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
  font-size: 14px;
  line-height: 1.3;
  color: #8a90a0;
}
.qp-row-sku__label {
  flex: 0 0 auto;
  white-space: nowrap;
}
.qp-row-sku__value {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: var(--color-main);
}
.qp-row-price {
  white-space: nowrap;
  text-align: right;
  flex-shrink: 0;
}
.qp-row-price .price-amount.qp-price-current {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-highlight);
}
.qp-row-price .price-amount.qp-price-old {
  font-size: 11px;
  color: #999;
  text-decoration: line-through;
  font-weight: 400;
  margin-left: 4px;
}

/* Ô số lượng và nút thêm giỏ, nằm dưới giá trong cột phải. */
.qp-row-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Custom variant dropdown — nay nằm trong cột trái, dưới mã hàng. */
.qp-dd {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  max-width: 260px;
  margin-top: 2px;
}
.qp-dd__trigger {
  width: 100%;
  height: 36px;
  padding: 0 10px;
  border: 1.5px solid #dde1e8;
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
  color: #222;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  transition: border-color .2s;
}
.qp-dd__trigger:hover {
  border-color: var(--color-highlight);
}
.qp-dd.is-open .qp-dd__trigger {
  border-color: var(--color-highlight);
  box-shadow: 0 0 0 3px rgba(222, 2, 4, .10);
}
.qp-dd__selected {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.qp-dd__selected-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}
.qp-dd__selected-price {
  flex-shrink: 0;
  color: var(--color-highlight);
  font-weight: 700;
  font-size: 13px;
}
.qp-dd__caret {
  flex-shrink: 0;
  color: #697089;
  transition: transform .2s;
}
.qp-dd.is-open .qp-dd__caret {
  transform: rotate(180deg);
}

.qp-dd__menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 20;
  background: #fff;
  border: 1px solid #eef0f4;
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .12);
  padding: 4px;
  max-height: 280px;
  overflow-y: auto;
}
.qp-dd.is-open .qp-dd__menu {
  display: block;
}
.qp-dd__opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s;
  position: relative;
}
.qp-dd__opt:hover {
  background: #f5f7fa;
}
.qp-dd__opt.is-active {
  background: rgba(222, 2, 4, .06);
}
.qp-dd__opt-thumb {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  overflow: hidden;
  background: #f5f6f8;
}
.qp-dd__opt-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.qp-dd__opt-body {
  flex: 1;
  min-width: 0;
}
.qp-dd__opt-name {
  font-size: 13px;
  color: #222;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qp-dd__opt-price {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-highlight);
}
.qp-dd__opt-price-old {
  font-size: 11px;
  color: #999;
  font-weight: 400;
  text-decoration: line-through;
  margin-left: 4px;
}
.qp-dd__opt-check {
  flex-shrink: 0;
  color: var(--color-highlight);
  opacity: 0;
  transition: opacity .15s;
}
.qp-dd__opt.is-active .qp-dd__opt-check {
  opacity: 1;
}
/* Ô số lượng và nút thêm giỏ đứng sát nhau nên phải đọc ra MỘT cụm thao tác: cùng chiều
   cao 38px, cùng bán kính bo 10px. Trước đây ô số cao 34px (input 32 + viền) còn nút cao
   38px, bo 8px so với 11px — lệch cả chiều cao lẫn độ bo nên nhìn thành hai khối rời.

   Khung ngoài ô số là `.product-quantity` bên `page.css` (viền xám, bo 8px, padding 0 5px),
   phải ghi đè tại đây chứ không sửa ở đó: khung ấy dùng chung cho trang chi tiết sản phẩm,
   giỏ hàng và mini-cart. */
.qp-qty-wrap {
  flex-shrink: 0;
}
.qp-qty-wrap .product-quantity {
  display: flex;
  align-items: center;
  gap: 0;
  height: 38px;
  padding: 0 3px;
  border-color: #e3e6ee;
  border-radius: 10px;
  background: #fff;
}
/* Vùng bấm vuông 30px thay cho hộp 19x22 mặc định: hộp cũ hẹp hơn cả icon bên trong nên
   bấm hay trượt, mà hai dấu +/- cũng dính sát vào con số. */
.qp-qty-wrap .product-quantity .btn-quantity {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, color .2s;
}
.qp-qty-wrap .product-quantity .btn-quantity:hover {
  background: #f3f4f8;
}
.qp-qty-wrap .product-quantity .btn-quantity i {
  font-size: 13px;
  color: #4a516d;
}
/* Con số là thứ khách đọc trong cụm này nên đậm hơn hai dấu +/-. Bỏ bo góc riêng: ô nằm
   TRONG khung stepper, tự bo thêm một lần nữa là thành khung lồng khung. */
.qp-qty-wrap .number-input {
  width: 34px;
  height: 30px;
  padding: 0;
  border-radius: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-main);
  text-align: center;
}
/* Nút chỉ có icon nên để vuông đúng bằng chiều cao ô số lượng (38x38). Hình chữ nhật
   44x38 của bản cũ làm nút đỏ nặng hơn hẳn ô bên cạnh. `min-width` thay vì `width` để
   nút vẫn nở ra được nếu sau này thêm chữ (`.qp-btn-add-text`). */
.qp-btn-add {
  flex-shrink: 0;
  height: 38px;
  min-width: 38px;
  padding: 0 11px;
  background: var(--color-highlight);
  color: #fff !important;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: box-shadow .2s, transform .2s, opacity .2s;
}
.qp-btn-add i {
  font-size: 15px;
}
.qp-btn-add:hover {
  box-shadow: 0 6px 16px rgba(222, 2, 4, .3);
  transform: translateY(-1px);
}
.qp-btn-add.loading {
  opacity: .6;
  pointer-events: none;
}
.qp-btn-add-text {
  font-size: 13px;
}

/* Trạng thái rỗng: hình nằm trong một vòng tròn xám nhạt, đỡ trống trải hơn một cái
   icon lơ lửng giữa khoảng trắng. */
.qp-empty-state {
  text-align: center;
  padding: 54px 20px;
  color: #6b7280;
}
.qp-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: #f5f6f9;
}
.qp-empty-icon i {
  font-size: 36px;
  line-height: 1;
  color: #c3c7d2;
}
.qp-empty-icon svg {
  width: 40px;
  height: 40px;
}
.qp-empty-text {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 18px;
}

/* ========================
   QUICK CART - panel phải
   ======================== */

/* Lớp bọc quanh panel. Ở khổ rộng nó trong suốt — chỉ là chỗ bám cho `nh-cart-info` và
   là cha chung của panel với cái nút nổi mà khổ điện thoại dùng để mở panel. */
.quick-cart-wrap {
  position: relative;
}

/* Nút nổi, nút đóng, tay nắm: ba mảnh chỉ có nghĩa khi panel là tấm trượt. Ở khổ rộng
   panel nằm sẵn trong trang, không đóng mở gì, nên ẩn hẳn. */
.qp-cart-fab,
.quick-cart__close,
.quick-cart__grabber {
  display: none;
}

.quick-cart {
  background: #fff;
  border-radius: 18px;
  border: 1px solid #f0f1f5;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(17, 28, 45, .07);
}
.quick-cart__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid #f1f2f6;
}
.quick-cart__title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--color-main);
  display: flex;
  align-items: center;
  gap: 6px;
}
.quick-cart__count {
  color: var(--color-highlight);
}
/* Chiều cao cố định 28px: nút chỉ có chữ nên padding dọc tự do làm nó lúc cao lúc thấp
   so với dòng tiêu đề bên trái, hai thứ trong cùng một hàng mà không thẳng nhau. */
.quick-cart__clear-btn {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  background: #f5f6f9;
  border: none;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.quick-cart__clear-btn:hover {
  background: rgba(222, 2, 4, .08);
  color: var(--color-highlight);
}
.quick-cart__body {
  max-height: calc(100vh - 360px);
  min-height: 80px;
  overflow-y: auto;
}
.quick-cart__body::-webkit-scrollbar {
  width: 4px;
}
.quick-cart__body::-webkit-scrollbar-thumb {
  background: #dde1e8;
  border-radius: 4px;
}

/* Row sản phẩm trong quick-cart */
.quick-cart__row {
  display: grid;
  grid-template-columns: 56px 1fr 26px;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid #f4f5f8;
  align-items: start;
}
.quick-cart__thumb {
  flex-shrink: 0;
}
.quick-cart__thumb img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid #f0f0f4;
  display: block;
}
.quick-cart__info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.quick-cart__name {
  font-size: 13px;
  font-weight: 600;
  color: #222;
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
}
.quick-cart__name:hover {
  color: var(--color-highlight);
}
/* Mã hàng trong panel giỏ: cùng kiểu hai cột như danh sách bên trái. */
.quick-cart__sku {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 2px;
  min-width: 0;
  font-size: 11px;
  line-height: 1.3;
  color: #8a90a0;
}
.quick-cart__sku-label {
  flex: 0 0 auto;
  white-space: nowrap;
}
.quick-cart__sku-value {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: var(--color-main);
}
.quick-cart__price {
  font-size: 12px;
  color: #697089;
}
.quick-cart__row-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: 6px;
}
/* Cùng ngôn ngữ với ô số lượng bên danh sách trái, nhỏ hơn một cỡ vì panel hẹp: khung
   30px, nút bấm vuông 24px, con số đậm hơn hai dấu +/-. Bản cũ cao 28px mà nút +/- vẫn
   là hộp 19x22 mặc định, nên con số bị đẩy lệch khỏi trục giữa của khung. */
.quick-cart__stepper {
  flex-shrink: 0;
}
.quick-cart__stepper .product-quantity {
  display: flex;
  align-items: center;
  gap: 0;
  height: 30px;
  padding: 0 2px;
  border-color: #e3e6ee;
  border-radius: 8px;
  background: #fff;
}
.quick-cart__stepper .product-quantity .btn-quantity {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
}
.quick-cart__stepper .product-quantity .btn-quantity:hover {
  background: #f3f4f8;
}
.quick-cart__stepper .product-quantity .btn-quantity i {
  font-size: 12px;
  color: #4a516d;
}
.quick-cart__stepper .number-input {
  width: 30px;
  height: 24px;
  padding: 0;
  border-radius: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-main);
  text-align: center;
}
/* Thành tiền là con số quan trọng nhất của dòng, để ngang cỡ tên sản phẩm chứ không nhỏ
   bằng dòng đơn giá phía trên. */
.quick-cart__subtotal {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-highlight);
  white-space: nowrap;
}
/* Nút xoá: vùng bấm vuông 24px thay cho cái dấu "x" trần mờ 60% — mờ sẵn thì trông như
   đang bị khoá, mà bấm cũng khó trúng. Nghỉ thì xám nhạt, rê vào mới đỏ lên. */
.quick-cart__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 8px;
  color: #121212;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  align-self: flex-start;
  transition: background .2s, color .2s;
  background: #f5f6f9;
}
.quick-cart__remove:hover {
  background: rgba(222, 2, 4, .08);
  color: var(--color-highlight);
}

/* Empty state cart */
.quick-cart__empty {
  text-align: center;
  padding: 32px 16px;
  color: #bbb;
  font-size: 13px;
}
.quick-cart__empty p {
  margin-top: 10px;
  margin-bottom: 0;
}

/* Footer quick cart */
.quick-cart__foot {
  padding: 14px 16px 16px;
  background: #fbfbfd;
  border-top: 1px solid #f1f2f6;
}
.quick-cart__totals {
  margin-bottom: 12px;
}
.quick-cart__total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: #6b7280;
  padding: 3px 0;
}
.quick-cart__total-row--grand {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-main);
  border-top: 1px dashed #e6e8ee;
  margin-top: 6px;
  padding-top: 10px;
}
.quick-cart__grand-value {
  color: var(--color-highlight);
}
.btn-buy-quick {
  display: block;
  width: 100%;
  background: var(--color-highlight);
  color: #fff !important;
  padding: 13px 16px;
  text-align: center;
  border-radius: 12px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .2px;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(222, 2, 4, .26);
  transition: box-shadow .2s, transform .2s, background .2s;
  cursor: pointer;
}
.btn-buy-quick:hover {
  background: #c40204;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(222, 2, 4, .32);
  transform: translateY(-1px);
}
.btn-buy-quick.is-disabled {
  background: #d9dbe2;
  box-shadow: none;
  pointer-events: none;
  cursor: not-allowed;
}

/* Responsive */
@media (max-width: 991px) {
  .box-quick-buy {
    flex-direction: column;
  }
  .quick-buy-right {
    width: 100%;
    position: static;
  }
  .quick-cart__body {
    max-height: 50vh;
  }
}

/* ===== Khổ điện thoại: giỏ hàng thành tấm trượt từ đáy =====
   Dưới 768px panel giỏ nằm cuối trang, tức là sau cả danh sách hàng lẫn phân trang.
   Thêm một món ở giữa danh sách thì không thấy giỏ nhúc nhích, mà muốn bấm "Tiến hành
   đặt hàng" phải cuộn qua hết danh sách — thao tác chính của màn lại là thứ khó với tới
   nhất. Nên ở khổ này panel rời khỏi luồng trang, thu về một nút nổi góc phải dưới;
   bấm vào thì trượt lên.

   Nền mờ dùng lại `body.dark-overlay` có sẵn của theme (`page.css`, `body::after`,
   z-index 1020) — cùng thứ mini-cart và menu ngang đang dùng, nên không bao giờ có hai
   lớp nền chồng nhau. Tấm trượt để 1051, ngang `.sidebar-mini-cart`.

   Trạng thái mở nằm ở class `qp-cart-open` trên `<body>`, KHÔNG phải trên tấm trượt:
   `reloadCart()` thay nguyên ruột `[nh-quick-buy="right"]` sau mỗi lượt +/-, class nằm
   trong đó thì bấm một cái là tấm trượt tự đóng ngay giữa chừng. */
@media (max-width: 767.98px) {
  /* Ô cũ của panel trong luồng trang xẹp về 0: ruột nó nay là một lớp phủ toàn màn. */
  .quick-buy-right {
    position: static;
    min-height: 0;
  }

  .quick-cart-wrap {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1051;
    pointer-events: none;
  }

  /* `--qp-fab-bottom` do `member.js` đo: bố cục điện thoại có thể có thanh điều hướng
     `.toolbar` dán đáy, mà thanh ấy do người quản trị gắn theo từng bố cục nên không
     chốt cứng được một con số. Không có JS thì rơi về 14px. */
  .qp-cart-fab {
    position: absolute;
    right: 14px;
    bottom: 70px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--color-highlight);
    color: #ffffff;
    font-size: 20px;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 8px 22px rgba(222, 2, 4, .38);
    transition: transform .22s, opacity .22s, background .22s, box-shadow .22s;
  }
  /* Giỏ rỗng thì nút vẫn còn — nó là lối vào duy nhất của panel ở khổ này — nhưng lùi
     về xám để khỏi tranh chỗ với nút thêm hàng màu đỏ trong danh sách. */
  .qp-cart-fab.is-empty {
    background: #6b7280;
    box-shadow: 0 6px 16px rgba(17, 28, 45, .28);
  }
  .qp-cart-fab__count {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 21px;
    height: 21px;
    padding: 0 5px;
    border: 2px solid #ffffff;
    border-radius: 999px;
    background: #111827;
    font-size: 11px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
  }
  /* Nhịp nảy sau mỗi lượt giỏ đổi: panel đang khuất nên nút nổi là chỗ duy nhất báo
     được "đã thêm xong". */
  .qp-cart-fab.is-bumped {
    animation: qpFabBump .45s ease;
  }
  /* Mở tấm trượt rồi thì cất nút đi — nó đứng đúng chỗ tấm trượt vừa phủ lên. */
  body.qp-cart-open .qp-cart-fab {
    opacity: 0;
    transform: scale(.82);
    pointer-events: none;
  }

  .quick-cart {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    max-height: 86vh;
    max-height: 86dvh;
    border: 0;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -10px 34px rgba(17, 28, 45, .22);
    transform: translate3d(0, 100%, 0);
    transition: transform .28s cubic-bezier(.32, .72, 0, 1);
    pointer-events: auto;
  }
  body.qp-cart-open .quick-cart {
    transform: translate3d(0, 0, 0);
  }

  .quick-cart__grabber {
    display: block;
    flex-shrink: 0;
    width: 42px;
    height: 4px;
    margin: 8px auto 0;
    border-radius: 999px;
    background: #dfe2ea;
    cursor: pointer;
  }

  .quick-cart__head {
    flex-shrink: 0;
    gap: 8px;
    padding: 12px 14px;
  }
  .quick-cart__title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 15px;
  }
  .quick-cart__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #f4f5f8;
    color: #4b5563;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: background .2s, color .2s;
  }
  .quick-cart__close:hover {
    background: rgba(222, 2, 4, .08);
    color: var(--color-highlight);
  }

  /* Ruột cuộn, chân đứng yên: tổng tiền và nút đặt hàng phải luôn nhìn thấy, không thì
     lại đúng cái bệnh vừa chữa — thao tác chính trốn dưới đáy một danh sách dài. */
  .quick-cart__body {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overscroll-behavior: contain;
  }
  .quick-cart__foot {
    flex-shrink: 0;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }

  /* Khoá cuộn nền: thiếu nó thì vuốt hết danh sách trong tấm trượt là kéo luôn trang
     phía sau đi theo. */
  body.qp-cart-open {
    overflow: hidden;
  }
}

@keyframes qpFabBump {
  0% { transform: scale(1); }
  35% { transform: scale(1.18); }
  60% { transform: scale(.94); }
  100% { transform: scale(1); }
}

@media (max-width: 575px) {
  .box-quick-buy {
    gap: 12px;
  }
  /* Dòng hàng trong giỏ theo cùng bộ số với danh sách bên trái ở khổ này, để hai khối
     không lệch nhịp nhau khi tấm trượt phủ lên danh sách. */
  .quick-cart__row {
    grid-template-columns: 52px 1fr 24px;
    gap: 10px;
    padding: 10px 14px;
  }
  .quick-cart__thumb img {
    width: 52px;
    height: 52px;
  }
  /* Giữ lại phần chừa cho vạch home của iOS mà khối 768px vừa đặt — luật này đứng sau
     nên ghi đè nguyên cái `padding`, viết thiếu là mất. */
  .quick-cart__foot {
    padding: 12px 14px calc(14px + env(safe-area-inset-bottom));
  }
  .quick-cart__totals {
    margin-bottom: 10px;
  }
  .qp-cat-filter {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 10px;
    margin-bottom: 12px;
  }
  .qp-cat-filter::-webkit-scrollbar {
    display: none;
  }
  .qp-cat-chip {
    flex-shrink: 0;
  }
  .qp-cat-chip__name {
    max-width: 120px;
  }
  .qp-product-row {
    padding: 8px;
    gap: 8px;
    align-items: flex-start;
  }
  .qp-row-thumb {
    width: 72px;
    height: 72px;
  }
  /* Dưới 576px không đủ chỗ cho hai cột: xếp dọc lại, giá và nút thêm giỏ về chung
     một hàng nằm dưới — giá bên trái, ô số lượng và nút bên phải. */
  .qp-row-main {
    flex-direction: column;
    gap: 8px;
  }
  .qp-row-side {
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .qp-row-title {
    font-size: 13px;
    -webkit-line-clamp: 2;
  }
  .qp-row-sku {
    font-size: 11px;
  }
  .qp-row-sku__value {
    font-size: 11px;
  }
  .qp-row-price .price-amount.qp-price-current {
    font-size: 13px;
  }
  .qp-row-price .price-amount.qp-price-old {
    font-size: 10px;
  }
  .qp-row-controls {
    gap: 6px;
  }
  .qp-dd {
    max-width: 100%;
  }
  .qp-dd__trigger {
    height: 32px;
    font-size: 12px;
    padding: 0 8px;
  }
  .qp-dd__selected-price {
    font-size: 12px;
  }
  /* Bớt một cỡ so với desktop nhưng vẫn giữ luật cũ: ô số lượng và nút thêm giỏ cao
     bằng nhau (32px), nút vuông. */
  .qp-qty-wrap .product-quantity {
    height: 32px;
    padding: 0 2px;
  }
  .qp-qty-wrap .product-quantity .btn-quantity {
    width: 20px;
    height: 20px;
  }
  .qp-qty-wrap .product-quantity .btn-quantity i {
    font-size: 12px;
  }
  .qp-qty-wrap .number-input {
    width: 26px;
    height: 26px;
    font-size: 13px;
  }
  .qp-btn-add {
    margin-left: auto;
    height: 32px;
    min-width: 32px;
    padding: 0 8px;
  }
  .qp-btn-add-text {
    display: none;
  }
  .qp-btn-add i {
    font-size: 14px;
  }
  .qp-dd__menu {
    max-height: 50vh;
    padding: 2px;
    z-index: 50;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .18);
  }
  .qp-dd__opt {
    padding: 8px;
    gap: 6px;
  }
  .qp-dd__opt-name {
    font-size: 12px;
    white-space: normal;
    line-height: 1.3;
  }
  .qp-dd__opt-price,
  .qp-dd__opt-price-old {
    font-size: 11px;
  }
}

/* ===== Thanh tab (Yêu thích / Đã mua / Mua nhanh) =====
   Kiểu viên thuốc: cả thanh là một rãnh xám, tab đang mở là viên trắng nổi lên. Gọn hơn
   kiểu gạch chân cũ và không cần thêm tiêu đề lặp lại tên tab ở phía trên. */
.qp-tabs {
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  margin-bottom: 18px;
  max-width: 100%;
  background: #f4f5f8;
  border-radius: 999px;
}
.qp-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 18px;
  border: 0;
  background: transparent;
  color: #6b7280;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  border-radius: 999px;
  transition: color .2s, background .2s, box-shadow .2s;
}
.qp-tab i {
  font-size: 14px;
}
.qp-tab:hover {
  color: var(--color-main);
}
.qp-tab.is-active {
  background: #ffffff;
  color: var(--color-highlight);
  box-shadow: 0 2px 8px rgba(17, 28, 45, .10);
}
.qp-tab-pane {
  display: none;
}
.qp-tab-pane.is-active {
  display: block;
}

/* ===== Loading state cho tab Mua nhanh ===== */
.qp-all-list-wrap.qp-loading {
  opacity: .6;
  pointer-events: none;
  position: relative;
  min-height: 120px;
}
.qp-all-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px 16px;
  color: #9aa0b4;
  font-size: 14px;
}
.qp-all-placeholder i {
  font-size: 18px;
  color: var(--color-highlight);
}

/* ===== Dropdown danh mục (1 dòng + panel scroll) ===== */
.qp-cat-dropdown {
  position: relative;
  margin-bottom: 14px;
}
.qp-cat-dd__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 40px;
  padding: 0 14px;
  border: 1.5px solid #eef0f4;
  border-radius: 10px;
  background: #fff;
  color: #4a516d;
  font-size: 13px;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
}
.qp-cat-dd__trigger:hover {
  border-color: var(--color-highlight);
}
.qp-cat-dropdown.is-open .qp-cat-dd__trigger {
  border-color: var(--color-highlight);
  box-shadow: 0 0 0 3px rgba(222, 2, 4, .10);
}
.qp-cat-dd__label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qp-cat-dd__label b {
  color: #2c3145;
  font-weight: 600;
  margin-left: 4px;
}
.qp-cat-dd__caret {
  color: #9aa0b4;
  font-size: 12px;
  transition: transform .2s;
}
.qp-cat-dropdown.is-open .qp-cat-dd__caret {
  transform: rotate(180deg);
  color: var(--color-highlight);
}
.qp-cat-dd__panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 40;
  background: #fff;
  border: 1px solid #eef0f4;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(20, 24, 60, .12);
  display: none;
  overflow: hidden;
}
.qp-cat-dropdown.is-open .qp-cat-dd__panel {
  display: block;
}
.qp-cat-dd__search {
  position: relative;
  padding: 10px;
  border-bottom: 1px solid #eef0f4;
}
.qp-cat-dd__search i {
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  color: #9aa0b4;
  font-size: 13px;
  pointer-events: none;
}
.qp-cat-dd__search input {
  width: 100%;
  height: 34px;
  padding: 0 12px 0 32px;
  border: 1.5px solid #eef0f4;
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
  color: #2c3145;
  outline: none;
  transition: border-color .2s;
}
.qp-cat-dd__search input:focus {
  border-color: var(--color-highlight);
}
.qp-cat-dd__list {
  max-height: 280px;
  overflow-y: auto;
  padding: 6px;
}
.qp-cat-dd__list::-webkit-scrollbar {
  width: 6px;
}
.qp-cat-dd__list::-webkit-scrollbar-thumb {
  background: #d8dbe6;
  border-radius: 3px;
}
.qp-cat-dd__opt {
  display: block;
  padding: 8px 10px;
  color: #4a516d;
  font-size: 13px;
  text-decoration: none;
  border-radius: 6px;
  transition: background .15s, color .15s;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qp-cat-dd__opt:hover {
  background: #f6f7fb;
  color: var(--color-highlight);
  text-decoration: none;
}
.qp-cat-dd__opt.is-active {
  background: rgba(222, 2, 4, .12);
  color: var(--color-highlight);
  font-weight: 600;
}
.qp-cat-dd__opt-bullet {
  color: #c1c5d4;
  margin-right: 4px;
}

@media (max-width: 575px) {
  /* Ba tab không vừa một màn hẹp. Cho cả rãnh chiếm trọn bề ngang rồi chia đều ba phần
     thay vì cuộn ngang: ba mục cố định thì chia đều vẫn đọc được, mà không giấu mục nào
     ra ngoài mép màn hình. */
  .qp-tabs {
    display: flex;
    width: 100%;
  }
  .qp-tab {
    flex: 1 1 0;
    min-width: 0;
    padding: 8px 6px;
    font-size: 12.5px;
    gap: 5px;
  }
  .qp-tab span {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .qp-cat-dd__panel {
    max-height: 60vh;
    overflow-y: auto;
  }
  .qp-cat-dd__list {
    max-height: none;
  }
}

/* ===== Bulk select bar (tab Mua nhanh) ===== */
.qp-bulk-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  margin-bottom: 12px;
  background: #f8f9fc;
  border: 1px solid #eef0f4;
  border-radius: 10px;
  flex-wrap: wrap;
}
.qp-bulk-bar__check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  cursor: pointer;
  user-select: none;
}
.qp-bulk-bar__check-text {
  font-size: 13px;
  font-weight: 600;
  color: #2c3145;
}
.qp-bulk-bar__count {
  font-size: 13px;
  color: #6b7186;
  margin-right: auto;
}
.qp-bulk-bar__count b {
  color: var(--color-highlight);
  font-weight: 700;
  margin: 0 2px;
}
.qp-bulk-bar__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: 8px;
  background: var(--color-highlight);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .2s, transform .1s;
}
.qp-bulk-bar__btn:hover:not(:disabled) {
  opacity: .9;
}
.qp-bulk-bar__btn:active:not(:disabled) {
  transform: translateY(1px);
}
.qp-bulk-bar__btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}
.qp-bulk-bar__btn.loading {
  opacity: .65;
  pointer-events: none;
}
/* Huy hiệu số nằm trong nút là bản khổ hẹp của dòng "Đã chọn: N" — ở khổ rộng dòng chữ
   đầy đủ đứng giữa thanh nên huy hiệu ẩn đi, không nói hai lần một con số. */
.qp-bulk-bar__btn-count {
  display: none;
  min-width: 20px;
  height: 18px;
  margin-left: 7px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .24);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

/* Checkbox custom (dùng chung cho bulk-bar + per-row) */
.qp-row-check,
.qp-bulk-bar__check {
  position: relative;
}
.qp-row-check {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  margin: 0 4px 0 0;
  cursor: pointer;
}
.qp-row-check input[type="checkbox"],
.qp-bulk-bar__check input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.qp-row-check__box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 1.5px solid #d8dbe6;
  border-radius: 5px;
  background: #fff;
  color: transparent;
  font-size: 11px;
  transition: background .15s, border-color .15s, color .15s;
}
.qp-row-check input[type="checkbox"]:checked + .qp-row-check__box,
.qp-bulk-bar__check input[type="checkbox"]:checked + .qp-row-check__box {
  background: var(--color-highlight);
  border-color: var(--color-highlight);
  color: #fff;
}
.qp-bulk-bar__check input[type="checkbox"]:indeterminate + .qp-row-check__box {
  background: var(--color-highlight);
  border-color: var(--color-highlight);
  color: #fff;
}
.qp-bulk-bar__check input[type="checkbox"]:indeterminate + .qp-row-check__box i::before {
  content: "\f068";
}
.qp-row-check:hover .qp-row-check__box,
.qp-bulk-bar__check:hover .qp-row-check__box {
  border-color: var(--color-highlight);
}

/* Selectable row layout */
.qp-product-row--selectable {
  align-items: center;
}

@media (max-width: 575px) {
  /* Ba phần tử vừa một dòng khi con số dọn sang nằm trong nút. Bản cũ đẩy "Đã chọn: N"
     xuống một dòng riêng canh giữa (`width: 100%; order: 3`), thành ra một thanh công
     cụ ba phần tử chiếm ba dòng — mà dòng bị đẩy xuống lại là dòng ít việc nhất. */
  .qp-bulk-bar {
    padding: 8px 10px;
    gap: 8px;
    flex-wrap: nowrap;
  }
  .qp-bulk-bar__count {
    display: none;
  }
  .qp-bulk-bar__btn-count {
    display: inline-block;
  }
  /* Chưa chọn gì thì nút đang khoá, huy hiệu "0" chỉ là thêm một con số vô nghĩa vào
     một nút không bấm được. `:disabled` chính là "đếm bằng 0" — `refreshBulkState()`
     lật hai thứ ấy cùng một lượt. */
  .qp-bulk-bar__btn:disabled .qp-bulk-bar__btn-count {
    display: none;
  }
  /* Nhãn gánh phần đẩy nút sang phải, việc mà `.qp-bulk-bar__count` đang làm ở khổ rộng. */
  .qp-bulk-bar__check {
    margin-right: auto;
    min-width: 0;
  }
  .qp-bulk-bar__check-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Thanh không xuống dòng nữa nên nút phải tự giữ bề ngang, không thì nhãn dài
     (bản dịch tiếng Nhật chẳng hạn) bóp nó lại thành một vệt đỏ. */
  .qp-bulk-bar__btn {
    flex-shrink: 0;
    height: 32px;
    padding: 0 12px;
    font-size: 12px;
  }
  .qp-row-check {
    margin-right: 2px;
  }
  .qp-row-check__box {
    width: 18px;
    height: 18px;
  }
}

/* ===== Đặt hàng nhanh trong khu tài khoản (/member/dat-hang-nhanh) =====
   View riêng (`Member/quick_order.tpl`), chung ruột với trang `/dat-hang-nhanh` qua element
   `QuickOrder/panel` — nên phần `.quick-purchase`, `.qp-*`, `.quick-cart*` ở dưới file dùng
   lại nguyên vẹn, ở đây chỉ có phần vỏ: tiêu đề và mốc xuống hàng của panel giỏ hàng.

   Tiêu đề không mượn hero `title-index` của trang riêng (dòng nhỏ + hai gạch tam giác, canh
   giữa, chữ 3.6rem): trong khu tài khoản đã có menu bên trái nói mình đang ở đâu, để hero thì
   nó át cả nội dung.

   Chép NGUYÊN bộ của `.member-wishlist-head` / `.address-book-head` / `.order-page-head`:
   nằm trong thẻ trắng, chữ 18px canh trái, gạch chân ngăn với ruột bên dưới. Bản trước chỉ
   có `margin-bottom` và đứng ngoài thẻ, nên bốn trang của khu tài khoản mở cạnh nhau thì
   riêng trang này tiêu đề trôi trên nền xám, không thẳng hàng với ba trang kia.

   `justify-content: space-between` giữ lại dù ở đây tiêu đề đang đứng một mình — ba trang
   anh em đều xếp một viên đếm hoặc một nút hành động vào chỗ trống bên phải, thêm vào sau
   thì không phải sửa lại khung. */
.member-quick-order-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f1f5f9;
}

.member-quick-order-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  color: #0f172a;
}

/* Panel giỏ hàng rộng cố định 348px. Cột nội dung ở đây đã mất 260px cho menu, nên dưới
   1200px danh sách hàng bên trái chỉ còn hơn 300px — ảnh, tên và ô số lượng dính vào nhau.
   Cho panel xuống dưới sớm hơn mốc 992px mà trang riêng đang dùng. */
@media (max-width: 1199.98px) {
  .member-col-main .box-quick-buy {
    flex-direction: column;
  }

  .member-col-main .quick-buy-right {
    width: 100%;
    position: static;
  }
}

/* ============================================================
   Khung bảng danh sách đơn — dùng ở /member/order và ở khối
   "Đơn hàng gần đây" của /member/dashboard (bản desktop).
   Khối lọc phía trên (`.box-order-page-top`) nằm ở custom.css.
   ============================================================ */
/* ===== Trang danh sách đơn (/member/order) =====
   Thẻ trắng bọc ngoài dùng đúng bộ panel của khu tài khoản (`.address-book`,
   `.quick-purchase`, `.box-order-detail`): viền #eef2f7, bo 14px, bóng nhẹ. Mọi khối bên
   trong — dải tab thời gian, bốn ô thống kê, khối lọc, khung bảng — là thẻ con nằm trong
   nó, cùng viền #e2e8f0 bo 12px. */
.box-order-page {
  padding: 20px 22px 22px;
  background-color: #ffffff;
  border: 1px solid #eef2f7;
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
}

.box-order-page .order-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f1f5f9;
}

.box-order-page .order-page-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  color: #0f172a;
}

/* Nút mở và phần đầu riêng của bộ lọc chỉ dùng khi khối lọc trở thành bottom sheet ở
   màn hình dưới desktop lớn. Từ 1200px, bộ lọc tiếp tục hiển thị trong luồng trang. */
.order-filter-toggle,
.order-filter-sheet-head,
.order-filter-grabber {
  display: none;
}

/* Khung bảng và khối lọc là thẻ con của thẻ trắng nên đổi viền cho khớp — cùng màu với
   thẻ con ở `/member/address` và `/member/order/detail`.

   Bảng phải chọn bằng CẢ HAI class của thẻ bọc: `.box-order-dashboard .list-order` khai
   `border` dạng viết tắt và nằm ngay bên dưới đây, cùng độ ưu tiên thì luật đứng sau
   thắng — chọn hai class là khỏi phụ thuộc thứ tự dòng. */
.box-order-dashboard.box-order-page .list-order,
.box-order-page .box-order-page-top {
  border-color: #e2e8f0;
}

@media (max-width: 1199.98px) {
  .box-order-page {
    padding: 16px 14px 18px;
  }

  .box-order-page .order-page-head {
    margin-bottom: 14px;
    padding-bottom: 14px;
  }

  .order-filter-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    gap: 7px;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    background: #f8fafc;
    color: #334155;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: border-color .2s, background-color .2s, color .2s;
  }

  .order-filter-toggle:hover,
  .order-filter-toggle:focus,
  body.order-filter-open .order-filter-toggle {
    border-color: var(--color-highlight);
    background: #fff5f5;
    color: var(--color-highlight);
  }

  body.order-filter-open {
    overflow: hidden;
  }

  .box-order-page .box-order-page-top {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1051;
    display: flex;
    flex-direction: column;
    max-height: 88vh;
    max-height: 88dvh;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 0;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -10px 34px rgba(17, 28, 45, .22);
    transform: translate3d(0, 100%, 0);
    transition: transform .28s cubic-bezier(.32, .72, 0, 1), visibility 0s linear .28s;
    visibility: hidden;
  }

  body.order-filter-open .box-order-page .box-order-page-top {
    transform: translate3d(0, 0, 0);
    transition-delay: 0s;
    visibility: visible;
  }

  .order-filter-grabber {
    display: block;
    flex: 0 0 auto;
    width: 42px;
    height: 4px;
    margin: 8px auto 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #dfe2ea;
    cursor: pointer;
  }

  .order-filter-sheet-head {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 auto;
    gap: 10px;
    padding: 10px 14px 12px;
    border-bottom: 1px solid #eef2f7;
    background: #fff;
    font-size: 15px;
    color: #0f172a;
  }

  .order-filter-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #f4f5f8;
    color: #4b5563;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
  }

  .order-filter-close:hover,
  .order-filter-close:focus {
    background: rgba(222, 2, 4, .08);
    color: var(--color-highlight);
  }
}

/* Giữ nguyên khoảng đệm tablet/laptop nhỏ vốn có; mốc 1200px ở trên chỉ mở rộng hành
   vi bottom sheet cho vùng nội dung hẹp sau menu tài khoản. */
@media (min-width: 576px) and (max-width: 1199.98px) {
  .box-order-page {
    padding: 20px 22px 22px;
  }

  .box-order-page .order-page-head {
    margin-bottom: 18px;
    padding-bottom: 16px;
  }
}

.box-order-dashboard .list-order {
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #ddd;
}

.box-order-dashboard .list-order table {
  margin-bottom: 0;
  font-size: 14px;
}

/* Hàng tiêu đề: nền xám nhạt, chữ slate.

   Bản trước là dải hồng pha từ `--color-highlight` với chữ đỏ. Trong thẻ trắng của khu
   tài khoản — nơi mọi đường kẻ đều là #eef2f7 mảnh — dải ấy là mảng màu nặng nhất của cả
   bảng, mà nó lại đè lên đúng thứ cần được nhìn thấy trước: nhãn trạng thái của từng đơn,
   vốn cũng nói bằng màu. Tên cột chỉ cần đọc được lúc người ta đi tìm nó, không cần giành
   sự chú ý.

   Xám còn là màu duy nhất không phải tính lại cho từng site: theme này dùng chung, mỗi
   site một `--color-highlight`, mà không phải màu chủ đạo nào pha loãng 8% cũng ra một
   nền đọc được. */
.box-order-dashboard .list-order table thead tr th {
  background: #f8fafc;
  border: 0;
  border-bottom: 1px solid #eef2f7;
  height: 46px;
  padding: 12px 14px;
  vertical-align: middle;
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
}

/* Sọc chẵn–lẻ #f1f1f1 của `.responsive-table` (page.css) tắt hẳn: nó cắt bảng thành từng
   băng xám dày bằng nhau, đậm hơn cả viền của khung chứa nó, mà một bảng năm cột thì
   không cần sọc để dò cho khỏi lạc dòng. Dòng phân biệt nhau bằng đường kẻ mảnh, và bằng
   nền sáng lên khi rê chuột — việc mà sọc cố định không làm được. */
.box-order-dashboard .list-order table tbody tr:nth-of-type(even) {
  background-color: transparent;
}

/* `border-top: 0` là để dọn luật `.table th, .table td` của bootstrap (#dee2e6): để
   nguyên thì mỗi khe giữa hai dòng có hai đường kẻ chồng nhau, một đậm một nhạt. Đường kẻ
   ở đây đi bằng `border-bottom` để dòng cuối gỡ được nó ra khỏi mép khung. */
.box-order-dashboard .list-order table tbody tr th,
.box-order-dashboard .list-order table tbody tr td {
  height: 58px;
  padding: 12px 14px;
  border-top: 0;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
  color: #334155;
}

.box-order-dashboard .list-order table tbody tr:last-child th,
.box-order-dashboard .list-order table tbody tr:last-child td {
  border-bottom: 0;
}

/* Chỉ từ 768px trở lên — dưới đó bảng đã đổ thành từng khối dòng, không còn "hàng" nào
   để làm nổi lên. */
@media (min-width: 48em) {
  .box-order-dashboard .list-order table tbody tr {
    transition: background-color 0.15s ease;
  }

  .box-order-dashboard .list-order table tbody tr:hover {
    background-color: #fafbfd;
  }
}

.box-order-dashboard .list-order table tbody tr th a {
  font-weight: 400;
}

.box-order-dashboard .list-order table thead tr th:last-child {
  text-align: right;
}

.box-order-dashboard .list-order table tbody tr td:last-child {
  text-align: right !important;
}

/* Cột trạng thái canh giữa. Phải đè `!important` của luật `td:last-child` ngay trên:
   ở bảng dashboard cột trạng thái LÀ cột cuối, để canh phải thì nhãn dính mép khung. */
.box-order-dashboard .list-order table thead tr th.col-status,
.box-order-dashboard .list-order table tbody tr td.col-status {
  text-align: center !important;
}

/* ===== Các cột riêng của bảng danh sách đơn =====
   Bảng sản phẩm ở trang chi tiết dùng chung khung `.list-order` nhưng khác hẳn bộ cột,
   nên mọi luật dưới đây gói trong `.box-order-page`. */

/* Mã đơn là đường vào trang chi tiết — cả dòng chỉ có nó bấm được. Bản trước để nó chữ
   thường màu đen y như mọi ô khác, nhìn không ra là một liên kết. */
.box-order-page .list-order table tbody tr th[scope="row"] a {
  font-weight: 600;
  color: #0f172a;
}

.box-order-page .list-order table tbody tr th[scope="row"] a:hover,
.box-order-page .list-order table tbody tr th[scope="row"] a:focus {
  color: var(--color-highlight);
  text-decoration: none;
}

/* Cột tiền canh phải và chữ số cùng bề rộng: số tiền ở đây chênh nhau tới ba chữ số
   (140,000 cạnh 6,450,000), canh giữa thì cả hai mép đều lởm chởm và nhìn lướt không so
   được dòng nào lớn hơn dòng nào. */
.box-order-page .list-order table thead tr th.col-money,
.box-order-page .list-order table tbody tr td.col-money {
  text-align: right;
}

.box-order-page .list-order .order-amount {
  font-weight: 600;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
}

/* Đơn vị tiền nhạt và nhỏ hơn: nó lặp y hệt ở mọi dòng, không mang tin gì, mà để cùng cỡ
   cùng màu với con số thì nó cắt mất cột chữ số vừa dóng thẳng ở trên. */
.box-order-page .list-order .order-currency {
  margin-left: 2px;
  font-size: 12.5px;
  font-weight: 400;
  color: #94a3b8;
}

/* Ngày đặt là thông tin phụ: xám hơn mã đơn và số tiền, và không bao giờ được xuống dòng
   giữa giờ với ngày. */
.box-order-page .list-order table tbody tr td.col-date {
  color: #64748b;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Bề rộng cột thao tác: dòng đầy đủ nhất là "Mua lại" có chữ (~105px) + khe + nút huỷ
   32px + đệm ô. Đặt ở đây chứ không phải `style="width: 170px"` trên `<th>` như bản trước —
   sửa bề rộng nút mà quên con số nằm lẫn trong template thì nút rớt xuống dòng. */
.box-order-page .list-order table thead tr th.col-action {
  width: 172px;
}

/* Nút thao tác trong bảng. Trước đây nút huỷ là SVG 24px tự vẽ sẵn khung vuông, nút
   xác nhận là glyph fa-light trần — hai thứ khác cỡ, khác nét, đứng cạnh nhau thành
   lệch. Nay cả hai cùng một họ icon và cùng một khuôn 32px. */
/* Dồn phải, chỉ có nút nào vẽ nút ấy. Bản trước có thêm ba ô rộng cố định để các dòng
   thẳng cột nhau; bỏ đi vì đơn nháp không có nút "mua lại" nên ô giữa thành một lỗ trống
   nằm giữa hai nút. Dồn phải thì nút cuối vẫn thẳng hàng ở mọi dòng, mà không dòng nào
   có lỗ. */
.box-order-dashboard .list-order .order-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.box-order-dashboard .list-order .order-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background-color: #fff;
  font-size: 14px;
  line-height: 1;
  color: #697089;
  transition: all 0.2s ease;
}

.box-order-dashboard .list-order .order-action:hover,
.box-order-dashboard .list-order .order-action:focus {
  border-color: #cbd5e1;
  background-color: #f6f7f9;
  color: #1c1c1e;
  text-decoration: none;
}

/* Biến thể có chữ (nút "Mua lại"): bỏ khuôn vuông 32px, nới ngang vừa chữ. Icon một
   mình đọc ra "tải lại" chứ không ra "mua lại", mà bấm nhầm thì cả đơn cũ đổ vào giỏ. */
.box-order-dashboard .list-order .order-action.has-text {
  width: auto;
  gap: 6px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.box-order-dashboard .list-order .order-action.is-cancel:hover,
.box-order-dashboard .list-order .order-action.is-cancel:focus {
  border-color: #f2cfcf;
  background-color: #feedee;
  color: var(--color-highlight);
}

.box-order-dashboard .list-order .order-action.is-rebuy:hover,
.box-order-dashboard .list-order .order-action.is-rebuy:focus {
  border-color: var(--color-highlight);
  background-color: #fff5f5;
  color: var(--color-highlight);
}

/* Phân trang là dải chân của chính khung bảng, ngăn bằng một đường kẻ — bản trước thả nó
   trôi giữa khoảng trắng trong khung, không dính vào bảng cũng chẳng dính vào đâu.

   Bộ giá trị nút chép từ `.member-wishlist .pagination` phía trên (nút bo tròn nền xám,
   trang đang đứng tô màu nhấn) thay vì mở rộng phạm vi của nó: hai trang không dùng chung
   khuôn phân trang, ở đây nó còn phải nằm gọn trong khung bảng. Kiểu mặc định của page.css
   là ô vuông 40px viền đen, lạc hẳn khỏi bảng màu khu tài khoản. */
.box-order-page .list-order .pagination {
  margin: 0;
  padding: 14px 12px;
  border-top: 1px solid #eef2f7;
  justify-content: center;
  gap: 6px;
}

.box-order-page .list-order .pagination .page-item {
  padding-left: 0;
  padding-right: 0;
}

/* `width: auto` là bắt buộc: `.pagination .page-link` của page.css khoá cứng `width: 40px`,
   mà `min-width` không đè được một `width` đã khai. */
.box-order-page .list-order .pagination .page-item .page-link {
  width: auto;
  min-width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: #f5f6f9;
  color: #4b5563;
  font-size: 13px;
  font-weight: 600;
  transition: background 0.18s, color 0.18s;
}

.box-order-page .list-order .pagination .page-item .page-link:hover {
  background: rgba(222, 2, 4, 0.08);
  color: var(--color-highlight);
  text-decoration: none;
}

.box-order-page .list-order .pagination .page-item.active .page-link {
  background: var(--color-highlight);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(222, 2, 4, 0.28);
}

.box-order-page .list-order .pagination .page-item.disabled .page-link {
  background: transparent;
  color: #c1c5d0;
}

/* 768–1199px: từ 1024px menu tài khoản chiếm 260px nên cột nội dung lại hẹp hơn cả ở
   tablet đứng. Giữ bảng đúng cấu trúc năm cột, cho khung cuộn ngang và khoá bề rộng đủ
   để ngày, trạng thái, cụm thao tác không bị ép vỡ hoặc cắt mất. */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .box-order-page .list-order {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  .box-order-page .list-order table {
    min-width: 760px;
  }

  /* Hai ô nhập nằm cùng hàng; nút áp dụng xuống hàng riêng. Cách này ổn định cả khi
     cột nội dung chỉ còn khoảng 650px sau menu và padding. */
  .box-order-page .search-order-form .form-group {
    flex: 1 1 calc(50% - 6px);
  }

  .box-order-page .search-order-button {
    flex: 1 0 100%;
    width: 100%;
  }

  .box-order-page .search-order-button .btn-success {
    width: 100%;
  }
}

/* ===== Khung rỗng của danh sách đơn =====
   Cùng khuôn với khung rỗng của trang yêu thích (`.wishlist-empty`, custom.css): viên tròn
   nhạt bọc một icon, một câu, rồi một nút dẫn đi đâu đó. Bản trước là ảnh
   `empty-order.svg` cỡ thật đặt giữa một ô cao — to, xám, và không mở lối nào: khách
   đọc xong "hiện chưa có đơn hàng" thì hết đường, phải tự tìm cách rời trang. */
.box-order-dashboard .order-empty {
  padding: 52px 20px 56px;
  text-align: center;
}

.box-order-dashboard .order-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background-color: #f6f7f9;
  color: #b6bdcb;
  font-size: 30px;
}

.box-order-dashboard .order-empty-text {
  margin: 16px 0 20px;
  font-size: 14.5px;
  line-height: 1.5;
  color: #64748b;
}

.box-order-dashboard .order-empty-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 20px;
  border: 1px solid var(--color-highlight);
  border-radius: 10px;
  background-color: var(--color-highlight);
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  transition: all 0.2s ease;
}

.box-order-dashboard .order-empty-action:hover,
.box-order-dashboard .order-empty-action:focus {
  color: #ffffff;
  text-decoration: none;
  filter: brightness(1.1);
  box-shadow: 0 10px 22px rgba(222, 2, 4, 0.25);
}

@media (max-width: 767.98px) {
  /* Dưới 768px `.responsive-table` đổ bảng thành từng dòng nhãn – giá trị
     (`td[data-title]:before`). Ép flex để nhãn nằm trái, giá trị nằm phải. */
  .box-order-dashboard .list-order table tbody tr th,
  .box-order-dashboard .list-order table tbody tr td {
    padding: 6px 14px;
    border-bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: auto;
  }

  /* Ở khổ này mỗi ĐƠN là một khối nhiều dòng, nên đường kẻ phải nằm giữa hai đơn chứ
     không nằm giữa hai ô — kẻ từng ô thì cả bảng thành một dây dòng đều tăm tắp, không
     nhìn ra đơn nào hết ở đâu. Việc ấy trước đây do sọc chẵn–lẻ làm, mà sọc đã tắt. */
  .box-order-dashboard .list-order table tbody tr {
    padding: 6px 0;
    border-bottom: 1px solid #e8edf3;
  }

  .box-order-dashboard .list-order table tbody tr:last-child {
    border-bottom: 0;
  }

  /* Ô tiền có hai thẻ con (con số và chữ "đ"), cộng với nhãn `:before` là ba mục
     trong một hộp flex `space-between` — nên con số bị đẩy ra chính giữa dòng, đứng
     lẻ giữa nhãn "Tiền" bên trái và chữ "đ" dính mép phải. Dồn cả cụm giá trị sang
     phải bằng `margin-left: auto` ở thẻ đầu: khoảng trống dồn hết vào lề ấy, số tiền
     và đơn vị lại đứng liền nhau như một giá trị. */
  .box-order-page .list-order table tbody tr td.col-money .order-amount {
    margin-left: auto;
  }

  .box-order-page .list-order .pagination {
    padding: 12px 8px;
  }
}

/* ============================================================
   Nhãn trạng thái đơn (.order-status)

   Thay cho `badge badge-primary...` mà `getListStatusOrderTemplate()` trả về: bốn
   class bootstrap ấy gộp bảy trạng thái vào bốn màu — "Chờ thanh toán", "Đơn mới"
   và "Đã xác nhận" cùng một sắc xanh đặc, nhìn lướt qua cột trạng thái không phân
   biệt được đơn nào là đơn nào. Ở đây mỗi trạng thái một sắc riêng, nền pha loãng
   và viền cùng tông, để nhãn không đấu màu với chữ trong bảng.

   Dùng theo mã trạng thái: `class="order-status order-status-{$item.status}"`.
   Bảy mã lấy từ hằng DRAFT/NEW_ORDER/CONFIRM/PACKAGE/EXPORT/DONE/CANCEL.
   ============================================================ */
.order-status {
  display: inline-block;
  padding: 4px 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  text-align: center;
}

/* Chờ thanh toán — việc đang nằm ở phía khách, sắc hổ phách để gọi sự chú ý */
.order-status-draft {
  background: #fff7e6;
  border-color: #fbdfae;
  color: #b45309;
}

/* Đơn mới */
.order-status-new {
  background: #eaf4ff;
  border-color: #c3ddfa;
  color: #1a63bd;
}

/* Đã xác nhận */
.order-status-confirm {
  background: #eef0ff;
  border-color: #ccd2fb;
  color: #4338ca;
}

/* Chờ vận chuyển */
.order-status-package {
  background: #fff1e6;
  border-color: #fbd3b4;
  color: #c2410c;
}

/* Đang chuyển */
.order-status-export {
  background: #e6f8fb;
  border-color: #b6e6ef;
  color: #0e7490;
}

/* Thành công */
.order-status-done {
  background: #e9f9ef;
  border-color: #bfe9cf;
  color: #15803d;
}

/* Đã huỷ — xám chứ không đỏ: đơn huỷ là chuyện đã xong, không phải lỗi cần báo
   động, và đỏ ở đây sẽ đấu với màu chủ đạo của site. */
.order-status-cancel {
  background: #f2f4f7;
  border-color: #dfe3e9;
  color: #57637a;
}

/* ============================================================
   Chi tiết đơn hàng (/member/order/detail/{code})

   Mọi luật gói trong `.box-order-detail`: `.order-card`, `.order-summary`,
   `.order-step`, `.order-product` là những cái tên quá chung để thả ra toàn cục —
   cùng lý do khiến dải thống kê ở custom.css phải gói trong `.box-order-page`.
   Ngoại lệ duy nhất là `.order-status` (khối phía trên): nhãn ấy cố ý dùng chung cho
   cả trang danh sách, dashboard lẫn trang này.

   Khung ngoài dùng ĐÚNG bộ panel của khu tài khoản (`.address-book`, `.member-wishlist`,
   `.quick-purchase`, `.account-nav`): viền #eef2f7, bo 14px, đổ bóng nhẹ.

   Ba quyết định định hình cả trang:

   1. MỘT dải xám. Trang này trước đi bằng xám iOS (#8e8e93, #e5e5ea, #e2e8f0) trong khi
      bảng `.list-order` nằm giữa trang đi bằng slate (#64748b, #eef2f7, nền #f8fafc).
      Hai dải xám lệch sắc đứng cạnh nhau thì cái ngả xanh làm cái ngả nâu trông như ố.
      Nay cả trang theo dải slate của bảng.

   2. Thẻ con là MẢNG NỀN, không phải khung rỗng. Trước là hộp trắng viền #e2e8f0 đặt
      trong panel trắng: trắng trên trắng thì chỉ còn cái viền để phân biệt, và trang
      thành một chồng khung rỗng lồng nhau. Nay thẻ con là nền #f8fafc viền #eef2f7 —
      đúng nền mà hàng tiêu đề bảng đang dùng, nên bảng và thẻ đọc ra là một bộ.

   3. Tiêu đề thẻ con và tiêu đề đoạn đi bằng nhãn nhỏ CHỮ HOA giãn chữ. Trước là 15px/700
      có gạch dưới: gạch dưới biến mỗi thẻ thành một bảng con, còn 15px/700 thì đấu cỡ với
      mã đơn — tiêu đề chính của trang, thứ duy nhất được phép to.

   Khung bảng sản phẩm không dựng lại ở đây: nó mượn `.list-order` bên trong
   `.box-order-dashboard` (xem khối "Khung bảng danh sách đơn" phía trên), chỉ chỉnh
   riêng màu viền cho khớp các thẻ con.
   ============================================================ */
.box-order-detail {
  padding: 20px 22px 24px;
  background-color: #ffffff;
  border: 1px solid #eef2f7;
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
}

/* Nút quay lại đứng ngoài thẻ trắng nên chọn theo cột nội dung, không theo
   `.box-order-detail` nữa. */
.member-col-main > .order-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 12px;
  font-size: 14px;
  color: #64748b;
}

.member-col-main > .order-back:hover,
.member-col-main > .order-back:focus {
  color: var(--color-highlight);
  text-decoration: none;
}

/* Bảng sản phẩm mượn khung `.box-order-dashboard .list-order` của trang danh sách, mà
   khung ấy viền #ddd. Trong panel này nó là thẻ con nên phải cùng viền với các thẻ con
   khác; chỉ đổi ở đây, trang danh sách giữ nguyên. */
.box-order-detail .list-order {
  border-color: #eef2f7;
}

/* Nhãn nhỏ chữ hoa: một khuôn cho cả tiêu đề thẻ con lẫn tiêu đề đoạn, để hai thứ cùng
   vai "đây là khối gì" không nói bằng hai giọng. */
.box-order-detail .order-card-title,
.box-order-detail .order-detail-section-title {
  margin-bottom: 12px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.4;
  text-transform: uppercase;
  color: #94a3b8;
}

.box-order-detail .order-detail-section-title {
  margin-bottom: 10px;
}

/* Đầu trang là HÀNG tiêu đề có đường kẻ dưới, không phải một thẻ riêng — đúng khuôn
   `.address-book-head` / `.member-wishlist-head`. Để nguyên thẻ có viền thì nó thành thẻ
   lồng trong thẻ ngay ở dòng đầu tiên. */
.box-order-detail .order-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid #eef2f7;
}

/* Mã đơn và nhãn trạng thái đi thành một hàng: nhãn thuộc về mã đơn, không thuộc cụm nút
   bên phải. `align-items: center` chứ không baseline — nhãn là viên thuốc có nền, canh
   theo chân chữ thì nó tụt xuống so với mã đơn. */
.box-order-detail .order-detail-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
}

/* Là `<h1>` như `.address-book-title` / `.member-wishlist-title`: mỗi trang khu tài khoản
   có đúng một tiêu đề chính, ở đây tiêu đề ấy là mã đơn. */
.box-order-detail .order-detail-code {
  margin: 0;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: #1c1c1e;
  word-break: break-all;
}

.box-order-detail .order-detail-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: 8px;
  font-size: 13px;
  color: #94a3b8;
}

.box-order-detail .order-detail-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Biểu tượng nhạt hơn chữ một bậc: ở hàng phụ này chúng chỉ để tách hai mẩu tin, không
   phải thứ cần đọc. */
.box-order-detail .order-detail-meta i {
  font-size: 14px;
  color: #cbd5e1;
}

.box-order-detail .order-detail-head-side {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

/* Hai nút "Mua lại" / "Huỷ đơn" là MỘT CẶP: cùng khuôn, cùng cỡ chữ, cùng ô icon.
   Trước đây chúng cùng chiều cao thật, nhưng vẫn trông lệch — một cái đặc màu, một cái
   chỉ có viền chỉ trên nền trắng, mà mảng đặc bao giờ cũng ra dáng to hơn khung rỗng
   cùng kích thước. Nút phụ có nền xám nhạt và viền rõ hơn để hai cái cùng một sức nặng;
   khác nhau còn lại chỉ là màu, tức là vai trò. */
.box-order-detail .order-detail-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background-color: #f8fafc;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  color: #475569;
  transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease,
    box-shadow 0.18s ease;
}

/* Ô icon rộng cố định: `fa-rotate-right` là nét dày, `fa-xmark` là hai gạch mảnh — thả
   tự do thì hai nút lệch nhau vài pixel ngay ở chữ đầu tiên. */
.box-order-detail .order-detail-action i {
  flex: 0 0 16px;
  width: 16px;
  font-size: 15px;
  text-align: center;
}

.box-order-detail .order-detail-action:hover,
.box-order-detail .order-detail-action:focus {
  border-color: var(--color-highlight);
  background-color: #fff5f5;
  color: var(--color-highlight);
  text-decoration: none;
}

/* Mua lại là việc site muốn khách làm nên nó giữ màu đặc — cùng khuôn với nút bên cạnh,
   chỉ khác nền. Bóng đổ cùng sắc đỏ, rất nhạt: đủ để nút nhấc khỏi mặt giấy mà không
   thành mảng đỏ thứ hai. Trong bảng danh sách thì không tô gì: ở hàng ba icon nhỏ, chỉ
   việc phá huỷ mới đáng được một màu riêng. */
.box-order-detail .order-detail-action.is-rebuy {
  border-color: var(--color-highlight);
  background-color: var(--color-highlight);
  box-shadow: 0 2px 8px rgba(222, 2, 4, 0.22);
  color: #fff;
}

.box-order-detail .order-detail-action.is-rebuy:hover,
.box-order-detail .order-detail-action.is-rebuy:focus {
  border-color: var(--color-highlight);
  background-color: var(--color-highlight);
  box-shadow: 0 4px 12px rgba(222, 2, 4, 0.3);
  color: #fff;
  filter: brightness(1.08);
}

/* ===== Dải nhắc cho hai trạng thái nằm ngoài tiến trình giao hàng ===== */
.box-order-detail .order-alert {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  margin-bottom: 16px;
  border: 1px solid transparent;
  border-radius: 12px;
}

.box-order-detail .order-alert-icon {
  flex: 0 0 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: #fff;
  font-size: 17px;
}

.box-order-detail .order-alert-body {
  flex: 1 1 auto;
  min-width: 0;
}

.box-order-detail .order-alert-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}

.box-order-detail .order-alert-text {
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.45;
  color: #57637a;
  word-break: break-word;
}

.box-order-detail .order-alert-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 18px;
  border-radius: 10px;
  background-color: var(--color-highlight);
  box-shadow: 0 2px 8px rgba(222, 2, 4, 0.22);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  color: #fff;
  transition: opacity 0.2s ease;
}

.box-order-detail .order-alert-btn:hover,
.box-order-detail .order-alert-btn:focus {
  opacity: 0.9;
  color: #fff;
  text-decoration: none;
}

/* Cùng ba sắc với nhãn `.order-status` cùng tên, để dải nhắc và nhãn trạng thái ở đầu
   trang không nói hai giọng màu khác nhau. */
.box-order-detail .order-alert.is-draft {
  border-color: #fbdfae;
  background-color: #fff7e6;
}

.box-order-detail .order-alert.is-draft .order-alert-icon,
.box-order-detail .order-alert.is-draft .order-alert-title {
  color: #b45309;
}

.box-order-detail .order-alert.is-cancel {
  border-color: #dfe3e9;
  background-color: #f2f4f7;
}

.box-order-detail .order-alert.is-cancel .order-alert-icon,
.box-order-detail .order-alert.is-cancel .order-alert-title {
  color: #57637a;
}

/* ===== Tiến trình 5 bước ===== */
.box-order-detail .order-steps {
  display: flex;
  padding: 22px 18px 18px;
  margin-bottom: 16px;
  border: 1px solid #eef2f7;
  border-radius: 12px;
  background-color: #f8fafc;
}

.box-order-detail .order-step {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  padding: 0 4px;
  text-align: center;
}

/* Đường nối vẽ bằng `:before` của chính bước đó và chạy sang TRÁI, về bước đứng trước.
   Nhờ vậy nó xanh lên đúng lúc bước này đã tới (`.is-done`, `.is-current`), và bước
   đầu chỉ phải giấu đi một lần. */
.box-order-detail .order-step:before {
  content: "";
  position: absolute;
  top: 14px;
  right: 50%;
  left: -50%;
  height: 2px;
  background-color: #e2e8f0;
}

.box-order-detail .order-step:first-child:before {
  display: none;
}

/* Chấm trắng trên nền #f8fafc của dải: bước chưa đi qua vẫn đọc ra là một chấm rỗng,
   việc mà chấm trắng trên nền trắng của bản trước không làm được. */
.box-order-detail .order-step-dot {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin: 0 auto 9px;
  border: 2px solid #e2e8f0;
  border-radius: 50%;
  background-color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  color: #94a3b8;
}

.box-order-detail .order-step-label {
  display: block;
  font-size: 12.5px;
  line-height: 1.35;
  color: #94a3b8;
}

.box-order-detail .order-step.is-done .order-step-dot {
  border-color: #1fb141;
  background-color: #1fb141;
  color: #fff;
}

.box-order-detail .order-step.is-done:before,
.box-order-detail .order-step.is-current:before {
  background-color: #1fb141;
}

.box-order-detail .order-step.is-done .order-step-label {
  color: #475569;
}

/* Bước đang diễn ra: vòng sáng mảnh quanh chấm để mắt bắt được ngay đơn đang ở đâu */
.box-order-detail .order-step.is-current .order-step-dot {
  border-color: var(--color-highlight);
  background-color: var(--color-highlight);
  box-shadow: 0 0 0 4px rgba(222, 2, 4, 0.12);
  color: #fff;
}

.box-order-detail .order-step.is-current .order-step-label {
  font-weight: 600;
  color: var(--color-highlight);
}

/* ===== Hai thẻ thông tin ===== */
/* `align-items: start` để thẻ ghi chú cao đúng bằng ghi chú của nó. Kéo cho bằng thẻ địa
   chỉ bên cạnh thì một dòng ghi chú ngồi trong một hộp cao gấp bốn, và khoảng trống ấy
   đọc ra là "còn thiếu gì đó ở đây". */
.box-order-detail .order-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items: start;
  gap: 14px;
  margin-bottom: 18px;
}

.box-order-detail .order-card {
  padding: 16px 18px 18px;
  border: 1px solid #eef2f7;
  border-radius: 12px;
  background-color: #f8fafc;
}

.box-order-detail .order-info-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 6px 0;
  line-height: 1.5;
}

.box-order-detail .order-info-row .label {
  flex: 0 0 104px;
  font-size: 13px;
  color: #94a3b8;
}

.box-order-detail .order-info-row .value {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  font-weight: 500;
  color: #1c1c1e;
  word-break: break-word;
}

.box-order-detail .order-card-note {
  margin-bottom: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #334155;
  white-space: pre-line;
  word-break: break-word;
}

/* Ô sản phẩm trong bảng: ảnh 52px + tên, tên xuống dòng chứ không nong cột */
.box-order-detail .order-product {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #1c1c1e;
}

.box-order-detail .order-product:hover,
.box-order-detail .order-product:focus {
  color: var(--color-highlight);
  text-decoration: none;
}

/* Có nền: ảnh thiếu thì ô vẫn là một ô, không thành lỗ trắng giữa bảng. */
.box-order-detail .order-product-img {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  border: 1px solid #eef2f7;
  border-radius: 10px;
  background-color: #f8fafc;
  object-fit: cover;
}

.box-order-detail .order-product-name {
  min-width: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  white-space: normal;
  word-break: break-word;
}

/* ===== Khối tổng tiền ===== */
.box-order-detail .order-summary {
  width: 100%;
  max-width: 400px;
  margin-top: 18px;
  margin-left: auto;
  padding: 16px 20px;
  border: 1px solid #eef2f7;
  border-radius: 12px;
  background-color: #f8fafc;
}

.box-order-detail .order-summary-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  font-size: 14px;
  line-height: 1.5;
}

.box-order-detail .order-summary-row .label {
  color: #64748b;
}

.box-order-detail .order-summary-row .value {
  flex: 0 0 auto;
  font-weight: 600;
  color: #1c1c1e;
  text-align: right;
  white-space: nowrap;
}

.box-order-detail .order-summary-row .value.is-minus,
.box-order-detail .order-summary-row .value.is-paid {
  color: #1fb141;
}

/* Kẻ đậm hơn hẳn các khe khác (#e2e8f0 chứ không #eef2f7): đây là chỗ duy nhất trong
   khối mà đường kẻ mang nghĩa — trên nó là các khoản cộng trừ, dưới nó là con số cuối. */
.box-order-detail .order-summary-row.is-total {
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid #e2e8f0;
}

.box-order-detail .order-summary-row.is-total .label {
  font-size: 15px;
  font-weight: 700;
  color: #1c1c1e;
}

.box-order-detail .order-summary-row.is-total .value {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-highlight);
}

.box-order-detail .order-summary-row.is-debt .value {
  font-weight: 700;
  color: var(--color-highlight);
}

.box-order-detail .order-summary .currency-symbol {
  margin-left: 2px;
  font-size: 0.85em;
}

@media (max-width: 767.98px) {
  .box-order-detail {
    padding: 16px 14px 18px;
  }

  .box-order-detail .order-detail-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 16px;
    padding-bottom: 16px;
  }

  .box-order-detail .order-detail-code {
    font-size: 19px;
  }

  /* Hai nút chia đôi bề ngang thay vì dồn về trái: dồn trái thì nửa hàng bỏ trống ngay
     dưới tiêu đề, đọc ra như còn một nút thứ ba chưa nạp xong. */
  .box-order-detail .order-detail-head-side {
    width: 100%;
    flex-wrap: nowrap;
  }

  .box-order-detail .order-detail-action {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 12px;
  }

  /* Nút xuống hàng riêng, icon thì KHÔNG: `flex-basis: 0` cho thân dải là chốt giữ chúng
     lại: để `auto` thì bề rộng câu "Lý do huỷ đơn…" tính vào cỡ gốc, không vừa hàng, và
     thân bị đẩy xuống — bỏ lại cái icon đứng một mình trên dòng đầu. */
  .box-order-detail .order-alert {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .box-order-detail .order-alert-body {
    flex: 1 1 0;
  }

  .box-order-detail .order-alert-btn {
    width: 100%;
    justify-content: center;
  }

  /* Tiến trình dựng đứng ở khổ nhỏ: năm nhãn tiếng Việt xếp ngang trên màn hẹp thì
     nhãn nào cũng vỡ ba dòng và đường nối không còn đọc ra là một mạch. */
  .box-order-detail .order-steps {
    display: none;
    padding: 16px 16px 6px;
  }

  .box-order-detail .order-step {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 0 14px;
    text-align: left;
  }

  .box-order-detail .order-step:before {
    top: 28px;
    right: auto;
    left: 14px;
    width: 2px;
    height: calc(100% - 24px);
  }

  /* Dựng đứng thì đường nối chạy XUỐNG bước sau, ngược với bản ngang: bước cuối mới là
     bước phải giấu nó đi, và đường dưới chân bước đang diễn ra phải xám lại — nó dẫn
     tới bước chưa đi qua. */
  .box-order-detail .order-step:first-child:before {
    display: block;
  }

  .box-order-detail .order-step:last-child:before {
    display: none;
  }

  .box-order-detail .order-step.is-current:before {
    background-color: #e2e8f0;
  }

  .box-order-detail .order-step-dot {
    flex: 0 0 30px;
    margin: 0;
  }

  .box-order-detail .order-step-label {
    font-size: 13.5px;
  }

  .box-order-detail .order-cards {
    gap: 12px;
    margin-bottom: 16px;
  }

  .box-order-detail .order-info-row .label {
    flex: 0 0 96px;
  }

  .box-order-detail .order-summary {
    max-width: none;
  }
}

/* ============================================================
   Ruột hộp xác nhận "Mua lại" (#rebuy-order-modal)

   Vỏ hộp (bo góc, đổ bóng, đầu hộp có icon + nút đóng) mượn `co-modal` bên
   `custom.css` — ở đây chỉ có phần riêng của một hộp XÁC NHẬN: câu hỏi, dải lưu ý,
   hàng nút. Đặt ở member.css vì hộp chỉ xuất hiện trong khu tài khoản.
   ============================================================ */
#rebuy-order-modal .modal-dialog {
  max-width: 460px;
}

/* Mã đơn ở dòng phụ đầu hộp: nhấn bằng chữ đậm và màu mực, không tô đỏ — đỏ trong
   theme này là màu của nút bấm được, mà đây chỉ là chữ. */
#rebuy-order-modal .rebuy-order-code {
  font-weight: 700;
  color: var(--co-ink);
}

#rebuy-order-modal .rebuy-order-desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--co-ink);
}

/* Danh sách sản phẩm sắp vào giỏ (`Member/rebuy_order_items.tpl`, nạp bằng ajax).

   Đóng khung có viền chứ không thả trôi giữa hộp: nó là BẢN KÊ của câu hỏi ngay trên,
   phải đọc ra thành một khối đứng riêng, không lẫn vào dòng chữ. */
#rebuy-order-modal .rebuy-order-preview {
  margin-top: 14px;
}

#rebuy-order-modal .rebuy-order-list {
  border: 1px solid var(--co-line);
  border-radius: 12px;
  overflow: hidden;
}

#rebuy-order-modal .rebuy-order-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--co-line);
  background-color: var(--co-soft);
  font-size: 12.5px;
}

#rebuy-order-modal .rebuy-order-list-title {
  font-weight: 700;
  color: var(--co-ink);
}

#rebuy-order-modal .rebuy-order-list-count {
  flex: 0 0 auto;
  color: var(--co-muted);
}

/* Cuộn trong khung thay vì kéo dài hộp: đơn hai mươi món mà bày hết thì hàng nút bị
   đẩy xuống dưới màn hình, khách không thấy nút để bấm. Bốn dòng rưỡi — cắt giữa một
   dòng để mắt nhận ra là còn nữa ở dưới. */
#rebuy-order-modal .rebuy-order-items {
  max-height: 232px;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

#rebuy-order-modal .rebuy-order-items::-webkit-scrollbar {
  width: 4px;
}

#rebuy-order-modal .rebuy-order-items::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: #dde1e8;
}

#rebuy-order-modal .rebuy-order-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
}

#rebuy-order-modal .rebuy-order-item + .rebuy-order-item {
  border-top: 1px solid var(--co-line);
}

#rebuy-order-modal .rebuy-order-item-img {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border: 1px solid var(--co-line);
  border-radius: 8px;
  background-color: #fff;
  object-fit: cover;
}

/* Cắt ở dòng thứ hai: tên hàng dài không được đẩy số lượng đi mất, mà ba bốn dòng tên
   thì danh sách chỉ còn bày được hai món. */
#rebuy-order-modal .rebuy-order-item-name {
  flex: 1 1 auto;
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--co-ink);
  word-break: break-word;
}

#rebuy-order-modal .rebuy-order-item-qty {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 700;
  color: var(--co-muted);
}

#rebuy-order-modal .rebuy-order-list-empty {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--co-muted);
}

#rebuy-order-modal .rebuy-order-list-empty i {
  margin-top: 2px;
  color: var(--color-highlight);
}

/* Dòng "đang tải" chiếm đúng chỗ của danh sách sắp hiện ra, để hộp không giật nảy một
   nhịp khi sản phẩm về. */
#rebuy-order-modal .rebuy-order-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--co-line);
  border-radius: 12px;
  font-size: 13.5px;
  color: var(--co-muted);
}

/* Hàng nút tách khỏi phần chữ bằng một đường kẻ, dồn phải theo đúng thói quen đọc
   hộp thoại — cùng khuôn với `.co-form-actions` của hộp địa chỉ. */
#rebuy-order-modal .rebuy-order-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--co-line);
}

#rebuy-order-modal .rebuy-order-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  min-width: 120px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* "Quay lại" là nút chìm: hộp này mở ra để hỏi, nên hai nút không được ngang sức
   nhau — mắt phải rơi vào nút hành động trước. */
#rebuy-order-modal .rebuy-order-btn.is-ghost {
  border-color: var(--co-line);
  background-color: #fff;
  color: var(--co-muted);
}

#rebuy-order-modal .rebuy-order-btn.is-ghost:hover,
#rebuy-order-modal .rebuy-order-btn.is-ghost:focus {
  border-color: #cbd5e1;
  background-color: var(--co-soft);
  color: var(--co-ink);
  outline: 0;
}

#rebuy-order-modal .rebuy-order-btn.is-main {
  border-color: var(--color-highlight);
  background-color: var(--color-highlight);
  color: #fff;
}

#rebuy-order-modal .rebuy-order-btn.is-main:hover,
#rebuy-order-modal .rebuy-order-btn.is-main:focus {
  color: #fff;
  filter: brightness(1.1);
  box-shadow: 0 10px 22px rgba(222, 2, 4, 0.25);
  outline: 0;
}

@media (max-width: 575.98px) {
  /* Hai nút trải hết bề ngang, "Mua lại" nằm trên vì đó là việc khách vào hộp để làm. */
  #rebuy-order-modal .rebuy-order-actions {
    flex-direction: column-reverse;
  }

  #rebuy-order-modal .rebuy-order-btn {
    width: 100%;
  }
}

/* Lời nhắc "kho còn nhiều hơn" khi tầng tìm kiếm cắt ở top-N. Đặt trên đầu danh sách
   chứ không cạnh thanh phân trang: nó nói về ý nghĩa của con số tổng. */
.qp-truncated-note {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0 0 8px;
  padding: 6px 10px;
  border-radius: 6px;
  background: #f1f3f5;
  color: #555;
  font-size: 12px;
  line-height: 1.4;
}

/* ===== Thẻ giữa trang dùng chung: /member/success, /member/verify-email,
   /member/verify-forgot-password =====
   Ba màn này không có banner kèm bên như `/member/login` nên thẻ phải tự có nền
   và bóng ở mọi bề ngang, không chỉ dưới 992px như `.member-login-box` gốc. */
.member-auth-card {
  max-width: 520px;
  padding: 40px 32px 36px;
  border-radius: 16px;
  background-color: #ffffff;
  box-shadow: 0 4px 24px rgba(15, 23, 42, 0.08);
  text-align: center;
}

/* Phần thân form vẫn căn trái: nhãn và ô nhập căn giữa thì mắt không có lề để dò. */
.member-auth-card .member-login-field,
.member-auth-card .member-verify-step {
  text-align: left;
}

/* Trừ dòng gửi lại mã: nó thuộc về hàng ô mã đã căn giữa ngay trên, để căn trái
   theo khối bước thì nó rời ra đứng một mình lệch hẳn sang trái. */
.member-auth-card .member-reset-resend {
  text-align: center;
}

.member-auth-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  margin-bottom: 20px;
  border-radius: 50%;
  background-color: #fdecec;
  color: var(--color-highlight);
  font-size: 28px;
}

@media (max-width: 991.98px) {
  .member-auth-card {
    padding: 32px 22px 30px;
  }
}

/* ===== Trang đăng ký thành công ===== */
.member-success {
  padding: 60px 0 80px;
}

.member-success-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin-bottom: 22px;
  border-radius: 50%;
  background: linear-gradient(140deg, #3ddc84 0%, #16a34a 100%);
  box-shadow:
    0 0 0 10px rgba(22, 163, 74, 0.09),
    0 0 0 20px rgba(22, 163, 74, 0.05),
    0 14px 30px rgba(22, 163, 74, 0.26);
  color: #ffffff;
  font-size: 30px;
  animation: member-success-pop 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.4) both;
}

@keyframes member-success-pop {
  0% {
    transform: scale(0.4);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .member-success-badge {
    animation: none;
  }
}

/* Biểu tượng chảy cùng dòng chữ chứ không đứng riêng một cột: email dài bẻ xuống
   hai dòng thì cột riêng để nó lửng lơ giữa hộp. */
.member-success-mail {
  margin-bottom: 24px;
  padding: 14px 18px;
  border: 1px solid #d7ecdd;
  border-radius: 10px;
  background-color: #f2fbf5;
  font-size: 14px;
  line-height: 1.55;
  color: #166534;
  word-break: break-word;
}

.member-success-mail i {
  margin-right: 8px;
  font-size: 17px;
}

.member-success-mail strong {
  font-weight: 600;
  color: #14532d;
}

/* `.member-login-submit` vốn dựng cho `<button>` cao 48px — thẻ `<a>` phải tự căn
   giữa chữ, padding của `.btn` không làm thay. */
.member-success-submit {
  display: flex;
  align-items: center;
  justify-content: center;
}

.member-success-hint {
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: #64748b;
}

.member-success-hint i {
  margin-right: 6px;
  font-size: 14px;
}

@media (max-width: 991.98px) {
  .member-success {
    padding: 30px 0 50px;
  }

  .member-success .member-login-desc {
    margin-bottom: 22px;
  }
}

/* ===== Kích hoạt tài khoản (/member/verify-email) =====
   Thẻ giữa trang giống `/member/success` vì hai màn đi liền nhau; phần nhập mã
   dùng lại `.member-otp` và bộ `.member-reset-*` của trang đặt lại mật khẩu. */
.member-verify-mail {
  padding: 60px 0 80px;
}

.member-verify-mail .member-auth-card {
  max-width: 480px;
}

.member-verify-mail .member-login-desc {
  margin-bottom: 26px;
}

/* Nhãn của cả cụm năm ô chứ không của riêng ô nào, nên là `<label>` không `for`. */
.member-verify-mail-label {
  display: block;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 500;
  color: #334155;
}

.member-verify-mail .member-otp {
  margin: 0 auto;
}

.member-verify-mail .member-reset-resend {
  margin-top: 14px;
  margin-bottom: 26px;
}

@media (max-width: 991.98px) {
  .member-verify-mail {
    padding: 30px 0 50px;
  }
}

/* Năm ô 56px cộng bốn khe 10px vượt bề ngang thẻ ở máy nhỏ nhất. */
@media (max-width: 400px) {
  .member-verify-mail .member-otp {
    gap: 8px;
  }

  .member-verify-mail .member-otp input {
    height: 50px;
    font-size: 20px;
    line-height: 48px;
  }
}

/* ===== Dat lai mat khau: phan khung the =====
   Viet o day chu khong chen vao khoi `.member-reset` phia tren de khoi dung vao
   phan nguoi khac dang sua do dang. */
.member-reset {
  padding: 60px 0 80px;
}

/* Hang o ma can giua nhu ben /member/verify-email. O ma bi chan `max-width` cho vuong
   nen khong tu keo dai het be ngang the; de nguyen can trai thi no dut o hai phan ba,
   lech han voi hai o mat khau full-width ngay duoi. */
.member-reset .member-otp {
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 991.98px) {
  .member-reset {
    padding: 30px 0 50px;
  }
}

/* ============================================================
   Thanh tab đáy của khu tài khoản (.member-toolbar)

   Markup ở `element/layout/member_toolbar.tpl`, in từ `layout/default.tpl` khi
   `body` mang `has-member-toolbar`. Nó mượn nguyên khuôn `.toolbar` / `.toolbar__item`
   bên page.css, ở đây chỉ có hai việc riêng: giấu thanh mặc định đi, và tô mục đang
   đứng — thanh mặc định vốn không có trạng thái đang đứng nào cả.

   Giấu bằng `:not(.member-toolbar)` chứ không bằng mã block (`[nh-block="dznqe80"]`):
   mã ấy do admin sinh, đổi theme hay dựng lại block là nó khác, mà CSS thì không
   đỏ lên để báo.
   ============================================================ */
body.has-member-toolbar .toolbar:not(.member-toolbar) {
  display: none;
}

/* page.css tải SAU member.css nên viền trên phải thắng bằng độ ưu tiên, không bằng thứ
   tự: hai class trên `body` + hai trên phần tử là đủ. */
body.has-member-toolbar .member-toolbar {
  border-top: 1px solid #eef2f7;
}

.member-toolbar .toolbar__item a i {
  color: #64748b;
  transition: color 0.18s ease;
}

.member-toolbar .toolbar__item a span {
  color: #64748b;
}

.member-toolbar .toolbar__item a.active i,
.member-toolbar .toolbar__item a.active span {
  color: var(--color-highlight);
}

.member-toolbar .toolbar__item a.active span {
  font-weight: 600;
}

/* Vạch ngắn dán mép trên của ô đang đứng. Cả thanh chỉ có năm biểu tượng nhỏ cùng cỡ,
   đổi mỗi màu chữ thì phải đọc từng ô mới biết mình ở đâu. */
.member-toolbar .toolbar__item a.active:before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 26px;
  height: 3px;
  margin-left: -13px;
  border-radius: 0 0 3px 3px;
  background-color: var(--color-highlight);
}

/* ============================================================
   Khổ điện thoại: cột menu rỗng, và ô đổi ảnh đại diện dời sang /member/profile

   `Member/element_menu.tpl` không in gì ở khổ điện thoại nữa — menu đã xuống thanh tab
   dán đáy. Cột chứa nó vì vậy rỗng, mà rỗng thì vẫn ăn 12px lề dưới, và từ 768px trở
   lên còn giữ chỗ 260px bề ngang.

   Giấu theo `body.has-member-toolbar` chứ không theo media query: class ấy đặt bằng
   ĐÚNG điều kiện đã tắt menu (điện thoại + đã đăng nhập + đang trong `/member/*`), còn
   media query thì hỏi bề rộng khung nhìn — hai câu hỏi khác nhau. Máy bảng nhận diện là
   thiết bị di động nhưng rộng hơn 768px sẽ rơi đúng vào khe giữa hai câu hỏi ấy: menu
   đã tắt mà cột vẫn giữ chỗ 260px trống.
   ============================================================ */
body.has-member-toolbar .member-col-nav {
  display: none;
}

/* Hàng ảnh đại diện ở đầu `/member/profile`. Chỉ dựng ở khổ điện thoại (xem đầu
   `profile.tpl`), nên không cần media query — markup không tồn tại ở khổ máy tính. */
.member-profile-avatar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 18px;
  margin-bottom: 20px;
  border-bottom: 1px solid #eef2f7;
}

/* `overflow: visible` đè luật gốc `.avatar-upload` (overflow: hidden, để bo tròn): khung
   ấy cắt mất huy hiệu máy ảnh thò ra ngoài mép. Bo tròn dời xuống `.avatar-preview`. */
.member-profile-avatar .avatar-upload {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  overflow: visible;
}

.member-profile-avatar .avatar-preview {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  background-color: #f1f5f9;
  box-shadow: 0 0 0 3px #ffffff, 0 0 0 4px rgba(222, 2, 4, 0.18);
}

.member-profile-avatar .avatar-preview > div {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

/* Luật gốc cho nhãn là một dải đen chạy hết bề ngang dưới đáy ảnh; ở đây nó là huy hiệu
   máy ảnh tròn nằm góc dưới phải, nên phải gỡ cả `width: 100%` lẫn nền đen. */
.member-profile-avatar .avatar-edit {
  right: 0;
  bottom: 0;
  width: auto;
}

.member-profile-avatar .avatar-edit input + label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: var(--color-highlight);
  color: #ffffff;
  font-size: 12px;
}

.member-profile-avatar .avatar-edit input + label:hover {
  background: #b80103;
}

.member-profile-avatar .avatar-clear-image {
  right: -0.4rem;
  bottom: 2.4rem;
}

.member-profile-avatar-text {
  min-width: 0;
}

.member-profile-avatar-title {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #94a3b8;
}

.member-profile-avatar-name {
  margin-top: 4px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: #1c1c1e;
  word-break: break-word;
}