.perfume10ml-tiktok-page {
  --pink: #ff2f5f;
  --pink-2: #ff315f;
  --text: #111;
  --muted: #8a8a8a;
  --divider: #eeeeee;
  --voucher-bg: #ffeef3;
  --voucher-border: #ffd5df;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --shell-width: min(430px, 100vw);
  --edge-pad: clamp(12px, 4vw, 16px);
}

.perfume10ml-tiktok-page, .perfume10ml-tiktok-page * {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;
  background: #f5f5f5;
  color: #111;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", Arial, sans-serif;
  letter-spacing: 0;
}

.perfume10ml-tiktok-page button,
.perfume10ml-tiktok-page input {
  font: inherit;
}

.perfume10ml-tiktok-page button {
  cursor: pointer;
}

.perfume10ml-tiktok-page button:focus,
.perfume10ml-tiktok-page [role="button"]:focus {
  outline: none;
}

.perfume10ml-tiktok-page [hidden] {
  display: none !important;
}

.perfume10ml-tiktok-page img {
  display: block;
  max-width: 100%;
}

.perfume10ml-tiktok-page svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.perfume10ml-tiktok-page .mobile-shell {
  position: relative;
  width: var(--shell-width);
  max-width: 100%;
  min-height: 812px;
  margin: 0 auto;
  overflow-x: hidden;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.04);
}

@media (max-width: 640px) {
  .perfume10ml-tiktok-page {
    --shell-width: 100vw;
  }

  @supports (width: 100dvw) {
    .perfume10ml-tiktok-page {
      --shell-width: 100dvw;
    }
  }

  .perfume10ml-tiktok-page .mobile-shell {
    margin: 0;
    box-shadow: none;
  }
}

.perfume10ml-tiktok-page .tt-header {
  position: fixed;
  left: 50%;
  top: 0;
  z-index: 50;
  width: var(--shell-width);
  transform: translateX(-50%);
  background: #fff;
}

.perfume10ml-tiktok-page .tabs {
  height: 40px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--divider);
  background: #fff;
}

.perfume10ml-tiktok-page .tab {
  position: relative;
  border: 0;
  background: transparent;
  color: #7a7a7a;
  font-size: 14px;
  font-weight: 700;
  line-height: 40px;
  padding: 0;
}

.perfume10ml-tiktok-page .tab.active {
  color: #000;
}

.perfume10ml-tiktok-page .tab.active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 88px;
  height: 2px;
  transform: translateX(-50%);
  background: #000;
}

.perfume10ml-tiktok-page .tt-content {
  padding-top: 40px;
  padding-bottom: calc(78px + var(--safe-bottom));
}

.perfume10ml-tiktok-page .page-section {
  scroll-margin-top: 40px;
}

.perfume10ml-tiktok-page .hero {
  position: relative;
  height: var(--shell-width);
  background: #ddd;
  overflow: hidden;
}

.perfume10ml-tiktok-page .hero-slider {
  height: var(--shell-width);
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  cursor: grab;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.perfume10ml-tiktok-page .hero-slider.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
  scroll-snap-type: none;
}

.perfume10ml-tiktok-page .hero-slider::-webkit-scrollbar {
  display: none;
}

.perfume10ml-tiktok-page .hero > img,
.perfume10ml-tiktok-page .hero-slide {
  width: 100%;
  flex: 0 0 100%;
  height: var(--shell-width);
  object-fit: cover;
  object-position: center;
  scroll-snap-align: start;
  user-select: none;
  -webkit-user-drag: none;
}

.perfume10ml-tiktok-page .return-pill {
  position: absolute;
  top: 32px;
  left: 16px;
  height: 30px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 13px;
  border-radius: 999px;
  background: rgba(0,0,0,.6);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}

.perfume10ml-tiktok-page .return-pill span {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 3px;
  background: #c98747;
  font-size: 12px;
}

.perfume10ml-tiktok-page .slide-count {
  position: absolute;
  right: 14px;
  bottom: 14px;
  min-width: 44px;
  height: 27px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.46);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  line-height: 27px;
  text-align: center;
}

.perfume10ml-tiktok-page .flash-sale {
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 0 12px;
  /* Ảnh nền cũ (flash-sale-price-banner.png, 698KB) chỉ là một dải gradient thuần,
     không có hình vẽ gì - vẽ lại bằng CSS, đúng màu gốc và tốn 0 byte. */
  background-image: linear-gradient(90deg, #FC2C56 0%, #FD3059 25%, #FD3254 50%, #FB3745 75%, #FC4537 100%);
  color: #fff;
}

.perfume10ml-tiktok-page .flash-left {
  position: relative;
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.perfume10ml-tiktok-page .discount {
  padding: 2px 5px;
  border-radius: 4px;
  background: #fff;
  color: #e8004c;
  font-size: 16px;
  font-weight: 700;
}

.perfume10ml-tiktok-page .flash-left strong {
  font-size: 28px;
  line-height: 1;
}

.perfume10ml-tiktok-page .ticket-mark {
  font-size: 16px;
}

.perfume10ml-tiktok-page .flash-left del {
  position: absolute;
  left: 0;
  top: 37px;
  color: rgba(255,255,255,.7);
  font-size: 11px;
}

.perfume10ml-tiktok-page .flash-right {
  min-width: 118px;
  text-align: right;
}

.perfume10ml-tiktok-page .flash-right b {
  display: block;
  font-size: 18px;
  font-weight: 700;
}

.perfume10ml-tiktok-page .flash-right span {
  display: block;
  margin-top: 6px;
  font-size: 15px;
}

.perfume10ml-tiktok-page .obaria-sale {
  height: 68px;
  align-items: center;
  color: #fff;
}

.perfume10ml-tiktok-page .obaria-sale .flash-left {
  height: 56px;
  gap: 5px;
  margin-top: -7px;
}

.perfume10ml-tiktok-page .obaria-sale .discount {
  background: #fff;
  color: #e8004c;
}

.perfume10ml-tiktok-page .obaria-sale .flash-left > span:not(.discount) {
  font-size: 15px;
  font-weight: 700;
}

.perfume10ml-tiktok-page .obaria-sale .flash-left strong {
  font-size: 23px;
}

.perfume10ml-tiktok-page .obaria-sale .flash-left del {
  left: 3px;
  top: 44px;
  color: rgba(255,255,255,.66);
}

/* Bang gia hien don gia moi thỏi: xep gon 2 hang NAM TRONG nen do. Gia goc gach truoc
   day bi position:absolute + top:44px nen roi ra ngoai bang, de len nen trang phia duoi. */
.perfume10ml-tiktok-page .obaria-sale .flash-left {
  height: auto;
  margin-top: 0;
  flex-wrap: wrap;
  align-content: center;
  row-gap: 1px;
}

.perfume10ml-tiktok-page .obaria-sale .flash-main {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 5px;
}

.perfume10ml-tiktok-page .obaria-sale .flash-main > span:not(.discount) {
  font-size: 15px;
  font-weight: 700;
}

.perfume10ml-tiktok-page .obaria-sale .flash-unit {
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: -.2px;
}

.perfume10ml-tiktok-page .obaria-sale .flash-sub {
  display: flex;
  flex: 0 0 100%;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
  line-height: 1.25;
  color: rgba(255, 255, 255, .92);
}

.perfume10ml-tiktok-page .obaria-sale .flash-sub del {
  position: static;
  left: auto;
  top: auto;
  font-size: 12px;
  color: rgba(255, 255, 255, .72);
  text-decoration-thickness: 1px;
}

.perfume10ml-tiktok-page .obaria-sale .flash-right {
  min-width: 154px;
}

.perfume10ml-tiktok-page .obaria-sale .flash-right b {
  color: #fff;
  font-size: 17px;
}

.perfume10ml-tiktok-page .obaria-sale .flash-right span {
  overflow: hidden;
  color: #fff;
  font-size: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.perfume10ml-tiktok-page .obaria-sale .flash-right span strong {
  font-weight: 800;
}

.perfume10ml-tiktok-page .product-title {
  display: block;
  padding: 9px 16px 16px;
  background: #fff;
}

.perfume10ml-tiktok-page .product-title h1 {
  margin: 0;
  font-size: 17px;
  line-height: 1.24;
  font-weight: 700;
}

.perfume10ml-tiktok-page .mall-badge {
  display: inline-block;
  margin-right: 5px;
  border-radius: 4px;
  background: #2a140b;
  color: #ffd4a3;
  padding: 0 4px;
  font-size: 14px;
  font-weight: 700;
  line-height: 18px;
  vertical-align: 2px;
}

.perfume10ml-tiktok-page .rating-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px; /* 22px -> 8px, 06/09/2026 - xem ghi chú cuối file */
  font-size: 15px;
  font-weight: 400;
}

.perfume10ml-tiktok-page .star-one {
  color: #ffc400;
  font-size: 21px;
  line-height: 1;
}

.perfume10ml-tiktok-page .rating-line a {
  color: #2b60c3;
  text-decoration: none;
}

.perfume10ml-tiktok-page .rating-line em {
  color: var(--muted);
  font-style: normal;
}

.perfume10ml-tiktok-page .guarantee {
  border-top: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
  background: #fff;
}

.perfume10ml-tiktok-page .guarantee-row,
.perfume10ml-tiktok-page .option-row,
.perfume10ml-tiktok-page .shipping-row {
  min-height: 57px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
}

.perfume10ml-tiktok-page .guarantee-row,
.perfume10ml-tiktok-page .shipping-row {
  border-bottom: 1px solid var(--divider);
}

.perfume10ml-tiktok-page .guarantee-row svg,
.perfume10ml-tiktok-page .option-row > svg,
.perfume10ml-tiktok-page .shipping-row > svg {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  stroke-width: 2.4;
}

.perfume10ml-tiktok-page .shipping-row {
  align-items: flex-start;
  padding-top: 12px;
  padding-bottom: 12px;
}

.perfume10ml-tiktok-page .shipping-row > svg {
  margin-top: 4px;
}

.perfume10ml-tiktok-page .shipping-row div {
  min-width: 0;
  flex: 1;
}

.perfume10ml-tiktok-page .shipping-row p {
  margin: 0 0 8px;
  color: #111;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.18;
}

.perfume10ml-tiktok-page .shipping-row p b {
  display: inline-block;
  margin-right: 4px;
  border-radius: 4px;
  background: #d4f4f2;
  padding: 1px 5px;
  color: #008a8e;
  font-weight: 700;
}

.perfume10ml-tiktok-page .shipping-row span {
  display: block;
  overflow: hidden;
  color: #666;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.48;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.perfume10ml-tiktok-page .shipping-row p span {
  display: inline;
  overflow: visible;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  white-space: normal;
}

.perfume10ml-tiktok-page .shipping-row del {
  color: #8a8a8a;
  text-decoration-thickness: 1px;
}

.perfume10ml-tiktok-page .shipping-row i {
  margin-top: 25px;
  color: #888;
  font-style: normal;
  font-size: 22px;
}

.perfume10ml-tiktok-page .guarantee-row svg {
  color: #87531a;
}

.perfume10ml-tiktok-page .guarantee-row div {
  min-width: 0;
  flex: 1;
}

.perfume10ml-tiktok-page .guarantee-row b {
  display: block;
  color: #87531a;
  font-size: 15px;
  font-weight: 500;
}

.perfume10ml-tiktok-page .guarantee-row span {
  display: block;
  overflow: hidden;
  color: #333;
  font-size: 16px;
  font-weight: 400;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.perfume10ml-tiktok-page .guarantee-row em,
.perfume10ml-tiktok-page .guarantee-row i,
.perfume10ml-tiktok-page .option-row i {
  color: var(--muted);
  font-style: normal;
  font-size: 20px;
}

.perfume10ml-tiktok-page .thumbs {
  display: flex;
  flex: 0 0 auto;
  gap: 3px;
}

.perfume10ml-tiktok-page .thumbs img,
.perfume10ml-tiktok-page .gift-row img,
.perfume10ml-tiktok-page .review-item img,
.perfume10ml-tiktok-page .product-strip article img {
  object-fit: cover;
  object-position: center 21%;
}

.perfume10ml-tiktok-page .thumbs img {
  width: 29px;
  height: 29px;
  border-radius: 4px;
  background: #eee;
}

.perfume10ml-tiktok-page .option-row span {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  color: #888;
  font-size: 14px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.perfume10ml-tiktok-page .option-row {
  cursor: pointer;
}

.perfume10ml-tiktok-page .voucher-section,
.perfume10ml-tiktok-page .review-preview,
.perfume10ml-tiktok-page .shop-products,
.perfume10ml-tiktok-page .about-product {
  margin-top: 8px;
  padding: 18px 16px;
  background: #fff;
}

.perfume10ml-tiktok-page .section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
}

.perfume10ml-tiktok-page .section-heading h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.perfume10ml-tiktok-page .section-heading span,
.perfume10ml-tiktok-page .section-heading a {
  color: #777;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}

.perfume10ml-tiktok-page .voucher-card {
  height: 62px;
  display: flex;
  overflow: hidden;
  border: 1px solid var(--voucher-border);
  border-radius: 8px;
  background: #fff2f6;
}

.perfume10ml-tiktok-page .voucher-type {
  width: 68px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-right: 1px dashed var(--voucher-border);
  color: #e7004f;
  text-align: center;
  font-size: 22px;
}

.perfume10ml-tiktok-page .voucher-type b {
  display: block;
  margin-top: -10px;
  font-size: 12px;
}

.perfume10ml-tiktok-page .voucher-info {
  min-width: 0;
  flex: 1;
  padding: 11px 12px;
}

.perfume10ml-tiktok-page .voucher-info strong {
  display: block;
  color: #e7004f;
  font-size: 18px;
  font-weight: 700;
}

.perfume10ml-tiktok-page .voucher-info span {
  display: block;
  overflow: hidden;
  font-size: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.perfume10ml-tiktok-page .voucher-card button,
.perfume10ml-tiktok-page .big-voucher button {
  align-self: center;
  border: 0;
  border-radius: 999px;
  background: var(--pink);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

.perfume10ml-tiktok-page .voucher-card button {
  height: 32px;
  margin-right: 14px;
  padding: 0 20px;
}

.perfume10ml-tiktok-page .gift-row {
  height: 55px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  padding: 0 16px;
  background: #fff;
}

.perfume10ml-tiktok-page .gift-row h2 {
  min-width: 0;
  flex: 1;
  margin: 0;
  font-size: 17px;
  font-weight: 900;
}

.perfume10ml-tiktok-page .gift-row div {
  display: flex;
  gap: 4px;
}

.perfume10ml-tiktok-page .gift-row img {
  width: 32px;
  height: 32px;
  border-radius: 4px;
}

.perfume10ml-tiktok-page .gift-row span {
  color: var(--muted);
  font-size: 20px;
}

.perfume10ml-tiktok-page .creator-videos {
  margin-top: 8px;
  padding: 20px 16px;
  background: #fff;
}

.perfume10ml-tiktok-page .creator-videos h2 {
  margin: 0 0 16px;
  font-size: 20px;
  font-weight: 700;
}

.perfume10ml-tiktok-page .video-strip {
  display: flex;
  gap: 9px;
  overflow-x: auto;
  cursor: grab;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.perfume10ml-tiktok-page .video-strip::-webkit-scrollbar {
  display: none;
}

.perfume10ml-tiktok-page .video-strip.is-dragging {
  cursor: grabbing;
}

.perfume10ml-tiktok-page .video-strip article,
.perfume10ml-tiktok-page .video-strip button {
  position: relative;
  width: 104px;
  height: 138px;
  flex: 0 0 auto;
  overflow: hidden;
  border: 0;
  border-radius: 7px;
  background: #eee;
  padding: 0;
  color: inherit;
}

.perfume10ml-tiktok-page .video-strip img,
.perfume10ml-tiktok-page .video-strip video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

.perfume10ml-tiktok-page .video-strip span {
  position: absolute;
  left: 8px;
  top: 8px;
  width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(0,0,0,.35);
  color: #fff;
  font-size: 10px;
}

.perfume10ml-tiktok-page .video-strip b {
  position: absolute;
  left: 9px;
  right: 7px;
  bottom: 8px;
  overflow: hidden;
  color: #fff;
  font-size: 13px;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-shadow: 0 1px 4px rgba(0,0,0,.5);
}

.perfume10ml-tiktok-page .video-viewer {
  position: fixed;
  inset: 0;
  z-index: 132;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.9);
  padding: 54px 16px 40px;
}

.perfume10ml-tiktok-page .video-viewer[hidden] {
  display: none;
}

.perfume10ml-tiktok-page .video-viewer.is-loading::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 3px solid rgba(255,255,255,.28);
  border-top-color: #fff;
  border-radius: 999px;
  animation: obaria-video-spin .72s linear infinite;
  pointer-events: none;
}

@keyframes obaria-video-spin {
  to {
    transform: rotate(360deg);
  }
}

.perfume10ml-tiktok-page .video-viewer button {
  position: fixed;
  right: max(12px, calc((100vw - var(--shell-width)) / 2 + 12px));
  top: 22px;
  z-index: 2;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  color: #fff;
  font-size: 34px;
  line-height: 1;
}

.perfume10ml-tiktok-page .video-viewer video {
  position: relative;
  z-index: 1;
  width: min(92vw, 420px);
  max-height: 76vh;
  border-radius: 12px;
  background: #000;
}

.perfume10ml-tiktok-page .video-viewer b {
  position: relative;
  z-index: 1;
  max-width: min(92vw, 420px);
  overflow: hidden;
  color: #fff;
  font-size: 15px;
  line-height: 1.25;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.perfume10ml-tiktok-page .score-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 22px;
}

.perfume10ml-tiktok-page .full-reviews {
  border-top: 8px solid #f6f6f6;
  margin-top: 0;
  padding-bottom: 22px;
  cursor: pointer;
}

.perfume10ml-tiktok-page .full-reviews .section-heading {
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}

.perfume10ml-tiktok-page .full-reviews .section-heading h2 {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  font-size: 15px;
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.perfume10ml-tiktok-page .full-reviews .section-heading h2 span {
  font: inherit;
}

.perfume10ml-tiktok-page .full-reviews .review-more {
  flex: 0 0 auto;
  color: #777;
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
}

.perfume10ml-tiktok-page .full-reviews .review-more i {
  color: #777;
  font-style: normal;
}

.perfume10ml-tiktok-page .full-reviews .score-row b {
  font-size: 20px;
  font-weight: 500;
}

.perfume10ml-tiktok-page .full-reviews .score-row i {
  letter-spacing: -1px;
}

.perfume10ml-tiktok-page .score-row b {
  font-size: 19px;
}

.perfume10ml-tiktok-page .score-row span {
  color: #888;
}

.perfume10ml-tiktok-page .score-row i {
  color: #ffc400;
  font-size: 22px;
  font-style: normal;
}

.perfume10ml-tiktok-page .score-row em {
  color: #eee;
  font-size: 22px;
  font-style: normal;
}

.perfume10ml-tiktok-page .review-item {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  margin-top: 18px;
}

.perfume10ml-tiktok-page .review-item img {
  width: 22px;
  height: 22px;
  border-radius: 999px;
}

.perfume10ml-tiktok-page .perfume-review {
  grid-template-columns: 28px 1fr;
  margin-top: 22px;
}

.perfume10ml-tiktok-page .perfume-review .avatar {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  object-fit: cover;
}

.perfume10ml-tiktok-page .placeholder-avatar {
  position: relative;
  background: #d9dde0;
}

.perfume10ml-tiktok-page .placeholder-avatar::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 4px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #fff;
}

.perfume10ml-tiktok-page .placeholder-avatar::after {
  content: "";
  position: absolute;
  left: 4px;
  bottom: 3px;
  width: 14px;
  height: 8px;
  border-radius: 999px 999px 0 0;
  background: #fff;
}

.perfume10ml-tiktok-page .review-item b {
  display: block;
  font-size: 16px;
  font-weight: 700;
}

.perfume10ml-tiktok-page .review-item i {
  display: block;
  color: #ffc400;
  font-style: normal;
  letter-spacing: -1px;
}

.perfume10ml-tiktok-page .review-item span {
  display: block;
  margin-top: 8px;
  color: #777;
  font-size: 15px;
}

.perfume10ml-tiktok-page .review-item p {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.34;
}

.perfume10ml-tiktok-page .perfume-review p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 14px;
}

.perfume10ml-tiktok-page .perfume-review .review-photo {
  width: 80px;
  height: 80px;
  margin-top: 12px;
  border-radius: 8px;
  object-fit: cover;
}

.perfume10ml-tiktok-page .rating-filters {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  border-top: 1px solid var(--divider);
  margin-top: 10px;
  padding-top: 12px;
  scrollbar-width: none;
}

.perfume10ml-tiktok-page .rating-filters::-webkit-scrollbar {
  display: none;
}

.perfume10ml-tiktok-page .rating-filters span {
  height: 28px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  border-radius: 4px;
  background: #f4f4f4;
  padding: 0 12px;
  color: #111;
  font-size: 14px;
}

.perfume10ml-tiktok-page .review-intro {
  height: 44px;
  overflow: hidden;
  border-bottom: 1px solid var(--divider);
  padding: 0 16px;
  font-size: 18px;
  line-height: 44px;
}

.perfume10ml-tiktok-page .shop-block {
  padding: 28px 16px 22px;
  background: #fff;
}

.perfume10ml-tiktok-page .shop-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.perfume10ml-tiktok-page .shop-logo {
  width: 58px;
  height: 58px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #000;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}

.perfume10ml-tiktok-page .shop-main {
  min-width: 0;
  flex: 1;
}

.perfume10ml-tiktok-page .shop-main h2 {
  margin: 0;
  overflow: hidden;
  font-size: 17px;
  font-weight: 900;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.perfume10ml-tiktok-page .shop-main p {
  margin: 5px 0 0;
  color: #666;
  font-size: 14px;
}

.perfume10ml-tiktok-page .shop-main p span {
  border-radius: 3px;
  background: #ccefe1;
  color: #186f4d;
  padding: 0 4px;
  font-weight: 900;
}

.perfume10ml-tiktok-page .shop-top button {
  height: 35px;
  border: 0;
  border-radius: 999px;
  background: #f3f3f3;
  padding: 0 16px;
  font-size: 15px;
  font-weight: 900;
}

.perfume10ml-tiktok-page .shop-stats {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 26px;
  color: var(--muted);
  font-size: 15px;
}

.perfume10ml-tiktok-page .shop-stats b {
  color: #111;
}

.perfume10ml-tiktok-page .shop-products,
.perfume10ml-tiktok-page .about-product {
  border-top: 8px solid #f6f6f6;
  margin-top: 0;
}

.perfume10ml-tiktok-page .shop-products .section-heading h2 {
  color: #555;
  font-size: 16px;
}

.perfume10ml-tiktok-page .product-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.perfume10ml-tiktok-page .product-strip::-webkit-scrollbar {
  display: none;
}

.perfume10ml-tiktok-page .big-voucher {
  width: 108px;
  height: 136px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid var(--voucher-border);
  border-radius: 8px;
  background: #fff2f6;
  padding: 8px;
  text-align: center;
}

.perfume10ml-tiktok-page .big-voucher b {
  color: #e7004f;
  font-size: 22px;
  line-height: 1.08;
}

.perfume10ml-tiktok-page .big-voucher span {
  color: #777;
  font-size: 13px;
  line-height: 1.18;
}

.perfume10ml-tiktok-page .big-voucher button {
  width: 100%;
  height: 30px;
  border-radius: 4px;
}

.perfume10ml-tiktok-page .product-strip article {
  width: 96px;
  flex: 0 0 auto;
}

.perfume10ml-tiktok-page .product-strip article img {
  width: 96px;
  height: 96px;
  border-radius: 7px;
}

.perfume10ml-tiktok-page .product-strip article b {
  display: block;
  margin-top: 8px;
  font-size: 18px;
}

.perfume10ml-tiktok-page .product-strip article span {
  display: inline-block;
  border-radius: 4px;
  background: var(--voucher-bg);
  color: #e7004f;
  font-size: 13px;
  font-weight: 800;
  padding: 0 4px;
}

.perfume10ml-tiktok-page .about-product h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.perfume10ml-tiktok-page .about-product h3 {
  margin: 26px 0 6px;
  font-size: 18px;
}

.perfume10ml-tiktok-page .spec-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 8px 10px;
  color: #777;
  font-size: 15px;
}

.perfume10ml-tiktok-page .spec-grid b {
  color: #555;
}

.perfume10ml-tiktok-page .overlay-pills {
  display: grid;
  gap: 4px;
  margin-top: 4px;
}

.perfume10ml-tiktok-page .overlay-pills span {
  width: max-content;
  max-width: 310px;
  border-radius: 999px;
  background: rgba(0,0,0,.72);
  color: #fff;
  padding: 4px 12px;
  font-size: 14px;
}

.perfume10ml-tiktok-page .overlay-pills span:nth-child(2) {
  color: #f6c899;
}

.perfume10ml-tiktok-page .affiliate-box {
  border-top: 1px solid var(--divider);
  border-radius: 12px 12px 0 0;
  background: #fff;
  box-shadow: 0 -6px 18px rgba(0,0,0,.05);
  padding: 10px 16px 22px;
}

.perfume10ml-tiktok-page .affiliate-box > div {
  text-align: center;
  color: #aaa;
}

.perfume10ml-tiktok-page .affiliate-box p {
  margin: 8px 0 0;
  font-size: 17px;
}

.perfume10ml-tiktok-page .affiliate-box em {
  color: #e7004f;
  font-style: normal;
}

.perfume10ml-tiktok-page .affiliate-box span {
  display: block;
  margin-top: 4px;
  color: #777;
  font-size: 15px;
}

.perfume10ml-tiktok-page .description-panel {
  position: relative;
  border-top: 8px solid #f6f6f6;
  padding: 0;
  background: #fff;
  color: #292929;
  font-size: 16px;
  line-height: 1.2;
}

.perfume10ml-tiktok-page .official-mall-card {
  margin: 12px 8px 0;
  overflow: hidden;
  border-radius: 14px;
  background: linear-gradient(90deg, #8f3107 0%, #5a1207 48%, #1b0011 100%);
  box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 2px 10px rgba(0,0,0,.08);
}

.perfume10ml-tiktok-page .official-mall-bar {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 14px 1px 15px;
  color: #ffe0aa;
}

.perfume10ml-tiktok-page .official-mall-brand {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: clamp(20px, 5vw, 23px);
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.perfume10ml-tiktok-page .official-mall-icon {
  width: 23px;
  height: 23px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.perfume10ml-tiktok-page .official-mall-promise {
  color: #fff3d6;
  overflow: hidden;
  font-size: clamp(11px, 2.8vw, 13px);
  font-weight: 600;
  line-height: 1.15;
  text-align: right;
  white-space: nowrap;
  text-overflow: clip;
}

.perfume10ml-tiktok-page .official-mall-body {
  position: relative;
  margin-top: -1px;
  border: 1px solid #ececec;
  border-radius: 14px;
  background: #fff;
  padding: 11px clamp(9px, 2.8vw, 13px) 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}

.perfume10ml-tiktok-page .official-shop-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.perfume10ml-tiktok-page .official-shop-logo {
  width: clamp(42px, 10.5vw, 48px);
  height: clamp(42px, 10.5vw, 48px);
  flex: 0 0 auto;
  border: 1px solid #eeeeee;
  border-radius: 50%;
  background: #fff;
  object-fit: cover;
}

.perfume10ml-tiktok-page .official-shop-main {
  min-width: 0;
  flex: 1;
}

.perfume10ml-tiktok-page .official-mall-card .official-shop-main h3 {
  margin: 0;
  overflow: hidden;
  color: #111;
  font-size: clamp(17px, 4.3vw, 20px);
  font-weight: 900;
  line-height: 1.14;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.perfume10ml-tiktok-page .official-shop-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 4px;
  min-width: 0;
  overflow: hidden;
  color: #6b6b6b;
  font-size: clamp(12px, 3.15vw, 14px);
  line-height: 1.1;
  white-space: nowrap;
}

.perfume10ml-tiktok-page .official-shop-meta > span:last-child {
  min-width: 0;
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
}

.perfume10ml-tiktok-page .official-rating {
  height: 22px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border: 1px solid #b6ded4;
  border-radius: 4px;
  background: #e8faf4;
  color: #343434;
  padding: 0 6px 0 4px;
  font-weight: 500;
}

.perfume10ml-tiktok-page .official-rating span {
  color: #0aa98d;
  font-size: 14px;
  line-height: 1;
}

.perfume10ml-tiktok-page .official-shop-link {
 width: clamp(76px, 19vw, 86px);
  height: clamp(36px, 9.5vw, 38px);
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: linear-gradient(180deg, #ff3d72 0%, #f22463 100%);
  color: #fff;
  font-size: clamp(11px, 3.7vw, 12px);
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  box-shadow: inset 0 -2px 0 rgba(202,0,58,.16);
}

.perfume10ml-tiktok-page .official-shop-stats {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(6px, 2.2vw, 10px);
  margin-top: 12px;
  color: #555;
  font-size: clamp(10px, 2.8vw, 11px);
  line-height: 1.2;
}

.perfume10ml-tiktok-page .official-shop-stats span {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: clip;
}

.perfume10ml-tiktok-page .official-shop-stats b {
  color: #111;
  font-weight: 900;
}

.perfume10ml-tiktok-page .thumbs-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin: 8px 8px 0;
  border: 1px solid #eeeeee;
  border-radius: 12px;
  background: #fff;
  padding: 8px;
}

.perfume10ml-tiktok-page .thumbs-list button {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid #eeeeee;
  border-radius: 8px;
  background: #fff7f4;
  padding: 0;
  cursor: pointer;
}

.perfume10ml-tiktok-page .thumbs-list button:active {
  transform: scale(.98);
}

.perfume10ml-tiktok-page .thumbs-list button:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 2px;
}

.perfume10ml-tiktok-page .thumbs-list img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 360px) {
  .perfume10ml-tiktok-page .official-mall-card {
    margin-right: 7px;
    margin-left: 7px;
  }

  .perfume10ml-tiktok-page .official-mall-bar {
    min-height: 44px;
    gap: 6px;
    padding-right: 10px;
    padding-left: 11px;
  }

  .perfume10ml-tiktok-page .official-mall-brand {
    gap: 5px;
    font-size: 19px;
  }

  .perfume10ml-tiktok-page .official-mall-icon {
    width: 21px;
    height: 21px;
  }

  .perfume10ml-tiktok-page .official-mall-promise {
    font-size: 10px;
  }

  .perfume10ml-tiktok-page .official-mall-body {
    padding: 10px 8px 11px;
  }

  .perfume10ml-tiktok-page .official-shop-row {
    gap: 7px;
  }

  .perfume10ml-tiktok-page .official-shop-stats {
    gap: 5px;
    font-size: 10.2px;
  }

  .perfume10ml-tiktok-page .thumbs-list {
    gap: 6px;
    margin-right: 7px;
    margin-left: 7px;
    padding: 7px;
  }
}

.perfume10ml-tiktok-page .see-more {
  border: 0;
  background: transparent;
  padding: 0;
  color: #2e5fb8;
  font-size: 16px;
  font-weight: 800;
  text-decoration: none;
}

.perfume10ml-tiktok-page .description-panel h2 {
  margin: 28px 0 0;
  font-size: 18px;
}

.perfume10ml-tiktok-page .description-panel h3 {
  margin: 26px 0 12px;
  font-size: 18px;
}

.perfume10ml-tiktok-page .description-panel ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
}

.perfume10ml-tiktok-page .description-panel li {
  list-style: disc;
}

.perfume10ml-tiktok-page .description-panel b {
  font-weight: 900;
}

.perfume10ml-tiktok-page .description-panel p {
  margin: 8px 0;
  color: #777;
}

.perfume10ml-tiktok-page .description-panel .faded {
  color: #bbb;
}

.perfume10ml-tiktok-page .perfume-about {
  border-top: 0;
  margin-top: 0;
  padding: 5px 16px 18px;
}

.perfume10ml-tiktok-page .perfume-about h2 {
  font-size: 20px;
}

.perfume10ml-tiktok-page .perfume-about h3 {
  margin: 26px 0 18px;
}

.perfume10ml-tiktok-page .perfume-specs {
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.15fr);
  gap: 7px 18px;
  font-size: 15px;
  line-height: 1.18;
}

.perfume10ml-tiktok-page .perfume-specs b {
  color: #555;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.perfume10ml-tiktok-page .perfume-specs span {
  color: #777;
  overflow-wrap: anywhere;
}

.perfume10ml-tiktok-page .perfume-about .see-more {
  display: block;
  margin-top: 18px;
}

.perfume10ml-tiktok-page .product-video {
  padding: 22px 16px 18px;
  background: #fff;
}

.perfume10ml-tiktok-page .product-video h2,
.perfume10ml-tiktok-page .description-copy h2 {
  margin: 0 0 14px;
  font-size: 18px;
}

.perfume10ml-tiktok-page .video-card {
  position: relative;
  height: 210px;
  overflow: hidden;
  border-radius: 7px;
  background: #000;
}

.perfume10ml-tiktok-page .video-card img {
  width: 118px;
  height: 210px;
  margin: 0 auto;
  object-fit: cover;
}

.perfume10ml-tiktok-page .video-card button {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  border: 0;
  border-radius: 10px;
  background: rgba(255,255,255,.92);
  color: #fff;
  color: #d8d8d8;
  font-size: 28px;
  line-height: 1;
}

.perfume10ml-tiktok-page .description-copy {
  padding: 10px 16px 0;
  background: #fff;
}

.perfume10ml-tiktok-page .description-video-block {
  margin: 0 0 18px;
}

.perfume10ml-tiktok-page .description-video-card {
  position: relative;
  display: grid;
  overflow: hidden;
  border-radius: 8px;
  background: #000 url('../assets/bg_main.jpg') center / cover no-repeat;
}

.perfume10ml-tiktok-page .description-video-card video,
.perfume10ml-tiktok-page .description-video-poster {
  grid-area: 1 / 1;
  width: 100%;
}

.perfume10ml-tiktok-page .description-video-card video {
  display: block;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  background: #000 url('../assets/bg_main.jpg') center / cover no-repeat;
}

.perfume10ml-tiktok-page .description-video-poster {
  position: relative;
  z-index: 2;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: inherit;
  overflow: hidden;
  appearance: none;
  cursor: pointer;
  color: inherit;
  background: #000 url('../assets/bg_main.jpg') center / cover no-repeat;
  transition: opacity .18s ease;
}

.perfume10ml-tiktok-page .description-video-card.is-playing .description-video-poster {
  opacity: 0;
  pointer-events: none;
}

.perfume10ml-tiktok-page .description-video-poster img {
  display: block;
  width: 100%;
  height: auto;
}

.perfume10ml-tiktok-page .description-video-poster span {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 10px 28px rgba(15, 23, 42, .22);
}

.perfume10ml-tiktok-page .description-video-poster span::before {
  content: '';
  display: block;
  width: 0;
  height: 0;
  margin-left: 4px;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 18px solid #111827;
}

.perfume10ml-tiktok-page .description-copy p {
  margin: 0 0 12px;
  color: #5f5f5f;
  font-size: 15px;
  line-height: 1.34;
}

.perfume10ml-tiktok-page .description-copy h3 {
  margin: 20px 0 8px;
  color: #222;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.25;
}

.perfume10ml-tiktok-page .description-copy h2 + h3 {
  margin-top: 0;
}

.perfume10ml-tiktok-page .description-copy b {
  color: #333;
  font-weight: 700;
}

.perfume10ml-tiktok-page .description-copy ul {
  margin: 0 0 14px;
  padding-left: 18px;
  color: #5f5f5f;
  font-size: 15px;
  line-height: 1.34;
}

.perfume10ml-tiktok-page .description-copy > :last-child {
  margin-bottom: 0;
}

.perfume10ml-tiktok-page .description-copy li {
  margin-bottom: 7px;
}

.perfume10ml-tiktok-page .description-inline-image {
  margin: 14px 0 18px;
}

.perfume10ml-tiktok-page .description-copy h2 + .description-inline-image {
  margin-top: 0;
}

.perfume10ml-tiktok-page .description-inline-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  background: #f7f7f7;
}

.perfume10ml-tiktok-page .description-order-form {
  scroll-margin-top: 48px;
  margin: 12px 0 0;
  border-top: 8px solid #f6f6f6;
  background: #fff;
  padding: 18px var(--edge-pad) 22px;
}

.perfume10ml-tiktok-page .description-order-form h2 {
  margin: 0 0 14px;
  color: #111;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}

.perfume10ml-tiktok-page .description-order-picker {
  margin-bottom: 10px;
  border: 1px solid #eeeeee;
  border-radius: 10px;
  background: #fff;
  padding: 10px;
}

.perfume10ml-tiktok-page .description-order-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.perfume10ml-tiktok-page .description-order-picker-head span {
  color: #222;
  font-size: 15px;
  font-weight: 700;
}

.perfume10ml-tiktok-page .description-order-picker-head small {
  min-width: 0;
  color: var(--pink);
  font-size: 13px;
  font-weight: 700;
  text-align: right;
}

.perfume10ml-tiktok-page .description-order-variants {
  display: flex;
  gap: 9px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  padding: 1px 2px 4px;
}

.perfume10ml-tiktok-page .description-order-variants::-webkit-scrollbar {
  display: none;
}

.perfume10ml-tiktok-page .description-order-card {
  position: relative;
  flex: 0 0 122px;
  min-height: 150px;
  display: grid;
  grid-template-rows: 86px 1fr;
  overflow: hidden;
  scroll-snap-align: start;
  border: 1px solid #dedede;
  border-radius: 10px;
  background: #fff;
  color: #111;
  padding: 0;
  text-align: left;
}

.perfume10ml-tiktok-page .description-order-card::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(0,0,0,.16);
  border-radius: 999px;
  background: rgba(255,255,255,.88);
}

.perfume10ml-tiktok-page .description-order-card img {
  width: 100%;
  height: 86px;
  object-fit: cover;
  background: #f8f3ef;
}

.perfume10ml-tiktok-page .description-order-card span {
  display: grid;
  gap: 3px;
  padding: 8px;
}

.perfume10ml-tiktok-page .description-order-card b {
  color: #111;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.15;
}

.perfume10ml-tiktok-page .description-order-card small {
  color: var(--pink);
  font-size: 13px;
  font-weight: 700;
}

.perfume10ml-tiktok-page .description-order-card em {
  position: absolute;
  left: 8px;
  top: 8px;
  border-radius: 999px;
  background: #fff1f5;
  color: var(--pink);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  padding: 3px 7px;
}

.perfume10ml-tiktok-page .description-order-card.is-selected {
  border-color: var(--pink);
  box-shadow:
    inset 0 0 0 1px var(--pink),
    0 12px 28px rgba(255, 45, 104, .24),
    0 4px 12px rgba(17, 17, 17, .10);
  transform: translateY(-1px);
}

.perfume10ml-tiktok-page .description-order-card.is-selected::after {
  border-color: var(--pink);
  background: var(--pink);
  box-shadow: inset 0 0 0 4px #fff;
}

.perfume10ml-tiktok-page .description-order-field {
  min-height: 52px;
  display: grid;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  border: 1px solid #dedede;
  border-radius: 9px;
  background: #fff;
  padding: 10px 12px;
}

.perfume10ml-tiktok-page .description-order-field > span {
  color: #555;
  font-size: 13px;
  font-weight: 500;
}

.perfume10ml-tiktok-page .description-order-field input,
.perfume10ml-tiktok-page .description-order-field select {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #222;
  font: inherit;
  font-size: 16px;
}

.perfume10ml-tiktok-page .description-order-field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #777 50%), linear-gradient(135deg, #777 50%, transparent 50%);
  background-position: calc(100% - 10px) 55%, calc(100% - 5px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 20px;
}

.perfume10ml-tiktok-page .description-order-field input::placeholder {
  color: #8e8e8e;
}

.perfume10ml-tiktok-page .description-order-field.is-invalid {
  border-color: var(--pink);
  background: #fff8fa;
}

.perfume10ml-tiktok-page .description-order-error {
  display: none;
  color: var(--pink);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
}

.perfume10ml-tiktok-page .description-order-field.is-invalid .description-order-error {
  display: block;
}

.perfume10ml-tiktok-page .description-order-quantity,
.perfume10ml-tiktok-page .description-order-total {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
  border: 1px solid #eeeeee;
  border-radius: 9px;
  background: #fff;
  padding: 10px 12px;
}

.perfume10ml-tiktok-page .description-order-quantity > span,
.perfume10ml-tiktok-page .description-order-total span {
  color: #222;
  font-size: 15px;
  font-weight: 500;
}

.perfume10ml-tiktok-page .description-order-stepper {
  width: 112px;
  height: 38px;
  display: grid;
  grid-template-columns: 1fr 40px 1fr;
  align-items: center;
  overflow: hidden;
  border-radius: 8px;
  background: #f2f2f2;
}

.perfume10ml-tiktok-page .description-order-stepper button {
  height: 100%;
  border: 0;
  background: transparent;
  color: #111;
  font-size: 25px;
  font-weight: 400;
  line-height: 1;
}

.perfume10ml-tiktok-page .description-order-stepper button:disabled {
  color: #aaa;
}

.perfume10ml-tiktok-page .description-order-stepper b {
  display: grid;
  height: 100%;
  place-items: center;
  border-left: 1px solid #e5e5e5;
  border-right: 1px solid #e5e5e5;
  font-size: 17px;
  font-weight: 400;
}

.perfume10ml-tiktok-page .description-order-total strong {
  color: var(--pink);
  font-size: 20px;
  font-weight: 700;
  white-space: nowrap;
}

.perfume10ml-tiktok-page .description-order-submit {
  width: 100%;
  min-height: 52px;
  border: 0;
  border-radius: 999px;
  background: var(--pink);
  color: #fff;
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 8px 18px rgba(223,22,79,.18);
}

.perfume10ml-tiktok-page .description-order-form {
  --order-orange: var(--pink);
  --order-teal: #159c8c;
  margin: 12px var(--edge-pad) 0;
  padding: 14px;
  display: grid;
  gap: 14px;
  border: 1px solid #f0ded9;
  border-radius: 8px;
  background: #fffaf7;
  box-shadow: 0 8px 22px rgba(142, 88, 76, .08);
}

.perfume10ml-tiktok-page .description-order-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.perfume10ml-tiktok-page .description-order-head span {
  display: block;
  margin-bottom: 3px;
  color: var(--order-orange);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
}

.perfume10ml-tiktok-page .description-order-head strong {
  display: block;
  color: #222;
  font-size: 19px;
  line-height: 1.25;
}

.perfume10ml-tiktok-page .description-order-ship {
  flex: 0 0 auto;
  padding: 5px 9px;
  border-radius: 999px;
  background: #e9f8f5;
  color: var(--order-teal);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.perfume10ml-tiktok-page .description-order-combos {
  display: grid;
  grid-auto-rows: 1fr;
  gap: 12px;
  padding-top: 6px;
}

/* Thẻ phải cao hết ô lưới thì grid-auto-rows: 1fr mới thấy được */
.perfume10ml-tiktok-page .description-combo-card > span {
  height: 100%;
}

.perfume10ml-tiktok-page .description-combo-card {
  cursor: pointer;
}

.perfume10ml-tiktok-page .description-combo-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Chỉ span con trực tiếp mới là khung thẻ - các span bên trong (tên, nhãn) không được ăn style này. */
.perfume10ml-tiktok-page .description-combo-card > span {
  min-height: 58px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid #eadbd7;
  border-radius: 7px;
  background: #fff;
  color: #252525;
}

.perfume10ml-tiktok-page .description-combo-card > span > b {
  min-width: 0;
  color: #111;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

.perfume10ml-tiktok-page .description-combo-card > span > small {
  color: var(--order-orange);
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

.perfume10ml-tiktok-page .description-combo-card.is-selected > span,
.perfume10ml-tiktok-page .description-combo-card input:checked + span {
  border-color: var(--order-orange);
  background: #fff2f6;
  box-shadow:
    inset 0 0 0 1px rgba(255, 45, 104, .34),
    0 10px 24px rgba(255, 45, 104, .22),
    0 3px 10px rgba(17, 17, 17, .10);
  transform: translateY(-1px);
}

.perfume10ml-tiktok-page .description-combo-card.featured:not(.is-selected) > span {
  border-color: rgba(255, 45, 104, .45);
}

.perfume10ml-tiktok-page .description-order-qty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #333;
  font-size: 15px;
  font-weight: 700;
}

.perfume10ml-tiktok-page .description-qty-control {
  width: 132px;
  height: 36px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 36px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
  flex: 0 0 auto;
}

.perfume10ml-tiktok-page .description-qty-control button,
.perfume10ml-tiktok-page .description-qty-control input {
  min-width: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-right: 1px solid #ddd;
  background: #fff;
  color: #333;
  text-align: center;
  font-size: 16px;
}

.perfume10ml-tiktok-page .description-qty-control button:last-child {
  border-right: 0;
}

.perfume10ml-tiktok-page .description-qty-control input {
  appearance: textfield;
  outline: 0;
  font-weight: 700;
}

.perfume10ml-tiktok-page .description-qty-control input::-webkit-outer-spin-button,
.perfume10ml-tiktok-page .description-qty-control input::-webkit-inner-spin-button {
  margin: 0;
  appearance: none;
}

.perfume10ml-tiktok-page .description-order-summary {
  display: grid;
  gap: 12px;
  padding-top: 2px;
}

.perfume10ml-tiktok-page .description-order-lines {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 7px;
  background: #fff;
  color: #555;
  font-size: 14px;
}

.perfume10ml-tiktok-page .description-order-lines div {
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.perfume10ml-tiktok-page .description-order-total {
  color: #222;
  font-weight: 800;
}

.perfume10ml-tiktok-page .description-order-total span {
  color: #222;
  font-size: 14px;
  font-weight: 800;
}

.perfume10ml-tiktok-page .description-order-total strong {
  color: var(--order-orange);
  font-size: 22px;
  font-weight: 800;
  white-space: nowrap;
}

.perfume10ml-tiktok-page .description-order-fields {
  display: grid;
  gap: 10px;
}

.perfume10ml-tiktok-page .description-order-field {
  min-height: 0;
  display: grid;
  align-items: stretch;
  gap: 6px;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  color: #444;
  font-size: 13px;
  font-weight: 700;
}

.perfume10ml-tiktok-page .description-order-field > span {
  color: #444;
  font-size: 13px;
  font-weight: 700;
}

.perfume10ml-tiktok-page .description-order-field input {
  width: 100%;
  height: 42px;
  border: 1px solid #e1d7d4;
  border-radius: 6px;
  outline: 0;
  padding: 0 11px;
  background: #fff;
  color: #222;
  font-size: 16px;
  font-weight: 400;
}

.perfume10ml-tiktok-page .description-order-field input:focus {
  border-color: var(--order-orange);
  box-shadow: 0 0 0 3px rgba(255, 45, 104, .1);
}

.perfume10ml-tiktok-page .description-order-field input::placeholder {
  color: #8e8e8e;
}

.perfume10ml-tiktok-page .description-order-field.is-invalid input {
  border-color: var(--order-orange);
  background: #fff8fa;
}

.perfume10ml-tiktok-page .description-order-error {
  display: none;
  color: var(--order-orange);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
}

.perfume10ml-tiktok-page .description-order-field.is-invalid .description-order-error {
  display: block;
}

.perfume10ml-tiktok-page .description-order-submit {
  width: 100%;
  height: 48px;
  min-height: 48px;
  border: 0;
  border-radius: 6px;
  background: var(--order-orange);
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 10px 22px rgba(255, 45, 104, .24);
}

.perfume10ml-tiktok-page .brand-footer {
  scroll-margin-top: 48px;
  margin-top: 8px;
  padding: 26px var(--edge-pad) calc(34px + var(--safe-bottom));
  background:
    linear-gradient(180deg, rgba(95, 24, 31, .92), rgba(42, 21, 24, .98)),
    #4b1f25;
  color: #f4e8e5;
}

.perfume10ml-tiktok-page .footer-logo {
  display: block;
  width: min(210px, 72%);
  height: auto;
  margin: 0 auto 20px;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .22));
}

.perfume10ml-tiktok-page .footer-grid {
  display: grid;
  gap: 22px;
}

.perfume10ml-tiktok-page .footer-block h3,
.perfume10ml-tiktok-page .footer-block h4 {
  margin: 0 0 10px;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
}

.perfume10ml-tiktok-page .footer-block p {
  margin: 0 0 8px;
  color: #f0dedb;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
}

.perfume10ml-tiktok-page .footer-block a {
  color: #fff;
  text-decoration: none;
}

.perfume10ml-tiktok-page .footer-policies {
  display: grid;
  gap: 8px;
}

.perfume10ml-tiktok-page .footer-copy {
  margin-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .18);
  color: #e7d4d1;
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
  padding-top: 14px;
}
.perfume10ml-tiktok-page .footer-copy a {
  color: #e7d4d1;
  text-decoration: none;
}
.perfume10ml-tiktok-page .scroll-top {
  position: fixed;
  right: max(12px, calc((100vw - var(--shell-width)) / 2 + 12px));
  bottom: calc(90px + var(--safe-bottom));
  z-index: 35;
  display: none;
  width: 48px;
  height: 48px;
  transform: none;
  border: 0;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 4px 18px rgba(0,0,0,.15);
  font-size: 31px;
  line-height: 1;
}

.perfume10ml-tiktok-page.is-reviews .scroll-top,
.perfume10ml-tiktok-page.is-description .scroll-top,
.perfume10ml-tiktok-page.is-order .scroll-top {
  display: block;
}

.perfume10ml-tiktok-page .variant-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(0,0,0,.58);
}

.perfume10ml-tiktok-page .variant-sheet {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 100;
  width: var(--shell-width);
  max-height: calc(100dvh - 54px);
  transform: translateX(-50%);
  overflow: visible;
  border-radius: 28px 28px 0 0;
  background: #fff;
  color: #111;
  box-shadow: 0 -8px 28px rgba(0,0,0,.18);
}

.perfume10ml-tiktok-page .variant-close {
  position: absolute;
  right: 19px;
  top: -44px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: rgba(0,0,0,.48);
  color: #fff;
  font-size: 34px;
  line-height: 1;
}

.perfume10ml-tiktok-page .variant-sheet-scroll {
  max-height: calc(100dvh - 142px);
  overflow-y: auto;
  border-radius: 28px 28px 0 0;
  padding: 12px 16px 136px;
  scrollbar-width: none;
}

.perfume10ml-tiktok-page .variant-sheet-scroll::-webkit-scrollbar {
  display: none;
}

.perfume10ml-tiktok-page .sheet-mall-bar {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: -12px -16px 0;
  border-radius: 28px 28px 0 0;
  background: linear-gradient(96deg, #2b0d04 0%, #3a1709 60%, #140503 100%);
  color: #ffd9b3;
  padding: 0 16px;
}

.perfume10ml-tiktok-page .sheet-mall-bar b {
  color: #fff4e8;
  font-size: 21px;
  font-weight: 800;
}

.perfume10ml-tiktok-page .sheet-mall-bar span {
  min-width: 0;
  overflow: hidden;
  font-size: 14px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.perfume10ml-tiktok-page .sheet-product-card {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 10px;
  border: 1px solid #f0f0f0;
  border-top: 0;
  border-radius: 0 0 16px 16px;
  padding: 10px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

.perfume10ml-tiktok-page .sheet-preview {
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: 12px;
  background: #f5f5f5;
  padding: 0;
}

.perfume10ml-tiktok-page .sheet-preview img {
  width: 88px;
  height: 88px;
  object-fit: cover;
}

.perfume10ml-tiktok-page .sheet-preview span,
.perfume10ml-tiktok-page .variant-zoom {
  position: absolute;
  left: 8px;
  top: 8px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: rgba(0,0,0,.42);
  color: #fff;
  font-size: 15px;
  line-height: 1;
}

.perfume10ml-tiktok-page .sheet-product-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.perfume10ml-tiktok-page .sheet-price-line {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--pink);
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}

.perfume10ml-tiktok-page .sheet-discount {
  border-radius: 5px;
  background: var(--pink);
  color: #fff;
  padding: 4px 6px;
  font-size: 18px;
  line-height: 1;
}

.perfume10ml-tiktok-page .sheet-price-line strong {
  font-size: 27px;
  line-height: 1;
}

.perfume10ml-tiktok-page .sheet-product-info del {
  margin-top: 8px;
  color: #8b8b8b;
  font-size: 17px;
}

.perfume10ml-tiktok-page .sheet-product-info em {
  margin-top: 12px;
  border-radius: 5px;
  background: var(--voucher-bg);
  color: var(--pink);
  padding: 4px 8px;
  font-size: 15px;
  font-style: normal;
  font-weight: 700;
}

.perfume10ml-tiktok-page .sheet-sale-bar {
  min-height: 39px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 18px;
  border-radius: 10px;
  background: linear-gradient(96deg, #ff9b23 0%, #f28722 100%);
  color: #fff;
  padding: 0 12px;
  font-size: 16px;
  white-space: nowrap;
}

.perfume10ml-tiktok-page .sheet-sale-bar b {
  font-weight: 800;
}

.perfume10ml-tiktok-page .variant-picker {
  margin-top: 18px;
}

.perfume10ml-tiktok-page .variant-picker h2,
.perfume10ml-tiktok-page .quantity-row h2 {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
}

.perfume10ml-tiktok-page .variant-picker p {
  margin: 4px 0 0;
  color: #777;
  font-size: 14px;
  line-height: 1.25;
}

.perfume10ml-tiktok-page .variant-strip {
  --variant-thumb-size: clamp(92px, calc((min(100vw, var(--shell-width)) - 64px) / 3), 112px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  overflow: visible;
  margin: 12px -16px 0;
  padding: 0 16px 8px;
}

.perfume10ml-tiktok-page .variant-strip::-webkit-scrollbar {
  display: none;
}

.perfume10ml-tiktok-page .variant-card {
  position: relative;
  min-height: calc(var(--variant-thumb-size) + 58px);
  overflow: hidden;
  border: 1.5px solid #d7d7d7;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .04);
}

.perfume10ml-tiktok-page .variant-card .variant-zoom {
  left: auto;
  right: 7px;
  top: 7px;
  width: 31px;
  height: 31px;
  display: grid;
  border: 1px solid rgba(255, 255, 255, .75);
  background: rgba(255, 255, 255, .94);
  color: var(--pink);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .16);
  z-index: 2;
}

.perfume10ml-tiktok-page .variant-card .variant-zoom svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  stroke-width: 2.4;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.perfume10ml-tiktok-page .variant-card.is-selected {
  border-color: var(--pink);
  background: #fff6f9;
  box-shadow: 0 0 0 1px var(--pink) inset, 0 8px 18px rgba(223, 22, 79, .12);
}

.perfume10ml-tiktok-page .variant-card.is-selected::after {
  content: "✓";
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 3;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--pink);
  color: #fff;
  font-size: 16px;
  font-weight: 900;
  box-shadow: 0 6px 14px rgba(255, 45, 104, .26);
}

.perfume10ml-tiktok-page .variant-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  display: block;
  object-fit: cover;
  background: #fff7f4;
}

.perfume10ml-tiktok-page .variant-copy {
  min-height: 58px;
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 7px 7px 8px;
  text-align: left;
}

.perfume10ml-tiktok-page .variant-name {
  display: block;
  min-width: 0;
  color: #111;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.1;
  white-space: normal;
  overflow-wrap: normal;
}

.perfume10ml-tiktok-page .variant-note {
  display: -webkit-box;
  overflow: hidden;
  color: #777;
  font-size: 11px;
  line-height: 1.15;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.perfume10ml-tiktok-page .variant-card-combo {
  grid-column: 1 / -1;
  min-height: 96px;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: stretch;
  border-color: #ff7aa2;
  background: linear-gradient(90deg, #fff 0%, #fff6f9 100%);
}

.perfume10ml-tiktok-page .variant-card-combo img {
  width: 96px;
  height: 96px;
}

.perfume10ml-tiktok-page .variant-card-combo .variant-zoom {
  left: 58px;
  right: auto;
}

.perfume10ml-tiktok-page .variant-card-combo .variant-copy {
  min-height: 96px;
  align-content: center;
  padding: 9px 12px;
  text-align: left;
}

.perfume10ml-tiktok-page .variant-card-combo .variant-note {
  display: -webkit-box;
}

.perfume10ml-tiktok-page .variant-card-combo .variant-name {
  font-size: 15px;
}

.perfume10ml-tiktok-page .variant-hot {
  position: absolute;
  left: 6px;
  top: 6px;
  border-radius: 999px;
  background: #fff;
  color: var(--pink);
  font-size: 11px;
  line-height: 1;
  font-weight: 900;
  padding: 4px 7px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .12);
}

.perfume10ml-tiktok-page .variant-badge {
  width: max-content;
  max-width: 100%;
  margin-top: 2px;
  border-radius: 999px;
  background: var(--pink);
  color: #fff;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  padding: 5px 8px;
}

.perfume10ml-tiktok-page .quantity-row {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 10px;
}

.perfume10ml-tiktok-page .quantity-stepper {
  width: 114px;
  height: 42px;
  display: grid;
  grid-template-columns: 1fr 42px 1fr;
  align-items: center;
  border-radius: 8px;
  background: #f2f2f2;
}

.perfume10ml-tiktok-page .quantity-stepper button {
  height: 100%;
  border: 0;
  background: transparent;
  color: #111;
  font-size: 28px;
  line-height: 1;
}

.perfume10ml-tiktok-page .quantity-stepper button:disabled {
  color: #aaa;
}

.perfume10ml-tiktok-page .quantity-stepper span {
  border-left: 1px solid #e5e5e5;
  border-right: 1px solid #e5e5e5;
  text-align: center;
  font-size: 22px;
}

.perfume10ml-tiktok-page .variant-actions {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-top: 1px solid var(--divider);
  background: #fff;
  padding: 14px 16px calc(18px + var(--safe-bottom));
}

.perfume10ml-tiktok-page .variant-action {
  width: 100%;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--pink), #ff1f5f);
  color: #fff;
  box-shadow: 0 12px 26px rgba(255, 45, 104, .28);
}

.perfume10ml-tiktok-page .variant-action b,
.perfume10ml-tiktok-page .variant-action span {
  display: inline;
}

.perfume10ml-tiktok-page .variant-action b {
  font-size: 20px;
  font-weight: 900;
  line-height: 1.1;
}

.perfume10ml-tiktok-page .variant-action span {
  margin-top: 0;
  font-size: 20px;
  font-weight: 900;
}

.perfume10ml-tiktok-page .order-backdrop {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: rgba(0,0,0,.62);
}

.perfume10ml-tiktok-page .order-popup {
  position: fixed;
  left: 50%;
  top: 0;
  bottom: 0;
  z-index: 120;
  width: var(--shell-width);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  transform: translateX(-50%);
  overflow: hidden;
  border-radius: 0;
  background: #fff;
  color: #1b1b1b;
  font-family: inherit;
  box-shadow: 0 0 0 1px rgba(0,0,0,.04);
}

.perfume10ml-tiktok-page .order-header {
  min-height: 58px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 46px;
  align-items: center;
  border-bottom: 1px solid var(--divider);
  padding: 8px 12px 4px;
  background: #fff;
}

.perfume10ml-tiktok-page .order-header h2 {
  margin: 0;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0;
}

.perfume10ml-tiktok-page .order-header button {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: #111;
  padding: 0;
}

.perfume10ml-tiktok-page .order-header svg {
  width: 28px;
  height: 28px;
  stroke-width: 2.35;
}

.perfume10ml-tiktok-page .order-body {
  overflow-y: auto;
  padding: 14px 16px 18px;
  scrollbar-width: none;
}

.perfume10ml-tiktok-page .order-body::-webkit-scrollbar {
  display: none;
}

.perfume10ml-tiktok-page .order-product {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 12px;
  border-bottom: 1px solid #f0d9df;
  padding-bottom: 14px;
}

.perfume10ml-tiktok-page .order-product > img {
  width: 86px;
  height: 86px;
  border-radius: 10px;
  object-fit: cover;
  background: #f8eef1;
}

.perfume10ml-tiktok-page .order-product-main {
  min-width: 0;
}

.perfume10ml-tiktok-page .order-product-main h3 {
  margin: 1px 0 5px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.18;
}

.perfume10ml-tiktok-page .order-product-main p,
.perfume10ml-tiktok-page .order-product-main span {
  display: block;
  margin: 0 0 5px;
  color: #686868;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.25;
}

.perfume10ml-tiktok-page .order-product-main b {
  color: var(--pink);
  font-weight: 600;
}

.perfume10ml-tiktok-page .order-product-main strong {
  display: block;
  margin-top: 9px;
  color: var(--pink);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}

.perfume10ml-tiktok-page .order-stepper {
  grid-column: 2;
  justify-self: end;
  width: 112px;
  height: 38px;
  display: grid;
  grid-template-columns: 1fr 40px 1fr;
  align-items: center;
  overflow: hidden;
  border: 1px solid #e9ccd4;
  border-radius: 8px;
  background: #fff;
}

.perfume10ml-tiktok-page .order-stepper button {
  height: 100%;
  border: 0;
  background: #fff7f9;
  color: var(--pink);
  font-size: 25px;
  font-weight: 400;
  line-height: 1;
}

.perfume10ml-tiktok-page .order-stepper button:disabled {
  color: #c9c9c9;
}

.perfume10ml-tiktok-page .order-stepper span {
  display: grid;
  height: 100%;
  place-items: center;
  border-left: 1px solid #f0dfe4;
  border-right: 1px solid #f0dfe4;
  color: #111;
  font-size: 17px;
  font-weight: 400;
}

.perfume10ml-tiktok-page .order-form {
  margin-top: 15px;
}

.perfume10ml-tiktok-page .order-form h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 700;
}

.perfume10ml-tiktok-page .order-form h3 svg,
.perfume10ml-tiktok-page .order-field > svg {
  color: #e64972;
  stroke-width: 2.15;
}

.perfume10ml-tiktok-page .order-form h3 svg {
  width: 24px;
  height: 24px;
}

.perfume10ml-tiktok-page .order-field {
  min-height: 54px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  border: 1px solid #dcdcdc;
  border-radius: 9px;
  background: #fff;
  padding: 0 12px;
}

.perfume10ml-tiktok-page .order-field.is-invalid {
  border-color: var(--pink);
  background: #fff8fa;
}

.perfume10ml-tiktok-page .order-field-tall {
  min-height: 68px;
  align-items: center;
}

.perfume10ml-tiktok-page .order-field > svg {
  width: 22px;
  height: 22px;
}

.perfume10ml-tiktok-page .order-field input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #222;
  font-size: 16px;
  font-weight: 400;
}

.perfume10ml-tiktok-page .order-field input::placeholder {
  color: #8e8e8e;
}

.perfume10ml-tiktok-page .order-field small {
  display: block;
  margin-top: 4px;
  color: #999;
  font-size: 12px;
  line-height: 1.2;
}

.perfume10ml-tiktok-page .order-error {
  display: none !important;
  color: var(--pink) !important;
  font-weight: 500;
}

.perfume10ml-tiktok-page .order-field.is-invalid .order-error {
  display: block !important;
}

.perfume10ml-tiktok-page .order-total-card {
  margin-top: 16px;
  border: 1px solid #ededed;
  border-radius: 8px;
  background: #fff;
  padding: 16px 14px 13px;
}

.perfume10ml-tiktok-page .order-total-card h3 {
  margin: 0 0 16px;
  color: #111;
  font-size: 19px;
  font-weight: normal;
  line-height: 1.12;
}

.perfume10ml-tiktok-page .order-total-card > div:not(.order-summary-divider) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: #151515;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.35;
}

.perfume10ml-tiktok-page .order-total-card > div:not(.order-summary-divider) + div:not(.order-summary-divider) {
  margin-top: 9px;
}

.perfume10ml-tiktok-page .order-total-card b {
  font-weight: normal;
}

.perfume10ml-tiktok-page .order-summary-main {
  font-size: 16px !important;
  font-weight: normal !important;
}

.perfume10ml-tiktok-page .order-summary-main b,
.perfume10ml-tiktok-page .order-summary-ship b,
.perfume10ml-tiktok-page .order-total-line strong {
  color: #111;
  font-size: 17px;
  font-weight: normal;
  white-space: nowrap;
}

.perfume10ml-tiktok-page .order-summary-main i {
  display: inline-block;
  margin-left: 3px;
  font-style: normal;
  line-height: 1;
  transform: translateY(-1px);
}

.perfume10ml-tiktok-page .order-summary-sub {
  padding-left: 20px;
  color: #222 !important;
}

.perfume10ml-tiktok-page .order-summary-sub b {
  font-size: 14px;
}

.perfume10ml-tiktok-page .order-summary-discount {
  color: var(--pink) !important;
}

.perfume10ml-tiktok-page .order-summary-ship {
  margin-top: 12px !important;
  font-size: 16px !important;
  font-weight: normal !important;
}

.perfume10ml-tiktok-page .order-summary-divider {
  height: 1px;
  margin: 12px 0 4px;
  background: #ddd;
}

.perfume10ml-tiktok-page .order-total-line {
  margin-top: 0 !important;
  border-top: 0;
  padding-top: 8px;
  font-size: 23px !important;
  font-weight: 900 !important;
}

.perfume10ml-tiktok-page .order-total-line span,
.perfume10ml-tiktok-page .order-total-line strong {
  color: #111;
  font-weight: normal;
}

.perfume10ml-tiktok-page .order-total-line strong {
  font-size: 20px;
}

.perfume10ml-tiktok-page .order-footer {
  border-top: 10px solid #f0f0f0;
  background: #fff;
  padding: 11px 16px calc(14px + var(--safe-bottom));
}

.perfume10ml-tiktok-page .order-footer-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 2px 12px;
  margin-bottom: 9px;
}

.perfume10ml-tiktok-page .order-footer-summary span {
  color: #111;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.16;
}

.perfume10ml-tiktok-page .order-footer-summary strong {
  grid-column: 2;
  grid-row: 1;
  color: var(--pink);
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  text-align: right;
  white-space: nowrap;
}

.perfume10ml-tiktok-page .order-footer-summary em {
  grid-column: 2;
  grid-row: 2;
  color: var(--pink);
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.12;
  text-align: right;
  white-space: nowrap;
}

.perfume10ml-tiktok-page .order-footer button {
width: 100%;
  min-height: 45px;
  display: grid;
  grid-template-rows: auto auto;
  justify-content: center;
  align-items: center;
  row-gap: 4px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #f23868 0%, #df164f 100%);
  color: #fff;
  box-shadow: 0 8px 18px rgba(223,22,79,.24);
  padding-top: 9px;
  padding-bottom: 8px;
}

.perfume10ml-tiktok-page .order-footer button b {
font-size: 20px;
  font-weight: normal;
  line-height: 21px;
}

.perfume10ml-tiktok-page .order-footer button span {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.18;
  opacity: .98;
}

.perfume10ml-tiktok-page .order-footer button span i {
  font-style: normal;
}

.perfume10ml-tiktok-page .reviews-layer {
  position: fixed;
  left: 50%;
  top: 0;
  z-index: 82;
  width: var(--shell-width);
  height: 100dvh;
  transform: translateX(calc(-50% + var(--review-drag-x, 0px)));
  transition: transform .22s ease, opacity .22s ease;
  touch-action: pan-y;
  will-change: transform;
  display: flex;
  flex-direction: column;
  background: #fff;
  color: #111;
}

.perfume10ml-tiktok-page .reviews-layer.is-dragging {
  transition: none;
}

.perfume10ml-tiktok-page .reviews-layer.is-swipe-closing {
  opacity: 0;
}

.perfume10ml-tiktok-page .reviews-layer-header {
  height: 60px;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  align-items: center;
  gap: 0;
  padding: 8px 16px 0;
  background: #fff;
}

.perfume10ml-tiktok-page .reviews-close,
.perfume10ml-tiktok-page .reviews-header-actions button {
  border: 0;
  background: transparent;
  color: #000;
  padding: 0;
}

.perfume10ml-tiktok-page .reviews-close {
  width: 36px;
  height: 38px;
  font-size: 38px;
  font-weight: 300;
  line-height: 32px;
}

.perfume10ml-tiktok-page .reviews-layer-header h2 {
  margin: 0;
  overflow: hidden;
  text-align: center;
  white-space: nowrap;
  font-size: 18px;
  font-weight: 800;
}

.perfume10ml-tiktok-page .reviews-layer-header h2 span {
  color: #f6b900;
}

.perfume10ml-tiktok-page .reviews-header-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 13px;
}

.perfume10ml-tiktok-page .reviews-header-actions button {
  position: relative;
  width: 32px;
  height: 36px;
}

.perfume10ml-tiktok-page .reviews-header-actions svg {
  width: 31px;
  height: 31px;
  stroke-width: 2.5;
}

.perfume10ml-tiktok-page .reviews-header-actions i {
  position: absolute;
  right: -5px;
  top: -7px;
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--pink);
  color: #fff;
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
  line-height: 20px;
}

.perfume10ml-tiktok-page .reviews-filter-row {
  height: 52px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  background: #fff;
  padding: 0 16px;
  scrollbar-width: none;
}

.perfume10ml-tiktok-page .reviews-filter-row::-webkit-scrollbar {
  display: none;
}

.perfume10ml-tiktok-page .review-filter {
  height: 36px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  border-radius: 999px;
  background: #f1f1f1;
  color: #707070;
  padding: 0 12px;
  font-size: 15px;
  white-space: nowrap;
}

.perfume10ml-tiktok-page .review-filter.is-active {
  background: #000;
  color: #fff;
}

.perfume10ml-tiktok-page .review-filter b {
  color: #f6b900;
  font-size: 17px;
  line-height: 1;
}

.perfume10ml-tiktok-page .review-filter svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
  stroke: none;
}

.perfume10ml-tiktok-page .reviews-layer-body {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  touch-action: pan-y;
  border-top: 8px solid #f6f6f6;
  padding-bottom: 118px;
  scrollbar-width: none;
}

.perfume10ml-tiktok-page .reviews-layer-body::-webkit-scrollbar {
  display: none;
}

.perfume10ml-tiktok-page .reviews-sort-row {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 16px;
  color: #8a8a8a;
  font-size: 15px;
}

.perfume10ml-tiktok-page .reviews-sort-row span {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.perfume10ml-tiktok-page .reviews-sort-row button {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: #222;
  padding: 0;
  font-size: 15px;
}

.perfume10ml-tiktok-page .review-layer-item {
  border-bottom: 1px solid var(--divider);
  padding: 16px 16px 14px;
}

.perfume10ml-tiktok-page .review-layer-user {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  align-items: start;
}

.perfume10ml-tiktok-page .review-layer-avatar {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  object-fit: cover;
  background: #d8dcdf;
}

.perfume10ml-tiktok-page .review-layer-name {
  display: block;
  margin-top: -1px;
  font-size: 16px;
  font-weight: 800;
}

.perfume10ml-tiktok-page .review-layer-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  margin-top: 2px;
  color: #888;
  font-size: 15px;
  line-height: 1.25;
}

.perfume10ml-tiktok-page .review-layer-stars {
  flex: 0 0 auto;
  color: #f6b900;
  letter-spacing: -1px;
  white-space: nowrap;
}

.perfume10ml-tiktok-page .review-layer-variant {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.perfume10ml-tiktok-page .review-layer-comment {
  margin: 14px 0 0;
  color: #111;
  font-size: 17px;
  line-height: 1.28;
}

.perfume10ml-tiktok-page .review-layer-photo {
  width: 108px;
  height: 108px;
  margin-top: 14px;
  border: 0;
  border-radius: 8px;
  background: #f2f2f2;
  object-fit: cover;
  cursor: pointer;
}

.perfume10ml-tiktok-page .review-layer-media {
  position: relative;
  width: 108px;
  height: 108px;
  display: block;
  overflow: hidden;
  margin-top: 14px;
  border: 0;
  border-radius: 8px;
  background: #000;
  padding: 0;
  cursor: pointer;
}

.perfume10ml-tiktok-page .review-layer-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.perfume10ml-tiktok-page .review-layer-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.2));
  pointer-events: none;
}

.perfume10ml-tiktok-page .review-layer-media span {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: rgba(0,0,0,.52);
  box-shadow: 0 2px 10px rgba(0,0,0,.24);
}

.perfume10ml-tiktok-page .review-layer-media span::before {
  content: "";
  width: 0;
  height: 0;
  margin-left: 3px;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 12px solid #fff;
}

.perfume10ml-tiktok-page .seller-reply {
  margin-top: 14px;
  border-radius: 3px;
  background: #f1f1f1;
  color: #858585;
  padding: 12px 16px;
  font-size: 16px;
  line-height: 1.32;
}

.perfume10ml-tiktok-page .seller-reply b {
  color: #777;
  font-weight: 800;
}

.perfume10ml-tiktok-page .review-layer-footer {
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 12px;
  color: #858585;
  font-size: 15px;
}

.perfume10ml-tiktok-page .review-layer-tools {
  display: flex;
  align-items: center;
  gap: 30px;
  color: #858585;
}

.perfume10ml-tiktok-page .review-layer-tools button {
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  font-size: 24px;
  line-height: 1;
}

.perfume10ml-tiktok-page .review-empty {
  min-height: calc(100dvh - 284px);
  display: grid;
  place-content: center;
  gap: 18px;
  text-align: center;
}

.perfume10ml-tiktok-page .review-empty b {
  font-size: 19px;
  font-weight: 400;
}

.perfume10ml-tiktok-page .review-empty span {
  color: #555;
  font-size: 18px;
}

.perfume10ml-tiktok-page .reviews-loading {
  min-height: 82px;
  display: grid;
  place-items: center;
  padding: 22px 16px 34px;
}

.perfume10ml-tiktok-page .reviews-loading span {
  width: 24px;
  height: 24px;
  border: 2px solid #d7d7d7;
  border-top-color: #111;
  border-radius: 999px;
  animation: review-loading-spin .82s linear infinite;
}

@keyframes review-loading-spin {
  to {
    transform: rotate(360deg);
  }
}

.perfume10ml-tiktok-page .review-scroll-top {
  position: fixed;
  right: max(12px, calc((100vw - var(--shell-width)) / 2 + 12px));
  bottom: calc(90px + var(--safe-bottom));
  z-index: 86;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
  font-size: 31px;
  line-height: 1;
}

.perfume10ml-tiktok-page .reviews-bottom-cta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 85;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--divider);
  background: #fff;
  padding: 8px var(--edge-pad) calc(10px + var(--safe-bottom));
}

.perfume10ml-tiktok-page .reviews-bottom-cta button {
  border: 0;
  padding: 0;
}

.perfume10ml-tiktok-page .image-viewer {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.86);
  padding: 28px;
}

.perfume10ml-tiktok-page .image-viewer button {
  position: fixed;
  right: max(12px, calc((100vw - var(--shell-width)) / 2 + 12px));
  top: 22px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  color: #fff;
  font-size: 34px;
  line-height: 1;
}

.perfume10ml-tiktok-page .image-viewer img {
  width: min(92vw, 520px);
  max-height: 82vh;
  border-radius: 12px;
  object-fit: contain;
}

.perfume10ml-tiktok-page .bottom-cta {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 60;
  width: var(--shell-width);
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--divider);
  background: #fff;
  padding: 8px var(--edge-pad) calc(10px + var(--safe-bottom));
}

.perfume10ml-tiktok-page .bottom-cta button {
  border: 0;
  padding: 0;
}

.perfume10ml-tiktok-page .buy-now {
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 999px !important;
  background: var(--pink) !important;
  color: #fff;
}

.perfume10ml-tiktok-page .buy-now b {
  display: block;
  max-width: none;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}

.perfume10ml-tiktok-page .bottom-cta .buy-now {
  height: 44px;
}

.perfume10ml-tiktok-page .reviews-bottom-cta .buy-now {
  height: 44px;
}

.perfume10ml-tiktok-page .bottom-cta .buy-now b {
  font-size: 16px;
}

.perfume10ml-tiktok-page .reviews-bottom-cta .buy-now b {
  font-size: 16px;
}

@media (max-width: 360px) {
  .perfume10ml-tiktok-page {
    --edge-pad: 12px;
  }

  .perfume10ml-tiktok-page .tab {
    font-size: 14px;
  }

  .perfume10ml-tiktok-page .tab.active::after {
    width: 72px;
  }

  .perfume10ml-tiktok-page .flash-sale {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 128px;
    gap: 4px;
    padding: 0 10px;
  }

  .perfume10ml-tiktok-page .obaria-sale .flash-left {
    gap: 4px;
  }

  .perfume10ml-tiktok-page .discount {
    font-size: 15px;
  }

  .perfume10ml-tiktok-page .obaria-sale .flash-left > span:not(.discount),
  .perfume10ml-tiktok-page .obaria-sale .flash-main > span:not(.discount) {
    font-size: 14px;
  }

  .perfume10ml-tiktok-page .obaria-sale .flash-left strong {
    font-size: 21px;
  }

  .perfume10ml-tiktok-page .obaria-sale .flash-unit {
    font-size: 12px;
  }

  .perfume10ml-tiktok-page .obaria-sale .flash-sub,
  .perfume10ml-tiktok-page .obaria-sale .flash-sub del {
    font-size: 11px;
  }

  .perfume10ml-tiktok-page .obaria-sale .flash-right {
    min-width: 0;
  }

  .perfume10ml-tiktok-page .obaria-sale .flash-right b {
    font-size: 15px;
  }

  .perfume10ml-tiktok-page .obaria-sale .flash-right span {
    font-size: 11px;
  }

  .perfume10ml-tiktok-page .product-title {
    padding: 8px 12px 12px;
  }

  .perfume10ml-tiktok-page .product-title h1 {
    font-size: 16px;
    line-height: 1.23;
  }

  .perfume10ml-tiktok-page .rating-line {
    gap: 7px;
    margin-top: 7px; /* 14px -> 7px, đi cùng mốc 8px ở trên */
    font-size: 14px;
  }

  .perfume10ml-tiktok-page .bottom-cta,
  .perfume10ml-tiktok-page .reviews-bottom-cta {
    grid-template-columns: minmax(0, 1fr);
  }

  .perfume10ml-tiktok-page .buy-now {
    height: 50px;
  }

  .perfume10ml-tiktok-page .buy-now b {
    font-size: 19px;
    line-height: 1;
  }

  .perfume10ml-tiktok-page .variant-sheet-scroll {
    padding: 12px 12px 132px;
  }

  .perfume10ml-tiktok-page .sheet-mall-bar {
    margin: -12px -12px 0;
    padding: 0 12px;
  }

  .perfume10ml-tiktok-page .sheet-mall-bar b {
    font-size: 20px;
  }

  .perfume10ml-tiktok-page .sheet-mall-bar span {
    font-size: 13px;
  }

  .perfume10ml-tiktok-page .sheet-product-card {
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 8px;
    padding: 9px;
  }

  .perfume10ml-tiktok-page .sheet-preview img {
    width: 78px;
    height: 78px;
  }

  .perfume10ml-tiktok-page .sheet-price-line {
    gap: 4px;
    font-size: 14px;
  }

  .perfume10ml-tiktok-page .sheet-discount {
    padding: 4px 5px;
    font-size: 16px;
  }

  .perfume10ml-tiktok-page .sheet-price-line strong {
    font-size: 23px;
  }

  .perfume10ml-tiktok-page .sheet-product-info del {
    margin-top: 6px;
    font-size: 15px;
  }

  .perfume10ml-tiktok-page .sheet-product-info em {
    margin-top: 9px;
    padding: 4px 6px;
    font-size: 13px;
  }

  .perfume10ml-tiktok-page .sheet-sale-bar {
    min-height: 36px;
    padding: 0 10px;
    font-size: 14px;
  }

  .perfume10ml-tiktok-page .variant-strip {
    --variant-thumb-size: clamp(88px, calc((min(100vw, var(--shell-width)) - 56px) / 3), 104px);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 12px -12px 0;
    padding: 0 12px 8px;
  }

  .perfume10ml-tiktok-page .variant-card {
    min-height: calc(var(--variant-thumb-size) + 58px);
  }

  .perfume10ml-tiktok-page .variant-card img {
    height: auto;
  }

  .perfume10ml-tiktok-page .variant-copy {
    min-height: 58px;
    padding: 7px 6px;
  }

  .perfume10ml-tiktok-page .variant-name {
    font-size: 14px;
  }

  .perfume10ml-tiktok-page .variant-card-combo {
    min-height: 92px;
    grid-template-columns: 92px minmax(0, 1fr);
  }

  .perfume10ml-tiktok-page .variant-card-combo img,
  .perfume10ml-tiktok-page .variant-card-combo .variant-copy {
    min-height: 92px;
    height: 92px;
  }

  .perfume10ml-tiktok-page .variant-card-combo .variant-zoom {
    left: 54px;
  }

  .perfume10ml-tiktok-page .order-popup {
    left: 50%;
    top: 0;
    bottom: 0;
    width: var(--shell-width);
    border-radius: 0;
  }

  .perfume10ml-tiktok-page .order-header {
    min-height: 54px;
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    padding: 6px 8px 4px;
  }

  .perfume10ml-tiktok-page .order-header h2 {
    font-size: 18px;
    font-weight: 700;
  }

  .perfume10ml-tiktok-page .order-header button {
    width: 38px;
    height: 38px;
  }

  .perfume10ml-tiktok-page .order-header svg {
    width: 27px;
    height: 27px;
  }

  .perfume10ml-tiktok-page .order-body {
    padding: 10px 12px 12px;
  }

  .perfume10ml-tiktok-page .order-product {
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 10px;
    padding-bottom: 12px;
  }

  .perfume10ml-tiktok-page .order-product > img {
    width: 78px;
    height: 78px;
  }

  .perfume10ml-tiktok-page .order-product-main h3 {
    font-size: 16.5px;
    font-weight: 700;
  }

  .perfume10ml-tiktok-page .order-product-main p,
  .perfume10ml-tiktok-page .order-product-main span {
    font-size: 13px;
  }

  .perfume10ml-tiktok-page .order-product-main strong {
    font-size: 20px;
  }

  .perfume10ml-tiktok-page .order-stepper {
    width: 106px;
    height: 36px;
    grid-template-columns: 1fr 38px 1fr;
  }

  .perfume10ml-tiktok-page .order-form h3 {
    font-size: 16px;
    font-weight: 700;
  }

  .perfume10ml-tiktok-page .order-field {
    min-height: 50px;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 8px;
    padding: 0 10px;
  }

  .perfume10ml-tiktok-page .order-field-tall {
    min-height: 64px;
  }

  .perfume10ml-tiktok-page .order-field input {
    font-size: 16px;
  }

  .perfume10ml-tiktok-page .order-total-card {
    padding: 12px;
  }

  .perfume10ml-tiktok-page .order-total-line span {
    font-size: 17px;
  }

  .perfume10ml-tiktok-page .order-total-line strong {
    font-size: 20px;
  }

  .perfume10ml-tiktok-page .order-footer {
    padding: 10px 12px calc(13px + var(--safe-bottom));
  }

  .perfume10ml-tiktok-page .order-footer button {
    min-height: 62px;
    border-radius: 999px;
  }

  .perfume10ml-tiktok-page .order-footer button b {
    font-size: 19.5px;
    font-weight: 900;
  }

  .perfume10ml-tiktok-page .order-footer button span {
    font-size: 13.5px;
  }

  .perfume10ml-tiktok-page .reviews-layer-header {
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    height: 56px;
    padding: 6px 12px 0;
  }

  .perfume10ml-tiktok-page .reviews-layer-header h2 {
    font-size: 17px;
  }

  .perfume10ml-tiktok-page .reviews-header-actions {
    gap: 8px;
  }

  .perfume10ml-tiktok-page .reviews-header-actions svg {
    width: 29px;
    height: 29px;
  }

  .perfume10ml-tiktok-page .reviews-filter-row {
    gap: 7px;
    padding: 0 12px;
  }

  .perfume10ml-tiktok-page .review-filter {
    height: 34px;
    padding: 0 11px;
    font-size: 14px;
  }

  .perfume10ml-tiktok-page .reviews-sort-row,
  .perfume10ml-tiktok-page .review-layer-item {
    padding-left: 12px;
    padding-right: 12px;
  }

  .perfume10ml-tiktok-page .review-layer-comment {
    font-size: 16px;
  }

  .perfume10ml-tiktok-page .full-reviews .section-heading h2 {
    font-size: 14px;
  }

  .perfume10ml-tiktok-page .full-reviews .review-more {
    font-size: 12px;
  }
}

@media (max-width: 360px) and (max-height: 620px) {
  .perfume10ml-tiktok-page .variant-sheet {
    height: calc(100dvh - 54px);
  }

  .perfume10ml-tiktok-page .variant-sheet-scroll {
    height: 100%;
    max-height: none;
    padding-top: 10px;
    padding-bottom: 116px;
  }

  .perfume10ml-tiktok-page .sheet-mall-bar {
    min-height: 40px;
    margin-top: -10px;
  }

  .perfume10ml-tiktok-page .sheet-product-card {
    grid-template-columns: 70px minmax(0, 1fr);
    padding: 8px;
  }

  .perfume10ml-tiktok-page .sheet-preview img {
    width: 70px;
    height: 70px;
  }

  .perfume10ml-tiktok-page .sheet-price-line strong {
    font-size: 21px;
  }

  .perfume10ml-tiktok-page .sheet-product-info em {
    margin-top: 7px;
    font-size: 12px;
  }

  .perfume10ml-tiktok-page .sheet-sale-bar {
    min-height: 34px;
    margin-top: 12px;
  }

  .perfume10ml-tiktok-page .variant-picker {
    margin-top: 14px;
  }

  .perfume10ml-tiktok-page .variant-strip {
    --variant-thumb-size: clamp(80px, calc((min(100vw, var(--shell-width)) - 56px) / 3), 96px);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    height: auto;
    margin-top: 10px;
  }

  .perfume10ml-tiktok-page .variant-card {
    min-height: calc(var(--variant-thumb-size) + 54px);
    align-self: start;
  }

  .perfume10ml-tiktok-page .variant-card img {
    height: auto;
  }

  .perfume10ml-tiktok-page .variant-copy {
    min-height: 54px;
    padding: 6px;
  }

  .perfume10ml-tiktok-page .variant-name {
    font-size: 13px;
  }

  .perfume10ml-tiktok-page .variant-card-combo {
    min-height: 84px;
    grid-template-columns: 84px minmax(0, 1fr);
  }

  .perfume10ml-tiktok-page .variant-card-combo img,
  .perfume10ml-tiktok-page .variant-card-combo .variant-copy {
    min-height: 84px;
    height: 84px;
  }

  .perfume10ml-tiktok-page .variant-card-combo .variant-zoom {
    left: 46px;
  }

  .perfume10ml-tiktok-page .quantity-row {
    min-height: 58px;
    margin-top: 12px;
  }

  .perfume10ml-tiktok-page .variant-actions {
    padding-top: 10px;
    padding-bottom: calc(12px + var(--safe-bottom));
  }
}

.perfume10ml-tiktok-page .variant-sheet {
  --pink: #FF2D68;
  width: min(390px, 100vw);
  max-height: calc(100dvh - 44px);
  overflow: hidden;
  border-radius: 32px 32px 0 0;
  background: #fffdfa;
  box-shadow: 0 -18px 46px rgba(18, 18, 18, .22);
  font-family: inherit;
}

.perfume10ml-tiktok-page .variant-close {
  right: 16px;
  top: 52px;
  z-index: 5;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(17, 17, 17, .06);
  background: rgba(255, 255, 255, .94);
  color: #555;
  font-size: 38px;
  font-weight: 300;
  box-shadow: 0 8px 24px rgba(17, 17, 17, .14);
}

.perfume10ml-tiktok-page .variant-sheet-scroll {
  max-height: calc(100dvh - 44px);
  border-radius: 32px 32px 0 0;
  background: #fffdfa;
  padding: 12px 18px 172px;
}

.perfume10ml-tiktok-page .sheet-mall-bar {
  min-height: 14px;
  display: grid;
  place-items: center;
  margin: 0 0 12px;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.perfume10ml-tiktok-page .sheet-mall-bar::before {
  content: "";
  width: 46px;
  height: 5px;
  border-radius: 999px;
  background: #d8d8d8;
}

.perfume10ml-tiktok-page .sheet-mall-bar b,
.perfume10ml-tiktok-page .sheet-mall-bar span {
  display: none;
}

.perfume10ml-tiktok-page .sheet-product-card {
  grid-template-columns: 114px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0 42px 0 0;
}

.perfume10ml-tiktok-page .sheet-preview {
  width: 114px;
  height: 114px;
  overflow: hidden;
  border: 1px solid #f3dfd8;
  border-radius: 20px;
  background: #fff5f1;
  box-shadow: 0 10px 24px rgba(121, 51, 51, .08);
}

.perfume10ml-tiktok-page .sheet-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.perfume10ml-tiktok-page .sheet-preview span {
  display: none;
}

.perfume10ml-tiktok-page .sheet-product-info {
  gap: 6px;
  justify-content: center;
}

.perfume10ml-tiktok-page .sheet-product-title {
  margin: 0;
  color: #171717;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: 0;
}

.perfume10ml-tiktok-page .sheet-product-title span {
  display: block;
}

.perfume10ml-tiktok-page .sheet-product-title .sheet-choice-line {
  margin-top: 3px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--pink);
  font-size: 20px;
  font-weight: 800;
}

.perfume10ml-tiktok-page .sheet-product-title .sheet-choice-line::after {
  content: "";
  width: 34px;
  height: 8px;
  display: inline-block;
  border-radius: 999px;
  background: #ffe3ec;
}

.perfume10ml-tiktok-page .sheet-price-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--pink);
  font-size: 14px;
  font-weight: 700;
  white-space: normal;
}

.perfume10ml-tiktok-page .sheet-price-line strong {
  color: var(--pink);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}

.perfume10ml-tiktok-page .sheet-discount {
  border-radius: 999px;
  background: #ffe2eb;
  color: var(--pink);
  padding: 4px 10px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.perfume10ml-tiktok-page .sheet-product-info del {
  margin-top: -2px;
  color: #8f8f8f;
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1;
  text-decoration-thickness: 1px;
}

.perfume10ml-tiktok-page .sheet-sale-bar {
  min-height: 42px;
  justify-content: flex-start;
  gap: 8px;
  margin-top: 18px;
  border-radius: 16px;
  background: linear-gradient(90deg, #fff0e8 0%, #ffe6ef 100%);
  color: #111;
  padding: 0 14px;
  font-size: 15px;
  font-weight: 500;
  box-shadow: none;
}

.perfume10ml-tiktok-page .sheet-sale-bar::before {
  content: "\26A1";
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff7070, var(--pink));
  color: #fff;
  font-size: 18px;
  line-height: 1;
}

.perfume10ml-tiktok-page .sheet-sale-bar b {
  color: #f05a28;
  font-size: 17px;
  font-weight: 700;
}

.perfume10ml-tiktok-page .variant-picker {
  margin-top: 18px;
}

.perfume10ml-tiktok-page .variant-picker h2 {
  color: #111;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}

.perfume10ml-tiktok-page .quantity-row h2 {
  color: #222;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.25;
}

/* Dong chu neu ro % "re hon" dang so voi gia le nao - tranh khach hieu nham moc so sanh. */
.perfume10ml-tiktok-page .variant-price-basis {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #f6f6f6;
  color: #555;
  font-size: 12.5px;
  line-height: 1.5;
}

.perfume10ml-tiktok-page .variant-price-basis b {
  color: #111;
  font-weight: 600;
}

.perfume10ml-tiktok-page .variant-picker p {
  margin-top: 4px;
  color: #767676;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.25;
}

.perfume10ml-tiktok-page .variant-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  overflow: visible;
  margin: 12px 0 0;
  padding: 0 0 10px;
}

.perfume10ml-tiktok-page .variant-card {
  position: relative;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1.5px solid #e2e2e2;
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(17, 17, 17, .04);
}

.perfume10ml-tiktok-page .variant-card .variant-zoom {
  left: 9px;
  right: auto;
  top: 9px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  background: rgba(92, 92, 92, .8);
  color: #fff;
  padding: 0;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(17, 17, 17, .16);
  backdrop-filter: blur(6px);
}

.perfume10ml-tiktok-page .variant-card .variant-zoom svg {
  width: 14px;
  height: 14px;
  display: block;
  stroke-width: 2.15;
}

.perfume10ml-tiktok-page .variant-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #fff6f1;
  cursor: pointer;
}

.perfume10ml-tiktok-page .variant-card.is-selected {
  border-color: var(--pink);
  background: #fff7fa;
  box-shadow: 0 0 0 1px var(--pink) inset, 0 12px 26px rgba(255, 45, 104, .12);
}

.perfume10ml-tiktok-page .variant-card.is-selected::after {
  content: "\2713";
  position: absolute;
  right: 10px;
  top: 10px;
  bottom: auto;
  z-index: 4;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--pink);
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(255, 45, 104, .28);
}

.perfume10ml-tiktok-page .variant-card:not(.variant-card-combo).is-selected::after {
  right: 6px;
  top: 6px;
  width: 23px;
  height: 23px;
  border: 1px solid rgba(255, 45, 104, .2);
  background: rgba(255, 255, 255, .95);
  color: var(--pink);
  font-size: 15px;
  box-shadow: 0 5px 12px rgba(17, 17, 17, .12);
}

.perfume10ml-tiktok-page .variant-card:not(.variant-card-combo) {
  min-height: 0;
  aspect-ratio: auto;
  overflow: hidden;
  border: 2.5px solid #d4d4d4;
  border-radius: 9px;
  background: #fff;
  box-shadow: none;
}

.perfume10ml-tiktok-page .variant-card:not(.variant-card-combo).is-selected {
  border: 2px solid var(--pink);
  background: #fff7fa;
  box-shadow: 0 0 0 1px rgba(255, 45, 104, .2) inset;
}

.perfume10ml-tiktok-page .variant-copy {
  min-height: 66px;
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 8px;
  text-align: left;
}

.perfume10ml-tiktok-page .variant-card:not(.variant-card-combo) img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  margin: 0;
  border-radius: 0;
  object-fit: cover;
}

.perfume10ml-tiktok-page .variant-card:not(.variant-card-combo) .variant-zoom {
  left: 6px;
  top: 6px;
  width: 23px;
  height: 23px;
  box-shadow: 0 2px 8px rgba(17, 17, 17, .18);
}

.perfume10ml-tiktok-page .variant-card:not(.variant-card-combo) .variant-zoom svg {
  width: 13px;
  height: 13px;
}

.perfume10ml-tiktok-page .variant-card:not(.variant-card-combo) .variant-copy {
  position: static;
  min-height: 62px;
  display: grid;
  align-content: start;
  gap: 2px;
  padding: 7px 5px 6px;
  background: transparent;
  color: #111;
  text-align: center;
}

.perfume10ml-tiktok-page .variant-name {
  color: #111;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.15;
}

.perfume10ml-tiktok-page .variant-note {
  display: -webkit-box;
  overflow: hidden;
  color: #6f6f6f;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.16;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.perfume10ml-tiktok-page .variant-card:not(.variant-card-combo) .variant-name {
  color: #111;
  display: -webkit-box;
  overflow: hidden;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.12;
  text-shadow: none;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.perfume10ml-tiktok-page .variant-card:not(.variant-card-combo) .variant-note {
  display: -webkit-box;
  overflow: hidden;
  color: #777;
  font-size: 10px;
  line-height: 1.16;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.perfume10ml-tiktok-page .variant-tag {
  display: block;
  overflow: hidden;
  color: var(--pink);
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.12;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.perfume10ml-tiktok-page .variant-subnote {
  display: block;
  color: #7a7a7a;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.18;
}

.perfume10ml-tiktok-page .variant-hot {
  display: none;
}

.perfume10ml-tiktok-page .variant-card-combo {
  grid-column: 1 / -1;
  min-height: 110px;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border: 2.5px solid #c5c5c5;
  border-radius: 18px;
  background: #fff;
  padding: 10px;
}

.perfume10ml-tiktok-page .variant-card-combo::before {
  content: none;
}

.perfume10ml-tiktok-page .variant-card-combo.is-selected {
  border-color: var(--pink);
  background: linear-gradient(90deg, #fff7fa 0%, #fff 100%);
  box-shadow: 0 0 0 1px var(--pink) inset, 0 12px 26px rgba(255, 45, 104, .12);
}

.perfume10ml-tiktok-page .variant-card-combo.is-selected::after {
  right: 12px;
  top: 12px;
  width: 34px;
  height: 34px;
  font-size: 22px;
}

.perfume10ml-tiktok-page .variant-card-combo img {
  width: 96px;
  height: 96px;
  border-radius: 14px;
}

.perfume10ml-tiktok-page .variant-card-combo .variant-zoom {
  left: 18px;
  top: 18px;
}

.perfume10ml-tiktok-page .variant-card-combo .variant-copy {
  min-height: auto;
  align-content: center;
  gap: 4px;
  padding: 1px 38px 1px 0;
}

.perfume10ml-tiktok-page .variant-card-combo .variant-name {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.12;
}

.perfume10ml-tiktok-page .variant-card-combo .variant-note {
  color: #5d5d5d;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.22;
  -webkit-line-clamp: 2;
}

.perfume10ml-tiktok-page .variant-badge {
  order: -1;
  width: max-content;
  max-width: 100%;
  margin: 0 0 2px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  border-radius: 999px;
  background: #ffe6ee;
  color: var(--pink);
  padding: 5px 7px;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
}

.perfume10ml-tiktok-page .variant-card.is-selected .variant-badge {
  border-color: transparent;
  background: #ffe6ee;
  color: var(--pink);
}

.perfume10ml-tiktok-page .variant-badge::before {
  content: "\2605";
  font-size: 13px;
}

.perfume10ml-tiktok-page .variant-saving {
  width: max-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  border: 0;
  border-radius: 999px;
  background: var(--pink);
  color: #fff;
  padding: 5px 7px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.perfume10ml-tiktok-page .variant-card.is-selected .variant-saving {
  border-color: transparent;
  background: var(--pink);
  color: #fff;
}

.perfume10ml-tiktok-page .quantity-row {
  min-height: 58px;
  margin-top: 2px;
  border-top: 1px solid #ececec;
  padding-top: 12px;
}

.perfume10ml-tiktok-page .quantity-stepper {
  width: 132px;
  height: 44px;
  grid-template-columns: 42px 1fr 42px;
  overflow: hidden;
  border: 1px solid #e5e5e5;
  border-radius: 14px;
  background: #fff;
}

.perfume10ml-tiktok-page .quantity-stepper button {
  color: #111;
  font-size: 25px;
  font-weight: 400;
}

.perfume10ml-tiktok-page .quantity-stepper button:disabled {
  color: #b7b7b7;
}

.perfume10ml-tiktok-page .quantity-stepper span {
  border-left: 1px solid #ededed;
  border-right: 1px solid #ededed;
  font-size: 17px;
  font-weight: 400;
}

.perfume10ml-tiktok-page .variant-actions {
  border-top: 10px solid #efefef;
  background: #fff;
  padding: 10px 18px calc(14px + var(--safe-bottom));
}

.perfume10ml-tiktok-page .variant-total-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 2px 12px;
  margin: 0 0 10px;
}

.perfume10ml-tiktok-page .variant-total-row[hidden] {
  display: none;
}

.perfume10ml-tiktok-page .variant-total-row span {
  min-width: 0;
  color: #111;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.15;
}

.perfume10ml-tiktok-page .variant-total-row strong {
  color: var(--pink);
  font-size: 23px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.perfume10ml-tiktok-page .variant-total-row em {
  grid-column: 2;
  color: var(--pink);
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.15;
  text-align: right;
  white-space: nowrap;
}

.perfume10ml-tiktok-page .variant-action {
  min-height: 60px;
  flex-direction: column;
  gap: 5px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--pink) 0%, #ff1f5f 100%);
  box-shadow: 0 10px 22px rgba(255, 45, 104, .22);
}

.perfume10ml-tiktok-page .variant-action:disabled {
  opacity: .96;
  cursor: default;
}

.perfume10ml-tiktok-page .variant-action::before {
  content: none;
}

.perfume10ml-tiktok-page .variant-action b,
.perfume10ml-tiktok-page .variant-action span {
  display: block;
  color: #fff;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

.perfume10ml-tiktok-page .variant-action b {
  font-size: 20px;
  font-weight: 800;
}

.perfume10ml-tiktok-page .variant-action span {
  font-size: 14px;
  font-weight: normal;
}

.perfume10ml-tiktok-page .variant-action span i {
  font-style: normal;
}

.perfume10ml-tiktok-page .variant-sheet--needs-selection .variant-action {
  min-height: 48px;
  flex-direction: row;
  gap: 0;
}

.perfume10ml-tiktok-page .variant-sheet--needs-selection .variant-action b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.perfume10ml-tiktok-page .variant-sheet--needs-selection .variant-action b::before {
  content: "";
  width: 17px;
  height: 15px;
  display: inline-block;
  margin-right: 8px;
  border: 2px solid currentColor;
  border-radius: 4px 4px 6px 6px;
  box-shadow: inset 0 5px 0 rgba(255, 255, 255, .24);
  background: radial-gradient(circle at 50% -2px, transparent 0 6px, currentColor 6px 8px, transparent 8px) top center / 14px 9px no-repeat;
}

.perfume10ml-tiktok-page .variant-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 3px 0 0;
  color: #777;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

.perfume10ml-tiktok-page .variant-trust span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.perfume10ml-tiktok-page .variant-trust span::before {
  content: "\2713";
  width: 13px;
  height: 13px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #777;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
}

@media (max-width: 370px) {
  .perfume10ml-tiktok-page .variant-sheet-scroll {
    padding-left: 14px;
    padding-right: 14px;
  }

  .perfume10ml-tiktok-page .sheet-product-card {
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 12px;
    padding-right: 46px;
  }

  .perfume10ml-tiktok-page .sheet-preview {
    width: 104px;
    height: 104px;
  }

  .perfume10ml-tiktok-page .sheet-product-title {
    font-size: 15px;
  }

  .perfume10ml-tiktok-page .sheet-price-line strong {
    font-size: 20px;
  }

  .perfume10ml-tiktok-page .variant-card-combo {
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 10px;
  }

  .perfume10ml-tiktok-page .variant-card-combo img {
    width: 84px;
    height: 84px;
  }

  .perfume10ml-tiktok-page .variant-card-combo .variant-name {
    font-size: 16.5px;
  }

  .perfume10ml-tiktok-page .variant-card-combo .variant-note {
    font-size: 12px;
  }

  .perfume10ml-tiktok-page .variant-badge,
  .perfume10ml-tiktok-page .variant-saving {
    font-size: 10px;
    padding: 4px 6px;
  }

  .perfume10ml-tiktok-page .variant-action b,
  .perfume10ml-tiktok-page .variant-action span {
    font-size: 15px;
  }
}

@media (max-width: 480px) {
  .perfume10ml-tiktok-page .tab {
    font-size: 15px;
  }

  .perfume10ml-tiktok-page .product-title h1 {
    font-size: 16px;
    line-height: 1.28;
  }

  .perfume10ml-tiktok-page .rating-line,
  .perfume10ml-tiktok-page .shipping-row p,
  .perfume10ml-tiktok-page .shipping-row span,
  .perfume10ml-tiktok-page .guarantee-row span,
  .perfume10ml-tiktok-page .option-row span,
  .perfume10ml-tiktok-page .review-item p,
  .perfume10ml-tiktok-page .review-item span,
  .perfume10ml-tiktok-page .about-product,
  .perfume10ml-tiktok-page .spec-grid,
  .perfume10ml-tiktok-page .description-order-ship,
  .perfume10ml-tiktok-page .description-order-field > span,
  .perfume10ml-tiktok-page .order-product-main p,
  .perfume10ml-tiktok-page .order-product-main span,
  .perfume10ml-tiktok-page .order-total-card > div:not(.order-summary-divider),
  .perfume10ml-tiktok-page .reviews-sort-row,
  .perfume10ml-tiktok-page .review-layer-meta,
  .perfume10ml-tiktok-page .review-layer-footer {
    font-size: 13px;
  }

  .perfume10ml-tiktok-page .creator-videos h2,
  .perfume10ml-tiktok-page .section-heading h2,
  .perfume10ml-tiktok-page .about-product h2,
  .perfume10ml-tiktok-page .description-copy h2,
  .perfume10ml-tiktok-page .description-order-head h2,
  .perfume10ml-tiktok-page .variant-picker h2,
  .perfume10ml-tiktok-page .quantity-row h2,
  .perfume10ml-tiktok-page .order-form h3,
  .perfume10ml-tiktok-page .reviews-layer-header h2 {
    font-size: 17px;
  }

  .perfume10ml-tiktok-page .description-copy h3,
  .perfume10ml-tiktok-page .review-layer-name,
  .perfume10ml-tiktok-page .order-total-line span {
    font-size: 15px;
  }

  .perfume10ml-tiktok-page .description-copy p,
  .perfume10ml-tiktok-page .description-copy ul,
  .perfume10ml-tiktok-page .review-filter,
  .perfume10ml-tiktok-page .review-layer-comment,
  .perfume10ml-tiktok-page .description-order-submit,
  .perfume10ml-tiktok-page .variant-name,
  .perfume10ml-tiktok-page .variant-card-combo .variant-note,
  .perfume10ml-tiktok-page .sheet-sale-bar {
    font-size: 14px;
  }

  .perfume10ml-tiktok-page .flash-right b,
  .perfume10ml-tiktok-page .sheet-product-title,
  .perfume10ml-tiktok-page .variant-card-combo .variant-name,
  .perfume10ml-tiktok-page .order-header h2 {
    font-size: 17px;
  }

  .perfume10ml-tiktok-page .flash-left strong,
  .perfume10ml-tiktok-page .sheet-price-line strong,
  .perfume10ml-tiktok-page .order-product-main strong,
  .perfume10ml-tiktok-page .order-total-line strong {
    font-size: 20px;
  }

  .perfume10ml-tiktok-page .variant-action b,
  .perfume10ml-tiktok-page .variant-action span,
  .perfume10ml-tiktok-page .order-footer button b {
    font-size: 16px;
  }

  .perfume10ml-tiktok-page .description-order-field input,
  .perfume10ml-tiktok-page .description-order-field select,
  .perfume10ml-tiktok-page .description-qty-control input,
  .perfume10ml-tiktok-page .order-field input {
    font-size: 16px;
  }

  .perfume10ml-tiktok-page .variant-sheet .sheet-mall-bar b,
  .perfume10ml-tiktok-page .variant-sheet .quantity-row h2 {
    font-size: 15px;
  }

  .perfume10ml-tiktok-page .variant-sheet .sheet-product-title {
    font-size: 18px;
  }

  .perfume10ml-tiktok-page .variant-sheet .sheet-choice-line {
    font-size: 22px;
  }

  .perfume10ml-tiktok-page .variant-sheet .variant-picker h2 {
    font-size: 20px;
  }

  .perfume10ml-tiktok-page .variant-sheet .sheet-mall-bar span,
  .perfume10ml-tiktok-page .variant-sheet .variant-picker p,
  .perfume10ml-tiktok-page .variant-sheet .variant-card-combo .variant-note,
  .perfume10ml-tiktok-page .variant-sheet .variant-subnote {
    font-size: 12px;
  }

  .perfume10ml-tiktok-page .variant-sheet .variant-name {
    font-size: 13px;
  }

  .perfume10ml-tiktok-page .variant-sheet .variant-card:not(.variant-card-combo) .variant-name {
    font-size: 14px;
  }

  .perfume10ml-tiktok-page .variant-sheet .variant-card-combo .variant-name {
    font-size: 18px;
  }

  .perfume10ml-tiktok-page .variant-sheet .sheet-sale-bar,
  .perfume10ml-tiktok-page .variant-sheet .sheet-product-info del,
  .perfume10ml-tiktok-page .variant-sheet .variant-action b,
  .perfume10ml-tiktok-page .variant-sheet .variant-action span {
    font-size: 14px;
  }

  .perfume10ml-tiktok-page .variant-sheet .sheet-price-line strong {
    font-size: 18px;
  }

  .perfume10ml-tiktok-page .variant-sheet .sheet-discount,
  .perfume10ml-tiktok-page .variant-sheet .quantity-stepper span {
    font-size: 15px;
  }

  .perfume10ml-tiktok-page .variant-sheet .variant-badge,
  .perfume10ml-tiktok-page .variant-sheet .variant-saving,
  .perfume10ml-tiktok-page .variant-sheet .variant-note,
  .perfume10ml-tiktok-page .variant-sheet .variant-trust {
    font-size: 10px;
  }

  .perfume10ml-tiktok-page .variant-sheet .variant-total-row span {
    font-size: 20px;
  }

  .perfume10ml-tiktok-page .variant-sheet .variant-total-row strong {
    font-size: 22px;
  }

  .perfume10ml-tiktok-page .variant-sheet .variant-total-row em {
    font-size: 13px;
  }

  .perfume10ml-tiktok-page .variant-sheet .variant-action b {
    font-size: 22px;
  }

  .perfume10ml-tiktok-page .variant-sheet--needs-selection .variant-action b {
    font-size: 16px;
  }

  .perfume10ml-tiktok-page .variant-sheet .variant-action span {
    font-size: 12px;
  }

  .perfume10ml-tiktok-page .order-popup .order-header h2,
  .perfume10ml-tiktok-page .order-popup .order-form h3 {
    font-size: 15px;
  }

  .perfume10ml-tiktok-page .order-popup .order-product-main h3 {
    font-size: 14px;
  }

  .perfume10ml-tiktok-page .order-popup .order-footer button b {
    font-size: 18px;
  }

  .perfume10ml-tiktok-page .order-popup .order-footer-summary span {
    font-size: 15px;
  }

  .perfume10ml-tiktok-page .order-popup .order-footer-summary strong {
    font-size: 20px;
    font-weight: normal;
  }

  .perfume10ml-tiktok-page .order-popup .order-footer-summary em {
    font-size: 13.5px;
  }

  .perfume10ml-tiktok-page .order-popup .order-product-main p,
  .perfume10ml-tiktok-page .order-popup .order-product-main span,
  .perfume10ml-tiktok-page .order-popup .order-total-card > div:not(.order-summary-divider),
  .perfume10ml-tiktok-page .order-popup .order-footer button span {
    font-size: 11.5px;
  }

  .perfume10ml-tiktok-page .order-popup .order-footer button span {
    font-size: 12px;
    font-weight: normal;
  }

  .perfume10ml-tiktok-page .order-popup .order-product-main strong,
  .perfume10ml-tiktok-page .order-popup .order-total-line strong {
    font-size: 17px;
  }

  .perfume10ml-tiktok-page .order-popup .order-total-line span {
    font-size: 16px;
  }

  .perfume10ml-tiktok-page .order-popup .order-stepper span,
  .perfume10ml-tiktok-page .order-popup .order-field small {
    font-size: 12px;
  }

  .perfume10ml-tiktok-page .order-popup .order-field input {
    font-size: 16px;
  }
}

@media (max-width: 360px) {
  .perfume10ml-tiktok-page .tab {
    font-size: 14px;
  }

  .perfume10ml-tiktok-page .product-title h1 {
    font-size: 15.5px;
  }

  .perfume10ml-tiktok-page .description-copy p,
  .perfume10ml-tiktok-page .description-copy ul,
  .perfume10ml-tiktok-page .review-layer-comment {
    font-size: 13.5px;
  }

  .perfume10ml-tiktok-page .variant-total-row span {
    font-size: 18px;
  }

  .perfume10ml-tiktok-page .variant-total-row strong {
    font-size: 19px;
  }

  .perfume10ml-tiktok-page .variant-total-row em {
    font-size: 14px;
  }

  .perfume10ml-tiktok-page .variant-action b {
    font-size: 18px;
  }

  .perfume10ml-tiktok-page .variant-action span {
    font-size: 13.5px;
  }
}

/* ===== Form đặt hàng nhanh: cùng bộ đòn bẩy với popup Mua ngay (theo cấu trúc obaria199) ===== */

/* Ruột thẻ phân loại: tên → nhãn → đơn giá/thỏi xếp dọc, giá nằm cột phải */
.perfume10ml-tiktok-page .description-combo-card > span > b {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}

.perfume10ml-tiktok-page .description-combo-name {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.25;
}

.perfume10ml-tiktok-page .description-combo-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* Ruy-băng treo trên viền, giống .order-pick-tags: không ăn chiều cao thẻ và
   không tranh bề ngang với cột giá. */
.perfume10ml-tiktok-page .description-combo-card > span {
  position: relative;
}

.perfume10ml-tiktok-page .description-combo-card > span > .description-combo-tags {
  position: absolute;
  top: -9px;
  left: 11px;
  padding: 0 3px;
  background: inherit;
}

.perfume10ml-tiktok-page .description-combo-tags em {
  padding: 1.5px 6px;
  border-radius: 999px;
  background: #ffe9f0;
  color: var(--pink);
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}

/* Nhãn tiết kiệm đứng cạnh badge: tách màu xanh cho khỏi chìm vào badge hồng */
.perfume10ml-tiktok-page .description-combo-tags em + em {
  background: #e6f6ec;
  color: #17a34a;
}

/* Ngôi sao cho nhãn đầu tiên ("Chọn nhiều nhất" / "Tiết kiệm nhất") ở card phân loại */
.perfume10ml-tiktok-page .description-combo-tags em:first-child::before {
  content: "\2605";
  margin-right: 3px;
  font-size: 11px;
}

.perfume10ml-tiktok-page em.description-combo-unit {
  display: block;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 600;
  color: #8a8a8a;
  line-height: 1.25;
}

.perfume10ml-tiktok-page .description-combo-card.featured em.description-combo-unit,
.perfume10ml-tiktok-page .description-combo-card.has-badge em.description-combo-unit {
  color: #17a34a;
  font-weight: 700;
}

/* Giá gốc gạch ngang trên card phân loại */
/* Xếp giá gạch lên trên giá bán (thay vì nằm ngang) - cột giá hẹp lại khoảng 120px,
   trả chỗ cho cột chữ nên dòng đơn giá/thỏi không còn rớt xuống 2 dòng. */
.perfume10ml-tiktok-page .description-combo-card small del {
  display: block;
  color: #9b9b9b;
  font-size: 12px;
  font-weight: 400;
  text-decoration: line-through;
}

.perfume10ml-tiktok-page .description-combo-card > span > small {
  text-align: right;
  line-height: 1.3;
}

/* Nút gợi ý nâng cấp lên combo */
.perfume10ml-tiktok-page .description-order-upgrade,
.perfume10ml-tiktok-page .order-upgrade {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 11px;
  border: 1.5px dashed var(--pink);
  border-radius: 8px;
  background: #fff7fa;
  text-align: left;
  cursor: pointer;
}

.perfume10ml-tiktok-page .description-order-upgrade[hidden],
.perfume10ml-tiktok-page .order-upgrade[hidden] { display: none; }

.perfume10ml-tiktok-page .order-upgrade { margin: 0 12px 12px; width: auto; }

.perfume10ml-tiktok-page .description-order-upgrade-copy,
.perfume10ml-tiktok-page .order-upgrade-copy { flex: 1 1 auto; min-width: 0; }

.perfume10ml-tiktok-page .description-order-upgrade-copy b,
.perfume10ml-tiktok-page .order-upgrade-copy b {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--pink);
}

.perfume10ml-tiktok-page .description-order-upgrade-copy small,
.perfume10ml-tiktok-page .order-upgrade-copy small {
  display: block;
  margin-top: 2px;
  font-size: 10.5px;
  font-weight: 400;
  color: #6d6d6d;
  white-space: normal;
}

.perfume10ml-tiktok-page .description-order-upgrade-cta,
.perfume10ml-tiktok-page .order-upgrade-cta {
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--pink);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}

/* Dòng "chưa dùng ưu đãi bộ đôi" */
.perfume10ml-tiktok-page .description-order-lines .description-order-miss,
.perfume10ml-tiktok-page .order-summary-miss {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  color: var(--pink);
  font-size: 12.5px;
  font-weight: 600;
}

.perfume10ml-tiktok-page .description-order-lines .description-order-miss[hidden],
.perfume10ml-tiktok-page .order-summary-miss[hidden] { display: none; }

.perfume10ml-tiktok-page .description-order-miss span::before,
.perfume10ml-tiktok-page .order-summary-miss span::before {
  content: "\26A0";
  margin-right: 5px;
}

.perfume10ml-tiktok-page .description-order-miss b,
.perfume10ml-tiktok-page .order-summary-miss b {
  font-weight: 700;
  white-space: nowrap;
}

/* Ô ghi chú không bắt buộc → bỏ dấu * mà CSS nền tự thêm */
.perfume10ml-tiktok-page .description-order-field.is-optional > span::after {
  content: "";
}

.perfume10ml-tiktok-page em.opt {
  font-style: normal;
  font-weight: 400;
  color: #9b9b9b;
  font-size: .92em;
}

/* Dòng tin cậy dưới nút đặt hàng */
.perfume10ml-tiktok-page .order-trust-note {
  margin: 8px 0 0;
  font-size: 10.5px;
  line-height: 1.5;
  color: #7a7a7a;
  text-align: center;
}

/* ===== Popup đặt hàng: port nguyên cấu trúc + giao diện từ obaria199.php =====
   Nguồn: css/obaria-vo-chong.css (nền) + khối <style> nội tuyến của obaria199.php (đè).
   Đổi scope .product-standalone-page -> .perfume10ml-tiktok-page cho khớp trang này. */

.perfume10ml-tiktok-page { --plum: #431528; }

.perfume10ml-tiktok-page .order-backdrop {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: rgba(0,0,0,.62);
}
.perfume10ml-tiktok-page .order-popup {
  position: fixed;
  left: 50%;
  top: 0;
  bottom: 0;
  z-index: 120;
  width: var(--shell-width);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  transform: translateX(-50%);
  overflow: hidden;
  border-radius: 0;
  background: #fff;
  color: #1b1b1b;
  font-family: inherit;
  box-shadow: 0 0 0 1px rgba(0,0,0,.04);
}
.perfume10ml-tiktok-page .order-header {
  min-height: 58px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 46px;
  align-items: center;
  border-bottom: 1px solid var(--divider);
  padding: 8px 12px 4px;
  background: #fff;
}
.perfume10ml-tiktok-page .order-header h2 {
  margin: 0;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0;
}
.perfume10ml-tiktok-page .order-header button {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: #111;
  padding: 0;
}
.perfume10ml-tiktok-page .order-header svg {
  width: 28px;
  height: 28px;
  stroke-width: 2.35;
}
.perfume10ml-tiktok-page .order-body {
  overflow-y: auto;
  padding: 14px 16px 18px;
  scrollbar-width: none;
}
.perfume10ml-tiktok-page .order-body::-webkit-scrollbar {
  display: none;
}
.perfume10ml-tiktok-page .order-stepper {
  grid-column: 2;
  justify-self: end;
  width: 112px;
  height: 38px;
  display: grid;
  grid-template-columns: 1fr 40px 1fr;
  align-items: center;
  overflow: hidden;
  border: 1px solid #e9ccd4;
  border-radius: 8px;
  background: #fff;
}
.perfume10ml-tiktok-page .order-stepper button {
  height: 100%;
  border: 0;
  background: #fff7f9;
  color: var(--pink);
  font-size: 25px;
  font-weight: 400;
  line-height: 1;
}
.perfume10ml-tiktok-page .order-stepper button:disabled {
  color: #c9c9c9;
}
.perfume10ml-tiktok-page .order-stepper span {
  display: grid;
  height: 100%;
  place-items: center;
  border-left: 1px solid #f0dfe4;
  border-right: 1px solid #f0dfe4;
  color: #111;
  font-size: 17px;
  font-weight: 400;
}
.perfume10ml-tiktok-page .order-form {
  margin-top: 15px;
}
.perfume10ml-tiktok-page .order-form h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 700;
}
.perfume10ml-tiktok-page .order-form h3 svg,
.perfume10ml-tiktok-page .order-field > svg {
  color: #e64972;
  stroke-width: 2.15;
}
.perfume10ml-tiktok-page .order-form h3 svg {
  width: 24px;
  height: 24px;
}
.perfume10ml-tiktok-page .order-field {
  display: block;
  margin-bottom: 10px;
}
.perfume10ml-tiktok-page .order-field:focus-within {
  border-color: transparent;
}
.perfume10ml-tiktok-page .order-field-label {
  display: block;
  margin-bottom: 7px;
  color: #333;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
}
.perfume10ml-tiktok-page .order-field-label em {
  color: var(--pink);
  font-style: normal;
  font-weight: 900;
}
.perfume10ml-tiktok-page .order-field-required input,
.perfume10ml-tiktok-page .order-field-required textarea {
  padding-right: 0;
}
.perfume10ml-tiktok-page .order-field.is-invalid {
  background: transparent;
}
.perfume10ml-tiktok-page .order-field-tall {
  min-height: 0;
}
.perfume10ml-tiktok-page .order-field > svg {
  display: none;
}
.perfume10ml-tiktok-page .order-field input,
.perfume10ml-tiktok-page .order-field textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid #b8b8b8;
  border-radius: 5px;
  outline: 0;
  background: #fff;
  color: #222;
  font: inherit;
  font-size: 16px;
  font-weight: 400;
  padding: 0 10px;
}
.perfume10ml-tiktok-page .order-field input {
  height: 42px;
}
.perfume10ml-tiktok-page .order-field textarea {
  min-height: 52px;
  padding-top: 9px;
  padding-bottom: 9px;
  line-height: 1.3;
  resize: none;
  overflow: hidden;
}
.perfume10ml-tiktok-page .order-field input:focus,
.perfume10ml-tiktok-page .order-field textarea:focus {
  border-color: #b8b8b8;
  box-shadow: none;
}
.perfume10ml-tiktok-page .order-field.is-invalid input,
.perfume10ml-tiktok-page .order-field.is-invalid textarea {
  border-color: var(--pink);
  background: #fff8fa;
}
.perfume10ml-tiktok-page .order-field input::placeholder,
.perfume10ml-tiktok-page .order-field textarea::placeholder {
  color: #8e8e8e;
}
.perfume10ml-tiktok-page .order-field input[data-order-customer-area]::placeholder,
.perfume10ml-tiktok-page .order-field textarea[data-order-customer-area]::placeholder {
  font-size: 16px;
}
.perfume10ml-tiktok-page .order-field small {
  display: block;
  margin-top: 4px;
  color: #999;
  font-size: 12px;
  line-height: 1.2;
}
.perfume10ml-tiktok-page .order-error {
  display: none !important;
  color: var(--pink) !important;
  font-weight: 500;
}
.perfume10ml-tiktok-page .order-field.is-invalid .order-error {
  display: block !important;
}
.perfume10ml-tiktok-page .order-total-card {
  margin-top: 16px;
  border: 1px solid #e4e4e4;
  border-radius: 10px;
  background: #fff;
  padding: 13px 14px;
}
.perfume10ml-tiktok-page .order-total-card div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: #333;
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.35;
}
.perfume10ml-tiktok-page .order-total-card div + div {
  margin-top: 9px;
}
.perfume10ml-tiktok-page .order-total-card b {
  font-weight: 600;
}
.perfume10ml-tiktok-page .order-total-line {
  margin-top: 13px !important;
  border-top: 1px dashed #ddd;
  padding-top: 13px;
}
.perfume10ml-tiktok-page .order-total-line span,
.perfume10ml-tiktok-page .order-total-line strong {
  color: var(--pink);
  font-size: 17px;
  font-weight: 700;
}
.perfume10ml-tiktok-page .order-total-line strong {
  font-size: 22px;
}
.perfume10ml-tiktok-page .order-footer {
  border-top: 1px solid #f0f0f0;
  background: #fff;
  padding: 12px 16px calc(15px + var(--safe-bottom));
}
.perfume10ml-tiktok-page .order-footer button {
  width: 100%;
  min-height: 64px;
  display: grid;
  grid-template-rows: auto auto;
  justify-content: center;
  align-items: center;
  row-gap: 1px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(180deg, #f23868 0%, #df164f 100%);
  color: #fff;
  box-shadow: 0 8px 18px rgba(223,22,79,.24);
}
.perfume10ml-tiktok-page .order-footer b {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.06;
}
.perfume10ml-tiktok-page .order-footer span {
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.18;
  opacity: .96;
}
@media (max-width: 360px) {
  .perfume10ml-tiktok-page .order-popup {
    left: 50%;
    top: 0;
    bottom: 0;
    width: var(--shell-width);
    border-radius: 0;
  }
  .perfume10ml-tiktok-page .order-header {
    min-height: 54px;
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    padding: 6px 8px 4px;
  }
  .perfume10ml-tiktok-page .order-header h2 {
    font-size: 18px;
    font-weight: 700;
  }
  .perfume10ml-tiktok-page .order-header button {
    width: 38px;
    height: 38px;
  }
  .perfume10ml-tiktok-page .order-header svg {
    width: 27px;
    height: 27px;
  }
  .perfume10ml-tiktok-page .order-body {
    padding: 10px 12px 12px;
  }
  .perfume10ml-tiktok-page .order-stepper {
    width: 106px;
    height: 36px;
    grid-template-columns: 1fr 38px 1fr;
  }
  .perfume10ml-tiktok-page .order-form h3 {
    font-size: 16px;
    font-weight: 700;
  }
  .perfume10ml-tiktok-page .order-field {
    min-height: 0;
    padding: 0;
  }
  .perfume10ml-tiktok-page .order-field-tall {
    min-height: 0;
  }
  .perfume10ml-tiktok-page .order-field input,
  .perfume10ml-tiktok-page .order-field textarea {
    font-size: 16px;
  }
  .perfume10ml-tiktok-page .order-total-card {
    padding: 12px;
  }
  .perfume10ml-tiktok-page .order-total-line span {
    font-size: 17px;
  }
  .perfume10ml-tiktok-page .order-total-line strong {
    font-size: 20px;
  }
  .perfume10ml-tiktok-page .order-footer {
    padding: 10px 12px calc(13px + var(--safe-bottom));
  }
  .perfume10ml-tiktok-page .order-footer button {
    min-height: 62px;
    border-radius: 14px;
  }
  .perfume10ml-tiktok-page .order-footer b {
    font-size: 19.5px;
    font-weight: 700;
  }
  .perfume10ml-tiktok-page .order-footer span {
    font-size: 13.5px;
  }
}
@media (max-width: 480px) {
  .perfume10ml-tiktok-page .rating-line,
  .perfume10ml-tiktok-page .shipping-row p,
  .perfume10ml-tiktok-page .shipping-row span,
  .perfume10ml-tiktok-page .guarantee-row span,
  .perfume10ml-tiktok-page .option-row span,
  .perfume10ml-tiktok-page .review-item p,
  .perfume10ml-tiktok-page .review-item span,
  .perfume10ml-tiktok-page .about-product,
  .perfume10ml-tiktok-page .spec-grid,
  .perfume10ml-tiktok-page .description-order-ship,
  .perfume10ml-tiktok-page .description-order-field > span,
  .perfume10ml-tiktok-page .order-product-main p,
  .perfume10ml-tiktok-page .order-product-main span,
  .perfume10ml-tiktok-page .order-total-card div,
  .perfume10ml-tiktok-page .reviews-sort-row,
  .perfume10ml-tiktok-page .review-layer-meta,
  .perfume10ml-tiktok-page .review-layer-footer {
    font-size: 13px;
  }
  .perfume10ml-tiktok-page .creator-videos h2,
  .perfume10ml-tiktok-page .section-heading h2,
  .perfume10ml-tiktok-page .about-product h2,
  .perfume10ml-tiktok-page .description-copy h2,
  .perfume10ml-tiktok-page .description-order-head h2,
  .perfume10ml-tiktok-page .variant-picker h2,
  .perfume10ml-tiktok-page .quantity-row h2,
  .perfume10ml-tiktok-page .order-form h3,
  .perfume10ml-tiktok-page .reviews-layer-header h2 {
    font-size: 17px;
  }
  .perfume10ml-tiktok-page .description-copy h3,
  .perfume10ml-tiktok-page .review-layer-name,
  .perfume10ml-tiktok-page .order-total-line span {
    font-size: 15px;
  }
  .perfume10ml-tiktok-page .flash-right b,
  .perfume10ml-tiktok-page .sheet-product-title,
  .perfume10ml-tiktok-page .variant-card-combo .variant-name,
  .perfume10ml-tiktok-page .order-header h2 {
    font-size: 17px;
  }
  .perfume10ml-tiktok-page .flash-left strong,
  .perfume10ml-tiktok-page .sheet-price-line strong,
  .perfume10ml-tiktok-page .order-product-main strong,
  .perfume10ml-tiktok-page .order-total-line strong {
    font-size: 20px;
  }
  .perfume10ml-tiktok-page .variant-action b,
  .perfume10ml-tiktok-page .variant-action span,
  .perfume10ml-tiktok-page .order-footer b {
    font-size: 18px;
  }
  .perfume10ml-tiktok-page .description-order-field input,
  .perfume10ml-tiktok-page .description-order-field select,
  .perfume10ml-tiktok-page .description-qty-control input,
  .perfume10ml-tiktok-page .order-field input,
  .perfume10ml-tiktok-page .order-field textarea {
    font-size: 16px;
  }
  .perfume10ml-tiktok-page .order-popup .order-header h2,
  .perfume10ml-tiktok-page .order-popup .order-form h3 {
    font-size: 15px;
  }
  .perfume10ml-tiktok-page .order-popup .order-product-main h3,
  .perfume10ml-tiktok-page .order-popup .order-total-line span {
    font-size: 14px;
  }
  .perfume10ml-tiktok-page .order-popup .order-footer b {
    font-size: 16px;
  }
  .perfume10ml-tiktok-page .order-popup .order-product-main p,
  .perfume10ml-tiktok-page .order-popup .order-product-main span,
  .perfume10ml-tiktok-page .order-popup .order-total-card div,
  .perfume10ml-tiktok-page .order-popup .order-footer span {
    font-size: 11.5px;
  }
  .perfume10ml-tiktok-page .order-popup .order-product-main strong,
  .perfume10ml-tiktok-page .order-popup .order-total-line strong {
    font-size: 18px;
  }
  .perfume10ml-tiktok-page .order-popup .order-stepper span,
  .perfume10ml-tiktok-page .order-popup .order-field small {
    font-size: 12px;
  }
  .perfume10ml-tiktok-page .order-popup .order-field input,
  .perfume10ml-tiktok-page .order-popup .order-field textarea {
    font-size: 16px;
  }
}
.perfume10ml-tiktok-page.muse-grace-landing .order-trust-note {
  color: #8a767d;
  font-size: 9.5px;
}
.perfume10ml-tiktok-page.muse-grace-landing .sheet-mall-bar,
.perfume10ml-tiktok-page.muse-grace-landing .order-header {
  background: var(--plum);
  color: #fff;
}
.perfume10ml-tiktok-page .order-trust-note {
      margin: 8px 0 0;
      text-align: center;
      font-size: 11px;
      line-height: 1.45;
      color: var(--muted);
}
/* ===== Popup đặt hàng 1 bước: Khuyến mại → SĐT → Tên → Địa chỉ → Chọn mùi ===== */
    .perfume10ml-tiktok-page .order-promo {
      margin: 0 0 14px;
      padding: 12px 14px;
      border-radius: 12px;
      background: var(--voucher-bg);
      border: 1px solid var(--voucher-border);
}
.perfume10ml-tiktok-page .order-promo > b {
      display: block;
      margin-bottom: 8px;
      font-size: 13px;
      color: var(--pink-2);
}
.perfume10ml-tiktok-page .order-promo ul {
      margin: 0;
      padding: 0;
      list-style: none;
      display: grid;
      gap: 7px;
}
.perfume10ml-tiktok-page .order-promo li {
      display: flex;
      align-items: center;
      gap: 9px;
      font-size: 12.5px;
      line-height: 1.35;
      color: #4a3b3f;
}
.perfume10ml-tiktok-page .order-promo li::before {
      content: "";
      flex: 0 0 auto;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--pink);
}
.perfume10ml-tiktok-page .order-promo strong { color: var(--pink-2);
}
.perfume10ml-tiktok-page .order-pick { margin-top: 16px;
}
.perfume10ml-tiktok-page .order-pick h3 {
      margin: 0 0 9px;
      font-size: 14px;
      font-weight: 700;
      color: #1f1f1f;
}
/* grid-auto-rows: 1fr ép 4 ô cao bằng nhau kể cả khi máy hẹp làm chữ rớt dòng -
   không phụ thuộc vào việc đoán độ dài chữ nữa. */
.perfume10ml-tiktok-page .order-pick-list { display: grid; grid-auto-rows: 1fr; gap: 12px; padding-top: 6px;
}
.perfume10ml-tiktok-page .order-pick-card {
      display: grid;
      grid-template-columns: 46px minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
      width: 100%;
      padding: 9px 11px;
      border: 1.5px solid var(--divider);
      border-radius: 12px;
      background: #fff;
      text-align: left;
}
.perfume10ml-tiktok-page .order-pick-card.is-selected {
      border-color: var(--pink);
      background: var(--voucher-bg);
}
/* Badge + nhãn tiết kiệm nằm chung một hàng ngang, tự xuống dòng khi máy hẹp */
.perfume10ml-tiktok-page .order-pick-tags {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 4px;
}

/* Hàng nhãn treo đè lên viền trên như ruy-băng: nằm ngoài luồng nên ô có badge
   không cao hơn ô thường, và không còn tranh bề ngang với cột giá (giá 6 hay 7
   chữ số cũng không đẩy nhãn xuống dòng). */
.perfume10ml-tiktok-page .order-pick-card { position: relative;
}
.perfume10ml-tiktok-page .order-pick-card.has-badge > .order-pick-tags {
      position: absolute;
      top: -9px;
      left: 10px;
      padding: 0 3px;
      background: inherit;
}
.perfume10ml-tiktok-page .order-pick-save {
      padding: 3px 7px;
      border-radius: 999px;
      background: #e6f6ec;
      color: #17a34a;
      font-size: 10.5px;
      font-style: normal;
      font-weight: 700;
      line-height: 1;
      white-space: nowrap;
}
.perfume10ml-tiktok-page .order-pick-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      white-space: nowrap;
      padding: 3px 7px;
      border-radius: 999px;
      background: #ffe6ee;
      color: var(--pink);
      font-size: 10.5px;
      font-style: normal;
      font-weight: 700;
      line-height: 1;
}
.perfume10ml-tiktok-page .order-pick-badge::before {
      content: "\2605";
      font-size: 12px;
}
.perfume10ml-tiktok-page .order-pick-unit {
      display: block;
      margin-top: 3px;
      font-size: 10.5px;
      color: #8a8a8a;
}
/* Đơn giá/thỏi in xanh ở các combo được đẩy mạnh (có badge), combo thường giữ xám */
.perfume10ml-tiktok-page .order-pick-card.is-featured .order-pick-unit,
.perfume10ml-tiktok-page .order-pick-card.has-badge .order-pick-unit {
      color: #17a34a;
      font-weight: 600;
}
/* js/landing-perfume10ml.js in ra "284.000đ/thỏi · rẻ hơn 11%" cho thẻ combo (file hệ thống,
   không sửa được). Chỉ muốn giữ đơn giá nên giấu chữ gốc bằng font-size:0 rồi in lại nội
   dung từ biến --combo-unit-note (v5.php tính từ giá admin). Giữ nguyên ô để thẻ combo vẫn
   đủ 3 dòng, cao bằng 3 thẻ thỏi lẻ. Chỉ áp cho thẻ combo: thẻ thỏi lẻ dùng dòng này ghi
   quy cách "Thỏi 10ml dạng lăn". */
.perfume10ml-tiktok-page .order-pick-card.is-featured .order-pick-unit {
      font-size: 0;
}

.perfume10ml-tiktok-page .order-pick-card.is-featured .order-pick-unit::after {
      content: var(--combo-unit-note, '');
      font-size: 10.5px;
}
/* The "Bo doi Ngay & Dem" cung phai in de dong nay. Ly do rieng: phan tram cua JS he thong
   so don gia combo voi THOI LE RE NHAT TRANG (Grace), khong phai voi dung 2 thoi nam trong
   combo (Muse + Desire - hai mui dat nhat), nen no tut ve 0% du combo re hon that. Chu thay
   the do PHP tinh lai tu gia admin, in qua bien --duo-unit-note.
   Bat theo data-attribute vi the nay khong mang class is-featured: js gan
   data-order-variant-key o popup mua hang, data-variant-key o form dat hang nhanh. */
.perfume10ml-tiktok-page .order-pick-card[data-order-variant-key="desire-muse"] .order-pick-unit,
.perfume10ml-tiktok-page .order-pick-card[data-variant-key="desire-muse"] .order-pick-unit {
      font-size: 0;
}

.perfume10ml-tiktok-page .order-pick-card[data-order-variant-key="desire-muse"] .order-pick-unit::after,
.perfume10ml-tiktok-page .order-pick-card[data-variant-key="desire-muse"] .order-pick-unit::after {
      content: var(--duo-unit-note, '');
      font-size: 10.5px;
}
/* Dòng "đang bỏ lỡ": nhắc khoản tiết kiệm ngay trước nút Đặt hàng */
    .perfume10ml-tiktok-page .order-total-card .order-total-miss {
      align-items: flex-start;
      color: var(--pink);
      font-size: 12.5px;
      font-weight: 600;
}
.perfume10ml-tiktok-page .order-total-card .order-total-miss[hidden] { display: none;
}
.perfume10ml-tiktok-page .order-total-miss span::before {
      content: "\26A0";
      margin-right: 5px;
}
.perfume10ml-tiktok-page .order-total-card .order-total-miss b {
      font-size: 12.5px;
      font-weight: 700;
      white-space: nowrap;
}
/* Bump offer: chỉ hiện khi khách đang chọn 1 thỏi */
    .perfume10ml-tiktok-page .order-upgrade {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      margin-top: 8px;
      padding: 9px 11px;
      border: 1.5px dashed var(--pink);
      border-radius: 12px;
      background: var(--voucher-bg);
      text-align: left;
}
.perfume10ml-tiktok-page .order-upgrade[hidden] { display: none;
}
.perfume10ml-tiktok-page .order-upgrade-copy { flex: 1 1 auto; min-width: 0;
}
.perfume10ml-tiktok-page .order-upgrade-copy b {
      display: block;
      font-size: 12.5px;
      color: var(--pink);
}
.perfume10ml-tiktok-page .order-upgrade-copy small {
      display: block;
      margin-top: 2px;
      font-size: 10.5px;
      color: #6d6d6d;
}
.perfume10ml-tiktok-page .order-upgrade-cta {
      flex: 0 0 auto;
      padding: 6px 10px;
      border-radius: 999px;
      background: var(--pink);
      color: #fff;
      font-size: 11.5px;
      font-weight: 700;
      white-space: nowrap;
}
.perfume10ml-tiktok-page .order-pick-card img {
      width: 42px;
      height: 42px;
      border-radius: 8px;
      object-fit: cover;
      background: #f4eeee;
      /* Ảnh 404 thì chữ alt sẽ tràn ra ngoài ô 42px và phá layout - giấu nó đi,
         khách chỉ thấy ô xám trống. */
      font-size: 0;
      overflow: hidden;
}
.perfume10ml-tiktok-page .order-pick-copy b {
      display: block;
      font-size: 13px;
      color: #222;
}
.perfume10ml-tiktok-page .order-pick-copy small {
      display: block;
      margin-top: 2px;
      font-size: 11px;
      color: var(--muted);
}
.perfume10ml-tiktok-page .order-pick-price {
      text-align: right;
      white-space: nowrap;
}
.perfume10ml-tiktok-page .order-pick-price del {
      display: block;
      font-size: 11px;
      color: #9b9b9b;
      text-decoration: line-through;
}
.perfume10ml-tiktok-page .order-pick-price strong {
      display: block;
      font-size: 13.5px;
      color: var(--pink);
}
.perfume10ml-tiktok-page .order-pick-price em {
      display: block;
      margin-top: 2px;
      font-size: 10px;
      font-style: normal;
      color: #17a34a;
}
.perfume10ml-tiktok-page .order-pick-qty {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 12px;
      font-size: 13px;
      color: #333;
}
/* ===== Sheet chọn phân loại ("Mua ngay"): port giao diện từ obaria199.php =====
   Nguồn: css/obaria-vo-chong.css, đổi scope .product-standalone-page -> .perfume10ml-tiktok-page. */

.perfume10ml-tiktok-page .variant-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(0,0,0,.58);
}
.perfume10ml-tiktok-page .variant-sheet {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 100;
  width: var(--shell-width);
  max-height: calc(100dvh - 54px);
  transform: translateX(-50%);
  overflow: visible;
  border-radius: 28px 28px 0 0;
  background: #fff;
  color: #111;
  box-shadow: 0 -8px 28px rgba(0,0,0,.18);
}
.perfume10ml-tiktok-page .variant-close {
  position: absolute;
  right: 19px;
  top: -44px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: rgba(0,0,0,.48);
  color: #fff;
  font-size: 34px;
  line-height: 1;
}
.perfume10ml-tiktok-page .variant-sheet-scroll {
  max-height: calc(100dvh - 142px);
  overflow-y: auto;
  border-radius: 28px 28px 0 0;
  padding: 12px 16px 136px;
  scrollbar-width: none;
}
.perfume10ml-tiktok-page .variant-sheet-scroll::-webkit-scrollbar {
  display: none;
}
.perfume10ml-tiktok-page .sheet-mall-bar {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: -12px -16px 0;
  border-radius: 28px 28px 0 0;
  background: linear-gradient(96deg, #2b0d04 0%, #3a1709 60%, #140503 100%);
  color: #ffd9b3;
  padding: 0 16px;
}
.perfume10ml-tiktok-page .sheet-mall-bar b {
  color: #fff4e8;
  font-size: 21px;
  font-weight: 800;
}
.perfume10ml-tiktok-page .sheet-mall-bar span {
  min-width: 0;
  overflow: hidden;
  font-size: 14px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.perfume10ml-tiktok-page .sheet-product-card {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 10px;
  border: 1px solid #f0f0f0;
  border-top: 0;
  border-radius: 0 0 16px 16px;
  padding: 10px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.perfume10ml-tiktok-page .sheet-preview {
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: 12px;
  background: #f5f5f5;
  padding: 0;
}
.perfume10ml-tiktok-page .sheet-preview img {
  width: 88px;
  height: 88px;
  object-fit: cover;
}
.perfume10ml-tiktok-page .sheet-preview span,
.perfume10ml-tiktok-page .variant-zoom {
  position: absolute;
  left: 8px;
  top: 8px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: rgba(0,0,0,.42);
  color: #fff;
  font-size: 15px;
  line-height: 1;
}
.perfume10ml-tiktok-page .sheet-product-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.perfume10ml-tiktok-page .sheet-price-line {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--pink);
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}
.perfume10ml-tiktok-page .sheet-discount {
  border-radius: 5px;
  background: var(--pink);
  color: #fff;
  padding: 4px 6px;
  font-size: 18px;
  line-height: 1;
}
.perfume10ml-tiktok-page .sheet-price-line strong {
  font-size: 27px;
  line-height: 1;
}
.perfume10ml-tiktok-page .sheet-product-info del {
  margin-top: 8px;
  color: #8b8b8b;
  font-size: 17px;
}
.perfume10ml-tiktok-page .sheet-product-info em {
  margin-top: 12px;
  border-radius: 5px;
  background: var(--voucher-bg);
  color: var(--pink);
  padding: 4px 8px;
  font-size: 15px;
  font-style: normal;
  font-weight: 700;
}
.perfume10ml-tiktok-page .sheet-sale-bar {
  min-height: 39px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 18px;
  border-radius: 10px;
  background: linear-gradient(96deg, #ff9b23 0%, #f28722 100%);
  color: #fff;
  padding: 0 12px;
  font-size: 16px;
  white-space: nowrap;
}
.perfume10ml-tiktok-page .sheet-sale-bar b {
  font-weight: 800;
}
.perfume10ml-tiktok-page .variant-picker {
  margin-top: 18px;
}
.perfume10ml-tiktok-page .variant-picker h2,
.perfume10ml-tiktok-page .quantity-row h2 {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
}
.perfume10ml-tiktok-page .variant-picker p {
  margin: 4px 0 0;
  color: #777;
  font-size: 14px;
  line-height: 1.25;
}
.perfume10ml-tiktok-page .variant-strip {
  --variant-thumb-size: clamp(92px, calc((min(100vw, var(--shell-width)) - 64px) / 3), 112px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  overflow: visible;
  margin: 12px -16px 0;
  padding: 0 16px 8px;
}
.perfume10ml-tiktok-page .variant-strip::-webkit-scrollbar {
  display: none;
}
.perfume10ml-tiktok-page .variant-card {
  position: relative;
  min-height: calc(var(--variant-thumb-size) + 58px);
  overflow: hidden;
  border: 1.5px solid #d7d7d7;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .04);
}
.perfume10ml-tiktok-page .variant-card .variant-zoom {
  left: auto;
  right: 7px;
  top: 7px;
  width: 31px;
  height: 31px;
  display: grid;
  border: 1px solid rgba(255, 255, 255, .75);
  background: rgba(255, 255, 255, .94);
  color: var(--pink);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .16);
  z-index: 2;
}
.perfume10ml-tiktok-page .variant-card .variant-zoom svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  stroke-width: 2.4;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.perfume10ml-tiktok-page .variant-card.is-selected {
  border-color: var(--pink);
  background: #fff6f9;
  box-shadow: 0 0 0 1px var(--pink) inset, 0 8px 18px rgba(223, 22, 79, .12);
}
.perfume10ml-tiktok-page .variant-card.is-selected::after {
  content: "✓";
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 3;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--pink);
  color: #fff;
  font-size: 16px;
  font-weight: 900;
  box-shadow: 0 6px 14px rgba(255, 45, 104, .26);
}
.perfume10ml-tiktok-page .variant-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  display: block;
  object-fit: cover;
  background: #fff7f4;
}
.perfume10ml-tiktok-page .variant-copy {
  min-height: 58px;
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 7px 7px 8px;
  text-align: left;
}
.perfume10ml-tiktok-page .variant-name {
  display: block;
  min-width: 0;
  color: #111;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.1;
  white-space: normal;
  overflow-wrap: normal;
}
.perfume10ml-tiktok-page .variant-note {
  display: -webkit-box;
  overflow: hidden;
  color: #777;
  font-size: 11px;
  line-height: 1.15;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.perfume10ml-tiktok-page .variant-card-combo {
  grid-column: 1 / -1;
  min-height: 96px;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: stretch;
  border-color: #ff7aa2;
  background: linear-gradient(90deg, #fff 0%, #fff6f9 100%);
}
.perfume10ml-tiktok-page .variant-card-combo img {
  width: 96px;
  height: 96px;
}
.perfume10ml-tiktok-page .variant-card-combo .variant-zoom {
  left: 58px;
  right: auto;
}
.perfume10ml-tiktok-page .variant-card-combo .variant-copy {
  min-height: 96px;
  align-content: center;
  padding: 9px 12px;
  text-align: left;
}
.perfume10ml-tiktok-page .variant-card-combo .variant-note {
  display: -webkit-box;
}
.perfume10ml-tiktok-page .variant-card-combo .variant-name {
  font-size: 15px;
}
.perfume10ml-tiktok-page .variant-hot {
  position: absolute;
  left: 6px;
  top: 6px;
  border-radius: 999px;
  background: #fff;
  color: var(--pink);
  font-size: 11px;
  line-height: 1;
  font-weight: 900;
  padding: 4px 7px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .12);
}
.perfume10ml-tiktok-page .variant-badge {
  width: max-content;
  max-width: 100%;
  margin-top: 2px;
  border-radius: 999px;
  background: var(--pink);
  color: #fff;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  padding: 5px 8px;
}
.perfume10ml-tiktok-page .quantity-row {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 10px;
}
.perfume10ml-tiktok-page .quantity-stepper {
  width: 114px;
  height: 42px;
  display: grid;
  grid-template-columns: 1fr 42px 1fr;
  align-items: center;
  border-radius: 8px;
  background: #f2f2f2;
}
.perfume10ml-tiktok-page .quantity-stepper button {
  height: 100%;
  border: 0;
  background: transparent;
  color: #111;
  font-size: 28px;
  line-height: 1;
}
.perfume10ml-tiktok-page .quantity-stepper button:disabled {
  color: #aaa;
}
.perfume10ml-tiktok-page .quantity-stepper span {
  border-left: 1px solid #e5e5e5;
  border-right: 1px solid #e5e5e5;
  text-align: center;
  font-size: 22px;
}
.perfume10ml-tiktok-page .variant-actions {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-top: 1px solid var(--divider);
  background: #fff;
  padding: 14px 16px calc(18px + var(--safe-bottom));
}
.perfume10ml-tiktok-page .variant-action {
  width: 100%;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--pink), #ff1f5f);
  color: #fff;
  box-shadow: 0 12px 26px rgba(255, 45, 104, .28);
}
.perfume10ml-tiktok-page .variant-action b,
.perfume10ml-tiktok-page .variant-action span {
  display: inline;
}
.perfume10ml-tiktok-page .variant-action b {
  font-size: 20px;
  font-weight: 900;
  line-height: 1.1;
}
.perfume10ml-tiktok-page .variant-action span {
  margin-top: 0;
  font-size: 20px;
  font-weight: 900;
}
@media (max-width: 360px) {
  .perfume10ml-tiktok-page .variant-sheet-scroll {
    padding: 12px 12px 132px;
  }
  .perfume10ml-tiktok-page .sheet-mall-bar {
    margin: -12px -12px 0;
    padding: 0 12px;
  }
  .perfume10ml-tiktok-page .sheet-mall-bar b {
    font-size: 20px;
  }
  .perfume10ml-tiktok-page .sheet-mall-bar span {
    font-size: 13px;
  }
  .perfume10ml-tiktok-page .sheet-product-card {
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 8px;
    padding: 9px;
  }
  .perfume10ml-tiktok-page .sheet-preview img {
    width: 78px;
    height: 78px;
  }
  .perfume10ml-tiktok-page .sheet-price-line {
    gap: 4px;
    font-size: 14px;
  }
  .perfume10ml-tiktok-page .sheet-discount {
    padding: 4px 5px;
    font-size: 16px;
  }
  .perfume10ml-tiktok-page .sheet-price-line strong {
    font-size: 23px;
  }
  .perfume10ml-tiktok-page .sheet-product-info del {
    margin-top: 6px;
    font-size: 15px;
  }
  .perfume10ml-tiktok-page .sheet-product-info em {
    margin-top: 9px;
    padding: 4px 6px;
    font-size: 13px;
  }
  .perfume10ml-tiktok-page .sheet-sale-bar {
    min-height: 36px;
    padding: 0 10px;
    font-size: 14px;
  }
  .perfume10ml-tiktok-page .variant-strip {
    --variant-thumb-size: clamp(88px, calc((min(100vw, var(--shell-width)) - 56px) / 3), 104px);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 12px -12px 0;
    padding: 0 12px 8px;
  }
  .perfume10ml-tiktok-page .variant-card {
    min-height: calc(var(--variant-thumb-size) + 58px);
  }
  .perfume10ml-tiktok-page .variant-card img {
    height: auto;
  }
  .perfume10ml-tiktok-page .variant-copy {
    min-height: 58px;
    padding: 7px 6px;
  }
  .perfume10ml-tiktok-page .variant-name {
    font-size: 14px;
  }
  .perfume10ml-tiktok-page .variant-card-combo {
    min-height: 92px;
    grid-template-columns: 92px minmax(0, 1fr);
  }
  .perfume10ml-tiktok-page .variant-card-combo img,
  .perfume10ml-tiktok-page .variant-card-combo .variant-copy {
    min-height: 92px;
    height: 92px;
  }
  .perfume10ml-tiktok-page .variant-card-combo .variant-zoom {
    left: 54px;
  }
}
@media (max-width: 360px) and (max-height: 620px) {
  .perfume10ml-tiktok-page .variant-sheet {
    height: calc(100dvh - 54px);
  }
  .perfume10ml-tiktok-page .variant-sheet-scroll {
    height: 100%;
    max-height: none;
    padding-top: 10px;
    padding-bottom: 116px;
  }
  .perfume10ml-tiktok-page .sheet-mall-bar {
    min-height: 40px;
    margin-top: -10px;
  }
  .perfume10ml-tiktok-page .sheet-product-card {
    grid-template-columns: 70px minmax(0, 1fr);
    padding: 8px;
  }
  .perfume10ml-tiktok-page .sheet-preview img {
    width: 70px;
    height: 70px;
  }
  .perfume10ml-tiktok-page .sheet-price-line strong {
    font-size: 21px;
  }
  .perfume10ml-tiktok-page .sheet-product-info em {
    margin-top: 7px;
    font-size: 12px;
  }
  .perfume10ml-tiktok-page .sheet-sale-bar {
    min-height: 34px;
    margin-top: 12px;
  }
  .perfume10ml-tiktok-page .variant-picker {
    margin-top: 14px;
  }
  .perfume10ml-tiktok-page .variant-strip {
    --variant-thumb-size: clamp(80px, calc((min(100vw, var(--shell-width)) - 56px) / 3), 96px);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    height: auto;
    margin-top: 10px;
  }
  .perfume10ml-tiktok-page .variant-card {
    min-height: calc(var(--variant-thumb-size) + 54px);
    align-self: start;
  }
  .perfume10ml-tiktok-page .variant-card img {
    height: auto;
  }
  .perfume10ml-tiktok-page .variant-copy {
    min-height: 54px;
    padding: 6px;
  }
  .perfume10ml-tiktok-page .variant-name {
    font-size: 13px;
  }
  .perfume10ml-tiktok-page .variant-card-combo {
    min-height: 84px;
    grid-template-columns: 84px minmax(0, 1fr);
  }
  .perfume10ml-tiktok-page .variant-card-combo img,
  .perfume10ml-tiktok-page .variant-card-combo .variant-copy {
    min-height: 84px;
    height: 84px;
  }
  .perfume10ml-tiktok-page .variant-card-combo .variant-zoom {
    left: 46px;
  }
  .perfume10ml-tiktok-page .quantity-row {
    min-height: 58px;
    margin-top: 12px;
  }
  .perfume10ml-tiktok-page .variant-actions {
    padding-top: 10px;
    padding-bottom: calc(12px + var(--safe-bottom));
  }
}
.perfume10ml-tiktok-page .variant-sheet {
  --pink: #FF2D68;
  width: min(390px, 100vw);
  max-height: calc(100dvh - 44px);
  overflow: hidden;
  border-radius: 32px 32px 0 0;
  background: #fffdfa;
  box-shadow: 0 -18px 46px rgba(18, 18, 18, .22);
  font-family: inherit;
}
.perfume10ml-tiktok-page .variant-close {
  right: 16px;
  top: 52px;
  z-index: 5;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(17, 17, 17, .06);
  background: rgba(255, 255, 255, .94);
  color: #555;
  font-size: 38px;
  font-weight: 300;
  box-shadow: 0 8px 24px rgba(17, 17, 17, .14);
}
.perfume10ml-tiktok-page .variant-sheet-scroll {
  max-height: calc(100dvh - 44px);
  border-radius: 32px 32px 0 0;
  background: #fffdfa;
  padding: 12px 18px 122px;
}
.perfume10ml-tiktok-page .sheet-mall-bar {
  min-height: 14px;
  display: grid;
  place-items: center;
  margin: 0 0 12px;
  border-radius: 0;
  background: transparent;
  padding: 0;
}
.perfume10ml-tiktok-page .sheet-mall-bar::before {
  content: "";
  width: 46px;
  height: 5px;
  border-radius: 999px;
  background: #d8d8d8;
}
.perfume10ml-tiktok-page .sheet-mall-bar b,
.perfume10ml-tiktok-page .sheet-mall-bar span {
  display: none;
}
.perfume10ml-tiktok-page .sheet-product-card {
  grid-template-columns: 114px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0 42px 0 0;
}
.perfume10ml-tiktok-page .sheet-preview {
  width: 114px;
  height: 114px;
  overflow: hidden;
  border: 1px solid #f3dfd8;
  border-radius: 20px;
  background: #fff5f1;
  box-shadow: 0 10px 24px rgba(121, 51, 51, .08);
}
.perfume10ml-tiktok-page .sheet-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.perfume10ml-tiktok-page .sheet-preview span {
  display: none;
}
.perfume10ml-tiktok-page .sheet-product-info {
  gap: 6px;
  justify-content: center;
}
.perfume10ml-tiktok-page .sheet-product-title {
  margin: 0;
  color: #171717;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: 0;
}
.perfume10ml-tiktok-page .sheet-product-title span {
  display: block;
}
.perfume10ml-tiktok-page .sheet-price-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--pink);
  font-size: 14px;
  font-weight: 700;
  white-space: normal;
}
.perfume10ml-tiktok-page .sheet-price-line strong {
  color: var(--pink);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}
.perfume10ml-tiktok-page .sheet-discount {
  border-radius: 999px;
  background: #ffe2eb;
  color: var(--pink);
  padding: 4px 10px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}
.perfume10ml-tiktok-page .sheet-product-info del {
  margin-top: -2px;
  color: #8f8f8f;
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1;
  text-decoration-thickness: 1px;
}
.perfume10ml-tiktok-page .sheet-sale-bar {
  min-height: 42px;
  justify-content: flex-start;
  gap: 8px;
  margin-top: 18px;
  border-radius: 16px;
  background: linear-gradient(90deg, #fff0e8 0%, #ffe6ef 100%);
  color: #111;
  padding: 0 14px;
  font-size: 15px;
  font-weight: 500;
  box-shadow: none;
}
.perfume10ml-tiktok-page .sheet-sale-bar::before {
  content: "\26A1";
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff7070, var(--pink));
  color: #fff;
  font-size: 18px;
  line-height: 1;
}
.perfume10ml-tiktok-page .sheet-sale-bar b {
  color: #f05a28;
  font-size: 17px;
  font-weight: 700;
}
.perfume10ml-tiktok-page .variant-picker {
  margin-top: 18px;
}
.perfume10ml-tiktok-page .variant-picker h2 {
  color: #111;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}
.perfume10ml-tiktok-page .quantity-row h2 {
  color: #222;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.25;
}
.perfume10ml-tiktok-page .variant-picker p {
  margin-top: 4px;
  color: #767676;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.25;
}
.perfume10ml-tiktok-page .variant-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  overflow: visible;
  margin: 12px 0 0;
  padding: 0 0 10px;
}
.perfume10ml-tiktok-page .variant-card {
  position: relative;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #e5e0df;
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(17, 17, 17, .04);
}
.perfume10ml-tiktok-page .variant-card .variant-zoom {
  left: 9px;
  right: auto;
  top: 9px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  background: rgba(92, 92, 92, .8);
  color: #fff;
  padding: 0;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(17, 17, 17, .16);
  backdrop-filter: blur(6px);
}
.perfume10ml-tiktok-page .variant-card .variant-zoom svg {
  width: 14px;
  height: 14px;
  display: block;
  stroke-width: 2.15;
}
.perfume10ml-tiktok-page .variant-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #fff6f1;
  cursor: pointer;
}
.perfume10ml-tiktok-page .variant-card.is-selected {
  border-color: var(--pink);
  background: #fff7fa;
  box-shadow: 0 0 0 1px var(--pink) inset, 0 12px 26px rgba(255, 45, 104, .12);
}
.perfume10ml-tiktok-page .variant-card.is-selected::after {
  content: "\2713";
  position: absolute;
  right: 6px;
  top: 6px;
  bottom: auto;
  z-index: 4;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--pink);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(255, 45, 104, .28);
}
.perfume10ml-tiktok-page .variant-card:not(.variant-card-combo) {
  min-height: 0;
  aspect-ratio: auto;
  overflow: hidden;
  border: 1px solid #ddd;
  border-radius: 9px;
  background: #fff;
  box-shadow: none;
}
.perfume10ml-tiktok-page .variant-card:not(.variant-card-combo).is-selected {
  border: 2px solid var(--pink);
  background: #fff;
  box-shadow: none;
}
.perfume10ml-tiktok-page .variant-copy {
  min-height: 66px;
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 8px;
  text-align: left;
}
.perfume10ml-tiktok-page .variant-card:not(.variant-card-combo) img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  margin: 0;
  border-radius: 0;
  object-fit: cover;
}
.perfume10ml-tiktok-page .variant-card:not(.variant-card-combo) .variant-zoom {
  left: 6px;
  top: 6px;
  width: 23px;
  height: 23px;
  box-shadow: 0 2px 8px rgba(17, 17, 17, .18);
}
.perfume10ml-tiktok-page .variant-card:not(.variant-card-combo) .variant-zoom svg {
  width: 13px;
  height: 13px;
}
.perfume10ml-tiktok-page .variant-card:not(.variant-card-combo) .variant-copy {
  position: static;
  min-height: 62px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 2px;
  padding: 6px 5px 7px;
  background: transparent;
  color: #111;
  text-align: center;
}
.perfume10ml-tiktok-page .variant-name {
  color: #111;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.15;
}
.perfume10ml-tiktok-page .variant-note {
  display: -webkit-box;
  overflow: hidden;
  color: #6f6f6f;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.16;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.perfume10ml-tiktok-page .variant-benefit {
  display: -webkit-box;
  overflow: hidden;
  color: #7a7070;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.15;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.perfume10ml-tiktok-page .variant-card:not(.variant-card-combo) .variant-name {
  color: #111;
  display: -webkit-box;
  overflow: hidden;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.12;
  text-shadow: none;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.perfume10ml-tiktok-page .variant-card:not(.variant-card-combo) .variant-note {
  display: -webkit-box;
  color: var(--pink);
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.12;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.perfume10ml-tiktok-page .variant-card:not(.variant-card-combo) .variant-benefit {
  font-size: 10.5px;
  line-height: 1.12;
  -webkit-line-clamp: 2;
}
.perfume10ml-tiktok-page .variant-hot {
  display: none;
}
.perfume10ml-tiktok-page .variant-card-combo {
  grid-column: 1 / -1;
  min-height: 110px;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border: 1px solid #ddd;
  border-radius: 18px;
  background: #fff;
  padding: 10px;
}
.perfume10ml-tiktok-page .variant-card-combo::before {
  content: none;
}
.perfume10ml-tiktok-page .variant-card-combo img {
  width: 88px;
  height: 88px;
  border-radius: 14px;
}
.perfume10ml-tiktok-page .variant-card-combo .variant-zoom {
  left: 18px;
  top: 18px;
}
.perfume10ml-tiktok-page .variant-card-combo .variant-copy {
  min-height: auto;
  align-content: center;
  gap: 4px;
  padding: 1px 38px 1px 0;
}
.perfume10ml-tiktok-page .variant-card-combo .variant-name {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.12;
}
.perfume10ml-tiktok-page .variant-card-combo .variant-note {
  color: #5d5d5d;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.22;
  -webkit-line-clamp: 2;
}
.perfume10ml-tiktok-page .variant-badge {
  order: -1;
  width: max-content;
  max-width: 100%;
  margin: 0 0 2px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  background: #ffe6ee;
  color: var(--pink);
  padding: 5px 7px;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
}
.perfume10ml-tiktok-page .variant-badge::before {
  content: "\2605";
  font-size: 13px;
}
.perfume10ml-tiktok-page .variant-saving {
  width: max-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: var(--pink);
  color: #fff;
  padding: 5px 7px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.perfume10ml-tiktok-page .variant-card.variant-card-pair {
  min-height: 50px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 0;
  padding: 7px 6px;
  border-radius: 10px;
  overflow: hidden;
}
.perfume10ml-tiktok-page .variant-card.variant-card-pair img,
.perfume10ml-tiktok-page .variant-card.variant-card-pair .variant-note {
  display: none;
}
.perfume10ml-tiktok-page .variant-card.variant-card-pair .variant-copy {
  min-height: 0;
  display: grid;
  place-items: center;
  gap: 0;
  padding: 0 22px 0 0;
  text-align: center;
}
.perfume10ml-tiktok-page .variant-card.variant-card-pair .variant-name {
  min-height: 34px;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.08;
}
.perfume10ml-tiktok-page .quantity-row {
  min-height: 58px;
  margin-top: 2px;
  border-top: 1px solid #ececec;
  padding-top: 12px;
}
.perfume10ml-tiktok-page .quantity-stepper {
  width: 132px;
  height: 44px;
  grid-template-columns: 42px 1fr 42px;
  overflow: hidden;
  border: 1px solid #e5e5e5;
  border-radius: 14px;
  background: #fff;
}
.perfume10ml-tiktok-page .quantity-stepper button {
  color: #111;
  font-size: 25px;
  font-weight: 400;
}
.perfume10ml-tiktok-page .quantity-stepper button:disabled {
  color: #b7b7b7;
}
.perfume10ml-tiktok-page .quantity-stepper span {
  border-left: 1px solid #ededed;
  border-right: 1px solid #ededed;
  font-size: 17px;
  font-weight: 400;
}
.perfume10ml-tiktok-page .variant-actions {
  border-top: 0;
  background: linear-gradient(180deg, rgba(255, 253, 250, .78) 0%, #fffdfa 22%);
  padding: 0 18px calc(2px + var(--safe-bottom));
}
.perfume10ml-tiktok-page .variant-action {
  min-height: 48px;
  gap: 6px;
  border-radius: 17px;
  background: linear-gradient(135deg, var(--pink) 0%, #ff1f5f 100%);
  box-shadow: 0 10px 22px rgba(255, 45, 104, .22);
}
.perfume10ml-tiktok-page .variant-action::before {
  content: "";
  width: 15px;
  height: 14px;
  display: inline-block;
  border: 1.8px solid currentColor;
  border-radius: 4px;
  background:
    radial-gradient(circle at 50% -2px, transparent 0 6px, currentColor 6px 8px, transparent 8px) top center / 14px 9px no-repeat;
}
.perfume10ml-tiktok-page .variant-action b,
.perfume10ml-tiktok-page .variant-action span {
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}
.perfume10ml-tiktok-page .variant-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 3px 0 0;
  color: #777;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}
.perfume10ml-tiktok-page .variant-trust span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.perfume10ml-tiktok-page .variant-trust span::before {
  content: "\2713";
  width: 13px;
  height: 13px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #777;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
}
@media (max-width: 370px) {
  .perfume10ml-tiktok-page .variant-sheet-scroll {
    padding-left: 14px;
    padding-right: 14px;
  }
  .perfume10ml-tiktok-page .sheet-product-card {
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 12px;
    padding-right: 46px;
  }
  .perfume10ml-tiktok-page .sheet-preview {
    width: 104px;
    height: 104px;
  }
  .perfume10ml-tiktok-page .sheet-product-title {
    font-size: 17px;
  }
  .perfume10ml-tiktok-page .sheet-price-line strong {
    font-size: 20px;
  }
  .perfume10ml-tiktok-page .variant-card-combo {
    grid-template-columns: 80px minmax(0, 1fr);
    gap: 10px;
  }
  .perfume10ml-tiktok-page .variant-card-combo img {
    width: 80px;
    height: 80px;
  }
  .perfume10ml-tiktok-page .variant-card-combo .variant-name {
    font-size: 16.5px;
  }
  .perfume10ml-tiktok-page .variant-card-combo .variant-note {
    font-size: 12px;
  }
  .perfume10ml-tiktok-page .variant-badge,
  .perfume10ml-tiktok-page .variant-saving {
    font-size: 10px;
    padding: 4px 6px;
  }
  .perfume10ml-tiktok-page .variant-action b,
  .perfume10ml-tiktok-page .variant-action span {
    font-size: 17px;
  }
}
@media (max-width: 480px) {
  .perfume10ml-tiktok-page .creator-videos h2,
  .perfume10ml-tiktok-page .section-heading h2,
  .perfume10ml-tiktok-page .about-product h2,
  .perfume10ml-tiktok-page .description-copy h2,
  .perfume10ml-tiktok-page .description-order-head h2,
  .perfume10ml-tiktok-page .variant-picker h2,
  .perfume10ml-tiktok-page .quantity-row h2,
  .perfume10ml-tiktok-page .order-form h3,
  .perfume10ml-tiktok-page .description-copy p,
  .perfume10ml-tiktok-page .description-copy ul,
  .perfume10ml-tiktok-page .review-filter,
  .perfume10ml-tiktok-page .review-layer-comment,
  .perfume10ml-tiktok-page .description-order-submit,
  .perfume10ml-tiktok-page .variant-name,
  .perfume10ml-tiktok-page .variant-card-combo .variant-note,
  .perfume10ml-tiktok-page .sheet-sale-bar {
    font-size: 14px;
  }
  .perfume10ml-tiktok-page .flash-right b,
  .perfume10ml-tiktok-page .sheet-product-title,
  .perfume10ml-tiktok-page .variant-card-combo .variant-name,
  .perfume10ml-tiktok-page .order-header h2 {
    font-size: 17px;
  }
  .perfume10ml-tiktok-page .flash-left strong,
  .perfume10ml-tiktok-page .sheet-price-line strong,
  .perfume10ml-tiktok-page .order-product-main strong,
  .perfume10ml-tiktok-page .order-total-line strong {
    font-size: 20px;
  }
  .perfume10ml-tiktok-page .variant-action b,
  .perfume10ml-tiktok-page .variant-action span,
  .perfume10ml-tiktok-page .order-footer b {
    font-size: 18px;
  }
  .perfume10ml-tiktok-page .variant-sheet .sheet-mall-bar b,
  .perfume10ml-tiktok-page .variant-sheet .sheet-product-title,
  .perfume10ml-tiktok-page .variant-sheet .variant-picker h2,
  .perfume10ml-tiktok-page .variant-sheet .quantity-row h2 {
    font-size: 15px;
  }
  .perfume10ml-tiktok-page .variant-sheet .sheet-mall-bar span,
  .perfume10ml-tiktok-page .variant-sheet .variant-picker p,
  .perfume10ml-tiktok-page .variant-sheet .variant-name,
  .perfume10ml-tiktok-page .variant-sheet .variant-card-combo .variant-note {
    font-size: 12px;
  }
  .perfume10ml-tiktok-page .variant-sheet .variant-card-combo .variant-name {
    font-size: 14px;
  }
  .perfume10ml-tiktok-page .variant-sheet .sheet-sale-bar,
  .perfume10ml-tiktok-page .variant-sheet .sheet-product-info del,
  .perfume10ml-tiktok-page .variant-sheet .variant-action b,
  .perfume10ml-tiktok-page .variant-sheet .variant-action span {
    font-size: 14px;
  }
  .perfume10ml-tiktok-page .variant-sheet .sheet-price-line strong {
    font-size: 18px;
  }
  .perfume10ml-tiktok-page .variant-sheet .sheet-discount,
  .perfume10ml-tiktok-page .variant-sheet .quantity-stepper span {
    font-size: 15px;
  }
  .perfume10ml-tiktok-page .variant-sheet .variant-badge,
  .perfume10ml-tiktok-page .variant-sheet .variant-saving,
  .perfume10ml-tiktok-page .variant-sheet .variant-note,
  .perfume10ml-tiktok-page .variant-sheet .variant-trust {
    font-size: 10px;
  }
}
@media (max-width: 380px), (max-width: 480px) and (max-height: 720px) {
  .perfume10ml-tiktok-page .variant-sheet-scroll {
    padding-top: 9px;
    padding-left: 14px;
    padding-right: 14px;
    padding-bottom: 110px;
  }
  .perfume10ml-tiktok-page .sheet-mall-bar {
    min-height: 10px;
    margin-bottom: 8px;
  }
  .perfume10ml-tiktok-page .sheet-mall-bar::before {
    width: 38px;
    height: 4px;
  }
  .perfume10ml-tiktok-page .sheet-product-card {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 10px;
    padding-right: 38px;
  }
  .perfume10ml-tiktok-page .sheet-preview {
    width: 88px;
    height: 88px;
    border-radius: 16px;
  }
  .perfume10ml-tiktok-page .variant-close {
    right: 12px;
    top: 34px;
    width: 42px;
    height: 42px;
    font-size: 33px;
  }
  .perfume10ml-tiktok-page .sheet-product-info {
    gap: 4px;
  }
  .perfume10ml-tiktok-page .sheet-price-line {
    gap: 5px;
  }
  .perfume10ml-tiktok-page .sheet-sale-bar {
    min-height: 36px;
    margin-top: 12px;
    padding-inline: 10px;
  }
  .perfume10ml-tiktok-page .sheet-sale-bar::before {
    width: 25px;
    height: 25px;
    font-size: 15px;
  }
  .perfume10ml-tiktok-page .variant-picker {
    margin-top: 12px;
  }
  .perfume10ml-tiktok-page .variant-picker p {
    display: none;
  }
  .perfume10ml-tiktok-page .variant-strip {
    gap: 7px;
    margin-top: 8px;
    padding-bottom: 7px;
  }
  .perfume10ml-tiktok-page .variant-card-combo {
    min-height: 88px;
    grid-template-columns: 70px minmax(0, 1fr);
    gap: 9px;
    padding: 8px;
  }
  .perfume10ml-tiktok-page .variant-card-combo img {
    width: 70px;
    height: 70px;
  }
  .perfume10ml-tiktok-page .variant-card-combo .variant-zoom {
    left: 13px;
    top: 13px;
  }
  .perfume10ml-tiktok-page .variant-card-combo .variant-copy {
    gap: 3px;
    padding-right: 28px;
  }
  .perfume10ml-tiktok-page .variant-card:not(.variant-card-combo) .variant-copy {
    min-height: 56px;
    gap: 1px;
    padding: 5px 4px 6px;
  }
  .perfume10ml-tiktok-page .variant-card:not(.variant-card-combo) .variant-name {
    font-size: 12.5px;
  }
  .perfume10ml-tiktok-page .variant-card:not(.variant-card-combo) .variant-note {
    font-size: 11px;
  }
  .perfume10ml-tiktok-page .variant-card:not(.variant-card-combo) .variant-benefit {
    font-size: 10px;
  }
  .perfume10ml-tiktok-page .variant-card.variant-card-pair {
    min-height: 38px;
    padding: 7px 5px;
  }
  .perfume10ml-tiktok-page .variant-card.variant-card-pair .variant-copy {
    padding-right: 20px;
  }
  .perfume10ml-tiktok-page .variant-card.variant-card-pair .variant-name {
    min-height: 24px;
    font-size: 10.5px;
  }
  .perfume10ml-tiktok-page .quantity-row {
    min-height: 52px;
    padding-top: 9px;
  }
}
.perfume10ml-tiktok-page .sheet-preview span,
.perfume10ml-tiktok-page .variant-card .variant-zoom {
  position: absolute;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  padding: 0;
  line-height: 1;
  background: rgba(45, 45, 45, .44);
  border: 1px solid rgba(255, 255, 255, .34);
  box-shadow: 0 3px 9px rgba(17, 17, 17, .16);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
.perfume10ml-tiktok-page .sheet-preview span {
  left: 8px;
  top: 8px;
  width: 28px;
  height: 28px;
  background: rgba(42, 42, 42, .46);
  box-shadow: 0 4px 12px rgba(17, 17, 17, .18);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.perfume10ml-tiktok-page .sheet-preview span svg {
  width: 20px;
  height: 20px;
  display: block;
  stroke: currentColor;
  stroke-width: 2.45;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.perfume10ml-tiktok-page .variant-card .variant-zoom {
  left: 8px;
  top: 8px;
  width: 24px;
  height: 24px;
  background: rgba(45, 45, 45, .44);
  z-index: 4;
  cursor: pointer;
  transition: transform .14s ease, background-color .14s ease, box-shadow .14s ease;
}
.perfume10ml-tiktok-page .variant-card-combo .variant-zoom {
  left: 10px;
  top: 10px;
  width: 26px;
  height: 26px;
  background: rgba(45, 45, 45, .48);
}
.perfume10ml-tiktok-page .variant-card .variant-zoom svg {
  width: 18px;
  height: 18px;
  display: block;
  stroke: currentColor;
  stroke-width: 2.45;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.perfume10ml-tiktok-page .variant-card-combo .variant-zoom svg {
  width: 19px;
  height: 19px;
}
.perfume10ml-tiktok-page .sheet-preview:active span,
.perfume10ml-tiktok-page .variant-card .variant-zoom:active {
  transform: scale(.94);
  background: rgba(30, 30, 30, .74);
  box-shadow: 0 1px 5px rgba(17, 17, 17, .24);
}
.perfume10ml-tiktok-page .variant-card:not(.variant-card-combo) .variant-zoom {
  left: 8px;
  top: 8px;
  width: 24px;
  height: 24px;
}
.perfume10ml-tiktok-page .variant-card:not(.variant-card-combo) .variant-zoom svg {
  width: 18px;
  height: 18px;
}
.perfume10ml-tiktok-page.muse-grace-landing .sheet-mall-bar,
.perfume10ml-tiktok-page.muse-grace-landing .order-header {
  background: var(--plum);
  color: #fff;
}
.perfume10ml-tiktok-page.muse-grace-landing .variant-action,
.perfume10ml-tiktok-page.muse-grace-landing [data-place-order] {
  background: linear-gradient(135deg, var(--plum), var(--pink));
}
/* ===== Điều chỉnh lưới sheet cho 4 phân loại =====
   obaria199 chỉ có 3 phân loại (1 combo chiếm trọn hàng + 2 mùi lẻ) nên lưới 3 cột vừa khít.
   Trang này có 4 nên đổi sang 2 cột đều nhau; thẻ nổi bật giữ viền hồng + nền gradient
   nhưng không chiếm trọn hàng nữa, tránh để lại ô trống và tránh thẻ hẹp làm cắt chữ. */
.perfume10ml-tiktok-page .variant-strip {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.perfume10ml-tiktok-page .variant-card-combo {
  grid-column: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  border: 1px solid #ff7aa2;
  border-radius: 17px;
  padding: 0;
  background: linear-gradient(180deg, #fff 0%, #fff6f9 100%);
}

.perfume10ml-tiktok-page .variant-card-combo img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 0;
}

.perfume10ml-tiktok-page .variant-card-combo .variant-zoom {
  left: 9px;
  top: 9px;
}

.perfume10ml-tiktok-page .variant-card-combo .variant-copy,
.perfume10ml-tiktok-page .variant-card:not(.variant-card-combo) .variant-copy {
  min-height: 0;
  align-content: start;
  gap: 2px;
  padding: 7px 9px 9px;
}

.perfume10ml-tiktok-page .variant-card-combo .variant-name,
.perfume10ml-tiktok-page .variant-card .variant-name {
  font-size: 13.5px;
  line-height: 1.25;
}

/* Thẻ rộng gấp đôi so với bản gốc nên cho chữ xuống dòng thay vì cắt bằng "..." */
.perfume10ml-tiktok-page .variant-card .variant-note,
.perfume10ml-tiktok-page .variant-card .variant-benefit,
.perfume10ml-tiktok-page .variant-card-combo .variant-note,
.perfume10ml-tiktok-page .variant-card-combo .variant-benefit {
  overflow: visible;
  display: block;
  -webkit-line-clamp: unset;
  white-space: normal;
  font-size: 11px;
  line-height: 1.35;
}

.perfume10ml-tiktok-page .variant-card-combo.is-selected {
  background: linear-gradient(180deg, #fff7fa 0%, #fff 100%);
}

.perfume10ml-tiktok-page .variant-card-combo.is-selected::after {
  right: 6px;
  top: 6px;
}

/* ===== Sửa ô nhập trong popup đặt hàng =====
   .order-field cũ của trang này là khung viền bọc icon (kiểu Shopee). Bản port từ obaria199
   chỉ đặt display:block nên viền/nền/padding cũ còn sót lại → sinh ra "khung lồng khung".
   Reset nốt cho khớp bản gốc: nhãn nằm trên, chỉ ô input mới có viền. */
.perfume10ml-tiktok-page .order-popup .order-field {
  min-height: 0;
  display: block;
  align-items: initial;
  gap: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  margin-bottom: 10px;
}

.perfume10ml-tiktok-page .order-popup .order-field.is-invalid,
.perfume10ml-tiktok-page .order-popup .order-field:focus-within {
  border: 0;
  background: transparent;
}

/* "(không bắt buộc)" phải xám nhạt, không ăn màu hồng của dấu * bắt buộc.
   Rule em.opt nằm trước .order-field-label em nên phải nhắc lại ở đây mới thắng. */
.perfume10ml-tiktok-page .order-field-label em.opt,
.perfume10ml-tiktok-page .description-order-field em.opt {
  color: #9b9b9b;
  font-style: normal;
  font-weight: 400;
  font-size: .92em;
}

/* ===== Tối ưu thao tác trong popup đặt hàng ===== */

/* Khối ưu đãi gói lại 1 dòng: 152px -> ~40px, kéo phần chọn phân loại lên màn hình đầu */
.perfume10ml-tiktok-page .order-promo-compact {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  padding: 9px 12px;
}

.perfume10ml-tiktok-page .order-promo-compact > b {
  margin: 0;
  font-size: 12.5px;
  white-space: nowrap;
}

.perfume10ml-tiktok-page .order-promo-compact > span {
  flex: 1 1 auto;
  min-width: 0;
  color: #6d4450;
  font-size: 11.5px;
  line-height: 1.45;
}

.perfume10ml-tiktok-page .order-promo-compact strong {
  color: var(--pink-2);
  font-weight: 800;
}

/* Link mở ô ghi chú */
.perfume10ml-tiktok-page .order-note-toggle {
  display: inline-block;
  margin: -2px 0 10px;
  border: 0;
  background: transparent;
  color: var(--pink);
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  padding: 6px 0;
  text-align: left;
}

.perfume10ml-tiktok-page .order-note-toggle[hidden] { display: none; }

/* Nút đặt hàng khi chưa chọn phân loại: mờ đi nhưng vẫn bấm được để nhảy tới chỗ chọn */
.perfume10ml-tiktok-page .order-footer button.is-waiting {
  filter: grayscale(.35);
  opacity: .62;
}

/* Vùng bấm đạt tối thiểu 44px cho ngón tay */
.perfume10ml-tiktok-page .order-popup .order-stepper button,
.perfume10ml-tiktok-page .order-popup .order-header button {
  width: 44px;
  height: 44px;
}

.perfume10ml-tiktok-page .order-popup .order-pick-qty .order-stepper {
  align-items: center;
}

/* Bóp nhẹ khoảng cách giữa các ô nhập để phần chọn phân loại lên cao hơn */
.perfume10ml-tiktok-page .order-popup .order-field {
  margin-bottom: 8px;
}

.perfume10ml-tiktok-page .order-popup .order-promo-compact {
  margin-bottom: 12px;
}

/* ===== Làm rõ phần chọn phân loại =====
   Trước đây ô đang chọn chỉ khác ở viền hồng mảnh + nền hồng rất nhạt, khách khó nhận ra
   mình đã chọn gì. Bổ sung nút radio + tăng tương phản màu cho trạng thái đã chọn. */

.perfume10ml-tiktok-page .order-pick h3 em {
  color: var(--pink);
  font-style: normal;
  font-weight: 900;
}

.perfume10ml-tiktok-page .order-pick-hint {
  margin: 2px 0 8px;
  color: #8a8a8a;
  font-size: 11.5px;
  line-height: 1.35;
}

/* Thêm cột cho nút radio ở đầu mỗi ô */
.perfume10ml-tiktok-page .order-pick-card {
  grid-template-columns: 22px 42px minmax(0, 1fr) auto;
  gap: 8px;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

/* Nút radio: rỗng khi chưa chọn, hồng đặc kèm dấu tích khi đã chọn */
.perfume10ml-tiktok-page .order-pick-check {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 2px solid #c9c2c2;
  border-radius: 999px;
  background: #fff;
  color: transparent;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}

.perfume10ml-tiktok-page .order-pick-check::before {
  content: "\2713";
}

.perfume10ml-tiktok-page .order-pick-card.is-selected .order-pick-check {
  border-color: var(--pink);
  background: var(--pink);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(255, 45, 104, .18);
}

/* Ô đang chọn: viền dày, nền hồng rõ, đổ bóng nhấc lên */
.perfume10ml-tiktok-page .order-pick-card.is-selected {
  border-width: 2px;
  border-color: var(--pink);
  background: #fff2f6;
  box-shadow: 0 0 0 1px var(--pink) inset, 0 10px 22px rgba(255, 45, 104, .16);
}

.perfume10ml-tiktok-page .order-pick-card.is-selected .order-pick-copy b {
  color: var(--pink-2);
}

.perfume10ml-tiktok-page .order-pick-card.is-selected .order-pick-price strong {
  font-size: 16px;
}

.perfume10ml-tiktok-page .order-pick-card.is-selected img {
  box-shadow: 0 0 0 2px rgba(255, 45, 104, .35);
}

/* Ô chưa chọn: giữ trung tính để ô đã chọn nổi bật hẳn */
.perfume10ml-tiktok-page .order-pick-card:not(.is-selected) {
  border-color: #e2dcdc;
  background: #fff;
}

/* Khung stepper vốn cố định 112×38px cho nút 35×36. Ép nút lên 44px thì phải nới khung,
   không thì nút "+" thò ra ngoài mép phải. */
.perfume10ml-tiktok-page .order-popup .order-pick-qty .order-stepper {
  width: 132px;
  height: 44px;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
}

.perfume10ml-tiktok-page .order-popup .order-pick-qty .order-stepper span {
  text-align: center;
}

/* Đếm ngược trong popup: xuống dòng riêng, nổi bật hơn dòng ưu đãi phía trên */
.perfume10ml-tiktok-page .order-promo-timer {
  flex: 1 0 100%;
  margin-top: 2px;
  color: var(--pink-2);
  font-size: 11.5px;
  font-weight: 700;
}

.perfume10ml-tiktok-page .order-promo-timer::before {
  content: "\23F3";
  margin-right: 4px;
}

.perfume10ml-tiktok-page .order-promo-timer i {
  font-style: normal;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

/* ===== Mục "Chứng nhận & Kiểm định" (port từ obaria199.php) ===== */
.perfume10ml-tiktok-page .trust-certs + .creator-videos {
  margin-top: 0;
  border-top: 8px solid #f6f6f6;
}

.perfume10ml-tiktok-page .trust-certs ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.perfume10ml-tiktok-page .trust-certs li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--divider);
}

.perfume10ml-tiktok-page .trust-certs li:last-child {
  border-bottom: 0;
}

.perfume10ml-tiktok-page .trust-certs .cert-link {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.perfume10ml-tiktok-page .trust-certs .cert-icon {
  flex: 0 0 auto;
  width: 28px;
  text-align: center;
  font-size: 20px;
  line-height: 1.3;
  color: var(--pink);
  font-weight: 700;
}

.perfume10ml-tiktok-page .trust-certs .cert-copy b {
  display: block;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  color: #222;
}

.perfume10ml-tiktok-page .trust-certs .cert-copy small {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--muted);
}

/* Khung ngoài của mục Chứng nhận: cùng bộ đệm/viền ngăn cách với các section khác
   (trước đó thiếu nên chữ dính sát mép và không có vạch tách khỏi khối phía trên). */
.perfume10ml-tiktok-page .trust-certs {
  margin-top: 0;
  padding: 20px 16px 12px;
  border-top: 8px solid #f6f6f6;
  background: #fff;
}

.perfume10ml-tiktok-page .trust-certs h2 {
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 700;
}

/* ===== Khách đã dùng nói gì (port từ obaria199.php) =====
   (Khối "Câu hỏi thường gặp" .faq-block đã bỏ ngày 05/09/2026 - xem ghi chú cuối file.) */

/* Review thật chèn giữa phần mô tả, ngay điểm khách cân nhắc mua */
    .perfume10ml-tiktok-page .desc-reviews {
      display: grid;
      gap: 10px;
      margin: 12px 0 18px;
}

.perfume10ml-tiktok-page .desc-reviews figure {
      display: grid;
      grid-template-columns: 64px minmax(0, 1fr);
      gap: 4px 12px;
      margin: 0;
      padding: 12px;
      border: 1px solid var(--divider);
      border-radius: 12px;
      background: #fff;
}

.perfume10ml-tiktok-page .desc-reviews img {
      grid-row: 1 / 3;
      width: 64px;
      height: 64px;
      border-radius: 8px;
      object-fit: cover;
      background: #f4eeee;
}

.perfume10ml-tiktok-page .desc-reviews blockquote {
      margin: 0;
      font-size: 13px;
      line-height: 1.5;
      color: #3d3d3d;
}

.perfume10ml-tiktok-page .desc-reviews figcaption {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      font-size: 11.5px;
      color: var(--muted);
}

.perfume10ml-tiktok-page .desc-reviews figcaption b {
      color: #262626;
}

.perfume10ml-tiktok-page .desc-reviews figcaption i {
      color: #e08b31;
      font-style: normal;
      letter-spacing: .05em;
}
/* ===== Form đặt hàng nhanh: dùng lại khung chọn phân loại của popup mua hàng =====
   Thẻ mang class .order-pick-card nên ăn sẵn toàn bộ style của popup (ảnh, nút tích,
   ruy-băng badge, đơn giá/thỏi). Ở đây chỉ chỉnh lại khoảng cách cho khớp lưới form. */

.perfume10ml-tiktok-page .description-order-pick {
  margin-top: 0;
}

/* Form là grid gap 14px nên bỏ padding-top của list, tránh dôi khoảng trắng.
   Giữ 9px để ruy-băng badge treo trên viền không bị cắt. */
.perfume10ml-tiktok-page .description-order-combos {
  padding-top: 9px;
}

/* Nền form là #fffaf7, thẻ trắng nên viền nhạt cũ gần như mất hút - đậm thêm một chút */
.perfume10ml-tiktok-page .description-order-combos .order-pick-card:not(.is-selected) {
  border-color: #ecdcd7;
}

/* Khung form hẹp hơn popup 27px (do padding 14px hai bên) nên dòng "Muse đi làm ·
   Desire hẹn hò" bị rớt xuống 2 dòng. Ăn lại phần padding đó cho riêng khu chọn
   phân loại + thu gọn padding/gap trong thẻ để chữ về đúng 1 dòng như popup. */
.perfume10ml-tiktok-page .description-order-pick {
  margin-inline: -8px;
}

.perfume10ml-tiktok-page .description-order-combos .order-pick-card {
  padding: 9px 9px;
  gap: 7px;
}

/* Máy hẹp (iPhone SE/mini) vẫn thiếu ~15px so với popup nên dòng đơn giá/thỏi của
   Bộ 3 rớt dòng. Hạ nửa point chữ ở đúng dòng đó để 4 thẻ về lại 1 dòng. */
@media (max-width: 374px) {
  .perfume10ml-tiktok-page .description-order-combos .order-pick-unit {
    font-size: 10px;
  }

  .perfume10ml-tiktok-page .description-order-combos .order-pick-copy small {
    font-size: 10.5px;
  }
}

/* === Chuyen tu <style> inline trong index.php vao day (04/08/2026) === */
    input[autocomplete="street-address"][data-order-customer-area][placeholder="Số nhà, Tỉnh/Thành phố, Quận/Huyện, Phường/Xã"]::placeholder {
        font-size: calc(1em - 4px);
    }
    /* Ô nhập đúng thì viền xanh cho khách yên tâm: SĐT phải đúng chuẩn di động VN, tên/địa chỉ chỉ cần có nội dung.
       Tô viền cho phần tử đang vẽ khung: label bọc ngoài (nếu có viền) và input (nếu input tự vẽ viền).
       Không dùng box-shadow để khỏi vẽ thêm ô thừa quanh input không viền nằm trong label. */
    .order-field.is-valid:not(.is-invalid),
    .description-order-field.is-valid:not(.is-invalid) {
      border-color: #16a34a !important;
    }
    .order-field.is-valid:not(.is-invalid) input,
    .order-field.is-valid:not(.is-invalid) textarea,
    .description-order-field.is-valid:not(.is-invalid) input,
    .description-order-field.is-valid:not(.is-invalid) textarea {
      border-color: #16a34a !important;
    }
    /* Form trong màn "Đặt hàng" (sheet): bấm vào ô -> viền đỏ + quầng hồng y như form Đặt hàng nhanh;
       nhập đúng thì rule viền xanh phía trên thắng (border-color !important). */
    .perfume10ml-tiktok-page .order-field input:focus,
    .perfume10ml-tiktok-page .order-field textarea:focus {
      border-color: var(--order-orange, #ff2d68);
      box-shadow: 0 0 0 3px rgba(255, 45, 104, .1);
    }
    /* Ô đã nhập đúng mà đang gõ tiếp: quầng chuyển xanh cho khớp viền. */
    .perfume10ml-tiktok-page .order-field.is-valid:not(.is-invalid) input:focus,
    .perfume10ml-tiktok-page .order-field.is-valid:not(.is-invalid) textarea:focus,
    .perfume10ml-tiktok-page .description-order-field.is-valid:not(.is-invalid) input:focus {
      box-shadow: 0 0 0 3px rgba(22, 163, 74, .12);
    }

/* === Nut "Mua ngay" o thanh duoi: thinh thoang loe mot cai de keo mat khach ve nut ===
   Thanh duoi cua trang nay giong het index.php (chi mot nut "Mua ngay"), nen cho no
   mot diem nhan nho de bu lai phan gia/cam ket da bo di.

   Nguyen tac de KHONG lam phien khach va KHONG lam xau giao dien:
   1. Hiem: chu ky 9 giay ma chi ~1.1 giay dau la co chuyen dong -> hon 87% thoi gian
      nut nam yen y het binh thuong. Nhay lien tuc moi la thu lam khach kho chiu va
      trong nhu quang cao re tien.
   2. Nhe: bien do phong to toi da 1.035 (nut cao 44px thi phinh ra chua toi 1.5px) va
      dai sang quet qua chi trang mo .34 -> liec thay co dong, nhin ky khong thay chuong.
   3. Mot nhip duy nhat: cu vien + dai sang chay CUNG mot luc trong 1 giay do, nen mat
      doc ra "mot cai nhap nhay", khong phai hai hieu ung danh nhau.
   4. Khong lam xe dich gi: chi dung transform + box-shadow + lop ::after phu len tren,
      trinh duyet khong phai tinh lai layout, chu va cac phan tu quanh nut dung yen.
   5. Khach cham/di chuot vao nut la dung ngay (xem :hover ben duoi) va may bat che do
      giam chuyen dong thi tat han. */

/* Nhip: dang nhip tim - manh mot cai roi nhe mot cai, xong nam yen. */
@keyframes ob-buy-now-nhip {
  0%    { transform: scale(1);     box-shadow: 0 0 0 0 rgba(255, 47, 95, .40); }
  2.3%  { transform: scale(1.035); box-shadow: 0 0 0 6px rgba(255, 47, 95, .14); }
  4.7%  { transform: scale(1);     box-shadow: 0 0 0 10px rgba(255, 47, 95, 0); }
  7%    { transform: scale(1.02);  box-shadow: 0 0 0 4px rgba(255, 47, 95, .10); }
  10%   { transform: scale(1);     box-shadow: 0 0 0 0 rgba(255, 47, 95, 0); }
  100%  { transform: scale(1);     box-shadow: 0 0 0 0 rgba(255, 47, 95, 0); }
}

/* Dai sang quet ngang mat nut, vao dung giua nhip tren. Bi cat gon trong bo tron
   999px cua nut nho overflow:hidden nen khong bao gio tran ra ngoai vien. */
@keyframes ob-buy-now-loe {
  0%, 3.5% { transform: translateX(-170%) skewX(-16deg); opacity: 0; }
  5.5%     { opacity: 1; }
  12%      { transform: translateX(170%) skewX(-16deg); opacity: 0; }
  100%     { transform: translateX(170%) skewX(-16deg); opacity: 0; }
}

.perfume10ml-tiktok-page .bottom-cta .buy-now,
.perfume10ml-tiktok-page .reviews-bottom-cta .buy-now {
  position: relative;
  overflow: hidden;
  /* Neo diem phong to vao giua nut de no khong lech sang mot ben khi nhip. */
  transform-origin: center;
  animation: ob-buy-now-nhip 9s ease-in-out 4s infinite;
}

.perfume10ml-tiktok-page .bottom-cta .buy-now::after,
.perfume10ml-tiktok-page .reviews-bottom-cta .buy-now::after {
  content: "";
  position: absolute;
  top: -30%;
  bottom: -30%;
  left: 0;
  width: 32%;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .34), rgba(255, 255, 255, 0));
  transform: translateX(-170%) skewX(-16deg);
  opacity: 0;
  animation: ob-buy-now-loe 9s ease-in-out 4s infinite;
}

/* Chu "Mua ngay" nam tren dai sang - de duoi thi bi lop trang lam nhat chu. */
.perfume10ml-tiktok-page .bottom-cta .buy-now b,
.perfume10ml-tiktok-page .reviews-bottom-cta .buy-now b {
  position: relative;
  z-index: 1;
}

/* Khach dang cham/di chuot vao nut thi thoi - luc do ho da chu y roi, nhip them chi
   lam nut nhay ngay duoi ngon tay. */
.perfume10ml-tiktok-page .bottom-cta .buy-now:hover,
.perfume10ml-tiktok-page .bottom-cta .buy-now:focus-visible,
.perfume10ml-tiktok-page .bottom-cta .buy-now:active,
.perfume10ml-tiktok-page .reviews-bottom-cta .buy-now:hover,
.perfume10ml-tiktok-page .reviews-bottom-cta .buy-now:focus-visible,
.perfume10ml-tiktok-page .reviews-bottom-cta .buy-now:active,
.perfume10ml-tiktok-page .bottom-cta .buy-now:hover::after,
.perfume10ml-tiktok-page .bottom-cta .buy-now:focus-visible::after,
.perfume10ml-tiktok-page .bottom-cta .buy-now:active::after,
.perfume10ml-tiktok-page .reviews-bottom-cta .buy-now:hover::after,
.perfume10ml-tiktok-page .reviews-bottom-cta .buy-now:focus-visible::after,
.perfume10ml-tiktok-page .reviews-bottom-cta .buy-now:active::after {
  animation-play-state: paused;
}

/* Popup chon phan loai dang mo (js bo thuoc tinh hidden cua [data-variant-sheet]) ->
   nut duoi bi popup che, cho no nam yen cho do ton pin. Trinh duyet cu khong hieu :has()
   thi bo qua ca rule nay, hieu ung van chay binh thuong - khong hong gi. */
.perfume10ml-tiktok-page:has([data-variant-sheet]:not([hidden])) .bottom-cta .buy-now,
.perfume10ml-tiktok-page:has([data-variant-sheet]:not([hidden])) .bottom-cta .buy-now::after {
  animation: none;
}

/* May/dien thoai bat che do giam chuyen dong (nguoi say xe, nhay cam voi chuyen dong)
   thi tat han hieu ung - day la thiet lap he thong cua khach, phai ton trong. */
@media (prefers-reduced-motion: reduce) {
  .perfume10ml-tiktok-page .bottom-cta .buy-now,
  .perfume10ml-tiktok-page .bottom-cta .buy-now::after,
  .perfume10ml-tiktok-page .reviews-bottom-cta .buy-now,
  .perfume10ml-tiktok-page .reviews-bottom-cta .buy-now::after {
    animation: none;
  }
}

/* === Giu 3 dong chu cua the Bo 3 moi dong dung mot hang ===
   Cot chu tren the chi rong khoang 150-165px o may 360-390px. Dong 2 ("Di lam · Dao pho
   · Hen ho") va dong 3 (don gia + "· re hon mua le") dai, khong chan thi rot xuong hang
   thu hai -> the Bo 3 cao hon 3 the le, hang bi le. Thu nho vai phan chu la du, van doc ro.

   Rieng DONG 1 (ten phan loai) khong phai chan nua: ten cu "DU 3 THOI HUONG" dai 15 ky tu
   VIET HOA nen phai ha xuong 12.5px; ten hien tai "Bo 3 du mood" ngan va viet thuong, de
   thua cho o mot hang nen de nguyen 13px cho bang 3 the le - ha nua thi ten bo 3 nhin
   nho hon han cac the khac, lech han thay ro. */
@media (max-width: 380px) {
  .perfume10ml-tiktok-page .order-pick-card.is-featured .order-pick-copy small {
    font-size: 10px;
  }

  .perfume10ml-tiktok-page .order-pick-card.is-featured .order-pick-unit::after {
    font-size: 9.5px;
  }
}

/* === Uu dai Quoc khanh 2/9 cho "Bo doi Ngay & Dem" ===
   Mau do-vang tach han khoi hong cua trang de mat bat ngay ra "cai nay khac". Ca dai bang
   lan badge do PHP dieu khien: het 2/9 la HTML khong in ra nua, khong can sua CSS. */
.perfume10ml-tiktok-page .ob-deal29 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  /* Tieu de chiem tron mot hang de dong chi tiet luon nam hang duoi - de chung mot hang
     thi may 360px cat mat chu "den het 02/09". */
  gap: 1px 8px;
  margin: 0 0 10px;
  padding: 9px 12px;
  border-radius: 10px;
  background: linear-gradient(100deg, #a90f18 0%, #cf2229 58%, #9d0c15 100%);
  box-shadow: 0 2px 10px -5px rgba(169, 15, 24, .6);
}

.perfume10ml-tiktok-page .ob-deal29 b {
  flex: 0 0 100%;
  min-width: 0;
  color: #ffd45e;
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.3;
}

.perfume10ml-tiktok-page .ob-deal29 span {
  flex: 1 1 100%;
  min-width: 0;
  color: #ffe6bd;
  font-size: 12px;
  line-height: 1.35;
}

/* Badge tren the Bo doi doi sang do-vang cho khop dai bang. Bat theo data-attribute vi
   the nay khong mang class is-featured (xem ghi chu o khoi --duo-unit-note ben tren). */
.perfume10ml-tiktok-page .order-pick-card[data-order-variant-key="desire-muse"] .order-pick-badge,
.perfume10ml-tiktok-page .order-pick-card[data-variant-key="desire-muse"] .order-pick-badge {
  background: linear-gradient(100deg, #a90f18, #cf2229);
  color: #ffd45e;
}

/* May hep: dai bang xuong 2 dong cho du cho chu, khong cat chu. */
@media (max-width: 380px) {
  .perfume10ml-tiktok-page .ob-deal29 {
    padding: 8px 10px;
  }

  .perfume10ml-tiktok-page .ob-deal29 b { font-size: 12.5px; }
  .perfume10ml-tiktok-page .ob-deal29 span { font-size: 11.5px; }
}

/* === Bac thang gia dat TREN khu chon phan loai ===
   Muc dich: 889.000d cua Bo 3 khong bao gio dung mot minh. Bang nay cho khach thay ca 3
   bac cung luc, nen con so to nhat luon co muc tiet kiem va don gia moi thoi di kem.
   Giu mau rat nhat: day la bang TRA CUU, khong duoc hut mat khoi cac the phan loai
   ngay ben duoi - cac the moi la cho khach bam. */
.perfume10ml-tiktok-page .ob-ladder {
  display: grid;
  gap: 1px;
  margin: 0 0 12px;
  padding: 2px;
  border: 1px solid #f0e2e7;
  border-radius: 10px;
  background: #f7eef1;
  overflow: hidden;
}

.perfume10ml-tiktok-page .ob-ladder-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 1px 10px;
  padding: 8px 10px;
  background: #fff;
}

.perfume10ml-tiktok-page .ob-ladder-row:first-child { border-radius: 8px 8px 0 0; }
.perfume10ml-tiktok-page .ob-ladder-row:last-child { border-radius: 0 0 8px 8px; }

/* Hang Bo 3: nhan nhe bang nen hong nhat + chu gia dam hon, khong dung vien day hay mau
   choi - de no khong tranh su chu y voi chinh the Bo 3 ben duoi. */
.perfume10ml-tiktok-page .ob-ladder-row.is-best {
  background: #fff5f8;
}

.perfume10ml-tiktok-page .ob-ladder-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: #4a4a4a;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
}

.perfume10ml-tiktok-page .ob-ladder-row.is-best .ob-ladder-name { color: #222; }

.perfume10ml-tiktok-page .ob-ladder-tag {
  padding: 1px 6px;
  border-radius: 999px;
  background: linear-gradient(100deg, #a90f18, #cf2229);
  color: #ffd45e;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}

.perfume10ml-tiktok-page .ob-ladder-price {
  justify-self: end;
  color: #4a4a4a;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}

.perfume10ml-tiktok-page .ob-ladder-row.is-best .ob-ladder-price {
  color: var(--pink);
  font-size: 14.5px;
  font-weight: 800;
}

/* Dong ghi chu chiem tron chieu ngang, nam duoi ten + gia. */
.perfume10ml-tiktok-page .ob-ladder-note {
  grid-column: 1 / -1;
  color: #17a34a;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
}

@media (max-width: 380px) {
  .perfume10ml-tiktok-page .ob-ladder-row { padding: 7px 9px; }
  .perfume10ml-tiktok-page .ob-ladder-name { font-size: 12px; }
  .perfume10ml-tiktok-page .ob-ladder-price { font-size: 12.5px; }
  .perfume10ml-tiktok-page .ob-ladder-row.is-best .ob-ladder-price { font-size: 14px; }
  .perfume10ml-tiktok-page .ob-ladder-note { font-size: 10.5px; }
}

/* =====================================================================
   v9 (28/08/2026) — chuyển khối đặt hàng sang js/landing-desire.js
   ===================================================================== */

/* --- 5 phân loại xếp 2 tầng trong sheet "Chọn phân loại" ---------------
   js/landing-desire.js đổ 5 thẻ .variant-card vào .variant-strip theo đúng
   thứ tự khai ở window.OBARIA_PAGE.variants, mỗi thẻ mang sẵn data-variant-key.
   JS KHÔNG can thiệp bố cục, nên chia tầng là việc của CSS:
     tầng trên = 2 bộ tiết kiệm (desire-muse, combo-full) — mỗi thẻ nửa hàng
     tầng dưới = 3 thỏi lẻ      (muse, grace, desire)     — mỗi thẻ 1/3 hàng
   Lưới 6 cột vì chỉ 6 mới chia chẵn được cả 2 lẫn 3 phần. Khối này đè lên
   rule grid-template-columns: repeat(2, ...) của bộ v8 phía trên (cùng độ
   ưu tiên, đứng sau nên thắng). */
.perfume10ml-tiktok-page .variant-strip {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: stretch;
}

.perfume10ml-tiktok-page .variant-strip > [data-variant-key="desire-muse"],
.perfume10ml-tiktok-page .variant-strip > [data-variant-key="combo-full"] {
  grid-column: span 3;
}

.perfume10ml-tiktok-page .variant-strip > [data-variant-key="muse"],
.perfume10ml-tiktok-page .variant-strip > [data-variant-key="grace"],
.perfume10ml-tiktok-page .variant-strip > [data-variant-key="desire"] {
  grid-column: span 2;
}

/* Thứ tự hiện không phụ thuộc thứ tự khai trong OBARIA_PAGE.variants: đổi con số
   order là đổi được vị trí thẻ, không phải đụng vào PHP hay JS. */
.perfume10ml-tiktok-page .variant-strip > [data-variant-key="desire-muse"] { order: 1; }
.perfume10ml-tiktok-page .variant-strip > [data-variant-key="combo-full"]  { order: 2; }
.perfume10ml-tiktok-page .variant-strip > [data-variant-key="muse"]        { order: 3; }
.perfume10ml-tiktok-page .variant-strip > [data-variant-key="grace"]       { order: 4; }
.perfume10ml-tiktok-page .variant-strip > [data-variant-key="desire"]      { order: 5; }

/* Thẻ Bộ đôi phải nổi ngang thẻ Bộ 3. js/landing-desire.js chỉ gắn class
   .variant-card-combo cho đúng key 'combo-full' (viết cứng trong file hệ thống,
   không sửa được), nên thẻ Bộ đôi bắt theo data-variant-key để mượn lại style đó. */
.perfume10ml-tiktok-page .variant-strip > [data-variant-key="desire-muse"] {
  border-color: #ff7aa2;
  background: linear-gradient(180deg, #fff 0%, #fff6f9 100%);
}

/* Hai thẻ bộ dày hơn 3 thỏi lẻ một chút cho ranh giới hai tầng rõ ra */
.perfume10ml-tiktok-page .variant-strip > [data-variant-key="desire-muse"] .variant-copy,
.perfume10ml-tiktok-page .variant-strip > [data-variant-key="combo-full"] .variant-copy {
  padding-bottom: 11px;
}

@media (max-width: 360px) {
  /* Máy hẹp (iPhone SE/mini): 3 thỏi lẻ giãn ra 2 thẻ/hàng cho chữ khỏi vỡ dòng */
  .perfume10ml-tiktok-page .variant-strip > [data-variant-key="muse"],
  .perfume10ml-tiktok-page .variant-strip > [data-variant-key="grace"],
  .perfume10ml-tiktok-page .variant-strip > [data-variant-key="desire"] {
    grid-column: span 3;
  }
}

/* --- Chứng nhận & kiểm định: dải ngang gọn --------------------------
   Bộ v7/v8 dùng nút bấm mở ảnh to qua móc data-cert-image, nhưng móc đó chỉ có
   trong js/landing-perfume10ml.js. Trang này chạy js/landing-desire.js nên nút
   bấm không phản hồi -> bày thẳng ảnh, không cần JS.

   Nhưng bày 5 tờ A4 dọc full-width thì tốn ~1.800px cuộn. Chứng nhận hoạt động
   bằng SỰ CÓ MẶT chứ không phải bằng nội dung - không khách nào đọc số phiếu
   kiểm nghiệm rồi mới mua. Mỗi màn cuộn thừa lại là một cơ hội khách thoát
   trước khi tới nút mua. Nên: dải cuộn NGANG, mỗi thẻ ~128px, cả khối còn
   ~200px chiều dọc. Thấy hết ảnh, còn nguyên chữ, mà không ăn chiều cao trang.

   Ảnh để object-fit: contain trên nền sáng (không cover): tờ giấy phải nhìn ra
   là tờ giấy, cắt cúp một góc thì mất luôn ý nghĩa "đây là chứng nhận".
   Ảnh nằm sẵn trong repo: assets/product-images/obaria-muse-grace/. */
.perfume10ml-tiktok-page .cert-summary {
  margin: 6px 0 0;
  color: #6f6a68;
  font-size: 12px;
  line-height: 1.4;
}

.perfume10ml-tiktok-page .cert-gallery {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  margin: 10px -16px 0;
  padding: 2px 16px 6px;
  list-style: none;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.perfume10ml-tiktok-page .cert-gallery::-webkit-scrollbar {
  display: none;
}

.perfume10ml-tiktok-page .cert-gallery > li {
  flex: 0 0 128px;
  width: 128px;
  margin: 0;
  scroll-snap-align: start;
}

.perfume10ml-tiktok-page .cert-gallery figure {
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #ecdcd7;
  border-radius: 12px;
  background: #fff;
}

.perfume10ml-tiktok-page .cert-gallery img {
  width: 100%;
  height: 116px;
  display: block;
  object-fit: contain;
  background: #faf7f6;
  padding: 5px;
}

.perfume10ml-tiktok-page .cert-gallery figcaption {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-top: 1px solid #f3e9e6;
  padding: 7px 8px 8px;
}

/* Kẹp 2 dòng để 5 thẻ cao bằng nhau: nhãn dài ngắn khác nhau mà thẻ so le
   thì dải nhìn như xếp lỗi. Chữ đã rút đủ ngắn nên không thẻ nào bị cắt. */
.perfume10ml-tiktok-page .cert-gallery figcaption b {
  display: -webkit-box;
  overflow: hidden;
  color: #111;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.25;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.perfume10ml-tiktok-page .cert-gallery figcaption small {
  color: #857f7d;
  font-size: 10px;
  line-height: 1.3;
}


/* --- Thứ bậc chữ trên thẻ phân loại -----------------------------------
   Bộ v8 style các ô này cho thẻ NGANG ảnh nhỏ, chữ nào cũng hồng đậm. Bê nguyên
   sang thẻ dọc hẹp là 4 mẩu hồng chồng nhau, không mẩu nào nổi, giá chìm nghỉm.
   Ở đây mỗi ô một vai trò rõ và chỉ một dòng (chữ do PHP truyền vào, xem
   window.OBARIA_PAGE ở cuối landing-templates/v11.php):

     badge / tag  chip trên cùng — badge cho 2 bộ, tag (dịp dùng) cho 3 thỏi lẻ
     name         tên phân loại, đen đậm
     note         GIÁ BÁN — con số to nhất thẻ, đỏ
     subNote      đơn giá mỗi thỏi / quy cách, xám nhỏ
     saving       chip "Tiết kiệm ...", viền nhạt để không đá nhau với giá

   Thứ tự hiện đặt bằng `order` nên không phụ thuộc thứ tự js/landing-desire.js
   chèn vào DOM (nó chèn: name, tag, note, subNote, badge, saving). */
.perfume10ml-tiktok-page .variant-strip .variant-card .variant-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 9px 8px 11px;
  text-align: center;
}

.perfume10ml-tiktok-page .variant-strip .variant-card .variant-badge,
.perfume10ml-tiktok-page .variant-strip .variant-card .variant-tag { order: 1; }
.perfume10ml-tiktok-page .variant-strip .variant-card .variant-name { order: 2; }
.perfume10ml-tiktok-page .variant-strip .variant-card .variant-note { order: 3; }
.perfume10ml-tiktok-page .variant-strip .variant-card .variant-subnote { order: 4; }
.perfume10ml-tiktok-page .variant-strip .variant-card .variant-hot,
.perfume10ml-tiktok-page .variant-strip .variant-card .variant-saving { order: 5; }

/* Chip dịp dùng của 3 thỏi lẻ: xám nhạt, chỉ để phân biệt mùi nào cho dịp nào —
   không tranh màu với giá. */
.perfume10ml-tiktok-page .variant-strip .variant-card .variant-tag {
  margin: 0;
  border: 0;
  border-radius: 999px;
  background: #f3eeed;
  color: #6f6a68;
  padding: 2px 9px;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.5;
}

.perfume10ml-tiktok-page .variant-strip .variant-card .variant-name {
  color: #111;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.25;
}

/* GIÁ: con số to nhất thẻ. nowrap vì đã là một cụm ngắn - không bao giờ để nó
   vắt dòng như bản trước (giá vỡ 2-3 dòng nhìn như một đoạn văn). */
.perfume10ml-tiktok-page .variant-strip .variant-card:not(.variant-card-combo) .variant-note,
.perfume10ml-tiktok-page .variant-strip .variant-card.variant-card-combo .variant-note {
  display: block;
  overflow: visible;
  margin: 1px 0 0;
  color: #d0021b;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
  text-overflow: clip;
  -webkit-line-clamp: unset;
  line-clamp: unset;
}

.perfume10ml-tiktok-page .variant-strip .variant-card .variant-subnote {
  color: #86807e;
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.3;
}

/* Nhãn nổi của 2 thẻ bộ */
.perfume10ml-tiktok-page .variant-strip .variant-card .variant-badge {
  margin: 0;
  border-radius: 999px;
  background: var(--pink, #e8355f);
  color: #fff;
  padding: 2px 9px;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.5;
}

/* "Tiết kiệm ..." để viền nhạt thay vì pill đặc: pill đặc nặng ngang giá,
   hai cụm đỏ cạnh nhau làm mắt phải chọn giữa hai con số. */
.perfume10ml-tiktok-page .variant-strip .variant-card .variant-saving {
  margin: 3px 0 0;
  border: 1px solid #f6ccd8;
  border-radius: 999px;
  background: #fff6f9;
  color: #c4184a;
  padding: 2px 9px;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.5;
}

/* Bỏ nút phóng to ảnh trên thẻ phân loại. js/landing-desire.js luôn chèn nút này
   (file hệ thống, không sửa được) nên chỉ ẩn được bằng CSS. Ẩn đi thì cả thẻ chỉ còn
   MỘT hành vi duy nhất: chạm để chọn - không còn cái nút tròn đè lên ảnh sản phẩm,
   cũng không còn chuyện chạm nhầm ra popup xem ảnh giữa lúc đang chọn mùi. */
.perfume10ml-tiktok-page .variant-strip .variant-card .variant-zoom {
  display: none;
}

/* =====================================================================
   v9 — Dọn sheet chọn phân loại để 5 phân loại vừa MỘT màn hình điện thoại
   (28/08/2026). Đo trên khung 390x780: vùng cuộn của sheet chỉ 583px mà
   nội dung cần 800px -> khách phải cuộn mới thấy 3 thỏi lẻ, tức là 3 lựa
   chọn RẺ NHẤT (cửa vào dễ nhất) bị giấu. Cắt 295px ở 4 chỗ KHÔNG bán hàng,
   giữ nguyên 5 thẻ và mọi thông điệp.
   Đặt ở CUỐI FILE để thắng mọi rule phía trên.
   ===================================================================== */

/* 1 + 2. ĐÃ BỎ Ở BẢN v11 (04/09/2026) - trả lại đầu sheet giống v4.
   Bản v9 ẩn 3 khối đầu sheet (thẻ ảnh + giá -114px, thanh "Chính hãng" và thanh ưu
   đãi -56px) để 5 thẻ phân loại lọt một màn hình. v11 lấy lại theo yêu cầu: đầu sheet
   nay có vạch kéo, thẻ ảnh + tên + giá + %giảm, rồi thanh "Flash sale còn 03:52:30".

   Không cần thêm rule mới: các rule dựng đúng kiểu v4 đã nằm sẵn trong file này
   (~dòng 6950-7100: .sheet-mall-bar::before vẽ vạch kéo và ẩn chữ bên trong,
   .sheet-product-card, .sheet-sale-bar::before vẽ chấm ⚡). Chỉ cần thôi ẩn là ra.

   ĐÁNH ĐỔI phải biết: đầu sheet cao thêm ~200px nên 3 thỏi lẻ nằm dưới nếp gấp,
   khách phải cuộn mới thấy. Muốn ẩn lại: bỏ dấu chú thích 2 khối dưới đây rồi tăng ?v=.

.perfume10ml-tiktok-page .variant-sheet .sheet-product-card {
  display: none;
}

.perfume10ml-tiktok-page .variant-sheet .sheet-mall-bar,
.perfume10ml-tiktok-page .variant-sheet .sheet-sale-bar {
  display: none;
}
*/

/* 3. Khối chọn số lượng (-58px). Khách gần như luôn mua 1; hỏi số lượng trước
   khi họ kịp chọn mùi là thêm một quyết định thừa ngay giữa bước chọn.
   Bước 2 (popup) vẫn còn nút tăng/giảm cho trường hợp hiếm.
   Ẩn theo đúng cách đang dùng ở trang index - xem ghi chú
   "ghi-chu-obaria/an-hien-nut-so-luong.md". Muốn hiện lại: bọc khối này trong
   dấu chú thích rồi tăng ?v= của css/v11.css. */
.perfume10ml-tiktok-page .variant-sheet .quantity-row {
  display: none;
}

/* 4. Thu ảnh trên thẻ (-67px): hàng bộ 170->120, hàng thỏi lẻ 109->92.
   Chỉ thu vừa phải, KHÔNG bóp nhỏ: ảnh vẫn là thứ bán hàng. Khách đã xem ảnh
   lớn ở đầu trang rồi, việc của sheet là so sánh và chọn. */
.perfume10ml-tiktok-page .variant-strip > [data-variant-key="desire-muse"] img,
.perfume10ml-tiktok-page .variant-strip > [data-variant-key="combo-full"] img {
  height: 120px;
  object-fit: cover;
  aspect-ratio: auto;
}

.perfume10ml-tiktok-page .variant-strip > [data-variant-key="muse"] img,
.perfume10ml-tiktok-page .variant-strip > [data-variant-key="grace"] img,
.perfume10ml-tiktok-page .variant-strip > [data-variant-key="desire"] img {
  height: 92px;
  object-fit: cover;
  aspect-ratio: auto;
}

/* Dòng cam kết giờ mang 4 ý nên cho xuống dòng gọn thay vì tràn ngang */
.perfume10ml-tiktok-page .variant-actions .variant-trust {
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 10px;
}

/* Máy hẹp (iPhone SE/mini): thu thêm chút nữa cho đủ chỗ */
@media (max-width: 380px) {
  .perfume10ml-tiktok-page .variant-strip > [data-variant-key="desire-muse"] img,
  .perfume10ml-tiktok-page .variant-strip > [data-variant-key="combo-full"] img {
    height: 104px;
  }

  .perfume10ml-tiktok-page .variant-strip > [data-variant-key="muse"] img,
  .perfume10ml-tiktok-page .variant-strip > [data-variant-key="grace"] img,
  .perfume10ml-tiktok-page .variant-strip > [data-variant-key="desire"] img {
    height: 82px;
  }
}

/* =====================================================================
   v9 — Sửa 4 lỗi sau khi dọn sheet (28/08/2026)
   ===================================================================== */

/* --- LỖI 1: nút × đè lên thẻ phân loại — ĐÃ BỎ Ở BẢN v11 -------------
   Cách sửa của v9 (kéo nút × lên top:10px ngang dòng tiêu đề) chỉ đúng khi đầu sheet
   trống. v11 trả lại thẻ ảnh + giá ở đầu sheet nên nút × về đúng chỗ cũ của v4:
   top:52px - ngang thân thẻ ảnh, không còn rơi vào hàng thẻ phân loại nào.
   Vị trí đó do rule .variant-close ~dòng 6932 lo, không cần ghi đè ở đây nữa.
   Tiêu đề cũng thôi phải chừa lề phải 52px vì nút × không còn đứng cạnh nó. */

/* --- LỖI 2 + 3: chân sheet đè lên nội dung ----------------------------
   Chân sheet vốn là lớp NỔI (position:absolute) đè lên vùng cuộn, chừa chỗ
   bằng cách đệm padding-bottom 122px cho vùng cuộn. Cách đó chỉ đúng khi chân
   sheet cao đúng 122px. Chọn phân loại xong, dòng "Tổng (... mặt hàng)" hiện
   thêm ra -> chân cao hơn 122px -> nó đè mất dòng cuối của thẻ và dòng cam kết
   bị đẩy khỏi màn hình.
   Sửa tận gốc: cho sheet xếp dọc, chân sheet chiếm HÀNG RIÊNG. Không còn đè
   nhau trong mọi trạng thái, lại thu hồi được ~100px đệm thừa. */
.perfume10ml-tiktok-page .variant-sheet {
  display: flex;
  flex-direction: column;
}

.perfume10ml-tiktok-page .variant-sheet .variant-sheet-scroll {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  padding-bottom: 14px;
}

.perfume10ml-tiktok-page .variant-sheet .variant-actions {
  position: static;
  flex: 0 0 auto;
}

/* Dòng cam kết: bỏ 4 dấu tích tròn xám (rối mắt, mỗi ý một cục) -> một dòng
   chữ liền mạch ngăn bằng dấu chấm giữa, đọc lướt một nhịp là xong. */
.perfume10ml-tiktok-page .variant-actions .variant-trust {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 0;
  margin: 7px 0 0;
  color: #7a7573;
  font-size: 11px;
  line-height: 1.4;
}

.perfume10ml-tiktok-page .variant-actions .variant-trust span {
  gap: 0;
}

.perfume10ml-tiktok-page .variant-actions .variant-trust span::before {
  display: none;
}

.perfume10ml-tiktok-page .variant-actions .variant-trust span:not(:last-child)::after {
  content: "·";
  margin: 0 6px;
  color: #cfc9c7;
}

/* --- LỖI 4: không thấy rõ đang chọn cái nào --------------------------
   Nguyên nhân: 2 thẻ bộ được cho viền HỒNG để trông nổi bật, mà viền hồng lại
   đúng là dấu hiệu "đang chọn" -> chọn hay chưa chọn nhìn y hệt nhau.
   Trả viền của MỌI thẻ về trung tính; 2 thẻ bộ vẫn nổi nhờ nhãn hồng + nền ấm.
   Màu hồng từ nay chỉ dành riêng cho thẻ ĐANG CHỌN. */
.perfume10ml-tiktok-page .variant-strip .variant-card,
.perfume10ml-tiktok-page .variant-strip > [data-variant-key="desire-muse"],
.perfume10ml-tiktok-page .variant-strip .variant-card-combo {
  border: 1px solid #e3dedd;
  box-shadow: none;
}

.perfume10ml-tiktok-page .variant-strip > [data-variant-key="desire-muse"],
.perfume10ml-tiktok-page .variant-strip > [data-variant-key="combo-full"] {
  background: linear-gradient(180deg, #fff 0%, #fffaf6 100%);
}

/* Thẻ đang chọn: viền dày + vòng sáng + nền hồng nhạt + nhấc lên. */
.perfume10ml-tiktok-page .variant-strip .variant-card.is-selected,
.perfume10ml-tiktok-page .variant-strip > [data-variant-key="desire-muse"].is-selected,
.perfume10ml-tiktok-page .variant-strip .variant-card-combo.is-selected {
  border: 2px solid var(--pink);
  background: #fff5f8;
  box-shadow: 0 0 0 3px rgba(255, 45, 104, .16), 0 10px 22px rgba(255, 45, 104, .18);
}

/* Dấu tích tròn 22px ở góc quá nhỏ để nhận ra trong 5 thẻ. Đổi thành BĂNG CHỮ
   chạy ngang đầu thẻ: nhìn phát thấy ngay đang chọn cái nào, không phải soi góc. */
.perfume10ml-tiktok-page .variant-strip .variant-card.is-selected::after,
.perfume10ml-tiktok-page .variant-strip .variant-card-combo.is-selected::after {
  content: "\2713  ĐANG CHỌN";
  left: 0;
  right: 0;
  top: 0;
  bottom: auto;
  z-index: 4;
  width: auto;
  height: auto;
  display: block;
  border-radius: 0;
  background: var(--pink);
  color: #fff;
  padding: 4px 0 5px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-align: center;
  box-shadow: none;
}

/* Tên phân loại của thẻ đang chọn cũng đậm màu hồng cho ăn khớp với băng chữ */
.perfume10ml-tiktok-page .variant-strip .variant-card.is-selected .variant-name {
  color: var(--pink);
}

/* --- Bỏ khối "Video" ở đầu tab Mô tả (29/08/2026) --------------------
   Ẩn cả section: gồm tiêu đề "Video" + thẻ video assets/main.mp4 (poster bg_main.jpg).

   Ẩn bằng CSS chứ KHÔNG xoá khỏi HTML, vì CLAUDE.md mục "Quy tắc BẮT BUỘC" ghi rõ:
   phần tử mang thuộc tính data-* của JS phải còn nguyên (được đổi class/vị trí/style,
   không được xoá). Khối này mang data-description-video-card / -video / -video-poster.
   (Thực tế js/landing-desire.js đều dùng ?. nên xoá hẳn cũng không lỗi - nhưng luật repo
   là luật, và ẩn thì hoàn tác chỉ mất một dòng.)

   Muốn hiện lại: bọc khối này trong dấu chú thích rồi tăng ?v= của css/v11.css.

   LƯU Ý selector: khối này KHÔNG nằm trong .description-panel như nhìn thụt lề trong
   file PHP tưởng - trình duyệt phân tích ra cây khác. Bản đầu tôi viết
   ".description-panel .description-video-block" nên không khớp phần tử nào, ẩn hụt.
   Bám thẳng vào .description-video-block; rule duy nhất còn lại (dòng ~1729) chỉ đặt
   margin và đứng trước, nên rule này thắng. */
.perfume10ml-tiktok-page .description-video-block {
  display: none;
}

/* --- Dải chọn nhanh phân loại: 5 nút trên MỘT hàng -------------------
   .thumbs-list để repeat(4, ...) từ thời v1 chỉ có 4 phân loại. Trang này 5 phân
   loại nên nút thứ 5 rớt xuống hàng hai, nhìn như xếp lỗi. Đổi thành 5 cột cố định:
   một hàng, không cuộn ngang, không rớt dòng - khách thấy đủ 5 lựa chọn trong một
   cái liếc, không phải vuốt cũng không tưởng là hết ở nút thứ 4. */
.perfume10ml-tiktok-page .thumbs-list {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  overflow: visible;
}

/* --- Bỏ nút "Xem thêm" dưới bảng thông số (29/08/2026) ---------------
   Nút này (data-toggle-specs) dùng để mở các dòng thông số phụ mang data-spec-extra.
   Trang v9 KHÔNG có dòng nào như vậy (đếm được 0), nên bấm vào không có gì xảy ra -
   một nút chết, khách bấm không phản hồi thì tưởng trang lỗi.

   Ẩn bằng CSS, không xoá khỏi HTML: nó mang data-toggle-specs mà CLAUDE.md yêu cầu
   giữ nguyên phần tử có thuộc tính data-* của JS.
   Muốn hiện lại: bọc khối này trong dấu chú thích rồi tăng ?v= của css/v11.css. */
.perfume10ml-tiktok-page .see-more[data-toggle-specs] {
  display: none;
}

/* --- Bấm ảnh chứng nhận để xem bản to (lightbox thuần CSS) -----------
   Làm bằng :target chứ không bằng JS, vì js/landing-desire.js không có móc mở ảnh cho
   khối này (móc data-cert-image chỉ có trong js/landing-perfume10ml.js), mà CLAUDE.md
   thì cấm thêm khối <script> mới. Đổi lại được 2 cái lợi thật: JS hỏng vẫn xem được ảnh,
   và nút Back của điện thoại đóng đúng lớp ảnh thay vì thoát trang.

   Cách chạy: mỗi thẻ là <a href="#xem-cn-...">, lớp phủ cùng id mặc định display:none,
   khi URL trỏ tới nó thì :target bật lên.

   ĐÓNG trỏ về "#dong-anh" - một hash CỐ Ý không khớp phần tử nào. :target hết khớp nên
   lớp ảnh tắt, mà trình duyệt không tìm ra chỗ để cuộn tới nên trang ĐỨNG YÊN, khách về
   đúng dòng đang đọc. Bản đầu trỏ về "#chung-nhan" thì trình duyệt kéo khối đó lên đầu
   màn hình - đo được nhảy 202px, đủ để khách mất mạch đọc.

   Không có nhãn "Xem to" trên ảnh: ai muốn xem kỹ thì tự bấm, còn lại để dải ảnh sạch. */
.perfume10ml-tiktok-page .cert-open {
  position: relative;
  display: block;
  text-decoration: none;
}

.perfume10ml-tiktok-page .cert-open:active img {
  transform: scale(.985);
}

.perfume10ml-tiktok-page .cert-viewer {
  display: none;
}

.perfume10ml-tiktok-page .cert-viewer:target {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  overflow: auto;
  background: rgba(12, 10, 10, .92);
  padding: 44px 14px 22px;
  overscroll-behavior: contain;
}

/* Nền bấm-để-đóng nằm dưới ảnh */
.perfume10ml-tiktok-page .cert-viewer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: block;
}

.perfume10ml-tiktok-page .cert-viewer:target img {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 560px;
  height: auto;
  border-radius: 8px;
  background: #fff;
}

.perfume10ml-tiktok-page .cert-viewer-close {
  position: fixed;
  right: 14px;
  top: 14px;
  z-index: 3;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  color: #333;
  font-size: 26px;
  font-weight: 300;
  line-height: 1;
  text-decoration: none;
}


/* =====================================================================
   NHÓM A — vá 5 lỗi do workflow soát ra (29/08/2026)
   ===================================================================== */

/* --- A1. TÊN PHÂN LOẠI KHÔNG ĐƯỢC CẮT --------------------------------
   Thủ phạm: rule `.variant-card:not(.variant-card-combo) .variant-name` (khoảng dòng
   7251) kẹp `-webkit-line-clamp: 2` + `overflow: hidden`. Nó có độ ưu tiên (0,4,0) vì
   `:not()` tính như một class, nên MỌI rule `.variant-strip .variant-card .variant-name`
   (0,3,0) của khối bố cục mới đều đè không nổi.

   Đo thật: ở 320px "Bộ đôi Grace + Muse" và "Bộ đôi Grace + Desire" cùng in ra
   "Bộ đôi Grace +…" - hai thẻ khác nhau nhìn Y HỆT nhau, chỉ phân biệt bằng giá.
   Ở 360px (khổ Android phổ biến nhất) "Bộ đôi Desire + Muse" mất tên mùi thứ hai.
   Tên vừa là thứ khách dùng để phân biệt, vừa là thứ ĐI THEO ĐƠN HÀNG - cắt là hỏng cả hai.

   Cách chữa: viết selector cùng dạng `:not()` để thắng đúng luật, KHÔNG dùng !important.
   Máy hẹp thì thu cỡ chữ chứ không cắt chữ. */
.perfume10ml-tiktok-page .variant-strip .variant-card:not(.variant-card-combo) .variant-name,
.perfume10ml-tiktok-page .variant-strip .variant-card.variant-card-combo .variant-name {
  display: block;
  overflow: visible;
  text-overflow: clip;
  -webkit-line-clamp: unset;
  line-clamp: unset;
}

/* Thẻ cùng hàng cao bằng nhau - trước đây so le 25-37px */
.perfume10ml-tiktok-page .variant-strip .variant-card {
  align-self: stretch;
}

@media (max-width: 380px) {
  .perfume10ml-tiktok-page .variant-strip .variant-card:not(.variant-card-combo) .variant-name {
    font-size: 12.5px;
    line-height: 1.2;
  }
}

/* --- A3. Cuộn trong sheet không kéo theo trang nền --------------------
   Thiếu overscroll-behavior nên cuộn hết sheet là trang phía sau trôi theo, khách
   tưởng đã thoát sheet. Lớp .reviews-layer-body cùng nhà đã có sẵn thứ này. */
.perfume10ml-tiktok-page .variant-sheet,
.perfume10ml-tiktok-page .variant-sheet .variant-sheet-scroll {
  overscroll-behavior: contain;
}

.perfume10ml-tiktok-page .variant-backdrop {
  overscroll-behavior: contain;
  touch-action: none;
}

/* --- A4. Nút chính phải TRÔNG như chưa bấm được khi chưa chọn ---------
   js/landing-desire.js không bao giờ set thuộc tính disabled (luôn gán disabled=false),
   nó chỉ bật class .variant-sheet--needs-selection lên sheet. Nút hồng rực khiến khách
   bấm rồi ăn window.alert - một cú bấm hụt đúng tại bước quyết định.
   KHÔNG dùng pointer-events:none: khách bấm vào vẫn cần nghe lời nhắc chọn phân loại. */
.perfume10ml-tiktok-page .variant-sheet--needs-selection .variant-action {
  background: #efe3e5;
  color: #96878a;
  box-shadow: none;
}

/* --- A5a. Tương phản đạt chuẩn WCAG AA -------------------------------
   Cũ: chip #c4184a trên #fff6f9 = 3.60:1 và dòng phụ #86807e trên trắng = 3.89:1,
   đều dưới ngưỡng 4.5:1 cho chữ thường. Chữ 10px mà nhạt là nhóm khách lớn tuổi đọc
   không ra - đúng nhóm hay mua COD. */
.perfume10ml-tiktok-page .variant-strip .variant-card .variant-subnote {
  color: #6e6866;
}

.perfume10ml-tiktok-page .variant-strip .variant-card .variant-badge,
.perfume10ml-tiktok-page .variant-strip .variant-card.is-selected::after {
  background: #d4144c;
}

/* --- A5b. Viền focus cho bàn phím (khách chạm tay không thấy gì đổi) -- */
.perfume10ml-tiktok-page .variant-strip .variant-card:focus-visible,
.perfume10ml-tiktok-page .variant-sheet .variant-close:focus-visible,
.perfume10ml-tiktok-page .variant-sheet .variant-action:focus-visible {
  outline: 3px solid #d4144c;
  outline-offset: 2px;
}

/* --- A5c. Nút × đạt chuẩn vùng chạm 44px — KHÔNG CẦN NỮA Ở BẢN v11 ---
   Rule này sinh ra để kéo nút × 38px của v9 lên 44px. v11 dùng lại nút × của v4
   (48x48 ở ~dòng 6932) nên đã vượt chuẩn 44px sẵn; giữ override này thì lại kéo nút
   về top:8px, chồng lên thẻ ảnh vừa trả lại. Tiêu đề cũng thôi chừa lề phải 58px. */

/* --- A2 (bản v9). Màn hình THẤP: thu ảnh để 5 phân loại vẫn lọt 1 khung.
   Sau khi khách chọn, chân sheet phồng thêm ~58px (hiện dòng "Tổng ... mặt hàng")
   nên hàng thỏi lẻ bị đẩy khỏi tầm mắt đúng lúc khách đang so sánh.
   Chỉ áp cho máy THẤP - máy cao vẫn giữ ảnh to. */
@media (max-height: 660px) {
  .perfume10ml-tiktok-page .variant-strip > [data-variant-key="desire-muse"] img,
  .perfume10ml-tiktok-page .variant-strip > [data-variant-key="combo-full"] img {
    height: 80px;
  }

  .perfume10ml-tiktok-page .variant-strip > [data-variant-key="muse"] img,
  .perfume10ml-tiktok-page .variant-strip > [data-variant-key="grace"] img,
  .perfume10ml-tiktok-page .variant-strip > [data-variant-key="desire"] img {
    height: 64px;
  }

  .perfume10ml-tiktok-page .variant-strip .variant-card .variant-copy {
    gap: 1px;
    padding: 5px 6px 6px;
  }

  .perfume10ml-tiktok-page .variant-strip {
    gap: 7px;
  }

  .perfume10ml-tiktok-page .variant-sheet .variant-sheet-scroll {
    padding-bottom: 6px;
  }

  .perfume10ml-tiktok-page .variant-actions [data-variant-total-row] {
    padding-top: 2px;
    font-size: 12px;
  }
}


/* =====================================================================
   POPUP ĐẶT HÀNG (bước 2) — dọn để tối ưu chuyển đổi (29/08/2026)

   Màn này chỉ có MỘT việc: khách điền tên, SĐT, địa chỉ. Mọi pixel đứng trước ô
   nhập đầu tiên đều là ma sát. Đo bố cục cũ: hộp khuyến mại ~90px + thẻ sản phẩm
   ~110px + hàng số lượng ~50px = ~250px. Trên máy cao 553px, khách mở popup ra
   CHƯA NHÌN THẤY Ô NHẬP NÀO - phải cuộn mới bắt đầu làm được việc.

   Làm hoàn toàn bằng CSS, không xoá phần tử nào: mọi data-* của
   js/landing-desire.js vẫn nằm nguyên trong DOM (luật 3 CLAUDE.md), chỉ đổi
   thứ tự và ẩn phần thừa.
   ===================================================================== */

/* --- 1. Đảo thứ tự: SẢN PHẨM -> FORM -> TÓM TẮT -> KHUYẾN MẠI ---------
   Khuyến mại xuống sát nút bấm: vừa nhường chỗ cho ô nhập, vừa đặt lời nhắc
   "ưu đãi sắp hết" đúng lúc khách chuẩn bị bấm chứ không phải lúc mới mở. */
.perfume10ml-tiktok-page .order-popup .order-body {
  display: flex;
  flex-direction: column;
}

.perfume10ml-tiktok-page .order-popup .order-product { order: 1; }
.perfume10ml-tiktok-page .order-popup .order-form { order: 2; }
.perfume10ml-tiktok-page .order-popup .order-total-card { order: 3; }
.perfume10ml-tiktok-page .order-popup .order-promo { order: 4; }

/* --- 2. Thẻ sản phẩm gộp còn MỘT hàng ---------------------------------
   Cũ: ảnh 86px + 4 dòng chữ + hàng số lượng riêng = ~110px.
   Trong 4 dòng đó có 2 dòng nói y hệt nhau: tiêu đề "Obaria Bộ đôi Desire + Muse"
   và ngay dưới "Phân loại: Bộ đôi Desire + Muse". Ẩn dòng "Phân loại" (phần tử
   b[data-order-variant] vẫn còn trong DOM, js vẫn ghi vào bình thường),
   kéo nút số lượng lên cùng hàng. */
.perfume10ml-tiktok-page .order-popup .order-product {
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
}

.perfume10ml-tiktok-page .order-popup .order-product > img {
  width: 56px;
  height: 56px;
}

.perfume10ml-tiktok-page .order-popup .order-product-main > span {
  display: none;
}

.perfume10ml-tiktok-page .order-popup .order-product-main h3 {
  font-size: 14px;
  line-height: 1.25;
}

.perfume10ml-tiktok-page .order-popup .order-product-main > p {
  font-size: 11.5px;
}

.perfume10ml-tiktok-page .order-popup .order-product-main strong {
  font-size: 16px;
}

.perfume10ml-tiktok-page .order-popup .order-stepper {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
}

/* --- 3. Bảng tóm tắt: bỏ dòng trùng, GIỮ dòng "Miễn phí" ---------------
   Giá 369.000đ đang hiện 4 lần trong một màn: thẻ sản phẩm, "Giá trị đơn hàng",
   "Tổng thanh toán", và chân sheet. Ẩn "Giá trị đơn hàng" - phí ship bằng 0 nên
   dòng đó LUÔN bằng đúng "Tổng thanh toán", không bao giờ nói thêm được gì.

   ⚠ RULE NÀY TRƯỚC ĐÂY KHÔNG CHẠY (sửa 04/09/2026). Bản cũ viết
   `.perfume10ml-tiktok-page .order-popup .order-summary-main` = độ đặc hiệu 0-3-0,
   thua `.perfume10ml-tiktok-page .order-total-card > div:not(.order-summary-divider)`
   ở dòng ~3239 = 0-3-1 (dấu :not tính thêm một lớp). Nên suốt từ 29/08 dòng "Giá trị
   đơn hàng" vẫn hiện, đúng cái mà comment cũ tưởng đã ẩn. Thêm dấu `>` thành 0-4-0
   là thắng. Kiểm lại bằng cách liệt kê rule khớp phần tử trong trình duyệt, không
   đoán theo thứ tự dòng.

   ĐỔI Ý so với bản 29/08: KHÔNG ẩn "Phí vận chuyển: Miễn phí" nữa. Chữ "miễn phí"
   nằm trong bảng tính tiền có sức nặng khác hẳn nằm trên nút bấm - đó đúng là giây
   khách đang sợ bị tính thêm phí ship, và số 0 hút mắt không cân xứng với giá trị
   thật của nó. Trùng chữ ở chỗ này là trùng có lợi. */
.perfume10ml-tiktok-page .order-popup .order-total-card > .order-summary-main {
  display: none;
}

/* --- 4. Hộp khuyến mại gộp còn một dải ---------------------------------
   Cũ 3 dòng ~90px. Nội dung của nó (Freeship, COD kiểm hàng) đã được nút bấm và
   dòng cam kết dưới chân nhắc lại rồi - giữ lại phần KHÔNG trùng: mức giảm và
   đồng hồ đếm ngược. */
.perfume10ml-tiktok-page .order-popup .order-promo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  margin-top: 12px;
  padding: 8px 10px;
  font-size: 11.5px;
  line-height: 1.4;
}

.perfume10ml-tiktok-page .order-popup .order-promo b {
  font-size: 11.5px;
}

.perfume10ml-tiktok-page .order-popup .order-promo-timer {
  margin: 0;
}

/* --- 5. Ô nhập: cho form là thứ nổi nhất màn này ----------------------- */
.perfume10ml-tiktok-page .order-popup .order-form {
  margin-top: 4px;
}

.perfume10ml-tiktok-page .order-popup .order-field input,
.perfume10ml-tiktok-page .order-popup .order-field textarea {
  font-size: 16px;
}


/* --- Nút chính: chỉ MỘT icon, và chỉ khi nó thật sự là nút mua ---------
   Lỗi cũ: hai rule cùng vẽ icon giỏ hàng nên khi chưa chọn phân loại thì hiện ra HAI cái
   cạnh nhau -
     .variant-action::before                                  (luôn hiện)
     .variant-sheet--needs-selection .variant-action b::before (chỉ khi chưa chọn)
   Chọn xong phân loại thì cái thứ hai tự tắt, nên lỗi chỉ lộ ở màn đầu tiên - đúng lúc
   khách nhìn nhiều nhất.

   Cách chữa không chỉ là bỏ cái thừa, mà gắn icon với Ý NGHĨA của nút:
     chưa chọn -> nhãn "Chọn phân loại", đây chưa phải hành động mua -> KHÔNG icon
     đã chọn   -> nhãn "Đặt hàng", đây mới là hành động mua          -> MỘT icon giỏ hàng
   Nút lúc chưa chọn cũng đang được làm xám (bản vá A4), bỏ icon thì nó nhất quán: một nút
   đang chờ, không phải một nút mời bấm. */
.perfume10ml-tiktok-page .variant-sheet--needs-selection .variant-action::before,
.perfume10ml-tiktok-page .variant-sheet--needs-selection .variant-action b::before {
  content: none;
}

/* Ô chữ phụ trên nút đang để trống (dòng cam kết dưới chân đã nói COD/Freeship rồi).
   Trống mà vẫn là block thì ăn một khoảng trắng thừa giữa chữ và mép nút. */
.perfume10ml-tiktok-page .variant-action span:empty {
  display: none;
}


/* --- Ô ghi chú giao hàng (đóng/mở bằng <details>, không cần JS) --------
   Màu: cố ý KHÔNG dùng hồng chủ đạo. Nút "Đặt hàng ngay" là hồng rực, dòng bắt buộc
   dùng dấu * đỏ - thêm một chỗ hồng nữa cho ô KHÔNG bắt buộc là kéo mắt sai chỗ và
   khiến khách tưởng phải điền. Dùng xám-nâu trung tính cùng tông chữ phụ (#6e6866),
   chỉ chuyển sang hồng đậm khi khách đã mở ra - lúc đó nó mới thật sự là việc đang làm. */
.perfume10ml-tiktok-page .order-popup .order-note {
  margin-top: 2px;
}

.perfume10ml-tiktok-page .order-popup .order-note-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  border-radius: 8px;
  padding: 7px 2px;
  color: #6e6866;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  list-style: none;
  cursor: pointer;
  user-select: none;
}

/* Bỏ mũi tên mặc định của <summary> trên mọi trình duyệt */
.perfume10ml-tiktok-page .order-popup .order-note-toggle::-webkit-details-marker {
  display: none;
}

.perfume10ml-tiktok-page .order-popup .order-note-toggle::marker {
  content: "";
}

/* Dấu + tự đổi thành − khi mở, để khách biết bấm lại là đóng được */
.perfume10ml-tiktok-page .order-popup .order-note-toggle::before {
  content: "+";
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  border: 1px solid #d9d2d0;
  border-radius: 5px;
  color: #6e6866;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.perfume10ml-tiktok-page .order-popup .order-note[open] .order-note-toggle {
  color: #c4184a;
}

.perfume10ml-tiktok-page .order-popup .order-note[open] .order-note-toggle::before {
  content: "\2212";
  border-color: #f0c9d6;
  background: #fff6f9;
  color: #c4184a;
}

.perfume10ml-tiktok-page .order-popup .order-note-toggle:focus-visible {
  outline: 3px solid #d4144c;
  outline-offset: 2px;
}

.perfume10ml-tiktok-page .order-popup .order-note-field {
  margin-top: 2px;
}

/* Nhãn "(không bắt buộc)" phải nhạt hơn hẳn nhãn của 3 ô bắt buộc */
.perfume10ml-tiktok-page .order-popup .order-note-field .opt {
  color: #948d8b;
  font-size: 11px;
  font-style: normal;
  font-weight: 500;
}


/* =====================================================================
   FORM "ĐẶT HÀNG NHANH" CUỐI TRANG — khu chọn phân loại (29/08/2026)

   Cũ: 7 dòng thẳng đứng, mỗi dòng một hộp trắng chỉ có tên + giá. Khách phải đọc
   tuần tự cả 7 mới biết có gì, mà không thấy được món nào lợi hơn món nào - đúng
   cái bẫy chọn-quá-nhiều mà sheet đã chữa xong. Cao ~385px cho một việc lẽ ra
   liếc một cái là xong.

   Mới: cùng BỐ CỤC 3 TẦNG như sheet, cùng quy tắc màu. Khách đã chọn ở sheet rồi
   xuống đây thì thấy đúng thứ vừa thấy, không phải học lại lần hai.
   Trong một hàng các thẻ giống hệt nhau, chỉ khác mùi -> so một chiều duy nhất.

   Không thêm được ảnh: js/landing-desire.js chỉ dựng radio + <b>tên</b> + <small>giá</small>
   cho mỗi thẻ (renderDescOrderOptions), không có chỗ cho ảnh. */
.perfume10ml-tiktok-page .description-order-combos {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: min-content;
  gap: 8px;
}

.perfume10ml-tiktok-page .description-combo-card {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid #e3dedd;
  border-radius: 12px;
  background: #fff;
}

.perfume10ml-tiktok-page .description-combo-card > span {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 10px 7px;
  text-align: center;
}

.perfume10ml-tiktok-page .description-combo-card > span > b {
  color: #111;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.25;
}

.perfume10ml-tiktok-page .description-combo-card > span > small {
  color: #d0021b;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
}

/* Trạng thái đang chọn: giống hệt sheet để khách nhận ra ngay, không phải đoán */
.perfume10ml-tiktok-page .description-combo-card.is-selected {
  border: 2px solid var(--pink);
  background: #fff5f8;
  box-shadow: 0 0 0 3px rgba(255, 45, 104, .16);
}

.perfume10ml-tiktok-page .description-combo-card.is-selected::after {
  content: "\2713  ĐANG CHỌN";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 2;
  display: block;
  background: #d4144c;
  color: #fff;
  padding: 3px 0 4px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .06em;
  text-align: center;
}

.perfume10ml-tiktok-page .description-combo-card.is-selected > span {
  padding-top: 22px;
}

.perfume10ml-tiktok-page .description-combo-card:focus-within {
  outline: 3px solid #d4144c;
  outline-offset: 2px;
}

/* --- Xếp tầng cho bản v9 (5 phân loại), khớp đúng sheet của v9 ---------
   Hai bộ trên một hàng -> 3 thỏi lẻ hàng dưới. */
.perfume10ml-tiktok-page .description-order-combos > [data-variant-key="desire-muse"] { grid-column: span 3; order: 1; }
.perfume10ml-tiktok-page .description-order-combos > [data-variant-key="combo-full"]  { grid-column: span 3; order: 2; }

.perfume10ml-tiktok-page .description-order-combos > [data-variant-key="desire-muse"],
.perfume10ml-tiktok-page .description-order-combos > [data-variant-key="combo-full"] {
  border-color: #f2cdd9;
  background: linear-gradient(180deg, #fff 0%, #fff5f8 100%);
}

.perfume10ml-tiktok-page .description-order-combos > [data-variant-key="muse"]   { grid-column: span 2; order: 3; }
.perfume10ml-tiktok-page .description-order-combos > [data-variant-key="grace"]  { grid-column: span 2; order: 4; }
.perfume10ml-tiktok-page .description-order-combos > [data-variant-key="desire"] { grid-column: span 2; order: 5; }

/* =====================================================================
   v11 — Đầu sheet chọn phân loại lấy đúng dáng của v4 (04/09/2026)
   =====================================================================
   Sau khi thôi ẩn 3 khối đầu sheet (xem khối "1 + 2. ĐÃ BỎ Ở BẢN v11" phía trên),
   còn 2 chỗ nhìn vẫn khác v4 - đo bằng trình duyệt trên khung 390x780:

     v4:  tên sản phẩm 18px · tiêu đề "Chọn mùi..." 20px · không có nút phóng to trên ảnh
     v11: tên sản phẩm 15px · tiêu đề 15px           · có nút phóng to 28px góc ảnh

   Cỡ chữ 15px do khối @media (max-width: 480px) ~dòng 7551 ép xuống - khối đó là của
   dòng v5/v8/v9, v4 không có. Đặt lại đúng số của v4; cùng độ đặc hiệu nên phải nằm
   CUỐI FILE mới thắng.

   ĐÁNH ĐỔI: tiêu đề to hơn thì lưới thẻ tụt thêm ~10px. Đã tính vào phần "còn phải
   cuộn" ghi ở khối trên. */
.perfume10ml-tiktok-page .variant-sheet .sheet-product-title {
  font-size: 18px;
}

.perfume10ml-tiktok-page .variant-sheet .variant-picker h2 {
  font-size: 20px;
}

/* Nút ↗ phóng to trên ảnh đầu sheet: v4 ẩn, v11 theo v4.
   Ảnh VẪN bấm được để xem to (móc data-preview-zoom do js/landing-desire.js giữ) -
   chỉ bỏ cái huy hiệu đè lên góc ảnh, vì ảnh ở đây chỉ 112px mà huy hiệu 28px là
   chiếm 1/4 chiều ngang, che mất đúng chỗ in tên mùi trên bao bì. */
.perfume10ml-tiktok-page .variant-sheet .sheet-preview span {
  display: none;
}


/* =====================================================================
   v11 — Thẻ phân loại: bỏ giá ở 3 thỏi lẻ, một nhãn tiến cử duy nhất
   (04/09/2026)
   ===================================================================== */

/* --- 1. KHÔNG thẻ nào hiện giá; giá chỉ hiện ở đầu sheet khi bấm ------
   Đúng cách sàn TikTok làm: các ô phân loại chỉ có ảnh + tên, giá nằm ở đầu sheet
   và đổi theo phân loại đang chọn (thẻ ảnh + giá + %giảm + giá gạch), chân sheet
   thì hiện "Tổng ... · Tiết kiệm 18%".

   Đường đi tới quyết định này (ghi lại để đừng quay xe lần nữa):

   Bản đầu chỉ bỏ giá 3 thỏi lẻ, giữ giá 2 thẻ bộ - lập luận: hàng bộ bán được nhờ
   so sánh nên phải thấy giá. Sai ở hai chỗ, chỉ lộ ra khi nhìn ảnh chụp thật:

     a) Sheet khi đó hiện ĐÚNG HAI con số, và đều là hai con số ĐẮT NHẤT (718.000đ,
        859.000đ), trong khi 3 thỏi lẻ vừa mất giá vừa nằm dưới nếp gấp. Khách mới
        từ quảng cáo vào liếc phát đầu đọc ra "trang này bán từ 718k", còn cửa vào
        thật 319k thì không thấy đâu. Giấu đúng mức giá dễ vào nhất, phơi đúng mức
        giá dễ làm chùn tay.
     b) Chính cái "so sánh trong một cái liếc" cũng hỏng theo: "286.000đ/thỏi" chỉ
        có nghĩa khi đặt cạnh 349.000đ của một thỏi lẻ. Thỏi lẻ hết giá thì con số
        đó không so với cái gì cả.

   => Hoặc để giá cả 5 thẻ, hoặc bỏ cả 5. Nửa vời là dở nhất. Chọn bỏ cả 5.

   VẪN GIỮ chip "Tiết kiệm 390.000đ" trên 2 thẻ bộ - đây là chỗ duy nhất không bỏ:
   chip đó TỰ ĐỦ NGHĨA, không cần con số nào khác trên màn để đối chiếu ("mua bộ rẻ
   hơn mua rời từng ấy tiền"). Lý do tồn tại của hàng bộ nằm trọn trong nó.

   Đi kèm: bỏ luôn dòng đơn giá/thỏi của 2 thẻ bộ ("286.000đ/thỏi", "359.000đ/thỏi")
   vì lý do (b) ở trên - không còn thỏi lẻ để so thì đó là chữ thừa. Dòng
   .variant-subnote của 3 thỏi lẻ ("Mỗi ngày · 10ml") thì GIỮ: nó nói dịp dùng chứ
   không nói tiền, và giờ nó là thứ giúp khách chọn.

   KHÔNG bao giờ giấu giá hoàn toàn: bấm một thẻ là đầu sheet hiện đủ giá + giá gạch
   + %giảm ngay, băng đỏ đầu trang cũng ghi "Từ 286.333đ/thỏi". Hàng COD mà bắt khách
   mò giá thì mất khách.

   Chỉ ẩn bằng CSS: giá vẫn nằm nguyên trong window.OBARIA_PAGE.variants và
   js/landing-desire.js vẫn dựng thẻ y như cũ. Muốn giá hiện lại trên thẻ: bọc khối
   này trong dấu chú thích rồi tăng ?v=.

   CHUỖI CHỌN dài bất thường là có lý do: file này đã có
   `.perfume10ml-tiktok-page .variant-strip .variant-card:not(.variant-card-combo)
   .variant-note { display: block }` = độ đặc hiệu 0-5-0. Viết ngắn (0-4-0) thì THUA
   và không ẩn được - đã mắc đúng lỗi này một lần. Thêm `.variant-sheet` và
   `.variant-card[data-variant-key]` cho lên 0-6-0 để thắng chắc, không phụ thuộc
   rule nào đứng sau.

   CẬP NHẬT 04/09/2026 (lần 3): KHÔNG còn rule ẩn giá nào cả. Cả 6 thẻ đều đã đổi ô
   `note` trong window.OBARIA_PAGE.variants từ GIÁ sang CHỮ MÔ TẢ (đúng cách v4 làm),
   nên không có gì để ẩn nữa. Giá chỉ còn hiện ở đầu sheet khi khách bấm chọn và ở
   chân sheet. Rule cũ ẩn .variant-note của thẻ Bộ đôi đã xoá - để lại là nó ăn mất
   dòng "Trong trẻo + ngọt ấm". */

/* --- 2. Một nhãn tiến cử duy nhất — ĐỔI CHỦ 04/09/2026 ---------------
   Vẫn đúng luật cũ: trên màn chỉ được có MỘT nhãn tiến cử, hai cái là triệt nhau.
   Nhưng nhãn nay thuộc về THẺ BỘ 3, không phải thẻ Bộ đôi nữa - chủ dự án muốn bán
   Bộ 3 nhiều nhất, mà trước đó trang lại tự tay chỉ khách sang thẻ khác.
   Thẻ Bộ đôi thôi đeo nhãn: đã bỏ ô `badge` của nó trong OBARIA_PAGE.variants.
   (Biến $landingDuoBadge trong PHP nay không còn ai dùng - giữ lại phòng khi bật lại
   đợt "Ưu đãi 2/9"; muốn dùng thì gắn vào thẻ nào thì gắn, nhưng chỉ MỘT thẻ.) */


/* =====================================================================
   v11 — Mô tả thẻ phân loại lấy đúng kiểu v4 (04/09/2026)
   =====================================================================
   Chữ trên 4 thẻ (3 thỏi lẻ + Bộ 3) đổi trong window.OBARIA_PAGE.variants:

     Muse   | Hằng ngày | Thơm nhẹ, trong trẻo
     Grace  | Đi chơi   | Sang nhẹ, nữ tính
     Desire | Hẹn hò    | Ngọt ấm, cuốn hút
     Bộ 3   | Đủ 3 mood mỗi ngày + Đi làm · Đi chơi · Hẹn hò

   Ô `tag` nay là DỊP DÙNG (khách đang tìm gì), ô `note` là MÙI RA SAO. Đây là hai câu
   hỏi khác nhau nên đọc lướt vẫn tách được, khác bản cũ ghi chip "Trong trẻo" rồi dưới
   lại "Mỗi ngày · 10ml" - một nửa nói mùi, một nửa nói dung tích, không thành cặp.

   Không đụng thẻ Bộ đôi: chủ dự án đang cân nhắc riêng thẻ đó.

   KHÔNG trùng với bảng nhãn cứng orderVariantLabelFor trong js/landing-desire.js
   (grace = Sang trọng, desire = Quyến rũ, muse = Thanh lịch): bảng đó dùng TÍNH TỪ,
   chip mới dùng DỊP DÙNG - hai bộ từ khác hẳn nhau nên không có chuyện một chữ gắn
   cho hai mùi như lỗi đã mắc ở bản v10.

   Ô `note` đổi từ giá sang chữ KHÔNG ảnh hưởng tab Mô tả: thẻ đặt nhanh dưới đó đọc
   variant.salePrice chứ không đọc note (xem renderDescOrderOptions). Đã kiểm.

   --- 1. Chip dịp dùng: chữ HỒNG dưới tên, không còn viên xám trên tên ---------
   Bản v9 để tag thành viên chip xám nằm TRÊN tên (order: 1) cho khỏi tranh màu với
   giá. Nay thẻ không còn giá nên chỗ đó trống, mà v4 thì xếp: tên -> dịp dùng (hồng)
   -> mô tả mùi (xám). Đọc xuôi hơn: biết tên gì, rồi dùng khi nào, rồi mùi ra sao.
   Chỉ áp cho 3 thỏi lẻ - thẻ Bộ đôi giữ nguyên viên xám cho tới khi chủ dự án chốt. */
.perfume10ml-tiktok-page .variant-sheet .variant-strip > .variant-card[data-variant-key] .variant-tag {
  order: 3;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--pink);
  padding: 0;
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.15;
}

/* Mô tả mùi (ô note) xuống dưới chip dịp dùng, chữ xám như v4. */
.perfume10ml-tiktok-page .variant-sheet .variant-strip > .variant-card[data-variant-key] .variant-note {
  order: 4;
  color: #7a7a7a;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.18;
  white-space: normal;
}

/* =====================================================================
   v11 — 6 phân loại xếp 2 hàng × 3 thẻ (04/09/2026)
   =====================================================================
   Thêm phân loại thứ 6 (Bộ đôi Muse + Grace, key `grace-muse`) nên bố cục cũ
   "2 bộ nửa hàng + 3 thỏi lẻ" không còn đúng. Nay:

     hàng trên = 3 combo  (grace-muse, desire-muse, combo-full)
     hàng dưới = 3 thỏi lẻ (muse, grace, desire)

   Sáu ô BẰNG NHAU: trong một hàng khách chỉ phải so MỘT chiều (mùi nào), còn hai
   hàng khác nhau bằng nền chứ không bằng kích thước - mắt tự tách nhóm mà không cần
   chữ tiêu đề chen vào giữa (js/landing-desire.js đổ liền 6 thẻ vào một khung, không
   chèn được tiêu đề).

   Thứ tự hàng trên theo bậc giá tăng dần từ trái sang phải (568k → 718k → 859k) và
   thẻ được tiến cử ("Chọn nhiều nhất") nằm CHÍNH GIỮA - vị trí mắt dừng lâu nhất
   trong một hàng ba.

   Lưới vẫn 6 cột (khai ở khối "5 phân loại xếp 2 tầng" phía trên), mỗi thẻ span 2.
   Khối này đứng sau nên thắng mọi rule span/order cũ. */
.perfume10ml-tiktok-page .variant-sheet .variant-strip > .variant-card[data-variant-key] {
  grid-column: span 2;
}

.perfume10ml-tiktok-page .variant-sheet .variant-strip > .variant-card[data-variant-key="grace-muse"]  { order: 1; }
.perfume10ml-tiktok-page .variant-sheet .variant-strip > .variant-card[data-variant-key="combo-full"]  { order: 2; }
.perfume10ml-tiktok-page .variant-sheet .variant-strip > .variant-card[data-variant-key="desire-muse"] { order: 3; }
.perfume10ml-tiktok-page .variant-sheet .variant-strip > .variant-card[data-variant-key="muse"]        { order: 4; }
.perfume10ml-tiktok-page .variant-sheet .variant-strip > .variant-card[data-variant-key="grace"]       { order: 5; }
.perfume10ml-tiktok-page .variant-sheet .variant-strip > .variant-card[data-variant-key="desire"]      { order: 6; }

/* Nền ấm cho CẢ 3 thẻ combo (trước chỉ 2 thẻ) - đây là thứ tách hai hàng.
   Viền vẫn trung tính: màu hồng chỉ dành riêng cho thẻ ĐANG CHỌN (xem khối "LỖI 4"). */
.perfume10ml-tiktok-page .variant-sheet .variant-strip > .variant-card[data-variant-key="grace-muse"],
.perfume10ml-tiktok-page .variant-sheet .variant-strip > .variant-card[data-variant-key="desire-muse"],
.perfume10ml-tiktok-page .variant-sheet .variant-strip > .variant-card[data-variant-key="combo-full"] {
  border: 1px solid #e3dedd;
  background: linear-gradient(180deg, #fff 0%, #fff6f0 100%);
}

.perfume10ml-tiktok-page .variant-sheet .variant-strip > .variant-card[data-variant-key="grace-muse"] .variant-copy,
.perfume10ml-tiktok-page .variant-sheet .variant-strip > .variant-card[data-variant-key="desire-muse"] .variant-copy,
.perfume10ml-tiktok-page .variant-sheet .variant-strip > .variant-card[data-variant-key="combo-full"] .variant-copy {
  padding-bottom: 11px;
}

/* Ảnh: 6 thẻ cùng bề ngang thì cùng chiều cao ảnh, lưới mới đều.
   Rule cũ để combo 120px / thỏi lẻ 92px là tính cho thẻ combo rộng nửa hàng. */
.perfume10ml-tiktok-page .variant-sheet .variant-strip > .variant-card[data-variant-key] img {
  height: 96px;
  object-fit: cover;
  aspect-ratio: auto;
}

/* Máy thấp: thu ảnh cho 2 hàng vẫn lọt một khung (thay khối A2 của bản v9). */
@media (max-height: 660px) {
  .perfume10ml-tiktok-page .variant-sheet .variant-strip > .variant-card[data-variant-key] img {
    height: 76px;
  }
}

/* Máy hẹp: thu ảnh, và KHÔNG cho 3 thỏi lẻ giãn thành 2 thẻ/hàng như bản v9 nữa -
   6 thẻ mà hàng dưới 2 thẻ thì lưới lệch hẳn, hỏng đúng cái nhịp "hai hàng ba ô". */
@media (max-width: 380px) {
  .perfume10ml-tiktok-page .variant-sheet .variant-strip > .variant-card[data-variant-key] img {
    height: 84px;
  }
}

@media (max-width: 360px) {
  .perfume10ml-tiktok-page .variant-sheet .variant-strip > .variant-card[data-variant-key] {
    grid-column: span 2;
  }
}

/* --- Tab Mô tả: dải đặt nhanh cũng phải đủ 6 thẻ ---------------------
   Khối này KHÔNG phải sheet - là lưới thẻ trong tab Mô tả (.description-order-combos),
   do renderDescOrderOptions dựng. Bản v9 để 2 combo span 3 + 3 thỏi lẻ span 2; thêm
   thẻ thứ 6 mà không sửa thì thẻ mới rơi vào 1 cột, lưới vỡ. Cho cả 6 span 2 = 2 hàng
   ba ô, cùng nhịp với sheet. Chỗ này VẪN HIỆN GIÁ (đọc salePrice, không đọc note) -
   cố ý: đó là dải đặt nhanh, không phải bước chọn mùi. */
.perfume10ml-tiktok-page .description-order-combos > [data-variant-key="grace-muse"]  { grid-column: span 2; order: 1; }
.perfume10ml-tiktok-page .description-order-combos > [data-variant-key="desire-muse"] { grid-column: span 2; order: 2; }
.perfume10ml-tiktok-page .description-order-combos > [data-variant-key="combo-full"]  { grid-column: span 2; order: 3; }
.perfume10ml-tiktok-page .description-order-combos > [data-variant-key="muse"]        { grid-column: span 2; order: 4; }
.perfume10ml-tiktok-page .description-order-combos > [data-variant-key="grace"]       { grid-column: span 2; order: 5; }
.perfume10ml-tiktok-page .description-order-combos > [data-variant-key="desire"]      { grid-column: span 2; order: 6; }

.perfume10ml-tiktok-page .description-order-combos > [data-variant-key="grace-muse"] {
  border-color: #f2cdd9;
  background: linear-gradient(180deg, #fff 0%, #fff5f8 100%);
}

/* Tên thẻ nhỏ lại một nấc: 6 ô thì mỗi ô chữ chỉ còn ~93px, ở 13.5px thì
   "Muse + Grace" tràn 2 dòng (đo được 35px thay vì 18px). 12.5px vừa đúng 1 dòng.
   Ba thỏi lẻ tên ngắn nên không đổi gì, chỉ được lợi. */
.perfume10ml-tiktok-page .variant-sheet .variant-strip > .variant-card[data-variant-key] .variant-name {
  font-size: 12.5px;
}

/* Chip "Tiết kiệm ..." và nhãn tiến cử: thu gọn cho vừa ô 93px.
   Đo trước khi sửa: nhãn "Chọn nhiều nhất" tràn 2 dòng (36px) và chip tiết kiệm cao
   38px dù chữ chỉ 1 dòng - toàn phần đệm. Cả hàng combo bị kéo lên 264px trong khi
   hàng thỏi lẻ chỉ 182px, chênh 82px vô ích. */
.perfume10ml-tiktok-page .variant-sheet .variant-strip > .variant-card[data-variant-key] .variant-badge {
  padding: 2px 7px;
  font-size: 9.5px;
  line-height: 1.5;
  white-space: nowrap;
}

.perfume10ml-tiktok-page .variant-sheet .variant-strip > .variant-card[data-variant-key] .variant-saving {
  margin-top: 1px;
  padding: 3px 8px;
  font-size: 10.5px;
  line-height: 1.4;
  white-space: nowrap;
}

.perfume10ml-tiktok-page .variant-sheet .variant-strip > .variant-card[data-variant-key] img {
  height: 88px;
}

/* Nhãn tiến cử thành RUY BĂNG dán trên ảnh, không chiếm dòng trong phần chữ.
   Hai lý do, cả hai đo được:
     - Ô chữ chỉ 93px mà "★ Chọn nhiều nhất" cần ~120px: để trong luồng thì hoặc tràn
       sang thẻ bên cạnh (đã thấy), hoặc phải vỡ 2 dòng.
     - Nó chiếm một dòng riêng nên thẻ giữa bị đẩy tên xuống, ba cái tên trong cùng
       một hàng không thẳng nhau - đúng thứ mắt bắt ngay khi quét.
   Dán lên ảnh thì cả hai biến mất, mà nhãn còn nổi hơn vì nằm trên nền ảnh.
   Khi thẻ ĐANG CHỌN, dải "✓ ĐANG CHỌN" phủ lên trên - đúng ý: lúc đó trạng thái
   quan trọng hơn nhãn quảng cáo. */
.perfume10ml-tiktok-page .variant-sheet .variant-strip > .variant-card[data-variant-key] .variant-badge {
  position: absolute;
  left: 6px;
  top: 6px;
  z-index: 2;
  max-width: calc(100% - 12px);
  margin: 0;
  padding: 3px 8px;
  font-size: 9.5px;
  line-height: 1.35;
}

.perfume10ml-tiktok-page .variant-sheet .variant-strip > .variant-card[data-variant-key] {
  position: relative;
}

/* Bỏ ngôi sao ★ trước chữ trong ruy băng: nó chiếm ~20px trong khi ô chỉ rộng 99px,
   đủ để cắt cụt "Chọn nhiều nh...". Giữa CHỮ và NGÔI SAO thì chữ mới là thứ bán hàng. */
.perfume10ml-tiktok-page .variant-sheet .variant-strip > .variant-card[data-variant-key] .variant-badge::before {
  display: none;
}


/* =====================================================================
   v11 — Đẩy Bộ 3 lên thành lựa chọn chính (04/09/2026)
   =====================================================================
   Chủ dự án muốn bán Bộ 3 nhiều nhất. Ba đòn, không đòn nào cần thêm chữ hay
   thêm chiều cao:

   1. NHÃN "Chọn nhiều nhất" chuyển từ thẻ Bộ đôi sang thẻ Bộ 3 (làm ở PHP +
      khối "2. Một nhãn tiến cử duy nhất" phía trên).
   2. VỊ TRÍ: Bộ 3 vào GIỮA hàng trên. Trong một hàng ba, ô giữa là chỗ mắt dừng
      lâu nhất và ngón cái dễ chạm nhất; ô rìa phải - chỗ Bộ 3 nằm trước đó - là
      chỗ yếu nhất. Đổi `order`, không tốn pixel nào.
   3. SỨC NẶNG THỊ GIÁC (khối dưới đây).

   KHÔNG dùng viền hồng để làm nổi: màu hồng đã dành riêng cho thẻ ĐANG CHỌN
   (xem khối "LỖI 4"), mượn màu đó là khách hết phân biệt được chọn hay chưa chọn -
   đúng lỗi bản v9 từng mắc.

   Chip "Tiết kiệm ..." của Bộ 3 tô ĐẶC, hai thẻ bộ đôi giữ viền rỗng. Cùng một
   dữ kiện nhưng thứ tự mắt đọc đổi hẳn: trong ba con số tiết kiệm, con số của Bộ 3
   là con số lớn nhất VÀ là con số duy nhất có nền. */
.perfume10ml-tiktok-page .variant-sheet .variant-strip > .variant-card[data-variant-key="combo-full"] .variant-saving {
  border-color: transparent;
  background: linear-gradient(180deg, #ff5c86 0%, #e8134f 100%);
  color: #fff;
  font-weight: 700;
}

/* Nền thẻ Bộ 3 ấm hơn hai thẻ bộ đôi một nấc - đủ để tách ra khi quét mắt,
   chưa đủ để nhầm với trạng thái đang chọn. */
.perfume10ml-tiktok-page .variant-sheet .variant-strip > .variant-card[data-variant-key="combo-full"] {
  background: linear-gradient(180deg, #fffdf8 0%, #ffeee4 100%);
}

/* =====================================================================
   v11 — Chân sheet thôi NHẢY khi khách chọn phân loại (04/09/2026)
   =====================================================================
   Đo được: dòng "Tổng (... mặt hàng)" mang thuộc tính hidden, js/landing-desire.js
   gỡ hidden khi khách chọn -> chân sheet cao thêm ĐÚNG 58px (48px dòng + 10px lề)
   -> vùng cuộn tụt từ 664 xuống 606px. Lưới thẻ không đổi vị trí, nhưng cửa sổ nhìn
   co lại nên cả khối chữ như nhảy lên - đúng lúc khách vừa chạm vào thẻ, tức đúng lúc
   mắt đang bám vào thứ vừa bấm. Mất một nhịp ở đây là mất niềm tin vào cú chạm.

   Cách sửa: CHỪA CHỖ SẴN. Dòng tổng luôn chiếm đúng chiều cao của nó ngay từ đầu,
   JS gỡ hidden thì không có gì phải xê dịch nữa.

   Nhưng chừa chỗ trống trơn thì phí 58px vừa vất vả lấy lại, nên làm hai việc cùng lúc:
     1. Thu gọn dòng tổng (chữ 18/23/13px -> 14/19/12px) - còn ~34px thay vì 48px.
     2. Lúc chưa chọn thì ô đó KHÔNG để trống mà in một dòng mời: "Chọn phân loại để
        xem tổng tiền". Vừa hết nhảy, vừa nói cho khách biết bước tiếp theo là gì.

   KHÔNG đụng JS và không gỡ thuộc tính hidden: phần tử vẫn nguyên như cũ, chỉ đổi cách
   hiển thị lúc đang hidden. [hidden] ở dòng 45 có !important nên phải !important đè lại. */
.perfume10ml-tiktok-page .variant-sheet .variant-actions [data-variant-total-row] {
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: baseline;
  gap: 0 8px;
  min-height: 24px;
  margin-bottom: 6px;
}

/* Ba ô về CÙNG MỘT DÒNG. Bản gốc để ô "Tiết kiệm ..%" xuống dòng riêng nên dòng tổng
   cao gấp đôi mà không nói thêm gì - mà mỗi pixel ở chân sheet là một pixel chừa sẵn,
   nhân đôi vĩnh viễn. Một dòng: "Tổng (1 mặt hàng)  369.000đ  Tiết kiệm 18%" - đo ra
   282px trên khung 354px, thừa chỗ. */
.perfume10ml-tiktok-page .variant-sheet .variant-actions [data-variant-total-row] span {
  font-size: 13px;
}

.perfume10ml-tiktok-page .variant-sheet .variant-actions [data-variant-total-row] strong {
  grid-column: 2;
  font-size: 18px;
}

.perfume10ml-tiktok-page .variant-sheet .variant-actions [data-variant-total-row] em {
  grid-column: 3;
  font-size: 11.5px;
}

/* Trạng thái CHƯA CHỌN: vẫn chiếm chỗ, nhưng giấu mấy con số mặc định của PHP
   (lúc này chúng chưa đúng với lựa chọn nào cả) và thay bằng một dòng mời. */
.perfume10ml-tiktok-page .variant-sheet .variant-actions [data-variant-total-row][hidden] {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
}

.perfume10ml-tiktok-page .variant-sheet .variant-actions [data-variant-total-row][hidden] > * {
  display: none;
}

.perfume10ml-tiktok-page .variant-sheet .variant-actions [data-variant-total-row][hidden]::before {
  content: "Chọn phân loại để xem tổng tiền";
  color: #9a9490;
  font-size: 12.5px;
  font-weight: 500;
}

/* --- Câu thúc mua theo bộ, ngay dưới dòng "3 mùi cho 3 mood" ---------
   Nhỏ hơn tiêu đề, đậm hơn dòng mô tả: đủ để mắt bắt được khi quét xuống lưới thẻ,
   chưa đủ để tranh chỗ với tiêu đề. Không tô nền, không viền - thêm một hộp màu nữa
   vào đầu sheet là hộp nào cũng hết nổi. */
.perfume10ml-tiktok-page .variant-sheet .variant-picker .variant-nudge {
  margin-top: 3px;
  color: #b3123f;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
}

/* Bù lại chỗ vừa chừa cho dòng tổng: siết hai khoảng trắng ở đầu sheet.
   Chỉ cắt KHOẢNG TRẮNG, không đụng ảnh và không đụng chữ - hai thứ đang bán hàng.
   18px là số của v4, 10-12px vẫn đủ tách khối mà lấy lại 14px. */
.perfume10ml-tiktok-page .variant-sheet .sheet-sale-bar {
  margin-top: 12px;
}

.perfume10ml-tiktok-page .variant-sheet .variant-picker {
  margin-top: 10px;
}

/* =====================================================================
   v11 — Nút "Đặt hàng" nhích lên, NGANG BẰNG nút "Mua ngay" của trang
   (04/09/2026)
   =====================================================================
   Chủ dự án: nhích lên một chút thôi, và phải nằm ĐÚNG NGANG nút "Mua ngay" ở thanh
   dưới cùng của trang (thanh nằm sau lưng sheet). Đo được:

     .bottom-cta (thanh "Mua ngay")  padding-bottom: calc(10px + var(--safe-bottom))
                                     -> đáy nút cách mép màn 10px
     .variant-actions (chân sheet)   padding-bottom: calc(2px + var(--safe-bottom))
                                     -> đáy nút cách mép màn 2px   <-- thấp hơn 8px

   Nên chép ĐÚNG con số của .bottom-cta chứ không tự đặt số mới: hai nút chồng chỗ
   nhau khi mở/đóng sheet, lệch vài px là mắt bắt ra ngay lúc chuyển màn. Cùng một
   biểu thức thì mọi thiết bị đều khớp, khỏi phải đo lại.

   HAI LẦN TRƯỚC LÀM HỎNG, ghi lại để đừng lặp:
   1. Bọc rule trong @media (max-width: 640px) -> KHÔNG CHẠY. @media đo bề ngang CỬA
      SỔ TRÌNH DUYỆT, không đo bề ngang khung trang; trang này luôn hẹp (--shell-width
      = min(430px, 100vw)) nhưng mở trên máy tính thì cửa sổ vẫn ~1176px. Tôi lại đo
      bằng iframe rộng 390px - trong iframe media query đo theo iframe nên nó khớp,
      đo ra đúng số và tưởng đã xong. Rule cho khung điện thoại giả lập phải để KHÔNG
      ĐIỀU KIỆN, và phải kiểm ở CỬA SỔ RỘNG.
   2. Đẩy lên 72px -> nút trôi lơ lửng giữa khoảng trắng, xấu, và ăn mất 30px vùng
      cuộn của lưới thẻ. "Nhích lên" là 8px, không phải 70px. */
.perfume10ml-tiktok-page .variant-sheet .variant-actions {
  padding-bottom: calc(10px + var(--safe-bottom));
}

/* =====================================================================
   v11 — Màn ĐẶT HÀNG (bước 2) dựng theo bản mẫu chủ dự án gửi (04/09/2026)
   =====================================================================
   Bản mẫu: đầu "Thông tin đặt hàng" · thẻ sản phẩm có dòng "Phân loại: ..." và nút
   số lượng nằm HÀNG RIÊNG bên phải · một tiêu đề "Địa chỉ nhận hàng" có ghim · 3 ô
   nhập có nhãn nổi phía trên · bảng tiền gọn 3 dòng (Tạm tính / Phí vận chuyển /
   Tổng thanh toán) · chân chỉ còn nút đỏ.

   ⚠ KHÔNG bọc khối này trong @media: media query đo bề ngang CỬA SỔ, không đo bề
   ngang khung trang (trang luôn hẹp 430px nhưng cửa sổ máy tính vẫn ~1200px). Đã mắc
   lỗi đó một lần ở nút "Đặt hàng" - rule nằm im không chạy. */

/* --- 1. Thẻ sản phẩm: trả lại dòng "Phân loại" + nút số lượng xuống hàng riêng ---
   Bản v9 gộp một hàng và ẩn dòng "Phân loại" vì cho là trùng tiêu đề. Với bản mẫu
   này thì khác: tiêu đề là TÊN ĐƠN HÀNG ("Combo Obaria Muse + Grace + Desire"), còn
   "Phân loại" là thứ khách vừa tự tay chọn ở bước 1 - đọc lại đúng lựa chọn của mình
   ngay trước khi điền địa chỉ là một nhịp xác nhận, không phải chữ thừa. */
.perfume10ml-tiktok-page .order-popup .order-product {
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: start;
  gap: 10px 12px;
  padding-bottom: 14px;
}

.perfume10ml-tiktok-page .order-popup .order-product > img {
  width: 64px;
  height: 64px;
  grid-column: 1;
  grid-row: 1;
  border-radius: 8px;
}

.perfume10ml-tiktok-page .order-popup .order-product-main {
  grid-column: 2;
  grid-row: 1;
}

.perfume10ml-tiktok-page .order-popup .order-product-main > span {
  display: block;
  margin-top: 2px;
  color: #6e6866;
  font-size: 12px;
}

.perfume10ml-tiktok-page .order-popup .order-product-main > span b {
  color: var(--pink);
  font-weight: 700;
}

.perfume10ml-tiktok-page .order-popup .order-product-main strong {
  display: block;
  margin-top: 4px;
  font-size: 20px;
}

/* Nút số lượng: hàng riêng, dạt phải - đúng bản mẫu. Để cùng hàng với chữ thì nó
   chen vào giữa tên và giá, mà cả hai thứ đó mới là thứ khách đang đọc. */
.perfume10ml-tiktok-page .order-popup .order-stepper {
  grid-column: 1 / -1;
  grid-row: 2;
  justify-self: end;
}

/* --- 2. Tiêu đề "Địa chỉ nhận hàng" --------------------------------- */
.perfume10ml-tiktok-page .order-popup .order-form-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 4px 0 12px;
  color: #111;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.2;
}

.perfume10ml-tiktok-page .order-popup .order-form-head svg {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--pink);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- 3. Bảng tiền gọn còn 3 dòng như bản mẫu ------------------------
   Tạm tính · Phí vận chuyển · Tổng thanh toán.
   Hai dòng "Giá gốc" và "Giảm giá sản phẩm" ẩn đi cho khớp mẫu (phần tử vẫn nằm
   nguyên trong DOM, js/landing-desire.js vẫn ghi số vào bình thường).
   Muốn hiện lại dòng giảm giá - nó là chỗ duy nhất trong màn này nói ra khách được
   lợi bao nhiêu: bỏ 'order-summary-sub' khỏi nhóm dưới đây rồi tăng ?v=.
   Dấu > là bắt buộc: rule .order-total-card > div:not(.order-summary-divider) ở
   dòng ~3239 có độ đặc hiệu 0-3-1, viết thiếu > là thua nó và rule nằm im. */
.perfume10ml-tiktok-page .order-popup .order-total-card > .order-summary-main {
  display: flex;
}

.perfume10ml-tiktok-page .order-popup .order-total-card > .order-summary-sub {
  display: none;
}

/* --- 4. Chân màn: chỉ còn nút đỏ ------------------------------------
   Bỏ dòng "Tổng (n mặt hàng) ... Tiết kiệm %" ngay trên nút: con số tổng đã nằm
   ngay phía trên trong bảng tiền, in lại lần nữa cách đó 8px là thừa. */
.perfume10ml-tiktok-page .order-popup .order-footer-summary {
  display: none;
}

/* Dòng cam kết dưới nút - lấy đúng ý bản mẫu chủ dự án gửi.
   Đây là câu trả lời cho nỗi lo LỚN NHẤT của mặt hàng này: sợ người khác biết mình
   mua gì. Đặt ngay dưới nút, tức đúng giây khách đang lưỡng lự có bấm hay không -
   không phải nhét vào đâu đó giữa trang cho đủ chữ.
   In nghiêng, màu hồng: khác hẳn mọi dòng chữ khác trong màn nên mắt bắt được ngay,
   mà không tranh chỗ với nút. */
.perfume10ml-tiktok-page .order-popup .order-trust-note {
  display: block;
  margin: 10px 0 0;
  color: #d4144c;
  font-size: 12.5px;
  font-style: italic;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
}

/* --- 5. Nút "+ Thêm ghi chú đặt hàng" -------------------------------
   Mặc định ĐÓNG nên form không dài thêm dòng nào; khách nào cần mới mở.
   Dùng thẻ <details> của HTML nên chạy không cần JS - js/landing-desire.js không có
   móc cho nút này (móc data-order-note-toggle chỉ có trong js/landing-perfume10ml.js). */
.perfume10ml-tiktok-page .order-popup .order-note {
  margin-top: 2px;
}

.perfume10ml-tiktok-page .order-popup .order-note-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  cursor: pointer;
  list-style: none;
  color: #444;
  font-size: 13.5px;
  font-weight: 600;
}

.perfume10ml-tiktok-page .order-popup .order-note-toggle::-webkit-details-marker {
  display: none;
}

.perfume10ml-tiktok-page .order-popup .order-note-toggle::before {
  content: "+";
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid #e0d8d6;
  border-radius: 999px;
  background: #fff;
  color: var(--pink);
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
}

.perfume10ml-tiktok-page .order-popup .order-note[open] .order-note-toggle::before {
  content: "−";
}

.perfume10ml-tiktok-page .order-popup .order-note .order-note-field {
  margin-top: 10px;
}

/* --- 6. Bỏ vạch kẻ thừa trong bảng tiền -----------------------------
   Đang có HAI đường ngăn liền nhau: .order-summary-divider (một phần tử cao 1px) và
   border-top gạch đứt của chính dòng "Tổng thanh toán". Bản mẫu chỉ có một đường gạch
   đứt. Giữ cái gạch đứt (nó dính liền với dòng tổng nên không bao giờ lệch), bỏ phần
   tử kia - tiết kiệm luôn 14px chiều cao. */
.perfume10ml-tiktok-page .order-popup .order-total-card > .order-summary-divider {
  display: none;
}

/* --- 7. Bỏ hộp "Ưu đãi hôm nay" ở cuối màn --------------------------
   Bản mẫu không có hộp này. Bỏ đi được ba thứ cùng lúc:
     - khớp bản mẫu;
     - bớt ~40px, đủ để dòng "Tổng thanh toán" hiện trọn mà không phải cuộn;
     - gỡ luôn cái đồng hồ đếm ngược trong đó - nó reset lại 03:52:30 mỗi lần tải
       trang, khách quay lại lần hai là nhận ra ngay (xem mục "còn treo": đây là
       loại khan hiếm giả nên gỡ được chỗ nào tốt chỗ đó).
   Nội dung của nó không mất: "COD · Miễn phí vận chuyển" đã nằm trên chính nút bấm.
   Muốn hiện lại: bọc khối này trong dấu chú thích rồi tăng ?v=. */
.perfume10ml-tiktok-page .order-popup .order-promo {
  display: none;
}

/* --- 8. Nút số lượng: dựng lại cho gọn và cân ------------------------
   Lỗi cũ nhìn ra ngay khi phóng to: khung rộng 112px chia lưới `1fr 40px 1fr`
   (36|40|36) nhưng rule ~dòng 7939 lại ép MỌI nút trong popup thành 44×44 - hai nút
   to hơn ô chứa nó 8px, khung `overflow: hidden` cắt phăng phần thừa. Kết quả: dấu −
   lệch sang trái, dấu + dính sát mép phải, hai bên không đối xứng, và cả hai bị xén
   cụt theo chiều cao (nút 44px trong khung 38px).

   Dựng lại: ô vuông 40px hai đầu, số ở giữa, không còn ép kích thước từ chỗ khác.
   40px cũng vừa đủ chuẩn vùng chạm - nút số lượng nằm hàng riêng rồi nên rộng thêm
   vài px không lấy của ai cả.

   Bỏ luôn nền hồng nhạt của hai nút: trong màn này đã có quá nhiều mảng hồng (giá,
   phân loại, tổng thanh toán, nút đỏ). Nút số lượng là thao tác phụ, để trắng, chỉ
   dấu + và − mang màu hồng là đủ nhận ra bấm được. */
.perfume10ml-tiktok-page .order-popup .order-product .order-stepper {
  width: 124px;
  height: 40px;
  grid-template-columns: 40px minmax(0, 1fr) 40px;
  border: 1px solid #ead9de;
  border-radius: 10px;
  background: #fff;
}

.perfume10ml-tiktok-page .order-popup .order-product .order-stepper button {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: transparent;
  color: var(--pink);
  font-size: 21px;
  font-weight: 500;
  line-height: 1;
  padding: 0;
}

.perfume10ml-tiktok-page .order-popup .order-product .order-stepper button:active:not(:disabled) {
  background: #fff2f5;
}

.perfume10ml-tiktok-page .order-popup .order-product .order-stepper button:disabled {
  color: #cfc9c7;
}

.perfume10ml-tiktok-page .order-popup .order-product .order-stepper span {
  border-left: 1px solid #f2e6e9;
  border-right: 1px solid #f2e6e9;
  color: #111;
  font-size: 16px;
  font-weight: 600;
}

/* Dấu − và + vẽ bằng gạch thay vì dùng ký tự: hai ký tự "−" và "+" của font có độ
   dày và chiều dài khác hẳn nhau, đặt cạnh nhau trong một khung nhìn ra ngay cái
   lệch (dấu trừ mảnh và ngắn, dấu cộng to và đậm). Vẽ bằng hai thanh 13×2px thì hai
   dấu cân đúng bằng nhau ở mọi cỡ màn.
   Chữ trong nút bị ẩn (font-size: 0) nhưng nút vẫn có aria-label "Giảm số lượng" /
   "Tăng số lượng" nên trình đọc màn hình không mất gì. */
.perfume10ml-tiktok-page .order-popup .order-product .order-stepper button {
  position: relative;
  font-size: 0;
}

.perfume10ml-tiktok-page .order-popup .order-product .order-stepper button::before,
.perfume10ml-tiktok-page .order-popup .order-product .order-stepper [data-order-qty-plus]::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 1px;
  background: currentColor;
  transform: translate(-50%, -50%);
}

/* thanh NGANG (có ở cả hai nút) */
.perfume10ml-tiktok-page .order-popup .order-product .order-stepper button::before {
  width: 13px;
  height: 2px;
}

/* thanh DỌC (chỉ nút +) - hai thanh cùng dày 2px nên dấu cộng cân đúng bằng dấu trừ */
.perfume10ml-tiktok-page .order-popup .order-product .order-stepper [data-order-qty-plus]::after {
  width: 2px;
  height: 13px;
}

/* =====================================================================
   v11 — Tab ĐẶT HÀNG (ngoài trang): chọn phân loại thành DANH SÁCH DỌC
   có ô tích, theo bản mẫu chủ dự án gửi (04/09/2026)
   =====================================================================
   Trước: lưới 6 thẻ 3 cột + bảng bậc thang giá phía trên. Nay: một khung, mỗi phân
   loại một DÒNG có ô tích bên trái, tên và giá nằm trên cùng dòng - đọc từ trên xuống
   một mạch, không phải quét ngang rồi quét dọc.

   Vì sao hợp với chỗ này: đây là form đặt hàng NGOÀI trang, khách đã cuộn hết trang
   và đã biết mình muốn gì; việc còn lại chỉ là tích một dòng rồi bấm. Lưới thẻ có ảnh
   là để CHỌN (dành cho popup ở bước 1), danh sách dòng là để XÁC NHẬN.

   Làm hoàn toàn bằng CSS: js/landing-desire.js dựng sẵn mỗi thẻ là
   <label><input type="radio"><span><b>tên</b><small>giá</small></span></label> -
   không sửa được JS nên chỉ đổi cách bày. Ô tích vẽ bằng ::before của thẻ (input thật
   vẫn nằm đó, vẫn là radio nên vẫn chỉ chọn được MỘT dòng).

   ⚠ Không bọc @media (bài học nút "Đặt hàng"): media query đo bề ngang cửa sổ chứ
   không đo bề ngang khung trang. */

/* Bỏ bảng bậc thang giá ở khối này - bản mẫu không có, mà 6 dòng ngay dưới đã ghi đủ
   giá rồi. Muốn hiện lại: bọc rule này trong dấu chú thích rồi tăng ?v=. */
.perfume10ml-tiktok-page .description-order-pick .ob-ladder {
  display: none;
}

/* Khung danh sách: một cột, các dòng dính nhau, ngăn bằng vạch mảnh */
.perfume10ml-tiktok-page .description-order-pick .description-order-combos {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
  border: 1px solid #ead9de;
  border-radius: 12px;
  background: #fff;
}

.perfume10ml-tiktok-page .description-order-pick .description-order-combos > .description-combo-card {
  grid-column: 1 / -1;
  border: 0;
  border-top: 1px solid #f4eaec;
  border-radius: 0;
  overflow: visible;
}

.perfume10ml-tiktok-page .description-order-pick .description-order-combos > .description-combo-card:first-child {
  border-top: 0;
}

/* Nội dung một dòng: tên rồi tới giá, canh trái, chừa chỗ bên trái cho ô tích */
.perfume10ml-tiktok-page .description-order-pick .description-combo-card > span {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-start;
  gap: 4px 7px;
  padding: 13px 14px 13px 46px;
  text-align: left;
}

.perfume10ml-tiktok-page .description-order-pick .description-combo-card > span > b {
  font-size: 14px;
}

.perfume10ml-tiktok-page .description-order-pick .description-combo-card > span > small {
  color: var(--pink);
  font-size: 14px;
}

/* "freeship" ghép ngay sau giá: chữ tĩnh, không phải số nên không đụng luật cấm
   hardcode giá; mọi đơn của trang đều freeship nên câu này luôn đúng. */
.perfume10ml-tiktok-page .description-order-pick .description-combo-card > span > small::after {
  content: " freeship";
  color: #6e6866;
  font-size: 12.5px;
  font-weight: 500;
}

/* Ô tích vuông bên trái - vẽ bằng ::before, input radio thật vẫn nằm nguyên bên dưới
   nên vẫn chỉ chọn được MỘT dòng dù nhìn giống ô tích vuông trong bản mẫu. */
.perfume10ml-tiktok-page .description-order-pick .description-combo-card::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  border: 1.5px solid #cfc6c4;
  border-radius: 5px;
  background: #fff;
}

.perfume10ml-tiktok-page .description-order-pick .description-combo-card.is-selected::before {
  border-color: var(--pink);
  background: var(--pink);
}

/* Dấu tích trắng trong ô - thay hẳn dải "✓ ĐANG CHỌN" chạy ngang đỉnh thẻ của bố cục
   lưới cũ (dải đó chỉ hợp với thẻ vuông, đặt lên một dòng ngang thì che mất chữ). */
.perfume10ml-tiktok-page .description-order-pick .description-combo-card.is-selected::after {
  content: "✓";
  position: absolute;
  left: 14px;
  right: auto;
  top: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  display: grid;
  place-items: center;
  background: transparent;
  color: #fff;
  padding: 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
}

/* Dòng đang chọn: nền hồng nhạt, viền không đổi (viền nằm ở khung ngoài) */
.perfume10ml-tiktok-page .description-order-pick .description-combo-card.is-selected {
  border-width: 0;
  border-top: 1px solid #f4eaec;
  background: #fff5f8;
}

.perfume10ml-tiktok-page .description-order-pick .description-combo-card.is-selected:first-child {
  border-top: 0;
}

/* Dòng tiến cử: nền ấm sẵn + nhãn "Bán chạy" trước tên, đúng cách bản mẫu đánh dấu
   dòng combo. Chỉ MỘT dòng được đánh dấu - hai cái là triệt nhau. */
.perfume10ml-tiktok-page .description-order-pick .description-order-combos > [data-variant-key="combo-full"] {
  background: #fffaf6;
}



/* --- SỬA TIẾP sau khi soi bằng trình duyệt ---------------------------
   Ba lỗi, cùng một gốc: thứ vẽ nên "cái thẻ" KHÔNG phải phần tử .description-combo-card
   mà là cái <span> bên trong nó (span mang border 1px, bo góc 7px, nền trắng, và
   position: relative). Hậu quả:
     1. Bỏ viền ở .description-combo-card không ăn thua - mỗi dòng vẫn là một hộp bo góc.
     2. Ô tích vẽ bằng ::before của thẻ bị span ĐÈ LÊN: cả hai đều là phần tử được định
        vị, cùng z-index auto thì cái nào đứng sau trong DOM vẽ đè lên - span đứng sau.
        (Dấu ✓ vẽ bằng ::after thì vẫn thấy, vì ::after luôn vẽ sau mọi con.)
     3. span là display: GRID chứ không phải flex, nên mấy dòng flex-direction /
        align-items tôi viết lúc đầu không có tác dụng - đó là lý do dòng đang chọn vỡ
        thành "[Bán chạy] 859.000đ" rồi mới xuống dòng "Bộ 3 đủ mood".
   Sửa: trả span về một dòng flex trong suốt, và nâng z-index cho ô tích. */
.perfume10ml-tiktok-page .description-order-pick .description-combo-card > span {
  min-height: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-start;
  gap: 4px 7px;
  padding: 13px 14px 13px 46px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: left;
}

.perfume10ml-tiktok-page .description-order-pick .description-combo-card::before,
.perfume10ml-tiktok-page .description-order-pick .description-combo-card.is-selected::after {
  z-index: 2;
}

/* Nhãn "Bán chạy" chuyển ra CUỐI dòng thành một chip, thay vì ghép vào trước tên.
   Ghép trước tên thì nó nằm trong cùng một khối chữ với tên, khối đó vỡ dòng là nhãn
   và tên tách nhau ra hai dòng, giá lại chen vào giữa - đúng cái vừa thấy. */
.perfume10ml-tiktok-page .description-order-pick .description-order-combos > [data-variant-key="combo-full"] > span::after {
  content: "Bán chạy";
  order: 3;
  border-radius: 999px;
  background: var(--pink);
  color: #fff;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
}

/* Dòng cam kết dưới nút "Đặt hàng COD · Freeship" ở tab Đặt hàng: cùng một câu và cùng
   một kiểu với dòng dưới nút trong popup - hai chỗ chốt đơn thì phải nói cùng một giọng,
   khách gặp lại câu quen là thấy chắc chắn hơn. */
.perfume10ml-tiktok-page .description-order-form .order-trust-note {
  margin: 10px 0 0;
  color: #d4144c;
  font-size: 12.5px;
  font-style: italic;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
}

/* =====================================================================
   v11 — Tab Đặt hàng: mỗi phân loại viết thành MỘT CÂU, bỏ viền,
   xếp từ rẻ tới đắt (04/09/2026)
   =====================================================================
   Chủ dự án đưa mẫu cách viết của đối thủ:
     "1 chai dung dịch vệ sinh giá 269k freeship (giá gốc 389k, ưu đãi 30%)."
   Tức là mỗi dòng là một CÂU đọc liền mạch, không phải thẻ có tên và giá tách rời.

   Đổi span từ flex sang BLOCK và tên/giá thành inline: chữ chảy như văn xuôi, vỡ dòng
   ở giữa câu cũng tự nhiên. Để flex thì mỗi mẩu là một ô riêng, vỡ dòng là câu đứt
   khúc giữa tên và giá.

   ⚠ THIẾU "(giá gốc ..., ưu đãi ...%)" - KHÔNG làm được bên CSS.
   js/landing-desire.js dựng mỗi dòng chỉ với TÊN và GIÁ BÁN
   (renderDescOrderOptions: <b>variant.name</b><small>formatPrice(variant.salePrice)</small>),
   không in giá gốc lẫn phần trăm nên trong DOM không có số để bám vào. Chèn số bằng
   PHP thì phải qua khối <style> nội tuyến - CLAUDE.md cấm. Nhét vào ô `name` thì câu
   quảng cáo đó chui thẳng lên phiếu giao hàng.
   => Chủ dự án thêm hai chỗ vào landing-desire.js là có ngay (xem ghi chú). */

/* Bỏ hết viền: khung ngoài, vạch ngăn giữa các dòng, viền của từng dòng. */
.perfume10ml-tiktok-page .description-order-pick .description-order-combos {
  gap: 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.perfume10ml-tiktok-page .description-order-pick .description-order-combos > .description-combo-card,
.perfume10ml-tiktok-page .description-order-pick .description-order-combos > .description-combo-card.is-selected,
.perfume10ml-tiktok-page .description-order-pick .description-order-combos > .description-combo-card:first-child {
  border: 0;
  border-radius: 10px;
  background: transparent;
}

/* Dòng đang chọn: chỉ nền hồng nhạt, không viền - đúng cách bản mẫu đánh dấu. */
.perfume10ml-tiktok-page .description-order-pick .description-order-combos > .description-combo-card.is-selected {
  background: #fff1f5;
}

/* Câu văn: chữ chảy inline, cỡ và màu đều nhau như bản mẫu - không tô đậm, không tô
   màu giá. Bản mẫu của đối thủ cả dòng một kiểu chữ, chỉ nhãn "Combo bán chạy" là nổi;
   để giá màu hồng đậm thì mắt nhảy vào giá trước, mất mạch đọc của câu. */
.perfume10ml-tiktok-page .description-order-pick .description-combo-card > span {
  display: block;
  gap: 0;
  padding: 9px 12px 9px 42px;
  line-height: 1.45;
}

.perfume10ml-tiktok-page .description-order-pick .description-combo-card > span > b,
.perfume10ml-tiktok-page .description-order-pick .description-combo-card > span > small {
  display: inline;
  color: #222;
  font-size: 13px;
  font-weight: 500;
  white-space: normal;
}

.perfume10ml-tiktok-page .description-order-pick .description-combo-card > span > small::before {
  content: " giá ";
}

/* Đuôi câu: " freeship (giá gốc ..., ưu đãi ...%)."
   Phần trong ngoặc lấy từ BIẾN CSS do PHP đặt trên thẻ bọc .description-order-combos
   (xem $obDescGiaGoc trong landing-templates/v11.php). Biến CSS thừa hưởng xuống nên
   mỗi dòng đọc đúng biến của mình; phân loại nào không có giá gạch cao hơn giá bán thì
   biến rỗng và câu dừng ở "freeship". */
.perfume10ml-tiktok-page .description-order-pick .description-combo-card > span > small::after {
  content: " freeship " var(--ob-goc, "");
  color: #222;
  font-size: 13px;
  font-weight: 500;
}

/* Mỗi dòng tự chọn biến của phân loại mình. Phải làm qua một biến trung gian --ob-goc vì
   CSS không ghép được tên biến từ data-variant-key. */
.perfume10ml-tiktok-page .description-order-pick .description-order-combos > [data-variant-key="muse"]        { --ob-goc: var(--ob-goc-muse, ""); }
.perfume10ml-tiktok-page .description-order-pick .description-order-combos > [data-variant-key="grace"]       { --ob-goc: var(--ob-goc-grace, ""); }
.perfume10ml-tiktok-page .description-order-pick .description-order-combos > [data-variant-key="desire"]      { --ob-goc: var(--ob-goc-desire, ""); }
.perfume10ml-tiktok-page .description-order-pick .description-order-combos > [data-variant-key="grace-muse"]  { --ob-goc: var(--ob-goc-grace-muse, ""); }
.perfume10ml-tiktok-page .description-order-pick .description-order-combos > [data-variant-key="desire-muse"] { --ob-goc: var(--ob-goc-desire-muse, ""); }
.perfume10ml-tiktok-page .description-order-pick .description-order-combos > [data-variant-key="combo-full"]  { --ob-goc: var(--ob-goc-combo-full, ""); }

/* Ba thỏi lẻ: thêm "Mua lẻ 1 thỏi" trước tên cho câu đủ chủ ngữ, đúng lối viết của
   bản mẫu ("Mua lẻ 1 nước hoa cô bé giá 369k..."). Hai bộ đôi và Bộ 3 thì tên đã tự
   nói ra số lượng rồi nên không thêm gì. */
.perfume10ml-tiktok-page .description-order-pick .description-order-combos > [data-variant-key="muse"] > span > b::before,
.perfume10ml-tiktok-page .description-order-pick .description-order-combos > [data-variant-key="grace"] > span > b::before,
.perfume10ml-tiktok-page .description-order-pick .description-order-combos > [data-variant-key="desire"] > span > b::before {
  content: "Mua lẻ 1 thỏi ";
}

/* Nhãn bán chạy về ĐẦU câu, trong ngoặc vuông như bản mẫu. */
.perfume10ml-tiktok-page .description-order-pick .description-order-combos > [data-variant-key="combo-full"] > span::after {
  content: none;
}

/* Nhãn "[Combo bán chạy]" ĐÃ BỎ (04/09/2026, chủ dự án yêu cầu). Thay vào đó dòng Bộ 3
   nói bằng CON SỐ - "chỉ 286k/thỏi" in trong ngoặc, rẻ hơn cả mua một thỏi lẻ rẻ nhất
   (319.000đ). Một con số kiểm chứng được luôn mạnh hơn một lời khen, và không ai bắt bẻ
   được như nhãn "bán chạy" (thứ mình không chứng minh nổi). */

/* Xếp từ RẺ tới ĐẮT: 319 → 349 → 369 → 568 → 718 → 859.
   Số order gõ tay vì CSS không đọc được giá; admin đổi giá tới mức đảo thứ tự thì phải
   sửa lại đoạn này - kiểm bằng cách đọc dãy giá trên màn xem có tăng dần không. */
.perfume10ml-tiktok-page .description-order-pick .description-order-combos > [data-variant-key="grace"]       { order: 1; }
.perfume10ml-tiktok-page .description-order-pick .description-order-combos > [data-variant-key="muse"]        { order: 2; }
.perfume10ml-tiktok-page .description-order-pick .description-order-combos > [data-variant-key="desire"]      { order: 3; }
.perfume10ml-tiktok-page .description-order-pick .description-order-combos > [data-variant-key="grace-muse"]  { order: 4; }
.perfume10ml-tiktok-page .description-order-pick .description-order-combos > [data-variant-key="desire-muse"] { order: 5; }
.perfume10ml-tiktok-page .description-order-pick .description-order-combos > [data-variant-key="combo-full"]  { order: 6; }

/* --- Nút "+ Thêm ghi chú đặt hàng" ở tab Đặt hàng --------------------
   Dùng lại đúng kiểu của ô ghi chú trong popup (dấu + tròn, bấm đổi thành −) để hai
   chỗ đặt hàng nhìn ra là cùng một chức năng. Chỉ chép phần dáng, không chép móc JS -
   ô này mang móc riêng data-desc-order-note (xem chú thích trong template). */
.perfume10ml-tiktok-page .description-order-note {
  margin-top: 2px;
}

.perfume10ml-tiktok-page .description-order-note .order-note-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  cursor: pointer;
  list-style: none;
  color: #444;
  font-size: 13.5px;
  font-weight: 600;
}

.perfume10ml-tiktok-page .description-order-note .order-note-toggle::-webkit-details-marker {
  display: none;
}

.perfume10ml-tiktok-page .description-order-note .order-note-toggle::before {
  content: "+";
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid #e0d8d6;
  border-radius: 999px;
  background: #fff;
  color: var(--pink);
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
}

.perfume10ml-tiktok-page .description-order-note[open] .order-note-toggle::before {
  content: "−";
}

.perfume10ml-tiktok-page .description-order-note .description-order-field {
  margin-top: 10px;
}

.perfume10ml-tiktok-page .description-order-note .opt {
  color: #8a8a8a;
  font-style: normal;
  font-weight: 500;
}

/* =====================================================================
   v11 — Nút "+ ghi chú" trầm xuống, kéo danh sách phân loại lại gần
   (04/09/2026)
   =====================================================================
   Nút ghi chú là lối rẽ PHỤ: chỉ một phần nhỏ khách cần tới, còn lại chỉ nên "thấy
   thoáng qua rồi bỏ đó". Trước đó nó mang dấu + hồng trong vòng tròn viền đậm, cùng
   tông với nút đặt hàng - hút mắt ngang một nút chính, mà bấm vào lại chẳng dẫn tới
   đâu trong luồng mua.
   Nay: vòng tròn nhạt hơn, dấu + xám thay vì hồng, chữ nhỏ và xám. Vẫn đủ rõ để ai
   cần thì thấy, không còn tranh chỗ với nút bấm thật.
   Áp cho CẢ HAI chỗ (popup và tab Đặt hàng) - cùng một chức năng thì phải cùng một
   dáng, lệch nhau là khách tưởng hai thứ khác nhau. */
.perfume10ml-tiktok-page .order-popup .order-note-toggle,
.perfume10ml-tiktok-page .description-order-note .order-note-toggle {
  color: #7a7472;
  font-size: 12.5px;
  font-weight: 500;
}

.perfume10ml-tiktok-page .order-popup .order-note-toggle::before,
.perfume10ml-tiktok-page .description-order-note .order-note-toggle::before {
  width: 18px;
  height: 18px;
  border: 1px solid #e6e0de;
  background: #faf7f6;
  color: #9a9490;
  font-size: 14px;
  font-weight: 600;
}

/* Ô ghi chú mở ra thì chữ "Ghi chú (không bắt buộc)" cũng nhỏ lại cho hợp */
.perfume10ml-tiktok-page .description-order-note .description-order-field > span {
  font-size: 12.5px;
}

/* --- Kéo danh sách phân loại lại gần dòng ghi chú --------------------
   Đo trước: từ đáy nút ghi chú tới CHỮ của dòng đầu tiên là 42px - ba lớp khoảng
   trắng cộng dồn (khe giữa hai khối của form 24px + đệm trên của khung danh sách 9px
   + đệm trên của dòng 9px). Ba thứ đều nhỏ, cộng lại mới thành cái hố.
   Kéo về ~20px: đủ tách hai khối, không còn đứt mạch đọc. */
.perfume10ml-tiktok-page .description-order-form .description-order-pick {
  margin-top: -14px;
}

.perfume10ml-tiktok-page .description-order-pick .description-order-combos {
  padding-top: 2px;
}

/* =====================================================================
   v11 — Icon cho 2 dòng Desire + nhịp gây chú ý nhẹ cho Bộ 3 (04/09/2026)
   ===================================================================== */

/* Icon trước hai dòng có Desire. Đặt bằng CSS content nên không đụng JS.
   Chỉ hai dòng có icon, không phải cả sáu: icon mọc ở mọi dòng thì thành hoa văn nền,
   không dòng nào nổi. Có ở hai dòng thì mắt bắt được ngay chúng khác. */
.perfume10ml-tiktok-page .description-order-pick .description-order-combos > [data-variant-key="desire"] > span > b::before {
  content: "🌹 Mua lẻ 1 thỏi ";
}

.perfume10ml-tiktok-page .description-order-pick .description-order-combos > [data-variant-key="desire-muse"] > span > b::before {
  content: "✨ ";
}

/* --- Nhịp gây chú ý cho dòng Bộ 3 ------------------------------------
   Yêu cầu: "nhỏ" và "thi thoảng". Nên làm một vòng 7 GIÂY mà 88% thời gian đứng yên,
   chỉ loé một quầng hồng rất nhạt chưa tới một giây rồi tắt. Nhấp nháy liên tục thì
   sau ba nhịp là mắt học cách bỏ qua (mù biển quảng cáo), mà còn làm trang rẻ tiền.

   Dùng box-shadow chứ không dùng nền hay kích thước: hai thứ kia đổi là chữ xê dịch,
   khách đang đọc dòng khác cũng bị giật theo.

   Tắt nhịp khi dòng ĐANG ĐƯỢC CHỌN - lúc đó việc của nó xong rồi, còn nháy nữa là
   phiền. Cũng tắt cho máy đang bật chế độ giảm chuyển động (người say chuyển động,
   tiền đình kém). */
@keyframes obNhipBo3 {
  0%, 86%, 100% { box-shadow: 0 0 0 0 rgba(255, 47, 95, 0); }
  91%           { box-shadow: 0 0 0 5px rgba(255, 47, 95, .16); }
  96%           { box-shadow: 0 0 0 2px rgba(255, 47, 95, .07); }
}

.perfume10ml-tiktok-page .description-order-pick .description-order-combos > [data-variant-key="combo-full"] {
  border-radius: 10px;
  animation: obNhipBo3 7s ease-in-out infinite;
}

.perfume10ml-tiktok-page .description-order-pick .description-order-combos > [data-variant-key="combo-full"].is-selected {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .perfume10ml-tiktok-page .description-order-pick .description-order-combos > [data-variant-key="combo-full"] {
    animation: none;
  }
}

/* --- Trạng thái ĐANG CHỌN nhẹ đi (04/09/2026) ------------------------
   Đo trạng thái cũ: nền hồng #fff1f5 + một vòng sáng dày 3px quanh cả dòng
   (box-shadow rgba(255,45,104,.16) 0 0 0 3px). Hai thứ chồng nhau nên dòng đang chọn
   biến thành một cái hộp nặng, nhìn thô hơn hẳn năm dòng còn lại - trong khi việc nó
   cần làm chỉ là "cho biết tôi đang được chọn".

   Bỏ hẳn vòng sáng, làm nhạt nền. Tín hiệu chính để lại cho Ô TÍCH: ô vuông chuyển
   sang hồng đặc có dấu ✓ - đó vốn là chỗ mắt nhìn khi hỏi "mình đã chọn chưa", và nó
   đủ rõ mà không phải tô nguyên một dải màu.

   Cũng gỡ luôn viền focus 3px của :focus-within: chạm tay vào là nó bật lên, khách
   tưởng có lỗi. Người dùng bàn phím vẫn được viền, nhưng qua :focus-visible - trình
   duyệt chỉ bật khi thật sự đang dùng bàn phím. */
.perfume10ml-tiktok-page .description-order-pick .description-order-combos > .description-combo-card.is-selected {
  box-shadow: none;
  background: #fff7fa;
}

.perfume10ml-tiktok-page .description-order-pick .description-combo-card:focus-within {
  outline: none;
}

.perfume10ml-tiktok-page .description-order-pick .description-combo-card:has(input:focus-visible) {
  outline: 2px solid #d4144c;
  outline-offset: 2px;
}

/* Vòng hồng mảnh còn sót lại nằm ở CHÍNH CÁI SPAN, không phải ở thẻ: rule
   `.description-combo-card.is-selected > span` đặt một box-shadow INSET 1px hồng
   (và một nền hồng thứ hai chồng lên nền của thẻ). Rule của tôi cho `> span` cùng độ
   đặc hiệu nên không chắc thắng - phải thêm `.is-selected` để lên 0-4-1.
   Bài học lặp lại lần thứ ba ở khối này: cái nhìn ra "viền" trên màn hầu như luôn nằm
   ở span con, không nằm ở phần tử mình đang nhắm. */
.perfume10ml-tiktok-page .description-order-pick .description-combo-card.is-selected > span {
  box-shadow: none;
  background: transparent;
  border-color: transparent;
}

/* --- Hộp "Đặt hàng nhanh" kéo ra full bề ngang trang (04/09/2026) ----
   Trước: hộp có lề hai bên 15,6px + viền 1px + bo góc 8px, nên nằm thụt vào giữa
   trang như một tấm thẻ. Đo trên khung 375px: hộp chỉ rộng 344px.
   Nay bỏ lề và viền hai bên, bỏ bo góc -> hộp chạy hết bề ngang, thành một DẢI liền
   mạch. Giữ viền trên/dưới để vẫn tách bạch với phần trên và phần dưới nó.
   Đệm trong đổi sang var(--edge-pad) - đúng con số mà cả trang đang dùng cho lề hai
   bên, nên chữ trong hộp thẳng hàng với chữ ngoài hộp thay vì lệch 1,6px. */
.perfume10ml-tiktok-page .description-order-form {
  margin-left: 0;
  margin-right: 0;
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  padding-left: var(--edge-pad);
  padding-right: var(--edge-pad);
}

/* =====================================================================
   v11 — Căn lề và nhịp dọc cho khối "Đặt hàng nhanh" (04/09/2026)
   =====================================================================
   Đo trước: mọi khối trong form đều bắt đầu ở lề 16px - nhãn, ô nhập, nút ghi chú,
   "Số lượng", tổng tiền, nút đặt hàng - RIÊNG khung danh sách phân loại ở 8px, lệch
   8px so với tất cả. Ô tích lại còn thụt thêm 14px nữa nên chữ trong danh sách bắt
   đầu ở 50px, trong khi nhãn "Họ tên" ngay trên nó ở 16px.
   Mắt không đo được 8px, nhưng bắt được ngay là "có gì đó không thẳng" - đúng thứ làm
   một trang trông nghiệp dư mà không chỉ ra được vì sao.

   Nay: đưa khung danh sách về đúng 16px, Ô TÍCH thẳng hàng với mép trái của mọi ô nhập
   phía trên, chữ trong dòng lùi vào 30px. Cả form còn MỘT đường dọc duy nhất. */
.perfume10ml-tiktok-page .description-order-form .description-order-pick {
  margin-left: 0;
  margin-right: 0;
}

.perfume10ml-tiktok-page .description-order-pick .description-combo-card::before,
.perfume10ml-tiktok-page .description-order-pick .description-combo-card.is-selected::after {
  left: 0;
}

.perfume10ml-tiktok-page .description-order-pick .description-combo-card > span {
  padding-left: 30px;
  padding-right: 0;
}

/* --- Nhịp dọc: gom theo NHÓM VIỆC, không rải đều -------------------
   Trước: mọi khe đều 14px nên năm nhóm việc khác nhau (điền thông tin / chọn phân loại /
   số lượng + tiền / nút bấm) chảy thành một dải liền, khách phải tự cắt khúc.
   Nay: trong cùng một nhóm thì sát (10px), giữa hai nhóm thì rộng (18px). Cùng chừng ấy
   pixel nhưng mắt tự thấy bốn chặng, đi hết chặng nào biết chặng đó.

   ⚠ Mấy số margin dưới đây trông kỳ (có cả số âm) là vì form đã có sẵn khe 14px giữa
   các khối (và 24px ở chỗ giáp danh sách). Margin CỘNG THÊM vào khe đó chứ không thay
   nó, nên muốn ra 18px thì phải viết -6px. Đo lại sau mỗi lần sửa, đừng suy từ con số
   mình gõ. */
.perfume10ml-tiktok-page .description-order-form .description-order-pick {
  margin-top: -6px;
}

.perfume10ml-tiktok-page .description-order-form .description-order-qty {
  margin-top: 6px;
}

.perfume10ml-tiktok-page .description-order-form .description-order-summary {
  margin-top: -2px;
}

.perfume10ml-tiktok-page .description-order-form .description-order-submit {
  margin-top: 4px;
}

.perfume10ml-tiktok-page .description-order-form .order-trust-note {
  margin-top: -2px;
}

/* --- Đầu khối: đồng hồ là dòng to nhất --------------------------------
   "Ưu đãi kết thúc sau" đi nhỏ và xám ở trên, con số đi to và hồng ở dưới - mắt đọc
   nhãn trước rồi rơi vào con số, đúng thứ tự cần. */
.perfume10ml-tiktok-page .description-order-head > div:first-child > span {
  color: #8a8a8a;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: none;
}

.perfume10ml-tiktok-page .description-order-head > div:first-child > strong {
  display: block;
  margin-top: 2px;
  color: var(--pink);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.01em;
}

.perfume10ml-tiktok-page .description-order-head > div:first-child > strong i {
  font-style: normal;
}

/* =====================================================================
   v11 — Đầu khối Đặt hàng nhanh: đồng hồ TO, ở GIỮA (04/09/2026)
   =====================================================================
       GIẢM LÊN ĐẾN 31%      <- mức giảm lớn nhất, tính từ giá admin
       ƯU ĐÃI KẾT THÚC SAU   <- nhãn nhỏ
           03:52:16          <- đồng hồ, dòng to nhất khối

   Con số 31% in từ $landingMaxDiscount (lấy mức giảm cao nhất trong các phân loại của
   trang) nên admin đổi giá là tự đúng theo, không gõ tay.

   Bỏ chip "Phí ship 0đ" theo yêu cầu - chữ freeship không mất, mỗi dòng phân loại ngay
   dưới đều đã ghi và nút đặt hàng cũng ghi. */
.perfume10ml-tiktok-page .description-order-head {
  display: block;
  text-align: center;
}

.perfume10ml-tiktok-page .description-order-head .order-head-sale {
  display: block;
  color: #d4144c;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .01em;
  text-transform: uppercase;
}

.perfume10ml-tiktok-page .description-order-head > div:first-child > span {
  display: block;
  margin-top: 4px;
  color: #8a8a8a;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.perfume10ml-tiktok-page .description-order-head > div:first-child > strong {
  display: block;
  margin-top: 1px;
  color: var(--pink);
  font-size: 34px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.01em;
  /* Chữ số cùng bề ngang: không có dòng này thì mỗi giây đồng hồ lại co giãn một tí,
     nhìn giật liên tục ngay giữa khối đặt hàng. */
  font-variant-numeric: tabular-nums;
}

/* =====================================================================
   v11 — Đầu khối: dải hồng, chữ "GIẢM LÊN ĐẾN" TO và có nhịp thở
   (04/09/2026)
   =====================================================================
   Theo mẫu chủ dự án gửi: một DẢI nền hồng nhạt chạy hết bề ngang, chữ to đậm ở giữa,
   đồng hồ nằm trong khối hồng đặc chữ trắng.

   ⚠ KHÔNG làm được 3 ô riêng Giờ / Phút / Giây như ảnh mẫu: js/landing-desire.js ghi
   nguyên chuỗi "03:52:16" vào MỘT thẻ, CSS không cắt chuỗi ra ba mảnh được. Muốn đúng
   ảnh mẫu thì chủ dự án phải sửa JS để in ba thẻ riêng. Ở đây làm một khối hồng đặc
   chữ trắng - cùng ngôn ngữ thị giác, không cần đụng JS. */
.perfume10ml-tiktok-page .description-order-head {
  margin-left: calc(-1 * var(--edge-pad));
  margin-right: calc(-1 * var(--edge-pad));
  margin-bottom: 4px;
  border-bottom: 1px solid #ffdbe5;
  background: linear-gradient(180deg, #fff2f6 0%, #ffe6ee 100%);
  padding: 14px var(--edge-pad) 16px;
}

/* Dòng "GIẢM LÊN ĐẾN 31%": to nhất khối, và THỞ NHẸ.
   Nhịp 2,6 giây, phóng to đúng 4% rồi về - đủ để mắt liếc qua bắt được chuyển động,
   chưa tới mức giật. Phóng to nhiều hơn (hoặc nhanh hơn) thì sau vài nhịp mắt học cách
   bỏ qua, mà còn kéo cả dòng chữ nhoè đi ở màn hình mật độ thấp.
   transform: scale chứ không đổi font-size - đổi cỡ chữ là cả khối bên dưới nhảy theo
   mỗi nhịp, còn scale chỉ vẽ lại, không ai xê dịch. */
.perfume10ml-tiktok-page .description-order-head .order-head-sale {
  display: block;
  color: #d4144c;
  font-size: 25px;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -.01em;
  text-transform: uppercase;
  transform-origin: center;
  animation: obThoGiamGia 2.6s ease-in-out infinite;
}

@keyframes obThoGiamGia {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
  .perfume10ml-tiktok-page .description-order-head .order-head-sale {
    animation: none;
  }
}

.perfume10ml-tiktok-page .description-order-head > div:first-child > span {
  display: block;
  margin-top: 6px;
  color: #b3123f;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Đồng hồ: khối hồng đặc chữ trắng, thay cho 3 ô riêng của ảnh mẫu. */
.perfume10ml-tiktok-page .description-order-head > div:first-child > strong {
  display: inline-block;
  margin-top: 8px;
  border-radius: 10px;
  background: linear-gradient(180deg, #ff3b6b 0%, #e8134f 100%);
  color: #fff;
  padding: 6px 16px 7px;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 6px 14px rgba(232, 19, 79, .22);
}

/* =====================================================================
   v11 — Form đặt hàng nhanh: HAI THẺ TRẮNG trên nền hồng (04/09/2026)
   =====================================================================
   Trước: mọi thứ nằm thẳng trên nền hồng của khối, ô nhập và danh sách phân loại chỉ
   khác nhau bằng khoảng trắng - khách phải tự đoán đâu là "khai thông tin", đâu là
   "chọn hàng". Danh sách lại trong suốt nên sáu dòng chìm vào nền, tích rồi cũng khó
   thấy mình đang ở đâu.

   Nay tách làm HAI THẺ TRẮNG rõ rệt trên nền hồng:
     thẻ 1 = thông tin nhận hàng (3 ô + nút ghi chú)
     thẻ 2 = chọn phân loại (6 dòng, ngăn nhau bằng vạch mảnh)
   Nền hồng lùi xuống thành nền, hai việc phải làm nổi lên thành hai khối. Không cần
   thêm một chữ tiêu đề nào - hình khối tự nói.

   BỎ NHÃN trên đầu ô nhập ("Họ tên", "Số điện thoại", "Địa chỉ nhận hàng", "Ghi chú"):
   chữ trong ô đã nói đúng thứ cần nhập, nhãn ở trên chỉ lặp lại lần hai. Bỏ đi thẻ
   thông tin ngắn lại ~60px và mắt đi thẳng từ ô này xuống ô kia. */

/* --- Thẻ 1: thông tin nhận hàng --- */
.perfume10ml-tiktok-page .description-order-form .description-order-fields {
  border: 1px solid #f2e3e6;
  border-radius: 14px;
  background: #fff;
  padding: 14px;
  box-shadow: 0 1px 2px rgba(17, 17, 17, .03);
}

/* Bỏ nhãn phía trên ô nhập - giữ nguyên trong DOM cho trình đọc màn hình thì hơn,
   nhưng nhãn ở đây chỉ là <span> trang trí, không phải <label for>, nên ẩn là gọn.
   Ô nhập nào cũng đã có placeholder nói đúng việc của nó. */
.perfume10ml-tiktok-page .description-order-form .description-order-field > span {
  display: none;
}

/* Ô nhập: cao hơn, bo mềm hơn, chữ to hơn cho dễ gõ trên điện thoại. */
.perfume10ml-tiktok-page .description-order-form .description-order-field input {
  min-height: 46px;
  border: 1px solid #e6dcdd;
  border-radius: 10px;
  background: #fff;
  padding: 0 12px;
  font-size: 15px;
}

.perfume10ml-tiktok-page .description-order-form .description-order-field input:focus {
  border-color: var(--pink);
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 47, 95, .10);
}

/* --- Thẻ 2: chọn phân loại --- */
.perfume10ml-tiktok-page .description-order-pick .description-order-combos {
  gap: 0;
  border: 1px solid #f2e3e6;
  border-radius: 14px;
  background: #fff;
  padding: 2px 12px;
  box-shadow: 0 1px 2px rgba(17, 17, 17, .03);
}

/* Các dòng ngăn nhau bằng một vạch rất mảnh - đủ tách, không thành lưới. */
.perfume10ml-tiktok-page .description-order-pick .description-order-combos > .description-combo-card {
  border-top: 1px solid #f6eef0;
  border-radius: 8px;
}

/* CHỈ dòng đứng đầu MÀN HÌNH mới bỏ vạch, mà đó là "grace" (rẻ nhất) chứ KHÔNG phải
   :first-child. Thứ tự trong HTML là grace-muse, desire-muse, combo-full, muse, grace,
   desire; thứ tự trên màn do `order` xếp lại theo giá. Dùng :first-child là bỏ nhầm
   vạch của grace-muse - nó nằm giữa bảng, thành ra thiếu đúng một vạch ở giữa. */
.perfume10ml-tiktok-page .description-order-pick .description-order-combos > [data-variant-key="grace"] {
  border-top: 0;
}

.perfume10ml-tiktok-page .description-order-pick .description-combo-card > span {
  padding: 11px 4px 11px 30px;
}

/* Ô tích lùi theo đệm của thẻ */
.perfume10ml-tiktok-page .description-order-pick .description-combo-card::before,
.perfume10ml-tiktok-page .description-order-pick .description-combo-card.is-selected::after {
  left: 0;
}

/* Khoảng giữa hai thẻ: 18px - đủ rộng để đọc ra là hai việc khác nhau, chưa rộng tới
   mức đứt mạch. (Đo ra 14px khi margin = 0, nên cộng thêm 4px.) */
.perfume10ml-tiktok-page .description-order-form .description-order-pick {
  margin-top: 4px;
}

/* Vô hiệu ba rule cũ dùng :first-child để bỏ vạch ngăn.
   :first-child là dòng đầu trong HTML (grace-muse) chứ không phải dòng đầu TRÊN MÀN
   (grace) - thứ tự hiển thị do `order` xếp lại theo giá. Ba rule đó đang bỏ nhầm vạch
   của grace-muse, tức thiếu đúng một vạch ở giữa bảng, nhìn ra ngay là "sao chỗ này
   không có gạch".
   Trả vạch về cho mọi dòng, rồi chỉ bỏ ở dòng thật sự đứng đầu màn (grace). */
.perfume10ml-tiktok-page .description-order-pick .description-order-combos > .description-combo-card:first-child,
.perfume10ml-tiktok-page .description-order-pick .description-combo-card.is-selected:first-child {
  border-top: 1px solid #f6eef0;
}

.perfume10ml-tiktok-page .description-order-pick .description-order-combos > [data-variant-key="grace"] {
  border-top: 0;
}

/* --- Bỏ hàng "Số lượng" ở tab Đặt hàng (05/09/2026) ------------------
   Khách gần như luôn mua 1; hỏi số lượng ngay giữa luồng là thêm một quyết định thừa,
   mà ô đó lại nằm đúng giữa "chọn phân loại" và "tổng tiền" - chặn đúng nhịp đang trôi.
   Ai muốn mua nhiều hơn thì chọn thẳng Bộ đôi / Bộ 3, vốn là thứ trang đang muốn bán.

   ẨN bằng CSS, KHÔNG xoá khỏi HTML: ô nhập mang name="quantity" và móc
   data-desc-order-qty mà js/landing-desire.js đọc để tính tổng và gửi đơn. Xoá đi là
   vỡ. Ẩn thì giá trị vẫn là 1, đơn vẫn gửi đúng số lượng 1.
   Muốn hiện lại: bọc rule này trong dấu chú thích rồi tăng ?v=. */
.perfume10ml-tiktok-page .description-order-form .description-order-qty {
  display: none;
}

/* Khoảng cách sau khi bỏ: thẻ phân loại -> Tổng thanh toán lấy đúng nhịp "sang nhóm
   mới" 18px, không để hụt vì hàng vừa biến mất. */
.perfume10ml-tiktok-page .description-order-form .description-order-summary {
  margin-top: 4px;
}

/* =====================================================================
   v11 — Đồng hồ: đổi màu và HẸN GIỜ hiện (05/09/2026)
   =====================================================================
   MÀU: trước là hộp hồng đỏ trên dải hồng nhạt - ba sắc cùng một họ hồng nên hộp đồng
   hồ không bật ra khỏi dải, mà lại đang tranh màu với nút "Mua ngay" đỏ ở chân trang.
   Đổi sang MẬN ĐẬM (#431528 - đúng biến --plum trang đang dùng) chữ trắng:
     dải hồng nhạt  ->  chữ đỏ "GIẢM LÊN ĐẾN 31%"  ->  hộp mận đậm
   Ba bậc rõ ràng, đồng hồ nổi nhất trong dải mà vẫn nhường màu đỏ cho nút bấm - thứ
   duy nhất trên trang được phép đỏ chói. Mận cũng là màu thương hiệu, hợp "sang trọng,
   thanh lịch" hơn là thêm một mảng đỏ nữa.

   HẸN GIỜ: chủ dự án muốn vào trang KHÔNG thấy đồng hồ ngay, một lúc sau mới hiện, và
   hiện trong thời gian ngắn rồi thôi; tải lại trang thì lặp lại.
   Làm bằng animation có mốc thời gian: 0-30 giây ẩn, sau đó hiện 3 phút, rồi ẩn hẳn.
   Tải lại trang là animation chạy lại từ đầu - đúng ý "load lại mới ra đếm ngược".

   ⚠ Con SỐ trên đồng hồ vẫn là của js/landing-desire.js (bắt đầu từ 03:52:30), CSS
   không đổi được. Muốn số ngắn thật (ví dụ 10:00) thì chủ dự án sửa flashSaleDurationSeconds
   trong landing-desire.js - một dòng.
   ⚠ Máy tắt hiệu ứng chuyển động thì animation không chạy -> đồng hồ hiện ngay từ đầu
   như cũ. Đó là trạng thái mặc định an toàn, không phải lỗi. */
.perfume10ml-tiktok-page .description-order-head > div:first-child > strong {
  background: linear-gradient(180deg, #5a1a30 0%, #431528 100%);
  box-shadow: 0 6px 14px rgba(67, 21, 40, .22);
}

/* CẬP NHẬT 05/09/2026: mốc cũ (ẩn 30 giây, hiện 3 phút) quá ngắn - chủ dự án mở trang
   xem thì đồng hồ đã tắt, tưởng hỏng. Mốc mới:
     0 → 15 giây   : ẩn (vào trang chưa thấy đồng hồ, đúng ý)
     15 giây → 30 phút 15 : HIỆN
     sau đó        : ẩn hẳn, tải lại trang mới có lại
   Tổng vòng 1815 giây; 15/1815 = 0,83%. */
@keyframes obHienDongHo {
  0%, 0.82%   { opacity: 0; max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  0.83%       { opacity: 0; max-height: 90px; }
  1.2%        { opacity: 1; max-height: 90px; }
  99.7%       { opacity: 1; max-height: 90px; }
  99.8%, 100% { opacity: 0; max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
}

/* CẬP NHẬT 05/09/2026 (lần cuối): BỎ hẳn việc hẹn giờ ẩn/hiện - chủ dự án muốn đồng hồ
   hiện ngay từ khi vào trang.
   Đọc lại yêu cầu gốc thì "cho thời gian là 30p đếm ngược" nói về ĐỘ DÀI ĐẾM NGƯỢC
   (30:00 → 00:00), không phải về việc giấu khối đi 15 giây rồi hiện 30 phút - tôi hiểu
   rộng quá tay. Độ dài đếm ngược nằm ở JS, xem ghi chú.

   Muốn bật lại kiểu ẩn/hiện theo giờ: bỏ dấu chú thích khối dưới đây rồi tăng ?v=.
   (keyframes obHienDongHo vẫn còn nguyên phía trên.)

.perfume10ml-tiktok-page .description-order-head > div:first-child > span,
.perfume10ml-tiktok-page .description-order-head > div:first-child > strong {
  overflow: hidden;
  animation: obHienDongHo 1815s linear forwards;
}
*/

/* --- Sửa: hộp đồng hồ chuyển xuống thẻ <i> bên trong (05/09/2026) ----
   Lỗi vừa gặp: keyframes chỉ khai `padding: 0` ở hai mốc ẩn, không khai ở mốc hiện,
   nên CSS nội suy padding từ 0 (mốc ẩn đầu) sang 0 (mốc ẩn cuối) - tức padding bằng 0
   SUỐT cả lúc đang hiện. Hộp đồng hồ mất đệm, dẹp lép còn 33px thay vì 46px.
   Bài học: animation nội suy giữa các mốc CÓ KHAI thuộc tính đó; thuộc tính nào chỉ
   khai ở một số mốc thì các mốc còn lại KHÔNG tự lấy giá trị gốc trong CSS.

   Sửa tận gốc thay vì khai thêm mốc: chuyển toàn bộ phần "hộp" (nền, đệm, bo góc, cỡ
   chữ) xuống thẻ <i> bên trong. Thẻ <strong> bên ngoài chỉ còn là khung để thu/giãn,
   không có đệm nên co lại là biến mất sạch, không cần đụng padding trong keyframes.
   (Thẻ <i> là thẻ mang data-flash-countdown do JS ghi số vào - không đổi cấu trúc.) */
.perfume10ml-tiktok-page .description-order-head > div:first-child > strong {
  display: block;
  border-radius: 0;
  background: none;
  padding: 0;
  box-shadow: none;
  line-height: 1;
}

.perfume10ml-tiktok-page .description-order-head > div:first-child > strong i {
  display: inline-block;
  border-radius: 10px;
  background: linear-gradient(180deg, #5a1a30 0%, #431528 100%);
  color: #fff;
  padding: 6px 16px 7px;
  font-size: 30px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 6px 14px rgba(67, 21, 40, .22);
}

/* =====================================================================
   v11 — Đồng hồ: đổi màu cho GẤP GÁP hơn (05/09/2026)
   =====================================================================
   Chủ dự án: màu đẹp hơn, trông gấp gáp và thôi thúc hơn.

   MÀU: mận #431528 -> đỏ thẫm #c2143f→#8a0c2c. Mận là màu "sang trọng, bình tĩnh" -
   đúng tinh thần thương hiệu nhưng nó KHÔNG giục ai cả; đỏ mới là màu của "sắp hết giờ".
   Vẫn giữ được luật cũ "chỉ nút bấm được đỏ CHÓI": nút Mua ngay là #ff2f5f rực, đồng hồ
   là đỏ THẪM ngả nâu - cùng họ đỏ nhưng tối hơn hẳn nên đứng cạnh nhau vẫn phân được
   thứ bậc, mắt không bị hai vệt đỏ ngang cơ giành nhau.
   Thêm vệt sáng mảnh ở mép trên (inset 0 1px 0) cho khối trông như viên men bóng chứ
   không phải mảng màu dẹt - đây là phần "đẹp hơn", tốn 1 dòng.

   GẤP GÁP: hai chuyển động NHỎ, cùng chu kỳ 1 GIÂY - đúng nhịp giây của đồng hồ nên đọc
   ra là "đang chạy", không phải "đang trang trí":
     1. cả khối đập nhẹ 1,8% ở đầu mỗi giây (như mạch đập)
     2. chấm hổ phách bên trái loé rồi lan vòng sáng ra ngoài (đèn báo "đang chạy")
   Chấm làm bằng ::before nên KHÔNG phải thêm thẻ vào HTML - quan trọng, vì thẻ <i> này
   mang data-flash-countdown và js/landing-desire.js ghi đè textContent mỗi giây; thẻ con
   thật sẽ bị xoá sạch sau nhịp đầu tiên, còn ::before thì sống sót vì nó không nằm trong
   nội dung thẻ.

   Vì sao không cho riêng số GIÂY nhấp nháy (mạnh hơn nhiều): JS ghi nguyên chuỗi
   "03:52:22" vào một thẻ, CSS không tách được hai ký tự cuối. Muốn vậy phải sửa JS -
   file hệ thống, không được đụng.

   Máy bật "giảm chuyển động" thì cả hai animation tắt, chỉ còn màu - vẫn đọc được giờ,
   không mất gì. Muốn về màu mận cũ: bỏ khối này rồi tăng ?v= của css/v11.css. */
.perfume10ml-tiktok-page .description-order-head > div:first-child > strong i {
  position: relative;
  background: linear-gradient(180deg, #c2143f 0%, #8a0c2c 100%);
  padding-left: 36px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .3),
    0 8px 18px rgba(138, 12, 44, .3);
  animation: obDapDongHo 1s ease-in-out infinite;
}

.perfume10ml-tiktok-page .description-order-head > div:first-child > strong i::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -4px;
  border-radius: 50%;
  background: #ffd166;
  animation: obNhayChamGio 1s ease-out infinite;
}

/* Đập ở ĐẦU nhịp rồi đứng yên hết phần còn lại của giây: giống tiếng tích của kim giây.
   Đập đều suốt cả giây (kiểu 0-50-100) thì thành ra đang "thở" - êm chứ không giục. */
@keyframes obDapDongHo {
  0%        { transform: scale(1); }
  7%        { transform: scale(1.018); }
  22%, 100% { transform: scale(1); }
}

@keyframes obNhayChamGio {
  0%   { opacity: 1;   box-shadow: 0 0 0 0 rgba(255, 209, 102, .75); }
  70%  { opacity: .5;  box-shadow: 0 0 0 8px rgba(255, 209, 102, 0); }
  100% { opacity: 1;   box-shadow: 0 0 0 0 rgba(255, 209, 102, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .perfume10ml-tiktok-page .description-order-head > div:first-child > strong i,
  .perfume10ml-tiktok-page .description-order-head > div:first-child > strong i::before {
    animation: none;
  }
}


/* =====================================================================
   v11 — Bỏ thanh đen giả dưới nút "Mua ngay" + nhích nút lên 8px (05/09/2026)
   =====================================================================
   THANH ĐEN: là <i class="home-indicator"> - viên thuốc đen 134x5px vẽ giả cái vạch
   Home của iPhone. Trên máy thật thì hệ điều hành ĐÃ vẽ vạch đó rồi -> nhìn ra hai
   vạch chồng nhau; còn trên Android thì chẳng có vạch nào để mà bắt chước.
   Đã XOÁ HẲN khỏi HTML (2 chỗ: chân .bottom-cta và chân .reviews-bottom-cta) chứ không
   ẩn bằng CSS, vì thẻ này KHÔNG mang thuộc tính data-* nào và grep cả thư mục js/ ra 0
   kết quả - không phải móc nối của JS nên luật "giữ nguyên phần tử data-*" không chạm
   tới nó. Rule .home-indicator (cũ ở ~dòng 3920) cũng xoá theo cho khỏi rác.

   NHÍCH NÚT LÊN: đáy nút cách mép màn 10px -> 18px. Đúng 8px, không hơn: đo lần trước
   đã ghi ở khối "Nút Đặt hàng nhích lên" phía trên - đẩy nhiều (72px) thì nút trôi lơ
   lửng giữa khoảng trắng và ăn mất vùng cuộn.

   Thanh CTA cao thêm 8px thì BỐN số khác phải đi theo, nếu không:
     .tt-content padding-bottom 78 -> 86px   (không sửa: dòng cuối trang chui xuống
                                              dưới thanh, cuộn hết cỡ vẫn không đọc được)
     .scroll-top / .review-scroll-top
       bottom 90 -> 98px                     (không sửa: nút ↑ đè lên mép thanh trắng)
     .variant-actions 10 -> 18px             (không sửa: mở/đóng sheet là nút "Đặt hàng"
                                              lệch 8px so với "Mua ngay" nằm sau lưng -
                                              mắt bắt ra ngay lúc chuyển màn)
   Cùng viết dạng calc(<số> + var(--safe-bottom)) để máy có vạch Home (iPhone X trở lên)
   tự cộng thêm phần lề an toàn của nó.

   Muốn trả về như cũ: đổi 18 -> 10, 86 -> 78, 98 -> 90 và bỏ cả khối này, rồi tăng ?v=
   của css/v11.css. */
.perfume10ml-tiktok-page .bottom-cta,
.perfume10ml-tiktok-page .reviews-bottom-cta {
  padding-bottom: calc(18px + var(--safe-bottom));
}

.perfume10ml-tiktok-page .variant-sheet .variant-actions {
  padding-bottom: calc(18px + var(--safe-bottom));
}

.perfume10ml-tiktok-page .tt-content {
  padding-bottom: calc(86px + var(--safe-bottom));
}

.perfume10ml-tiktok-page .scroll-top,
.perfume10ml-tiktok-page .review-scroll-top {
  bottom: calc(98px + var(--safe-bottom));
}

/* =====================================================================
   v11 — Bỏ hẳn khối "Câu hỏi thường gặp" (05/09/2026)
   =====================================================================
   Chủ dự án: bỏ FAQ, các thông tin đó đã nằm sẵn trong phần nội dung mô tả và
   trên chính ảnh sản phẩm rồi.

   Đã XOÁ HẲN chứ không ẩn bằng CSS - cả 7 thẻ <details> lẫn 66 dòng rule .faq-block:
   khối này là HTML thuần (<details>/<summary>, đóng mở bằng chính trình duyệt),
   KHÔNG có thuộc tính data-* nào và grep js/ + public-api/ ra 0 kết quả, nên luật
   "giữ nguyên phần tử mang data-*" trong CLAUDE.md không chạm tới nó. Ẩn bằng CSS
   thì 46 dòng chữ vẫn nằm trong HTML gửi về máy khách - tải nặng thêm mà không ai đọc.

   Lưu ý khi so với các bản khác: v9/v10 VẪN CÒN khối FAQ này, đừng thấy khác mà
   tưởng lỗi đồng bộ. Muốn lấy lại thì chép từ landing-templates/v9.php (khối
   <section class="faq-block">) và phần rule .faq-block trong css/v9.css.

   Một câu trả lời trong đó có in giá động (đơn giá mỗi thỏi của Bộ 3 và khoản rẻ hơn
   khi mua Bộ đôi so với mua rời) - bỏ theo luôn, không có chỗ nào khác dùng biến
   $landingDuoVsSingles nên không sót biến chết. */

/* =====================================================================
   v11 — Bỏ mọi lời chào "mua 2 thỏi được giảm" (05/09/2026)
   =====================================================================
   Chủ dự án: không nói gì đến chuyện mua 2 thỏi Desire có giảm giá; tập trung bán các
   phân loại chính, và dòng nào cũng viết như nhau chứ không tô nổi như Desire đang bị.

   NÓ TỪ ĐÂU RA: admin vừa khai "Giá mua combo 2 sản phẩm" = 344.000đ cho riêng Desire
   (muse/grace vẫn trống). Trang in số đó vào combo2Price trong window.OBARIA_PAGE, rồi
   js/landing-desire.js TỰ chèn thêm chữ vào 3 chỗ - .ob-pair-hint (dưới giá ở dòng chọn
   phân loại), .ob-pair-deal (dòng trong khu tính tiền), .ob-pair-note (ghi chú dưới đó) -
   kèm sẵn một khối <style> màu xanh lá đậm. Đó là lý do đúng một dòng Desire xanh lè
   giữa năm dòng chữ xám.

   Ở tab Đặt hàng nó còn làm HỎNG CÂU: mỗi dòng là một câu ghép bằng CSS
   (small::before "giá " + small::after " freeship (giá gốc..., ưu đãi...%)"), mà
   .ob-pair-hint cũng là một thẻ <small> nên nó bị ghép y hệt, thành ra:
     "...Desire giá 369.000đ freeship (giá gốc 449.000đ, ưu đãi 18%).
      giá Mua 2 thỏi: 344.000đ/thỏi · Ưu đãi bộ đôi freeship (giá gốc 449.000đ, ưu đãi 18%)."
   Đuôi câu lặp hai lần. Ẩn ba thẻ kia là câu về đúng một dòng như năm phân loại còn lại.

   ẨN chứ không sửa JS (file hệ thống, cấm đụng) và cũng KHÔNG bỏ combo2Price khỏi
   window.OBARIA_PAGE - CLAUDE.md ghi rõ phải giữ nguyên số đó. CLAUDE.md cũng nói sẵn
   "CSS trang muốn đổi thì ghi đè các class đó", nên đây là đường chính thống.

   ⚠ ĐIỀU PHẢI BIẾT: ẩn chữ KHÔNG tắt khuyến mãi. Khách bấm mua 2 thỏi Desire thì cả JS
   lẫn public-api/_combo2_pricing.php vẫn tính 344.000đ/thỏi -> tổng 688.000đ thay vì
   738.000đ. Tức là khách vẫn được giảm, chỉ không được mời chào trước. Muốn bỏ hẳn ưu
   đãi thì chủ dự án xoá ô "Giá mua combo 2 sản phẩm" của Desire trong Admin - việc ở
   database, CSS không với tới.

   Muốn hiện lại lời chào: bọc khối này trong dấu chú thích rồi tăng ?v=. */
.perfume10ml-tiktok-page .ob-pair-hint,
.perfume10ml-tiktok-page .ob-pair-deal,
.perfume10ml-tiktok-page .ob-pair-note {
  display: none !important;
}

/* =====================================================================
   v11 — Khối đánh giá ở tab Đánh giá: ảnh to lên, avatar rõ hơn (05/09/2026)
   =====================================================================
   ẢNH ĐÁNH GIÁ: 80x80 thì thỏi nước hoa chỉ còn khoảng 20px, nhìn ra một vệt màu chứ
   không ra sản phẩm - mất trắng thứ giá trị nhất của đánh giá có ảnh là bằng chứng khách
   đã cầm hàng thật. Nhưng thử 150x150 thì ngược lại: khu xem trước chỉ còn 4 bài nên ảnh
   to chiếm gần hết bề ngang, cuộn mãi mới hết một đánh giá. Chốt 104x104 - đọc được nhãn
   MUSE/GRACE/DESIRE trên chai mà vẫn là ảnh minh hoạ đi kèm chữ, không lấn chữ.

   AVATAR 22px quá nhỏ để đọc ra là mặt người, nhìn như một chấm tròn. Lên 30px, cột lưới
   nới theo cho khỏi dính chữ. Vẫn nhỏ hơn ảnh đánh giá nhiều nên không tranh chỗ.

   Muốn về cỡ cũ: đổi 150 -> 80, 30 -> 22, 38px -> 28px rồi tăng ?v= của css/v11.css. */
.perfume10ml-tiktok-page .review-item,
.perfume10ml-tiktok-page .perfume-review {
  grid-template-columns: 38px 1fr;
}

.perfume10ml-tiktok-page .perfume-review .avatar {
  width: 30px;
  height: 30px;
}

.perfume10ml-tiktok-page .perfume-review .review-photo {
  width: 104px;
  height: 104px;
  border-radius: 10px;
}

/* Cắt 2 dòng ở khu xem trước đánh giá là cắt mất chỗ đắt nhất (05/09/2026).
   Khối chỉ còn 4 bài nên không cần tiết kiệm chỗ nữa, mà câu chốt của một đánh giá
   hầu như luôn nằm ở CUỐI: "Sẽ dùng thêm vài hôm rồi quay lại mua tiếp" của chi_shop91
   bị dấu ba chấm nuốt mất, đúng cái vế khiến tôi chọn bài đó. Nới lên 4 dòng: bài dài
   nhất trong bốn bài hiện đủ, bài ngắn không bị hụt vì đây là giới hạn trên, không phải
   chiều cao cố định. */
.perfume10ml-tiktok-page .perfume-review p {
  -webkit-line-clamp: 4;
}

/* =====================================================================
   v11 — "Báo chí nói về Obaria": dải kéo ngang, mỗi thẻ có câu trích (05/09/2026)
   =====================================================================
   Nội dung là ẢNH CHỤP MÀN HÌNH bài báo thật kèm CÂU NGUYÊN VĂN của bài đó, không có
   link ra ngoài (lý do ghi trong landing-templates/v11.php).

   KÉO NGANG chứ không xếp dọc: 11 tấm xếp dọc là hơn 1.000px, đẩy chân trang đi quá xa,
   mà khối này nằm ngay sau nút đặt hàng nên càng không được dài.

   Thẻ rộng 262px: ảnh gốc 500px thu về 262 là tỷ lệ 0,52 - tiêu đề 24px trên báo còn
   12,5px trên thẻ, VẪN ĐỌC ĐƯỢC. Nhỏ hơn nữa thì chữ thành hoa văn, mất tác dụng làm
   bằng chứng.

   MÁY TÍNH KÉO ĐƯỢC BẰNG CÁCH NÀO: chuột rời không có bánh xe ngang, nên với thiết bị
   trỏ chính xác (hover: hover + pointer: fine) thì HIỆN HẲN thanh cuộn mảnh dưới dải để
   kéo bằng chuột. Máy cảm ứng thì ẩn thanh cuộn đi vì vuốt là đủ. Thêm tabindex trên dải
   nên bàn phím bấm mũi tên trái/phải cũng chạy. Tất cả bằng CSS, không thêm JS nào -
   luật repo cấm thêm khối <script> mới.

   Câu trích kẹp ở 3 dòng cho các thẻ cao bằng nhau; câu dài nhất vẫn đọc đủ ý, và nằm
   trong vùng nền riêng phía DƯỚI ảnh, không đè lên ảnh. */
.perfume10ml-tiktok-page .press-block {
  margin: 18px 0 0;
  border-top: 8px solid #f6f6f6;
  background: #fff;
  padding: 16px 0 18px;
}

.perfume10ml-tiktok-page .press-block h2 {
  margin: 0 var(--edge-pad);
  color: #1f1f1f;
  font-size: 18px;
  font-weight: 700;
}

.perfume10ml-tiktok-page .press-lead {
  margin: 4px var(--edge-pad) 12px;
  color: #8a8a8a;
  font-size: 13px;
  line-height: 1.4;
}

.perfume10ml-tiktok-page .press-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 0 var(--edge-pad) 4px;
  scrollbar-width: none;
}

.perfume10ml-tiktok-page .press-strip::-webkit-scrollbar {
  display: none;
}

.perfume10ml-tiktok-page .press-strip:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 3px;
}

/* Máy tính (chuột rời): hiện thanh cuộn để kéo được. */
@media (hover: hover) and (pointer: fine) {
  .perfume10ml-tiktok-page .press-strip {
    padding-bottom: 10px;
    scrollbar-width: thin;
    scrollbar-color: #ffc2d1 #f4f4f4;
  }

  .perfume10ml-tiktok-page .press-strip::-webkit-scrollbar {
    display: block;
    height: 8px;
  }

  .perfume10ml-tiktok-page .press-strip::-webkit-scrollbar-track {
    border-radius: 999px;
    background: #f4f4f4;
  }

  .perfume10ml-tiktok-page .press-strip::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #ffc2d1;
  }

  .perfume10ml-tiktok-page .press-strip::-webkit-scrollbar-thumb:hover {
    background: var(--pink);
  }
}

.perfume10ml-tiktok-page .press-card {
  flex: 0 0 262px;
  margin: 0;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  border: 1px solid #ececec;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
}

.perfume10ml-tiktok-page .press-card img {
  display: block;
  width: 100%;
  height: auto;
}

/* Câu trích nằm HẲN dưới ảnh, có nền và vạch ngăn riêng để không bao giờ chồng lên
   ảnh chụp bài báo: ảnh là bằng chứng, chữ đè lên là hỏng bằng chứng. Thẻ dùng
   flex-direction: column nên hai phần xếp dọc thật, không phải chồng lớp. */
.perfume10ml-tiktok-page .press-card figcaption {
  flex: 1;
  border-top: 1px solid #f0e6e9;
  background: #fffdfd;
  padding: 9px 11px 11px;
}

.perfume10ml-tiktok-page .press-card figcaption b {
  display: block;
  color: #1f1f1f;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: -.01em;
}

.perfume10ml-tiktok-page .press-card figcaption q {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 3px;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  color: #5a5a5a;
  font-size: 12px;
  font-style: italic;
  line-height: 1.38;
}

/* v11 — 4 đánh giá theo ảnh TikTok Shop người dùng gửi ngày 05/09/2026.
   Avatar + tên / sao / mặt hàng / lời nhận xét / dải ảnh dưới nội dung.
   Scope riêng để không đổi danh sách trong popup đánh giá. */
.perfume10ml-tiktok-page .v11-review-preview {
  padding-top: 14px;
  padding-bottom: 14px;
}

.perfume10ml-tiktok-page .v11-review-preview .section-heading {
  margin-bottom: 16px;
}

.perfume10ml-tiktok-page .v11-review-preview .section-heading h2 {
  white-space: normal;
  line-height: 1.35;
}

.perfume10ml-tiktok-page .v11-review-preview .score-row {
  gap: 4px;
  margin-bottom: 0;
}

.perfume10ml-tiktok-page .v11-review-preview .score-row i {
  margin-left: 3px;
  font-size: 22px;
  letter-spacing: 1px;
}

.perfume10ml-tiktok-page .v11-review-preview .perfume-review {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  margin-top: 18px;
}

.perfume10ml-tiktok-page .v11-review-preview .perfume-review + .perfume-review {
  border-top: 0;
  padding-top: 0;
  margin-top: 12px;
}

.perfume10ml-tiktok-page .v11-review-preview .v11-review-copy {
  min-width: 0;
}

.perfume10ml-tiktok-page .v11-review-preview .v11-review-author {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
}

.perfume10ml-tiktok-page .v11-review-preview .v11-review-author .avatar {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  margin: 0;
}

.perfume10ml-tiktok-page .v11-review-preview .v11-review-author b {
  min-width: 0;
  font-size: 13px;
  line-height: 18px;
  overflow-wrap: anywhere;
}

.perfume10ml-tiktok-page .v11-review-preview .v11-review-stars {
  margin-top: 5px;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: 1px;
}

.perfume10ml-tiktok-page .v11-review-preview .v11-review-copy > span {
  margin-top: 6px;
  font-size: 12px;
  line-height: 17px;
}

.perfume10ml-tiktok-page .v11-review-preview .perfume-review p {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.4;
}

.perfume10ml-tiktok-page .v11-review-preview .perfume-review .review-photo {
  flex: 0 0 84px;
  width: 84px;
  height: 84px;
  margin-top: 0;
  border-radius: 8px;
  object-fit: cover;
}

.perfume10ml-tiktok-page .v11-review-preview .v11-review-photos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.perfume10ml-tiktok-page .v11-review-preview .rating-filters {
  gap: 6px;
  margin-top: 12px;
  padding-top: 10px;
}

.perfume10ml-tiktok-page .v11-review-preview .rating-filters span {
  padding: 0 9px;
  font-size: 12px;
}

/* Ảnh phân loại mới vuông: giữ trọn nắp/đáy chai ở cả màn hẹp và màn thấp. */
.perfume10ml-tiktok-page .variant-sheet .variant-strip > .variant-card[data-variant-key] img {
  object-fit: contain;
  object-position: center;
  background: #fff8f3;
}

/* v11 — badge Bộ 3 sát mép trên, đè lên ảnh; không thêm đệm hoặc đổi kích thước thẻ. */
.perfume10ml-tiktok-page .variant-sheet .variant-strip > .variant-card[data-variant-key="combo-full"] .variant-badge {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

/* v11 — bỏ nút cuộn lên ở trang chính và popup.
   Giữ phần tử data-* vì JS dùng chung còn tham chiếu khi tải thêm đánh giá.
   Luôn ẩn cả khi JS bỏ thuộc tính hidden sau khi cuộn popup. */
.perfume10ml-tiktok-page [data-scroll-top],
.perfume10ml-tiktok-page [data-review-scroll-top] {
  display: none !important;
}

/* =====================================================================
   v11 — Né thanh liên hệ của Facebook (05/09/2026)
   =====================================================================
   Biến --ob-fb-bar do js/landing-desire.js đo và đặt, CHỈ khi trang khai fbBottomBarFix.
   Không có thanh, hoặc trình duyệt không hỗ trợ visualViewport, thì biến không tồn tại và
   mọi giá trị dưới đây rơi về 0px - trang y hệt như trước, không nâng thừa một pixel nào
   cho khách không gặp thanh đó.

   ĐẨY BẰNG `bottom`, KHÔNG bằng padding: yêu cầu là giữ nguyên kích thước, màu, chữ và
   thiết kế nút. Cộng vào padding thì thanh nút cao lên, nút méo đi. Đổi `bottom` thì cả
   thanh trượt lên nguyên khối, nút không suy suyển.

   BỐN vùng phải xử lý riêng vì chúng neo vào ba gốc khác nhau:
     .bottom-cta      fixed bottom:0            -> đẩy bottom
     .variant-sheet   fixed bottom:0            -> đẩy bottom + bớt max-height
     .order-popup     fixed top:0 bottom:0      -> đẩy bottom
     .reviews-layer   fixed top:0 height:100dvh -> BỚT CHIỀU CAO, không đẩy bottom được,
                      vì nút của nó nằm absolute bottom:0 BÊN TRONG khung đó; khung còn
                      thò xuống dưới thanh thì nút vẫn nằm khuất.
   Sửa mỗi .bottom-cta là ba màn kia vẫn bị che. */
.perfume10ml-tiktok-page .bottom-cta {
  bottom: var(--ob-fb-bar, 0px);
}

.perfume10ml-tiktok-page .variant-sheet {
  bottom: var(--ob-fb-bar, 0px);
  max-height: calc(100dvh - 54px - var(--ob-fb-bar, 0px));
}

.perfume10ml-tiktok-page .order-popup {
  bottom: var(--ob-fb-bar, 0px);
}

.perfume10ml-tiktok-page .reviews-layer {
  height: calc(100dvh - var(--ob-fb-bar, 0px));
}

/* Vùng cuộn và nút ↑ đi theo cho khỏi dính vào thanh nút vừa nhích lên. */
.perfume10ml-tiktok-page .tt-content {
  padding-bottom: calc(86px + var(--safe-bottom) + var(--ob-fb-bar, 0px));
}

.perfume10ml-tiktok-page .scroll-top,
.perfume10ml-tiktok-page .review-scroll-top {
  bottom: calc(98px + var(--safe-bottom) + var(--ob-fb-bar, 0px));
}

/* =====================================================================
   v11 — Thanh nút dưới: gọn lại cho đẹp + nhịp nháy nhanh hơn (05/09/2026)
   =====================================================================
   1) VÌ SAO TRƯỚC ĐÓ NHÌN XẤU
   Nút được nâng lên 18px, nhưng thanh nền vẫn là một khối trắng vuông chằn chặn chạy hết
   bề ngang, đệm trên 8px mà đệm dưới 18px. Trên máy KHÔNG có vạch Home (--safe-bottom = 0)
   thì phần trắng thừa dưới nút lộ hẳn ra, nhìn như căn lỗi chứ không ra chủ ý.

   Sửa bằng cách CÂN LẠI ĐỆM: trên 10px, dưới 15px (trước là 8/18). Chênh 10px giữa trên
   và dưới là chỗ làm nút trông như bị đẩy lệch lên; chênh 5px thì mắt đọc ra là căn có
   chủ ý. Nút cách đáy 15px, vẫn cao hơn mức 10px ban đầu.

   ⚠ ĐÃ THỬ VÀ BỎ (05/09/2026): bo tròn hai góc trên 18px + đổ bóng hắt lên cho thanh
   trông như khay nổi. Nhìn riêng thanh thì đẹp hơn thật, NHƯNG khi mở popup chọn phân
   loại hoặc popup đặt hàng thì thanh này nằm sau lưng popup, hai góc bo và vệt bóng thò
   ra ở mép, nhìn ra hai lớp chồng nhau lệch lạc. Thanh dưới của trang thương mại điện tử
   phải vuông và đặc để nằm sau bất kỳ lớp nào cũng không lộ. Đừng bo lại.
   Tổng chiều cao thanh chỉ đổi 1px nên không phải chỉnh lại vùng cuộn và nút ↑.
   Kích thước, màu, chữ của NÚT không đụng tới.

   2) NHỊP NHÁY NHANH HƠN
   Trước: chu kỳ 9 giây, chờ 4 giây mới chạy lần đầu.
   Nay:   chu kỳ 5 giây, chờ 2 giây.
   Các mốc trong keyframes đã nhân lên tương ứng để mỗi nhịp vẫn kéo dài ~0,75 giây thật -
   nếu giữ nguyên mốc cũ mà rút chu kỳ thì nhịp bị nén còn ~0,5 giây, giật như co cơ.
   Tỷ lệ đứng yên giảm từ 89% xuống 85%: nháy dày hơn rõ rệt mà vẫn phần lớn thời gian
   nằm im. Biên độ phồng nhích từ 1.035 lên 1.04 (nút cao 44px thì phình thêm ~1,8px).
   Chạm/di chuột vào nút vẫn dừng ngay, máy bật giảm chuyển động vẫn tắt hẳn.

   Muốn chậm lại: đổi 5s -> 9s, 2s -> 4s và chia các mốc % cho 1,8. */
.perfume10ml-tiktok-page .bottom-cta {
  padding-top: 10px;
  padding-bottom: calc(15px + var(--safe-bottom) + var(--ob-fb-bar, 0px));
}

@keyframes ob-buy-now-nhip {
  0%     { transform: scale(1);    box-shadow: 0 0 0 0 rgba(255, 47, 95, .40); }
  3.6%   { transform: scale(1.04); box-shadow: 0 0 0 6px rgba(255, 47, 95, .14); }
  7.6%   { transform: scale(1);    box-shadow: 0 0 0 10px rgba(255, 47, 95, 0); }
  11%    { transform: scale(1.022);box-shadow: 0 0 0 4px rgba(255, 47, 95, .10); }
  15%    { transform: scale(1);    box-shadow: 0 0 0 0 rgba(255, 47, 95, 0); }
  100%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(255, 47, 95, 0); }
}

@keyframes ob-buy-now-loe {
  0%, 5.5% { transform: translateX(-170%) skewX(-16deg); opacity: 0; }
  8%       { opacity: 1; }
  17%      { transform: translateX(170%) skewX(-16deg); opacity: 0; }
  100%     { transform: translateX(170%) skewX(-16deg); opacity: 0; }
}

.perfume10ml-tiktok-page .bottom-cta .buy-now,
.perfume10ml-tiktok-page .reviews-bottom-cta .buy-now {
  animation: ob-buy-now-nhip 5s ease-in-out 2s infinite;
}

/* Dải sáng phải chỉnh CÙNG chu kỳ và CÙNG độ trễ với nhịp phồng. Lệch một trong hai số là
   hai hiệu ứng tách rời nhau, mắt đọc ra hai lần nhấp nháy rời rạc thay vì một cái loé. */
.perfume10ml-tiktok-page .bottom-cta .buy-now::after,
.perfume10ml-tiktok-page .reviews-bottom-cta .buy-now::after {
  animation: ob-buy-now-loe 5s ease-in-out 2s infinite;
}

/* =====================================================================
   v11 — Popup phân loại: 6 thẻ phải lọt HẾT màn, mọi máy (05/09/2026)
   =====================================================================
   Đo trước khi sửa, mở sheet rồi so vùng cuộn với nội dung:
     390x844  vừa           390x780  thiếu  50px
     412x915  vừa           390x667  thiếu  91px   <- iPhone SE / 8, rất phổ biến
                            360x640  thiếu  95px
                            360x600  thiếu 135px
   Tức là mọi máy dưới ~800px cao đều bị cụt thẻ cuối, khách phải cuộn mới thấy đủ
   phân loại - mà đây là bước chọn hàng, cụt một lựa chọn là mất một cơ hội bán.

   VÌ SAO CŨ HỎNG: chiều cao ảnh thẻ do các mốc CỨNG quyết định -
   @media (max-height: 660px) cho 76px, @media (max-width: 380px) cho 84px.
   Máy 390x667 KHÔNG dính mốc nào (667 > 660 và 390 > 380) nên rơi về 88px, tức là
   máy ngắn lại được đối xử như máy cao. Thêm mốc nữa chỉ đẻ ra khe hở mới.

   CÁCH SỬA: bỏ mốc, cho chiều cao ảnh CHẢY THEO chiều cao màn bằng clamp + dvh.
   calc(11.5dvh - 27px) là đường thẳng khớp hai điểm cần: 780px -> 63px, 667px -> 50px.
   Quy ra: 915->78  844->70  780->63  667->50  640->47  600->44 (chạm đáy clamp).
   Không còn bậc thang nên không còn máy nào lọt khe.

   Phần cố định phía trên lưới (ảnh sản phẩm, băng flash) không co theo chiều cao màn
   được, nên thu riêng ở khối @media dưới - chỉ áp cho máy thấp, máy cao giữ nguyên. */
.perfume10ml-tiktok-page .variant-sheet .variant-strip > .variant-card[data-variant-key] img {
  height: clamp(44px, calc(11.5dvh - 27px), 82px);
}

@media (max-height: 800px) {
  /* Ảnh sản phẩm ở đầu sheet: nguồn ngốn chỗ thứ hai sau lưới thẻ.

     ⚠ RULE CŨ ĐÃ BỎ (06/09/2026) - đừng viết lại:
         .variant-sheet .sheet-product-card img { width/height: clamp(52px, 9dvh, 74px) }
     Nó thu THẺ <img> mà để KHUNG .sheet-preview đứng nguyên 114px, nên (a) ảnh lọt lỏm
     giữa khung hồng rỗng, (b) không tiết kiệm được pixel nào vì khung mới là thứ quyết
     định chiều cao hàng, (c) dvh đổi theo thanh địa chỉ của trình duyệt nên ảnh nhảy cỡ
     ngay lúc khách đang chọn. Thay bằng khối "Ảnh đầu sheet co theo KHUNG" ở cuối file:
     thu cả khung lẫn ảnh cùng nhau, và đo bằng svh nên không nhảy. */

  /* Bóp các khoảng cách dọc, mỗi chỗ vài px nhưng cộng lại đủ một thẻ. */
  .perfume10ml-tiktok-page .variant-sheet .sheet-sale-bar {
    margin-top: 6px;
  }

  .perfume10ml-tiktok-page .variant-sheet .variant-picker {
    margin-top: 4px;
  }

  .perfume10ml-tiktok-page .variant-sheet .variant-strip {
    gap: 6px;
  }

  .perfume10ml-tiktok-page .variant-sheet .variant-strip > .variant-card[data-variant-key] {
    padding-bottom: 4px;
  }
}

/* --- Máy THẤP dưới 660px: bóp tiếp phần CHỮ trong thẻ ------------------
   Đo ở 360x600 sau khi đã cho ảnh co giãn: thẻ cao 174px mà ảnh chỉ 44px - tức là
   130px là CHỮ. Trên máy hẹp, ô thẻ chỉ rộng ~105px nên dòng mô tả vỡ thành 2 hàng,
   đó mới là chỗ ngốn chỗ chứ không phải ảnh. Bóp ảnh thêm nữa chỉ làm ảnh xấu mà
   không giải quyết được gì.

   ⚠ ĐÁNH ĐỔI CÓ Ý THỨC: ẩn chip dịp dùng ("Ban ngày", "Ngày & đêm", "Đổi hương mỗi
   dịp") trên máy thấp. Chip đó hay, nhưng ở đây phải chọn: giữ chip mà khách chỉ thấy
   4/6 phân loại, hay bỏ chip để thấy đủ 6. Đây là BƯỚC CHỌN HÀNG - một lựa chọn bị
   khuất là một cơ hội bán bị mất, nên đủ 6 quan trọng hơn. Dòng mô tả ngay dưới tên
   ("Trong trẻo + sang trọng") vẫn còn, khách không mất thông tin về mùi.
   Máy cao hơn 660px giữ nguyên chip. */
@media (max-height: 660px) {
  /* Độ đặc hiệu phải bằng các rule cũ (chúng dùng > .variant-card[data-variant-key]),
     nếu viết ngắn hơn là thua và không có tác dụng gì - đã mắc một lần. */
  .perfume10ml-tiktok-page .variant-sheet .variant-strip > .variant-card[data-variant-key] .variant-tag {
    display: none;
  }

  .perfume10ml-tiktok-page .variant-sheet .variant-strip > .variant-card[data-variant-key] .variant-copy {
    padding-top: 3px;
    padding-bottom: 6px;
  }

  .perfume10ml-tiktok-page .variant-sheet .variant-strip > .variant-card[data-variant-key] .variant-saving {
    padding-top: 1px;
    padding-bottom: 1px;
    margin-top: 0;
  }

  .perfume10ml-tiktok-page .variant-sheet .variant-strip > .variant-card[data-variant-key] .variant-name {
    line-height: 1.15;
  }

  .perfume10ml-tiktok-page .variant-sheet .sheet-product-card {
    padding-top: 4px;
    padding-bottom: 4px;
  }

  /* Ảnh thẻ nhỏ hơn nữa: đáy clamp 44 -> 38px. Dưới mức này thỏi nước hoa không
     còn nhận ra hình dáng, nên 38px là giới hạn tôi không hạ tiếp. */
  .perfume10ml-tiktok-page .variant-sheet .variant-strip > .variant-card[data-variant-key] img {
    height: clamp(38px, calc(11.5dvh - 27px), 82px);
  }

  /* Dải "Gian hàng chính hãng" ở đỉnh sheet: thuần trang trí, ẩn đi lấy 18px.
     Thông tin chính hãng đã có ở tab Tổng quan và khối chứng nhận. */
  .perfume10ml-tiktok-page .variant-sheet .sheet-mall-bar {
    display: none;
  }

  /* Tên sản phẩm trong sheet dài, ở máy hẹp vỡ 3-4 dòng. Kẹp 2 dòng: khách đã bấm
     vào đây thì biết mình đang mua gì rồi, tên đầy đủ không còn phải gánh việc gì. */
  .perfume10ml-tiktok-page .variant-sheet .sheet-product-title {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 13px;
    line-height: 1.25;
  }

  .perfume10ml-tiktok-page .variant-sheet .sheet-sale-bar {
    padding-top: 4px;
    padding-bottom: 4px;
  }
}

/* --- Máy RẤT thấp dưới 620px (iPhone SE đời đầu, Android nhỏ) ----------
   Sau khi đã bóp hết ở khối trên, 360x600 vẫn thiếu 28px. Chỉ còn một chỗ lấy được
   mà không đụng vào ảnh: dòng mô tả mùi trong thẻ ("Trong trẻo + sang trọng"), ở bề
   ngang này luôn vỡ 2 dòng, tốn 29px mỗi hàng thẻ.

   Kẹp 1 dòng thì thành "Trong trẻo + san..." - cụt lủn, đọc khó chịu hơn là không có.
   Nên ẩn hẳn. Thẻ còn TÊN phân loại và chip TIẾT KIỆM, đủ để chọn và đủ để thấy lợi.
   Ưu tiên khi hết chỗ, từ giữ đến bỏ: ảnh > tên > chip tiết kiệm > chip dịp dùng >
   dòng mô tả mùi.

   Máy cao hơn 620px vẫn thấy đủ mô tả. */
@media (max-height: 620px) {
  .perfume10ml-tiktok-page .variant-sheet .variant-strip > .variant-card[data-variant-key] .variant-note {
    display: none;
  }
}

/* =====================================================================
   v11 — SỬA 3 LỖI MÀN ĐẶT HÀNG (06/09/2026)
   =====================================================================
   Ba lỗi chủ dự án báo, ba nguyên nhân khác nhau, ghi rõ từng cái để lần sau khỏi đoán:

   LỖI 1. Ảnh trong popup chọn phân loại BỖNG NHỎ ĐI khi khách chạm chọn.
     Đo được: viewport cao 844px thì ảnh 112px, cao 800px thì ảnh 72px - rơi 40px NGAY
     tại mốc 800. Trình duyệt trong app Facebook cứ chạm là bung thêm hàng địa chỉ
     (tên miền + chữ "Facebook"), viewport tụt từ ~830 xuống ~780 tức là VƯỢT mốc 800,
     nên ảnh co lại giữa lúc khách đang chọn. Rule gây ra nằm trong @media (max-height:
     800px) ở trên, đã bỏ - nó thu <img> mà giữ khung 114px.
     Sửa: khung .sheet-preview và ảnh bên trong CO CÙNG NHAU (ảnh luôn 100% khung), và
     đo bằng svh chứ không dvh. svh là chiều cao khi trình duyệt hiện ĐỦ thanh - một con
     số CỐ ĐỊNH của máy đó, thanh địa chỉ bung ra hay thu vào cũng không đổi -> hết nhảy.

   LỖI 2. Nút "Đặt hàng ngay" che ô nhập ở MỘT VÀI trình duyệt.
     "Một vài" chính là các trình duyệt trong app (Facebook, Zalo, Chrome iOS): bàn phím
     bật lên thì chúng THU NHỎ luôn khung web. Đo trên iPhone 14 Pro Max: vùng nhìn thấy
     còn 331px, mà đầu màn 58px + chân màn 136px = 194px, chỉ còn 137px cho cả form -
     đủ chỗ cho MỘT ô rưỡi, ô kế tiếp bị mép chân màn cắt ngang, nhìn đúng như nút đè
     lên form.
     Sửa: dưới 560px cao thì đầu/chân màn tự gọn lại (bỏ dòng phụ "COD · Miễn phí vận
     chuyển" dưới nút vì đã nói ở dòng cam kết, nút 64->46px, chữ cam kết 12.5->11px cho
     gọn một dòng). Chân màn 136->78px, đầu màn 58->46px: form được 207px thay vì 137px,
     đủ hai ô đầy đủ. Nút vẫn 46px (trên mức 44px của Apple) và vẫn luôn thấy.

   LỖI 3. Vài thiết bị chạm vào form là KÉO LÊN QUÁ MỨC.
     Đây là các máy iOS Safari - loại KHÔNG thu khung web khi bật bàn phím. Popup vẫn
     cao 926px, vùng cuộn .order-body cao 732px mà nội dung cũng đúng 732px, tức là
     KHÔNG CÒN GÌ ĐỂ CUỘN BÊN TRONG. Muốn lộ ô đang gõ ra khỏi bàn phím, WebKit không
     cuộn được vùng trong thì nó cuộn CẢ TÀI LIỆU - popup dán fixed bị lôi lên theo,
     đầu popup mất, đáy popup hở ra trang phía sau (đúng cảnh trong ảnh chủ dự án gửi).
     Sửa: lúc có ô đang gõ thì chèn khoảng trống cuối vùng cuộn, để WebKit cuộn NỘI BỘ
     .order-body là đủ, không phải kéo cả trang. Khoảng trống chỉ tồn tại trong lúc gõ,
     nhả ra là mất, khách không bao giờ cuộn vào chỗ trắng.

   Cả 3 sửa bằng CSS, không thêm JS - đúng luật CLAUDE.md (mọi .js là file hệ thống). */

/* --- LỖI 1: Ảnh đầu sheet co theo KHUNG, không nhảy cỡ ---------------
   Ảnh phủ 100% khung nên khung to bao nhiêu ảnh to bấy nhiêu. Rule cỡ khung viết ở
   dạng biến để BA chỗ (cột lưới, khung, ảnh) không bao giờ lệch nhau nữa.

   Vì sao còn giữ bản px thuần bên ngoài @supports: máy iOS trước 15.4 không hiểu svh,
   mà biến CSS thì trình duyệt nào cũng NHẬN rồi mới vỡ lúc tính giá trị (khung sẽ mất
   width, co về bằng nội dung). Nên bản px đứng ngoài làm nền, bản svh chỉ chồng lên ở
   máy hiểu svh. */
.perfume10ml-tiktok-page .variant-sheet .sheet-product-card {
  grid-template-columns: 114px minmax(0, 1fr);
}

.perfume10ml-tiktok-page .variant-sheet .sheet-preview {
  width: 114px;
  height: 114px;
}

.perfume10ml-tiktok-page .variant-sheet .sheet-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@supports (height: 1svh) {
  /* 13.8svh: cắt đúng qua 114px ở máy cao (svh ~830) rồi chảy mượt xuống -
     780 -> 107px, 720 -> 99px, 667 -> 92px, dưới 610 -> chạm sàn 84px.
     Không còn mốc cứng nào nên không còn máy nào rơi vào khe. */
  .perfume10ml-tiktok-page .variant-sheet .sheet-product-card {
    --ob-sheet-anh: clamp(84px, 13.8svh, 114px);
    grid-template-columns: var(--ob-sheet-anh) minmax(0, 1fr);
  }

  .perfume10ml-tiktok-page .variant-sheet .sheet-preview {
    width: var(--ob-sheet-anh);
    height: var(--ob-sheet-anh);
  }

  /* Máy hẹp: khung cũ đã là 88px, giữ đúng mức đó làm trần rồi cho co tiếp. */
  @media (max-width: 380px), (max-width: 480px) and (max-height: 720px) {
    .perfume10ml-tiktok-page .variant-sheet .sheet-product-card {
      --ob-sheet-anh: clamp(72px, 12svh, 88px);
    }
  }
}

/* --- LỖI 2: bàn phím bật lên, đầu và chân màn đặt hàng gọn lại -------
   Mốc 560px: chiều cao còn lại của điện thoại khi bàn phím đã bật (14 Pro Max 331px,
   iPhone 8 277px, máy Android to nhất cũng ~500px). Máy tính hay tablet không bao giờ
   xuống dưới mốc này nên bản thường không đổi một pixel. Điện thoại nằm ngang cũng
   dính mốc - đúng ý, ngang thì càng ít chỗ. */
@media (max-height: 560px) {
  .perfume10ml-tiktok-page .order-popup .order-header {
    min-height: 46px;
    padding: 4px 12px 2px;
  }

  .perfume10ml-tiktok-page .order-popup .order-header h2 {
    font-size: 17px;
  }

  .perfume10ml-tiktok-page .order-popup .order-header svg {
    width: 24px;
    height: 24px;
  }

  .perfume10ml-tiktok-page .order-popup .order-body {
    padding-top: 8px;
  }

  .perfume10ml-tiktok-page .order-popup .order-footer {
    padding: 7px 16px calc(7px + var(--safe-bottom) + var(--ob-fb-bar, 0px));
  }

  .perfume10ml-tiktok-page .order-popup .order-footer button {
    min-height: 46px;
    border-radius: 12px;
    row-gap: 0;
  }

  .perfume10ml-tiktok-page .order-popup .order-footer button b {
    font-size: 18px;
  }

  /* Dòng phụ dưới nút ("COD · Miễn phí vận chuyển") ẩn lúc này thôi: y nguyên nội dung
     đó đang nằm ở dòng cam kết ngay dưới, in hai lần trong 78px thì chỉ tốn chỗ. */
  .perfume10ml-tiktok-page .order-popup .order-footer button span {
    display: none;
  }

  /* Dòng CHE TÊN thì KHÔNG ẩn - đây là câu gỡ nỗi lo lớn nhất của mặt hàng này, mà lúc
     khách đang gõ địa chỉ chính là lúc nỗi lo đó nặng nhất. Chỉ hạ 12.5->11px để nó gọn
     một dòng thay vì hai. */
  .perfume10ml-tiktok-page .order-popup .order-trust-note {
    margin-top: 5px;
    font-size: 11px;
    line-height: 1.3;
  }
}

/* --- LỖI 3: chỗ trống tạm cuối vùng cuộn lúc đang gõ -----------------
   45vh đủ để nâng ô cuối cùng (địa chỉ) lên khỏi bàn phím cao nhất; nhỏ hơn thì
   WebKit vẫn thiếu chỗ và lại đi kéo cả trang.
   :has() có từ Safari 15.4 / Chrome 105; máy cũ hơn không nhận rule này nên chạy
   y như trước - không hỏng thêm chỗ nào. */
.perfume10ml-tiktok-page .order-popup .order-body {
  overscroll-behavior-y: contain;
  scroll-padding-block: 10px 14px;
}

.perfume10ml-tiktok-page .order-popup .order-body:has(input:focus, textarea:focus, select:focus) {
  padding-bottom: calc(18px + 45vh);
}

/* Ô nhập không dán sát mép vùng cuộn khi trình duyệt tự cuộn tới nó. */
.perfume10ml-tiktok-page .order-popup .order-field {
  scroll-margin-block: 10px 14px;
}

/* Form đặt hàng nhanh nằm TRONG trang (tab Mô tả) thì vùng cuộn là cả tài liệu, mà
   đầu trang có thanh tab dán cứng cao 40px. Không chừa chỗ thì ô đang gõ bị thanh tab
   che đúng nửa trên - cảnh "kéo lên quá mức" trong ảnh. */
html {
  scroll-padding-top: 52px;
  scroll-padding-bottom: 16px;
}

.perfume10ml-tiktok-page .description-order-field,
.perfume10ml-tiktok-page .description-order-form .order-note-toggle {
  scroll-margin-top: 56px;
  scroll-margin-bottom: 20px;
}

/* =====================================================================
   v11 — Tiêu đề sản phẩm ăn trọn bề ngang (06/09/2026)
   =====================================================================
   TRƯỚC: .product-title là lưới 2 cột `1fr 32px` — cột phải dành cho nút "thêm dấu
   trang" chạy suốt CHIỀU CAO khối, kể cả những dòng không có nút. Đo ở 428px: khối rộng
   428 mà chữ chỉ được 356 (hao 72px), ở 360px hao 64px. Hậu quả:
   - MỌI dòng tiêu đề đều cụt một quãng bên phải, chữ dồn hết sang trái;
   - dòng sao/đã bán cũng cụt theo dù nó ngắn tũn;
   - nút (cao 28px) bị lưới kéo giãn rồi canh giữa theo cả khối cao ~104px, nên lửng lơ
     ngang dòng thứ 3, trên dưới trống hoác.

   NAY: nút đã bỏ hẳn (xem ghi chú trong landing-templates/v11.php) nên bỏ luôn lưới —
   tiêu đề và dòng sao chạy hết bề ngang, hao 0px ở mọi máy 320-428px.

   Nếu sau này chủ dự án muốn có lại nút: thêm <button> vào NGAY TRƯỚC thẻ <div> trong
   HTML rồi mở lại khối dưới đây. Nút phải đứng TRƯỚC khối chữ vì float chỉ đẩy được chữ
   ĐI SAU nó; và icon phải 24px chứ không 28px, vì 28px thò xuống dưới chân dòng đầu tới
   11px, mắt đọc ra là "nút bị tụt xuống dòng 2" dù mép trên vẫn đúng chỗ.

   .perfume10ml-tiktok-page .product-title button {
     float: right;
     width: 24px;
     height: 24px;
     display: grid;
     place-items: center;
     margin: -2px 0 2px 12px;
   }
   .perfume10ml-tiktok-page .product-title svg { width: 24px; height: 24px; }
   .perfume10ml-tiktok-page .product-title .rating-line { clear: right; }

   text-wrap: pretty để trình duyệt tránh bỏ trơ một hai chữ ở dòng cuối; máy cũ không
   hiểu thì bỏ qua, chữ vẫn xuống dòng như thường.

   --- Khoảng cách tiêu đề -> dòng "4.9 (3.763) | Đã bán 35,9k" (06/09/2026) ----------
   Đo trước khi sửa (khoảng cách MẮT NHÌN THẤY, từ chân chữ dòng cuối tiêu đề tới đỉnh
   chữ "4.9", không phải số margin): 26px. Trong khi hai dòng tiêu đề chỉ hở nhau 2,5px.
   Gấp mười lần như vậy thì mắt đọc ra là HAI KHỐI RỜI NHAU, không phải "đánh giá của sản
   phẩm này" - mà 4.9 sao và 3.763 lượt đánh giá là bằng chứng xã hội mạnh nhất của trang,
   nó phải dính liền tiêu đề mới đỡ được cho nhau.
   Nay margin 8px = mắt thấy 12px: vẫn gấp ~5 lần khoảng hở giữa các dòng tiêu đề nên
   không dính bết, mà đủ gần để đọc ra một cụm. Máy ≤360px dùng 7px (mắt thấy 11,3px).
   Lợi kèm theo cho CRO: khối tiêu đề thấp đi 14px, tức là băng cam kết - giá - nút chọn
   phân loại phía dưới được kéo lên đúng ngần ấy, thấy sớm hơn khi khách vừa mở trang. */
.perfume10ml-tiktok-page .product-title h1 {
  text-wrap: pretty;
}

/* =====================================================================
   v11 — Ô ảnh đầu sheet khác ảnh thẻ + popup LƯỚT nhiều ảnh (23/09/2026)
   =====================================================================
   Chủ dự án yêu cầu: khách chọn thẻ phân loại (Muse + Grace, Bộ 3, Muse...) thì ô ảnh
   cạnh tên/giá hiện MỘT GÓC CHỤP KHÁC của đúng phân loại đó (không lặp lại ảnh thẻ), và
   bấm vào ô ảnh đó mở popup xem 4-5 ảnh dạng lướt ngang. Dữ liệu ảnh khai trong
   landing-templates/v11.php ($v11VariantGallery -> sheetImage/gallery của từng variant),
   js/landing-desire.js dựng slide vào [data-image-gallery] nằm trong [data-image-viewer].
   Lướt bằng scroll-snap của trình duyệt (vuốt tay tự nhiên, không JS kéo thả); mũi tên +
   chấm + số đếm chỉ là phụ. */

/* Nhãn "5 ảnh" góc dưới ô ảnh đầu sheet - báo khách bấm vào là xem được cả bộ. */
.perfume10ml-tiktok-page .sheet-preview .sheet-preview-count {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .01em;
  pointer-events: none;
}

/* Popup nhiều ảnh: nằm trong .image-viewer (nền tối, nút × có sẵn). Khi khối này mở thì
   bỏ đệm ngang của .image-viewer để slide ăn hết bề ngang shell; máy không hiểu :has()
   vẫn chạy được với bề ngang trừ đệm 28px hai bên. */
.perfume10ml-tiktok-page .image-viewer .image-gallery {
  position: relative;
  width: calc(100vw - 56px);
  max-width: 520px;
}

.perfume10ml-tiktok-page .image-viewer:has(.image-gallery:not([hidden])) {
  padding-left: 0;
  padding-right: 0;
}

.perfume10ml-tiktok-page .image-viewer:has(.image-gallery:not([hidden])) .image-gallery {
  width: min(100vw, var(--shell-width));
  max-width: none;
}

.perfume10ml-tiktok-page .image-gallery-stage {
  position: relative;
}

.perfume10ml-tiktok-page .image-gallery-track {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.perfume10ml-tiktok-page .image-gallery-track::-webkit-scrollbar {
  display: none;
}

.perfume10ml-tiktok-page .image-gallery-slide {
  flex: 0 0 100%;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0 14px;
  display: grid;
  place-items: center;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

/* Ghi đè rule .image-viewer img (92vw/82vh) ở trên: ảnh vuông 720/1080, phủ hết bề
   ngang slide, chừa chỗ cho dòng đếm + gợi ý bên dưới. */
.perfume10ml-tiktok-page .image-viewer .image-gallery-slide img {
  width: 100%;
  max-width: 520px;
  height: auto;
  max-height: 70vh;
  border-radius: 12px;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

/* Mũi tên: ghi đè .image-viewer button (position: fixed, top 22px, right...) ở trên. */
.perfume10ml-tiktok-page .image-gallery .image-gallery-arrow {
  position: absolute;
  top: 50%;
  right: auto;
  left: auto;
  width: 38px;
  height: 38px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  /* Nền tối + viền trắng mờ: ảnh sản phẩm hầu hết nền kem/trắng, nút trắng mờ như nút ×
     của .image-viewer đặt lên là mất hút (đã chụp thử 23/09/2026). */
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 999px;
  background: rgba(0,0,0,.45);
  color: #fff;
  font-size: 0;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}

.perfume10ml-tiktok-page .image-gallery .image-gallery-arrow.is-prev {
  left: 6px;
}

.perfume10ml-tiktok-page .image-gallery .image-gallery-arrow.is-next {
  right: 6px;
}

.perfume10ml-tiktok-page .image-gallery .image-gallery-arrow svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.perfume10ml-tiktok-page .image-gallery .image-gallery-arrow[disabled] {
  opacity: .22;
  pointer-events: none;
}

/* Dòng dưới ảnh: tên phân loại · chấm · 2/5, rồi một dòng gợi ý mờ. */
.perfume10ml-tiktok-page .image-gallery-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 12px;
  padding: 0 16px;
  color: #fff;
  font-size: 13px;
  line-height: 1.3;
}

.perfume10ml-tiktok-page .image-gallery-foot b {
  min-width: 0;
  max-width: 50%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.perfume10ml-tiktok-page .image-gallery-dots {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.perfume10ml-tiktok-page .image-gallery-dots i {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.38);
  cursor: pointer;
  transition: width .18s ease, background .18s ease;
}

.perfume10ml-tiktok-page .image-gallery-dots i.is-active {
  width: 18px;
  background: #fff;
}

.perfume10ml-tiktok-page .image-gallery-count {
  font-variant-numeric: tabular-nums;
  opacity: .85;
}

.perfume10ml-tiktok-page .image-gallery-hint {
  display: block;
  margin-top: 6px;
  text-align: center;
  color: rgba(255,255,255,.6);
  font-size: 11.5px;
  line-height: 1.3;
}