/* Hoa Lan Tác Phẩm — giao diện storefront.
 * Phần [2]–[4] được chuyển NGUYÊN từ wireframe.html (đổi tên .btn -> .hbtn để không đụng Bootstrap; các rule ".m ..." của
 * bản mobile được đổi thành media query <768px và giữ nguyên độ ưu tiên selector). Phần [5] là bổ sung cho website thật.
 * Bootstrap 5 được nạp trước file này (dùng cho reboot, Modal popup, Offcanvas bộ lọc mobile và trang quản trị).
 */

/* [1] Điều chỉnh reboot của Bootstrap để khớp wireframe */
:root {
  --bs-body-line-height: normal;
}
body {
  line-height: normal;
}
a,
a:hover {
  color: inherit;
  text-decoration: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-weight: 700;
  line-height: normal;
  color: inherit;
}
p {
  margin: 0;
}
button,
input,
textarea {
  font-family: inherit;
}
img {
  max-width: 100%;
}
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--pk);
  outline-offset: 2px;
}

/* [2] CSS gốc của wireframe (desktop) */
:root {
  box-sizing: border-box;
  --pk: #e8547a;
  --ln: #ece8e3;
  --mut: #87697a;
  --gn: #2e8b57;
  --tx: #6a3350;
}
html {
  background: #fff;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family: Inter, system-ui, Arial, sans-serif;
  background: #fff;
  color: var(--tx);
  -webkit-font-smoothing: antialiased;
}
.site {
  background: #fff;
  color: var(--tx);
  font-size: 14px;
}
.site small {
  color: var(--mut);
  font-size: 12px;
}
s {
  color: var(--mut);
  font-weight: 400;
  font-size: 0.8em;
}
.site svg {
  flex: none;
}
[data-go] {
  cursor: pointer;
}
.ann {
  background: #eaf7ee;
  color: var(--gn);
  font-weight: 500;
  font-size: 12.5px;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  text-align: center;
}
.hd {
  background: #fff;
  border-bottom: 1px solid var(--ln);
}
.hrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 40px;
}
.burger {
  display: none;
}
.logo {
  display: flex;
  gap: 10px;
  align-items: center;
}
.lg {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #fff;
  border: 1px solid #f2d9e1;
  flex: none;
}
.lgo {
  background-image: url(../img/lgo.jpg);
  background-size: 92%;
  background-position: center;
  background-repeat: no-repeat;
}
.flg {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background-color: #fff;
  border: 1px solid #f2ccd7;
  margin-bottom: 12px;
}
.logo b {
  display: block;
  font-size: 18px;
  letter-spacing: 0.02em;
  line-height: 1.1;
}
.logo small {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
}
.sr {
  flex: 1 1 440px;
  max-width: 560px;
  display: flex;
  gap: 10px;
  align-items: center;
  height: 44px;
  border-radius: 22px;
  background: #f0edea;
  border: 1px solid #e6e2da;
  padding: 0 16px;
  color: var(--mut);
} /* rút ngắn hơn bản gốc (vẫn chừa chỗ cho 2 nút Tạo thiệp/Tạo banner) nhưng dài hơn bản trước đó 1 chút theo yêu cầu */
.hd-maker {
  display: flex;
  gap: 10px;
  flex: none;
}
/* 2 nút "Tạo thiệp"/"Tạo banner" ở header — thiết kế bắt mắt, có chủ đích phân cấp rõ theo mức độ hoàn thiện
   thật của từng công cụ (không chỉ đổi màu nền như bản trước):
   - .hd-pri ("Tạo thiệp", đã có trang + công cụ thật): nút CHÍNH — icon trong khung tròn riêng, nền gradient
     hồng, có dải sáng lướt qua lặp lại + quầng sáng "thở" theo nhịp để hút mắt, kèm badge "Mới" nảy nhẹ góc trên.
   - còn lại ("Tạo banner", chưa có công cụ thật): nút PHỤ — icon trong khung tròn viền mảnh, nền trắng, không
     có hiệu ứng liên tục (tránh 2 nút cùng "nhảy múa" gây rối mắt), chỉ đẹp lên khi hover. */
.hd-mk {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 18px 0 8px;
  border-radius: 23px;
  font:
    700 13.5px/1 "Inter",
    sans-serif;
  white-space: nowrap;
  transition:
    background 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    transform 0.2s;
}
.hd-mk-ic {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.2s,
    color 0.2s,
    transform 0.3s;
}

/* -- Nút phụ: Tạo banner -- */
.hd-mk:not(.hd-pri) {
  border: 1.5px solid var(--pk);
  color: var(--pk);
  background: #fff;
}
.hd-mk:not(.hd-pri) .hd-mk-ic {
  background: #fdeaf0;
  color: var(--pk);
}
.hd-mk:not(.hd-pri):hover {
  background: var(--pk);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -6px rgba(232, 84, 122, 0.5);
}
.hd-mk:not(.hd-pri):hover .hd-mk-ic {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
  transform: rotate(-8deg) scale(1.08);
}

/* -- Nút chính: Tạo thiệp -- */
.hd-mk.hd-pri {
  overflow: hidden;
  border: 1.5px solid transparent;
  background: linear-gradient(135deg, #ef6b8f, var(--pk));
  color: #fff;
  box-shadow: 0 8px 20px -6px rgba(232, 84, 122, 0.55);
  animation: hdPulse 2.2s ease-in-out infinite;
}
.hd-mk.hd-pri .hd-mk-ic {
  background: rgba(255, 255, 255, 0.28);
  color: #fff;
}
.hd-mk.hd-pri:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -6px rgba(232, 84, 122, 0.7);
}
.hd-mk.hd-pri:hover .hd-mk-ic {
  transform: rotate(8deg) scale(1.1);
}
/* dải sáng chéo lướt qua nút, lặp lại — kiểu hiệu ứng nút khuyến mãi hay dùng để hút mắt */
.hd-mk.hd-pri::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -45%;
  width: 35%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 100%);
  transform: skewX(-20deg);
  animation: hdShine 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes hdShine {
  0%,
  25% {
    left: -45%;
  }
  75%,
  100% {
    left: 120%;
  }
}
@keyframes hdPulse {
  0%,
  100% {
    box-shadow:
      0 8px 20px -6px rgba(232, 84, 122, 0.55),
      0 0 0 0 rgba(232, 84, 122, 0.45);
  }
  50% {
    box-shadow:
      0 8px 20px -6px rgba(232, 84, 122, 0.55),
      0 0 0 7px rgba(232, 84, 122, 0);
  }
}
/* badge "Mới" nảy nhẹ góc trên-phải nút */
.hd-new {
  position: absolute;
  top: -7px;
  right: -6px;
  font: 800 9.5px/1 "Inter", sans-serif;
  font-style: normal;
  color: #fff;
  background: linear-gradient(135deg, #ffb648, #ff8a3d);
  padding: 3px 7px;
  border-radius: 999px;
  box-shadow: 0 4px 10px -2px rgba(255, 138, 61, 0.6);
  animation: hdNewPop 2.2s ease-in-out infinite;
}
@keyframes hdNewPop {
  0%,
  100% {
    transform: scale(1) rotate(-4deg);
  }
  50% {
    transform: scale(1.14) rotate(-4deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hd-mk.hd-pri,
  .hd-new {
    animation: none;
  }
  .hd-mk.hd-pri::after {
    display: none;
  }
}
/* Hạ ngưỡng ẩn từ 1100px xuống ĐÚNG 991.98px — lúc đầu 2 nút này chỉ là chỗ để tạm, ẩn sớm cho an toàn không
   sao; giờ "Tạo thiệp" là công cụ thật đã có trang riêng, ẩn quá sớm (nhiều màn hình laptop phổ biến rơi đúng
   khoảng 1100-1366px, nhất là khi cửa sổ trình duyệt không phóng to hết cỡ) khiến khách khó tìm thấy nút.
   LƯU Ý: không hạ thấp hơn 991.98px được — dưới mốc đó header chuyển hẳn sang bố cục khác (ô tìm kiếm/thanh
   danh mục đổi thành position:absolute đè lên nhau, xem khối "@media (max-width:991.98px)" phía trên) mà
   2 nút này không nằm trong bố cục đó, hiện ra sẽ bị đè chồng lên ô tìm kiếm/danh mục (lỗi thật đã gặp khi thử
   hạ xuống 860px — đã sửa lại đúng 991.98px cho khớp đúng ranh giới đổi bố cục). */
@media (max-width: 991.98px) {
  .hd-maker {
    display: none;
  }
}
.mn {
  display: flex;
  gap: 28px;
  padding: 0 40px;
  border-top: 1px solid var(--ln);
}
.mn a {
  padding: 12px 0;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
}
.mn a:last-child {
  margin-left: auto;
  color: var(--pk);
}
.im {
  background-size: cover;
  background-position: center;
  background-color: #ffeef1;
}
.i0 {
  background-image: url(../img/i0.jpg);
}
.i1 {
  background-image: url(../img/i1.jpg);
}
.i2 {
  background-image: url(../img/i2.jpg);
}
.i3 {
  background-image: url(../img/i3.jpg);
}
.i4 {
  background-image: url(../img/i4.jpg);
}
.hbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, #ef6b8f, var(--pk));
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  padding: 13px 24px;
  border-radius: 999px;
  box-shadow: 0 14px 28px -8px rgba(194, 54, 111, 0.6);
  align-self: flex-start;
}
.hbtn.out {
  background: #fff;
  border: 1.5px solid var(--pk);
  color: var(--pk);
}
.hero {
  margin: 28px 40px 0;
  border-radius: 24px;
  background: #fff0f3;
  display: flex;
  overflow: hidden;
  height: 340px;
}
.hero .im {
  flex: 1;
}
.ht {
  flex: 1;
  padding: 44px 48px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
}
.ht em {
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  color: var(--pk);
  background: #ffe3ea;
  padding: 4px 12px;
  border-radius: 12px;
  animation: glow 3s ease-out infinite;
}
.ht h2 {
  margin: 0;
  font-size: 38px;
  line-height: 1.12;
}
.ht p {
  margin: 0;
  color: var(--mut);
}
.tabs3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 28px 40px 0;
}
.tab3 {
  background: #fff;
  border: 1.5px solid var(--ln);
  border-radius: 20px;
  padding: 18px 12px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.q0 {
  background-image: url(../img/q0.jpg);
}
.q1 {
  background-image: url(../img/q1.jpg);
}
.q2 {
  background-image: url(../img/q2.jpg);
}
.q3 {
  background-image: url(../img/q3.jpg);
}
.q4 {
  background-image: url(../img/q4.jpg);
}
.q5 {
  background-image: url(../img/q5.jpg);
}
.q6 {
  background-image: url(../img/q6.jpg);
}
.tab3 .pic .ph2 {
  height: 100%;
  aspect-ratio: 1;
  border-radius: 14px;
}
.tab3 {
  cursor: pointer;
}
.tab3.on {
  border-color: var(--pk);
  background: #fff8fa;
}
.im.sv {
  position: relative;
}
.im.sv svg {
  position: absolute;
  inset: 14px;
  width: calc(100% - 28px);
  height: calc(100% - 28px);
}
.tab3 .pic {
  position: relative;
  height: 190px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Quầng màu mờ phía sau minh họa — mỗi danh mục một sắc riêng để dễ phân biệt và bắt mắt hơn */
.tab3 .pic::before {
  content: "";
  position: absolute;
  inset: 6% 10%;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    var(--tabglow, #f9d2de) 0%,
    transparent 78%
  );
  opacity: 0.9;
  z-index: 0;
}
.tab3 .pic img,
.tab3 .pic .im {
  position: relative;
  z-index: 1;
}
.tabs3 .tab3:nth-child(1) {
  --tabglow: #ffd3e0;
}
.tabs3 .tab3:nth-child(2) {
  --tabglow: #ffc9da;
}
.tabs3 .tab3:nth-child(3) {
  --tabglow: #ffdcae;
}
.tabs3 .tab3:nth-child(4) {
  --tabglow: #c9e8d6;
}
.tabs3 .tab3:nth-child(5) {
  --tabglow: #cfe0ff;
}
.tab3.on .pic::before {
  opacity: 1;
}
.tab3 .pic svg {
  height: 100%;
  width: auto;
}
.tab3 b {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.tab3go {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--pk);
  opacity: 0.75;
}
.tab3go svg {
  rotate: 90deg;
}
.tab3:hover .tab3go,
.tab3.on .tab3go {
  opacity: 1;
}
.tab3.on .tab3go {
  color: var(--pkd, #c93a62);
}
.trio {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 20px 40px 0;
}
.tc {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  border-radius: 18px;
}
.tc .ti {
  position: relative;
  flex: none;
  border-radius: 12px;
  background-position: center 40%;
}
/* Huy hiệu icon nổi ở góc ảnh — lặp lại icon của tiêu đề để bắt mắt và dễ nhận diện từ xa */
.tc .tib {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 4px 12px rgba(60, 30, 20, 0.22);
  color: var(--ac);
}
.tc .tib svg {
  width: 17px;
  height: 17px;
}
.tc.g .tib {
  color: #1f5a34;
}
.tc.y .tib {
  color: #a5760a;
}
.tc.v .tib {
  color: #4a3a8a;
  width: 28px;
  height: 28px;
  top: 6px;
  left: 6px;
}
.tc.v .tib svg {
  width: 14px;
  height: 14px;
}
.tc:not(.v) .ti {
  flex: 1;
  height: auto;
  min-height: 84px;
}
.tc .tx,
.tc .fm {
  padding: 0 6px 4px;
}
.tc .tt {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14.5px;
  font-weight: 700;
}
.tc small {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
}
.tc.g {
  background: #dfeadf;
  color: #1f5a34;
}
.tc.g small {
  color: #46614f;
}
.tc.y {
  background: #ffe9b3;
  color: #7a4b00;
}
.tc.y small {
  color: #6f5522;
}
.tc.v {
  background: #e8e0f8;
  color: #4a3a8a;
  flex-direction: row;
  gap: 12px;
}
.tc.v small {
  color: #5d5188;
}
.tc.v .ti {
  width: 112px;
  height: auto;
  min-height: 120px;
}
.tc.v .fm {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 4px 4px 0;
}
.fr {
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.fr textarea {
  flex: 1;
  min-width: 0;
  resize: none;
  border: 1.5px solid #e4d9f7;
  border-radius: 14px;
  background: #fff;
  padding: 12px 14px;
  font:
    400 13px/1.55 Inter,
    system-ui,
    sans-serif;
  color: var(--tx);
  box-shadow: 0 2px 10px rgba(122, 91, 196, 0.08);
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.fr textarea::placeholder {
  color: #9d90c9;
}
.fr textarea:focus {
  outline: none;
  border-color: #7a5bc4;
  box-shadow: 0 0 0 3px rgba(122, 91, 196, 0.16);
}
.hbtn.vb {
  width: 100%;
  height: 46px;
  flex-direction: row;
  font-size: 14px;
  padding: 0 16px;
  gap: 8px;
  text-align: center;
  background: #7a5bc4;
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(122, 91, 196, 0.3);
  animation: none;
  transition:
    opacity 0.15s,
    box-shadow 0.15s;
}
.hbtn.vb:disabled {
  opacity: 0.45;
  box-shadow: none;
  cursor: not-allowed;
}
.fc {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}
.fc :is(button, span) {
  padding: 5px 12px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid #e4d9f7;
  font-size: 11.5px;
  color: #5b3fac;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.fc :is(button, span):hover {
  background: #f4effc;
  border-color: #c9b8ec;
}
.usp {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  padding: 22px 40px 0;
}
.usp-top {
  padding: 16px 40px 4px;
}
.usp-top .up {
  background: #fff9fb;
  border-color: #f6dbe2;
}
.up {
  display: flex;
  gap: 12px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--ln);
  border-radius: 14px;
  padding: 14px 16px;
}
.ui {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff0f3;
  color: var(--pk);
  display: flex;
  align-items: center;
  justify-content: center;
}
.up b {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.3;
}
.up small {
  font-size: 11px;
  color: var(--mut);
}
.giftcta {
  display: flex;
  gap: 20px;
  align-items: center;
  background: #e8e0f8;
  color: #4a3a8a;
  border-radius: 20px;
  padding: 18px;
}
.giftcta .gi {
  flex: none;
  width: 220px;
  align-self: stretch;
  border-radius: 14px;
  background-position: center 40%;
}
.giftcta .gc {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.giftcta .tt {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
}
.giftcta small {
  color: #5d5188;
}
.flash {
  margin: 0 40px;
  background: linear-gradient(135deg, #fff1ea, #ffe2d3);
  border: 1px solid #ffd0b0;
  border-radius: 20px;
  padding: 20px;
}
.fsh {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 16px;
}
.fst {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #e8663a;
}
.fst b {
  display: block;
  font-size: 16px;
  color: var(--tx);
}
.fst small {
  display: block;
  color: var(--mut);
  font-size: 12px;
  margin-top: 1px;
}
.cd {
  display: flex;
  align-items: center;
  gap: 6px;
}
.cd > span {
  color: #e8663a;
  font-weight: 700;
}
.cdb {
  background: #3a1c10;
  color: #fff;
  border-radius: 10px;
  padding: 6px 11px;
  min-width: 38px;
  text-align: center;
}
.cdb b {
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.1;
}
.cdb small {
  display: block;
  font-size: 9px;
  color: #f3c0a3;
  margin-top: 2px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.sec {
  padding: 32px 40px 0;
}
.trio + .sh {
  padding: 32px 40px 0;
  margin-bottom: 14px;
}
.trio + .sh + .tabs3 {
  padding-top: 0;
}
.sh {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
}
.sh h4 {
  margin: 0;
  font-size: 20px;
}
.sh a {
  color: var(--pk);
  font-weight: 600;
  font-size: 13px;
}
.chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.chips :is(a, span) {
  padding: 8px 16px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--ln);
  font-size: 13px;
}
.chips .on {
  background: var(--pk);
  border-color: var(--pk);
  color: #fff;
  font-weight: 600;
}
.chips.srt :is(a, span) {
  cursor: pointer;
  transition:
    border-color 0.15s,
    color 0.15s;
}
.chips.srt :is(a, span):not(.on):not(.lbl):hover {
  border-color: var(--pk);
  color: var(--pk);
}
.chips.srt :is(a, span).lbl {
  border: 0;
  background: none;
  padding: 8px 4px 8px 0;
  color: var(--mut);
  cursor: default;
}
.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
/* Lướt ngang (Bán chạy / Sản phẩm hot / Giảm giá trong ngày ở trang chủ): mỗi thẻ một cỡ cố định, cuộn ngang
   mượt tay trên di động (chạm kéo thật), có nút mũi tên cho máy tính — mỗi lần bấm trượt đúng 1 thẻ cho dễ
   nhìn theo từng sản phẩm, thay vì nhảy hẳn cả cụm gây khó theo dõi. */
.slide-wrap {
  position: relative;
}
.grid.grid-slide {
  display: flex;
  grid-template-columns: none;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.grid.grid-slide::-webkit-scrollbar {
  display: none;
}
.grid.grid-slide > .pc {
  flex: 0 0 auto;
  width: 220px;
  scroll-snap-align: start;
}
.sld-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  color: var(--tx);
  border: 1px solid var(--ln);
  box-shadow: 0 4px 14px rgba(60, 20, 30, 0.16);
  cursor: pointer;
  z-index: 2;
}
.sld-nav.prev {
  left: -18px;
}
.sld-nav.next {
  right: -18px;
}
.sld-nav:hover {
  background: var(--pk);
  color: #fff;
  border-color: var(--pk);
}
.sld-nav[hidden] {
  display: none;
}
.flash .sld-nav {
  box-shadow: 0 4px 14px rgba(60, 20, 30, 0.22);
}
.g3 {
  grid-template-columns: repeat(3, 1fr);
}
.pc {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 6px rgba(200, 90, 125, 0.13);
}
.pw {
  position: relative;
}
.pw .im {
  aspect-ratio: 1;
}
.hb {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  color: var(--pk);
  display: flex;
  align-items: center;
  justify-content: center;
}
.bg {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 10px;
  background: #fff;
}
.bg.or {
  color: #e8663a;
}
.bg.gr {
  color: var(--gn);
}
.pi {
  padding: 12px 14px 14px;
}
.pn {
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pp {
  color: var(--pk);
  font-weight: 700;
  font-size: 16px;
  margin: 4px 0;
}
.ps {
  font-size: 12px;
  color: var(--mut);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
}
.ps span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.ps svg {
  color: #e8a0b5;
}
.ps .sold {
  color: var(--gn);
  font-weight: 600;
}
.ps .sold svg {
  color: var(--gn);
}
.ps.big {
  font-size: 13.5px;
  gap: 8px 20px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--ln);
  border-radius: 12px;
}
.bc {
  padding: 20px 40px;
  font-size: 12.5px;
  color: var(--mut);
}
.wrap {
  padding: 0 40px;
}
.pt {
  margin: 0 0 16px;
  font-size: 32px;
}
.cl {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 28px;
  padding: 24px 40px 0;
}
.fl {
  background: #fff;
  border-radius: 14px;
  padding: 6px 18px 12px;
  border: 1px solid var(--ln);
  align-self: start;
}
.fl h5 {
  margin: 16px 0 4px;
  font-size: 14px;
}
.ck {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 9px 0;
  font-size: 13px;
}
.ck i {
  width: 16px;
  height: 16px;
  border: 1.5px solid #cfc8cc;
  border-radius: 4px;
  transition:
    background 0.18s,
    border-color 0.18s;
}
.ck.on i {
  background: var(--pk);
  border-color: var(--pk);
}
.sb {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.sb small {
  flex: 1;
}
.pill {
  padding: 8px 14px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--ln);
  font-size: 13px;
  display: flex;
  gap: 6px;
  align-items: center;
}
.pill.fb {
  border-color: #f3c7d4;
  color: var(--pk);
  font-weight: 600;
}
.fb {
  display: none;
}
.mean {
  padding: 48px 40px 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.mr {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.mr.rev .mt {
  order: 2;
}
.mt {
  padding: 0 24px;
  text-align: center;
}
.mt em {
  display: block;
  font:
    500 28px/1.2 "Dancing Script",
    cursive;
  color: var(--pk);
}
.mt h3 {
  margin: 8px 0 18px;
  font:
    500 22px/1.35 Montserrat,
    Inter,
    sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.mt p {
  margin: 0;
  font:
    400 14px/1.8 Montserrat,
    Inter,
    sans-serif;
  text-align: justify;
  color: var(--tx);
}
.mi {
  aspect-ratio: 4/3;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  transition:
    opacity 1s var(--ease),
    translate 1s var(--ease),
    scale 1s var(--ease),
    rotate 1s var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.mi::before {
  content: "";
  position: absolute;
  inset: -2%;
  background: inherit;
  background-size: cover;
  background-position: inherit;
  transition: transform 0.9s var(--ease);
}
.mi::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    100deg,
    transparent 35%,
    rgba(255, 255, 255, 0.75) 50%,
    transparent 65%
  );
  translate: -140% 0;
  pointer-events: none;
}
.mi.in::after {
  animation: sweep3 1.15s ease-out 0.35s 1;
}
@keyframes sweep3 {
  to {
    translate: 140% 0;
  }
}
.mr:hover .mi::before {
  transform: scale(1.08);
}
.soc {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.sc {
  background: #fff;
  border: 1px solid #f0e2e6;
  border-radius: 16px;
  padding: 12px;
  height: 320px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}
.av {
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: #fff;
  border: 1px solid #f2d9e1;
  flex: none;
}
.av.s {
  width: 34px;
  height: 34px;
}
.fh {
  display: flex;
  align-items: center;
  gap: 10px;
}
.fh b {
  display: block;
  font-size: 15px;
}
.fh svg {
  margin-left: auto;
}
.fa {
  display: flex;
  justify-content: space-between;
}
.fa span {
  padding: 6px 12px;
  border-radius: 8px;
  background: #f6eef1;
  font-size: 12.5px;
  font-weight: 600;
}
.post {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  border: 1px solid #f0e2e6;
  border-radius: 12px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.post .pt2 {
  display: flex;
  gap: 8px;
  align-items: center;
}
.post .pt2 b {
  display: block;
  font-size: 13px;
}
.post p {
  margin: 0;
  font-size: 13px;
}
.post .tags {
  color: #1877f2;
  font-size: 12.5px;
}
.pimg {
  flex: 1;
  min-height: 60px;
  border-radius: 8px;
}
.vid {
  position: relative;
  flex: 1;
  border-radius: 12px;
  overflow: hidden;
  color: #fff;
}
.vid::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(106, 51, 80, 0.72),
    rgba(106, 51, 80, 0) 42%,
    rgba(106, 51, 80, 0) 62%,
    rgba(106, 51, 80, 0.72)
  );
}
.vt,
.vbar {
  position: absolute;
  left: 12px;
  right: 12px;
}
.vt {
  top: 12px;
  display: flex;
  gap: 10px;
  align-items: center;
}
.vt b {
  display: block;
  font-size: 16px;
}
.vid .vt small {
  color: #fff;
  opacity: 0.92;
}
.play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 44px;
  border-radius: 12px;
  background: #e53935;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vbar {
  bottom: 10px;
  font-size: 13px;
  text-align: right;
}
.map {
  position: relative;
  flex: 1;
  border-radius: 12px;
  overflow: hidden;
}
.map > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.mo {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #fff;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #1a73e8;
  display: flex;
  gap: 6px;
  align-items: center;
  box-shadow: 0 1px 4px rgba(190, 110, 135, 0.3);
}
.ma {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  background: #fff;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 12px;
  color: var(--tx);
  box-shadow: 0 1px 4px rgba(190, 110, 135, 0.25);
}
.pg {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 28px;
}
.pg :is(a, span) {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--ln);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pg .on {
  background: var(--pk);
  color: #fff;
  border-color: var(--pk);
}
.dt {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 40px;
  padding: 0 40px;
}
.gl {
  display: flex;
  gap: 12px;
}
.th {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.th .im {
  width: 76px;
  height: 76px;
  border-radius: 10px;
}
.th .on {
  outline: 2px solid var(--pk);
}
.gm {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
} /* cột dọc: ảnh rồi tới hàng nhãn dịp tặng ngay sát dưới, không còn phụ thuộc chiều cao cột .inf bên cạnh */
.gm .im {
  aspect-ratio: 1;
  border-radius: 16px;
}
.inf {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.inf h1 {
  margin: 0;
  font-size: 28px;
  line-height: 1.2;
}
.inf h5 {
  margin: 0;
  font-size: 14px;
}
.tg {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
} /* hàng nhãn tĩnh (vd "Giao trong 2 giờ", "Bán chạy") phía trên tên sản phẩm — KHÔNG absolute ở đây, xem .pop-slide .tg bên dưới cho overlay popup */
.tg span {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.03em;
  padding: 6px 13px 6px 10px;
  border-radius: 999px;
  display: flex;
  gap: 6px;
  align-items: center;
  background: #fff;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);
}
.tg span::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.tg .gr {
  color: var(--gn);
}
.tg .or {
  color: #e8663a;
}
.pr {
  font-size: 28px;
  font-weight: 700;
  color: var(--pk);
}
.sz {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.sz div,
.sz button {
  padding: 10px;
  border: 1.5px solid var(--ln);
  border-radius: 12px;
  background: #fff;
  text-align: center;
  font-size: 12px;
  color: var(--mut);
}
.sz b {
  display: block;
  font-size: 14px;
  color: var(--tx);
}
.sz .on {
  border-color: var(--pk);
  background: #fff0f3;
  color: var(--pk);
  font-weight: 600;
}
.ta {
  height: 84px;
  border: 1.5px solid var(--ln);
  border-radius: 12px;
  background: #fff;
  padding: 12px;
  color: var(--mut);
  font-size: 13px;
}
.box {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--ln);
}
.box b {
  display: block;
}
.box > svg {
  color: var(--pk);
}
.cta {
  display: flex;
  gap: 12px;
}
.cta .hbtn {
  flex: 1;
  height: 50px;
  font-size: 15px;
}
.cta.st {
  display: none;
}
.ds {
  margin: 0;
  color: var(--tx);
  font-size: 14px;
  line-height: 1.65;
}
.ds p {
  margin: 0 0 10px;
}
.ds p:last-child {
  margin-bottom: 0;
}
.ds ul,
.ds ol {
  margin: 0 0 10px;
  padding-left: 22px;
}
.ds h3 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
  color: var(--tx);
}
.ds h4 {
  margin: 0 0 8px;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--tx);
}
/* Khối "Mẹo giữ hoa tươi lâu" — nổi bật hẳn so với chữ mô tả thường, có tiêu đề + icon + viền màu + link "Xem thêm" */
.tip-box {
  background: linear-gradient(135deg, #eaf8ee, #f3fbf1);
  border: 1.5px solid #bfe0c6;
  border-radius: 14px;
  padding: 14px 18px;
  margin-top: -4px;
}
.tip-box-h {
  display: flex;
  align-items: center;
  gap: 7px;
  font:
    700 13px/1 "Inter",
    sans-serif;
  color: #1f8a4c;
  margin-bottom: 6px;
}
.tip-box p {
  margin: 0;
  color: var(--tx);
  font-size: 13.5px;
  line-height: 1.6;
}
.tip-box-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  font:
    700 12.5px/1 "Inter",
    sans-serif;
  color: #1f8a4c;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.tip-box-more:hover {
  color: var(--pk);
}
.ft {
  margin-top: 44px;
  background: #fbe3ea;
  border-top: 1px solid #f2ccd7;
  display: grid;
  grid-template-columns: 1.5fr 1.5fr 1fr 1fr;
  line-height: 1.55;
  gap: 24px;
  padding: 36px 40px;
  font-size: 13px;
}
.ft b {
  display: block;
  margin-bottom: 10px;
  color: #c93a62;
}
.ft a,
.ft p {
  display: block;
  color: var(--tx);
  margin: 6px 0;
}
.mn a .dot {
  display: inline-block;
  background: #e53935;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 8px;
  margin-left: 6px;
  vertical-align: 1px;
}
#ev {
  scroll-margin-top: 90px;
}
.evs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.ev {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 6px rgba(200, 90, 125, 0.13);
  display: flex;
  flex-direction: column;
  transition:
    opacity 0.85s var(--ease),
    translate 0.85s var(--ease),
    scale 0.85s var(--ease),
    box-shadow 0.3s var(--ease),
    transform 0.3s var(--ease);
  transition-delay:
    calc(var(--i, 0) * 90ms), calc(var(--i, 0) * 90ms),
    calc(var(--i, 0) * 90ms), 0s, 0s;
}
.ev:hover {
  box-shadow: 0 16px 34px rgba(200, 90, 125, 0.28);
  transform: translateY(-7px);
}
.ev:hover .pw .im {
  transform: scale(1.07);
}
.ev:hover .mor {
  gap: 7px;
}
.ev .mor {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap 0.25s var(--ease);
}

/* Hiệu ứng xuất hiện RIÊNG cho thẻ Sự kiện — nảy nhẹ kiểu lò xo (spring) thay vì chỉ trượt lên đơn thuần như
   các khối khác của site, cho sống động/bắt mắt hơn. Độ so le giữa các thẻ cũng giãn ra (120ms thay vì 90ms
   mặc định) để cảm nhận rõ từng thẻ "nảy" vào lần lượt thay vì gần như cùng lúc. */
.js .evs .ev:not(.in) {
  opacity: 0;
  translate: 0 50px;
  scale: 0.86;
  rotate: -1.6deg;
}
.evs .ev {
  transition:
    opacity 0.75s cubic-bezier(0.34, 1.56, 0.64, 1),
    translate 0.75s cubic-bezier(0.34, 1.56, 0.64, 1),
    scale 0.75s cubic-bezier(0.34, 1.56, 0.64, 1),
    rotate 0.75s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.3s var(--ease),
    transform 0.3s var(--ease);
  transition-delay:
    calc(var(--i, 0) * 120ms), calc(var(--i, 0) * 120ms),
    calc(var(--i, 0) * 120ms), calc(var(--i, 0) * 120ms), 0s, 0s;
}
.ev .pw .im {
  transition: transform 0.6s var(--ease);
}
.ev .pw .im {
  aspect-ratio: 16/10;
}
.ev .eb {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ev h5 {
  margin: 0;
  font-size: 16px;
  line-height: 1.3;
}
.ev p {
  margin: 0;
  color: var(--mut);
  font-size: 13px;
  line-height: 1.55;
}
.dd {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 12.5px;
  color: var(--mut);
}
.mor {
  color: var(--pk);
  font-weight: 600;
  font-size: 13px;
  margin-top: 2px;
  cursor: pointer;
}
.sts {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 10px;
  background: #fff;
}
.sts.on {
  color: var(--gn);
}
.sts.soon {
  color: #b7791f;
}
.pop {
  position: relative;
  width: 360px;
  max-width: 100%;
  background: #141214;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(30, 10, 25, 0.5);
} /* thu nhỏ thêm 1 lần nữa theo yêu cầu (440px -> 360px) */
.pop .im {
  min-height: 0;
}
.pop-slide {
  min-height: 420px;
}
.pb {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 18px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.pb h3 {
  margin: 0;
  font-size: 21px;
  line-height: 1.25;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
}
.pb p {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.6;
  font-size: 13px;
}
.pb .dd {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.75);
  font-weight: 500;
}
.pb .ck {
  margin: 4px 0 0;
  font-size: 12px;
  color: #f3dde6;
  justify-content: flex-start;
  gap: 8px;
}
.pb .ck i {
  border-color: rgba(255, 255, 255, 0.55);
  pointer-events: none;
}
.pb .ck.on i {
  background: #fff;
  border-color: #fff;
}
.pb .ck.on i::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid var(--pk);
  border-width: 0 2px 2px 0;
  transform: rotate(40deg);
}
.xb {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: none;
  transition:
    background 0.2s,
    color 0.2s,
    transform 0.2s;
} /* đổi sang kiểu kính mờ, nổi rõ trên mọi ảnh sáng/tối, đồng bộ với popup ảnh */
.xb svg {
  opacity: 1;
}
.xb:hover {
  background: rgba(255, 255, 255, 0.95);
  color: var(--pk);
  transform: scale(1.08);
}
.xb:active {
  transform: scale(0.94);
}
.pd {
  display: flex;
  gap: 6px;
  align-items: center;
}
.pd i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e6cdd6;
  cursor: pointer;
}
.pd i.on {
  width: 22px;
  border-radius: 5px;
  background: var(--pk);
}
.fxs {
  position: relative;
  overflow: clip;
  background: var(--pb);
}
.fxs .ann,
.fxs .hd,
.fxs .ctb,
.fxs .hero,
.fxs .grid {
  position: relative;
  z-index: 1;
}
.t-snow {
  --pb: #e6f3ea;
  --ac: #c0392b;
  --hb: rgba(255, 255, 255, 0.72);
  --ab: linear-gradient(
    45deg,
    #c0392b 25%,
    #a93226 25% 50%,
    #c0392b 50% 75%,
    #a93226 75%
  );
  --gr:
    radial-gradient(ellipse 80% 14% at 50% 102%, #fff 62%, transparent 64%),
    linear-gradient(#cde7d6, #eaf5ee 50%, #fff);
  --pat:
    radial-gradient(circle, #fff 2px, transparent 3px) 0 0/60px 60px,
    radial-gradient(circle, rgba(255, 255, 255, 0.7) 1.5px, transparent 2.5px)
      30px 30px/60px 60px;
}
.t-tet {
  --pb: #ffe9dc;
  --ac: #d62828;
  --hb: rgba(255, 246, 228, 0.82);
  --ab: linear-gradient(90deg, #b71c1c, #d62828 50%, #b71c1c);
  --gr: linear-gradient(#ffd6cf, #ffe9dc 40%, #fff3dc);
  --pat:
    radial-gradient(circle, rgba(245, 196, 0, 0.6) 2px, transparent 3px) 0
      0/60px 60px,
    radial-gradient(circle, rgba(214, 40, 40, 0.16) 6px, transparent 7px) 30px
      30px/60px 60px;
}
.t-heart {
  --pb: #ffe6ee;
  --ac: #e8547a;
  --hb: rgba(255, 255, 255, 0.7);
  --ab: linear-gradient(90deg, #e8547a, #c93a62 50%, #e8547a);
  --gr: linear-gradient(#ffd0de, #ffe6ee 45%, #fff2f6);
  --pat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M30 42C8 26 18 10 30 22 42 10 52 26 30 42z' fill='%23e8547a' fill-opacity='.2'/%3E%3C/svg%3E");
}
.t-petal {
  --pb: #fde3ec;
  --ac: #e8547a;
  --hb: rgba(255, 255, 255, 0.7);
  --ab: linear-gradient(90deg, #f28aa8, #e8547a 50%, #f28aa8);
  --gr: linear-gradient(#fbd3e0, #fde3ec 45%, #fff3f7);
  --pat:
    radial-gradient(circle, rgba(255, 255, 255, 0.75) 10px, transparent 11px) 0
      0/60px 60px,
    radial-gradient(circle, rgba(232, 84, 122, 0.14) 14px, transparent 15px)
      30px 30px/60px 60px;
}
.t-tea {
  --pb: #fff4cf;
  --ac: #1e7a8c;
  --hb: rgba(255, 255, 255, 0.75);
  --ab: linear-gradient(90deg, #1e5f8a, #1e7a8c 50%, #1e5f8a);
  --gr: linear-gradient(#fff0b8, #fff7d9 45%, #eaf6f7);
  --pat:
    radial-gradient(circle, rgba(245, 184, 0, 0.5) 2px, transparent 3px) 0
      0/60px 60px,
    repeating-linear-gradient(
      0deg,
      rgba(30, 122, 140, 0.1) 0 1px,
      transparent 1px 30px
    );
}
.fxbg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: var(--gr);
}
.fxbg::before {
  display: none;
}
.fxa {
  position: relative;
  overflow: hidden;
  height: 40px;
  color: #fff;
  font-weight: 600;
  background: var(--ab);
  background-size: 200% 100%;
  animation: flow 8s linear infinite;
}
.t-snow .fxa {
  background-size: 40px 40px;
  animation: stripe 2s linear infinite;
}
.t-tet .fxa {
  border-bottom: 2px solid #f5c400;
  color: #ffe082;
}
.t-tea .fxa {
  color: #ffe9a0;
}
.fxa::after,
.ctb span:first-child::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 35%,
    rgba(255, 255, 255, 0.5) 50%,
    transparent 65%
  );
  transform: translateX(-100%);
  animation: sweep 3.6s ease-in-out infinite;
}
.fxa span {
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.lt {
  position: absolute;
  top: 40px;
  left: 0;
  right: 0;
  z-index: 5;
  display: flex;
  justify-content: space-around;
  pointer-events: none;
  height: 22px;
}
.lt i {
  font-style: normal;
  font-size: 14px;
  line-height: 1;
  animation: tw 1.8s ease-in-out infinite;
}
.lt i:nth-child(3n + 1) {
  animation-delay: 0.3s;
}
.lt i:nth-child(3n + 2) {
  animation-delay: 0.9s;
}
.t-snow .lt i {
  width: 9px;
  height: 12px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
  color: #ff4d4d;
}
.t-snow .lt i:nth-child(4n + 2) {
  color: #f5c400;
}
.t-snow .lt i:nth-child(4n + 3) {
  color: #3ddc84;
}
.t-snow .lt i:nth-child(4n) {
  color: #4da3ff;
}
.t-tet .lt i::before {
  content: "✿";
  color: #f5c400;
}
.t-heart .lt i::before {
  content: "♥";
  color: #e8547a;
}
.t-petal .lt i::before {
  content: "✿";
  color: #f28aa8;
}
.t-tea .lt i::before {
  content: "✦";
  color: #f5b800;
}
.crn {
  position: absolute;
  top: 52px;
  left: 14px;
  z-index: 5;
  pointer-events: none;
  transform-origin: 50% 0;
  animation: swing 3.2s ease-in-out infinite alternate;
}
.crn.r {
  left: auto;
  right: 14px;
  animation-delay: -1.6s;
}
/* Trang trí lớn ở hai lề trống (chỉ Tết/Giáng sinh có, xem Ornament::big) — chỉ hiện khi màn hình đủ rộng để không đè lên nội dung chính */
.crn-big {
  display: none;
}
@media (min-width: 1560px) {
  .crn-big {
    display: block;
    position: fixed;
    top: 50%;
    left: 26px;
    translate: 0 -46%;
    width: 150px;
    z-index: 1;
    pointer-events: none;
    filter: drop-shadow(0 10px 22px rgba(60, 20, 20, 0.18));
  }
  .crn-big.r {
    left: auto;
    right: 26px;
  }
  .crn-big svg {
    display: block;
    width: 100%;
    height: auto;
  }
}
.t-heart .crn {
  animation: beat 1.3s ease-in-out infinite;
}
.ctb {
  display: flex;
  gap: 10px;
  padding: 14px 40px 0;
  justify-content: center;
}
.ctb span {
  position: relative;
  overflow: hidden;
  flex: 1;
  max-width: 220px;
  text-align: center;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.85);
  border: 1.5px solid var(--ln);
  font-weight: 700;
  font-size: 13px;
}
.ctb span:first-child {
  background: var(--ac);
  border-color: var(--ac);
  color: #fff;
}
.ctb span:first-child::after {
  animation-delay: 1s;
}
.fxs .hd {
  background: rgba(255, 255, 255, 0.78);
}
.fxs .hero {
  background: var(--hb);
}
.fxs .hbtn {
  background: var(--ac);
  animation: pls 2.2s ease-in-out infinite;
}
.fxs .ht em {
  color: var(--ac);
  background: rgba(255, 255, 255, 0.85);
}

/* [3] keyframes và @media của wireframe */
@keyframes drift {
  to {
    transform: translateY(60px);
  }
}
@keyframes sweep {
  to {
    transform: translateX(100%);
  }
}
@keyframes flow {
  to {
    background-position: -200% 0;
  }
}
@keyframes stripe {
  to {
    background-position: 40px 0;
  }
}
@keyframes tw {
  50% {
    opacity: 0.25;
    transform: scale(0.7);
  }
}
@keyframes swing {
  from {
    transform: rotate(-7deg);
  }
  to {
    transform: rotate(7deg);
  }
}
@keyframes beat {
  0%,
  40%,
  100% {
    transform: scale(1);
  }
  20% {
    transform: scale(1.14);
  }
  30% {
    transform: scale(1.04);
  }
}
@keyframes pls {
  50% {
    transform: scale(1.05);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
  }
}
@media (prefers-reduced-motion: reduce) {
  .fxbg::before,
  .fxa,
  .fxa::after,
  .lt i,
  .crn,
  .fxs .btn,
  .ctb span::after {
    animation: none;
  }
}

/* [4] Bản mobile của wireframe (<768px) */
@media (max-width: 767.98px) {
  :root .usp {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 16px 16px 0;
  }
  .usp-top {
    padding: 12px 16px 2px;
  }
  :root .up {
    padding: 10px 12px;
    gap: 8px;
  }
  :root .ui {
    width: 34px;
    height: 34px;
  }
  :root .giftcta {
    flex-direction: column;
    padding: 14px;
  }
  :root .giftcta .gi {
    width: 100%;
    height: 130px;
  }
  :root .flash {
    margin: 0 16px;
    padding: 14px;
  }
  :root .fsh {
    gap: 10px;
  }
  :root .cdb {
    padding: 5px 8px;
    min-width: 32px;
  }
  :root .cdb b {
    font-size: 14px;
  }
  :root .chips.srt {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  :root .chips.srt::-webkit-scrollbar {
    display: none;
  }
  :root .chips.srt :is(a, span) {
    flex: none;
    white-space: nowrap;
  }
  :root .hrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
  }
  :root .sr {
    width: 100%;
    height: 42px;
  }
  :root .hero {
    margin: 16px 16px 0;
    height: auto;
    flex-direction: column-reverse;
    border-radius: 20px;
  }
  :root .hero .im {
    flex: none;
    height: 170px;
  }
  :root .ht {
    padding: 18px;
  }
  :root .ht h2 {
    font-size: 24px;
  }
  :root .tabs3 {
    gap: 8px;
    padding: 20px 16px 0;
  }
  :root .tab3 {
    padding: 12px 4px 10px;
    border-radius: 14px;
    gap: 6px;
  }
  :root .tab3 .pic {
    height: 100px;
  }
  :root .tab3 b {
    font-size: 11px;
  }
  .tab3go {
    font-size: 10px;
  }
  :root .trio {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 16px 16px 0;
  }
  :root .tc .ti {
    flex: none;
    height: 84px;
  }
  :root .tc .tt {
    font-size: 14.5px;
  }
  :root .tc small {
    font-size: 12.5px;
  }
  :root .sec {
    padding: 26px 16px 0;
  }
  :root .trio + .sh {
    padding: 26px 16px 0;
  }
  :root .grid,
  :root .g3 {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  :root .grid.grid-slide > .pc {
    width: 158px;
  }
  :root .sld-nav {
    width: 34px;
    height: 34px;
  }
  :root .sld-nav.prev {
    left: -10px;
  }
  :root .sld-nav.next {
    right: -10px;
  }
  :root .bc {
    padding: 14px 16px;
  }
  :root .wrap {
    padding: 0 16px;
  }
  :root .pt {
    font-size: 24px;
  }
  :root .cl {
    grid-template-columns: 1fr;
    padding: 18px 16px 0;
  }
  :root .fl {
    display: none;
  }
  :root .fb {
    display: flex;
  }
  :root .dt {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 0;
  }
  :root .gl {
    flex-direction: column-reverse;
    gap: 10px;
  }
  :root .th {
    flex-direction: row;
    padding: 0 16px;
  }
  :root .th .im {
    width: 64px;
    height: 64px;
  }
  :root .gm .im {
    border-radius: 0;
  }
  :root .inf {
    padding: 0 16px;
  }
  :root .inf h1 {
    font-size: 22px;
  }
  :root .cta.in {
    display: none;
  }
  :root .cta.st {
    display: flex;
    position: sticky;
    bottom: 0;
    z-index: 5;
    background: #fff;
    border-top: 1px solid var(--ln);
    padding: 10px 16px;
  }
  :root .mean {
    padding: 32px 16px 0;
    gap: 28px;
  }
  :root .mr {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  :root .mr .mt {
    order: 2;
  }
  :root .mt {
    padding: 0;
  }
  :root .mt em {
    font-size: 24px;
  }
  :root .mt h3 {
    font-size: 17px;
    margin-bottom: 12px;
  }
  :root .mt p {
    font-size: 13.5px;
  }
  :root .soc {
    grid-template-columns: 1fr;
  }
  :root .sc {
    height: 300px;
  }
  :root .ft {
    grid-template-columns: 1fr 1fr;
    padding: 28px 16px;
  }
  :root .ft > div:nth-child(-n + 2) {
    grid-column: 1/-1;
  }
  :root .evs {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  :root .pop {
    width: 280px;
    max-width: 84vw;
    margin: 0 auto;
  } /* thu nhỏ trên mobile — trước đó width:100% khiến popup chiếm gần hết màn hình, quá to. Thêm margin:auto để TỰ canh giữa (dưới 576px, khung ngoài của Bootstrap không co theo bề rộng nhỏ đã đặt, nếu không có margin:auto thẻ sẽ bị dạt sang trái thay vì nằm giữa) */
  :root .pop-slide {
    min-height: 460px;
  } /* bề rộng đã thu hẹp (280px) nên cần cao hơn 1 chút để chữ không bị dồn chật */
  :root #eventModal .modal-dialog {
    --bs-modal-width: 280px;
  } /* khớp lại bề rộng khung Bootstrap, tránh lộ khoảng trắng */
  :root .pb {
    padding: 0;
  }
  :root .pb h3 {
    font-size: 19px;
  }
  :root .ctb {
    padding: 12px 12px 0;
    gap: 6px;
  }
  :root .ctb span {
    font-size: 11px;
    padding: 8px 4px;
  }
  :root .crn svg {
    width: 38px;
    height: auto;
  }
}

/* [5] Bổ sung cho website thật */
.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.main {
  flex: 1 0 auto;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
.hrow {
  padding: 14px max(40px, calc(50% - 560px));
}
.ft {
  padding: 36px max(40px, calc(50% - 560px));
}
.hd,
.ann {
  width: 100%;
}
.sr input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--tx);
  font-size: 14px;
  padding: 0;
}
.sr input::placeholder {
  color: var(--mut);
  opacity: 1;
}
.sr:focus-within {
  border-color: var(--pk);
  background: #fff;
}
.sr svg {
  color: var(--mut);
}
img.im {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
button.im {
  border: 0;
  padding: 0;
  cursor: pointer;
}
.pc {
  display: block;
}
.hero .im {
  min-height: 0;
}
.tab3 .pic img {
  height: 100%;
  width: auto;
}
.map > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.map > iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.mapc .mf {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--tx);
}
.mapc .mf span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mapc .mf a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  font-weight: 600;
  color: #1a73e8;
  text-decoration: none;
}
.tab3:hover {
  border-color: var(--pk);
  box-shadow: 0 10px 26px rgba(232, 84, 122, 0.16);
  transform: translateY(-2px);
}
.pc {
  transition:
    box-shadow 0.15s,
    transform 0.15s;
}
.pc:hover {
  box-shadow: 0 6px 18px rgba(200, 90, 125, 0.22);
  transform: translateY(-2px);
}
.chips a:not(.on):hover {
  border-color: var(--pk);
  color: var(--pk);
}
button.hbtn {
  border: 0;
  cursor: pointer;
}
.hbtn.out {
  border: 1.5px solid var(--pk);
}
.hp {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.giftcta .gin {
  border: 1.5px solid #e4d9f7;
  border-radius: 14px;
  background: #fff;
  padding: 11px 14px;
  font:
    400 13px/1.55 Inter,
    system-ui,
    sans-serif;
  color: var(--tx);
  box-shadow: 0 2px 10px rgba(122, 91, 196, 0.08);
  width: 100%;
}
.giftcta .gin::placeholder {
  color: #9d90c9;
}
.giftcta .gin:focus {
  outline: none;
  border-color: #7a5bc4;
  box-shadow: 0 0 0 3px rgba(122, 91, 196, 0.16);
}
.giftcta textarea {
  display: block;
}
.ck {
  position: relative;
  cursor: pointer;
}
.ck input {
  position: absolute;
  opacity: 0;
  width: 16px;
  height: 16px;
  margin: 0;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.ck input:checked + i {
  background: var(--pk);
  border-color: var(--pk);
}
.ck input:focus-visible + i {
  outline: 2px solid var(--pk);
  outline-offset: 2px;
}
.ck i {
  flex: none;
}
button.pill {
  font: inherit;
  font-size: 13px;
  color: inherit;
  cursor: pointer;
}
.fl-clear {
  display: block;
  margin-top: 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--pk);
}
.pg .dis {
  opacity: 0.4;
}
.pg a:hover {
  border-color: var(--pk);
  color: var(--pk);
}
.pg a.on:hover {
  color: #fff;
}
.empty {
  padding: 48px 12px;
  text-align: center;
  color: var(--mut);
}
.okmsg {
  margin: 16px 40px 0;
  padding: 12px 16px;
  border-radius: 12px;
  background: #eaf7ee;
  color: var(--gn);
  font-weight: 600;
  display: flex;
  gap: 8px;
  align-items: center;
}
.sts.end {
  color: var(--mut);
}
.inl {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ft a.inl {
  display: inline;
  margin: 0;
  text-decoration: none;
}
.flg {
  display: block;
}
.ft .fl-txt {
  display: block;
  color: var(--tx);
  margin: 6px 0;
}
.mor {
  display: inline-block;
}
.sz button {
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
}
.sz button:hover:not(.on) {
  border-color: #e8a9bc;
}
.sz-note {
  font-size: 12px;
  color: var(--mut);
  margin: -6px 0 0;
}
.th button.im:hover {
  outline: 2px solid #f2b4c6;
}
.box .eta-body {
  flex: 1;
  min-width: 0;
}
.eta-form {
  display: flex;
  gap: 8px;
  margin: 8px 0 6px;
}
.eta-form input {
  flex: 1;
  min-width: 0;
  height: 36px;
  border: 1.5px solid var(--ln);
  border-radius: 10px;
  padding: 0 12px;
  font-size: 13px;
  color: var(--tx);
  background: #fff;
}
.eta-form input:focus {
  outline: none;
  border-color: var(--pk);
}
.eta-form button {
  height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: var(--pk);
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}
.eta-out {
  display: block;
}
.eta-out.ok {
  color: var(--gn);
  font-weight: 600;
}
.eta-out.err {
  color: #d13b3b;
}

/* Popup sự kiện (Bootstrap Modal + bố cục 2 cột của wireframe) */
.modal-backdrop {
  --bs-backdrop-bg: #4a1e32;
  --bs-backdrop-opacity: 0.6;
} /* bỏ backdrop-filter:blur — tuy đẹp nhưng khá nặng để trình duyệt vừa render blur vừa render animation chuyển ảnh cùng lúc, gây khựng. Tăng nhẹ độ đậm màu nền để vẫn nổi bật mà không cần blur */
#eventModal .modal-dialog {
  --bs-modal-width: 360px;
  --bs-modal-margin: 20px;
}
#eventModal .modal-content {
  background: transparent;
  border: 0;
  border-radius: 22px;
  --bs-modal-bg: transparent;
}
.pop-slide {
  position: relative;
}
.pop-slide .im {
  position: absolute;
  inset: 0;
} /* ảnh phủ kín toàn khung thay vì chia cột trái/phải — chữ nằm đè lên ảnh phía dưới thay vì cột riêng */
.pop-slide .tg {
  position: absolute;
  left: 18px;
  top: 16px;
  z-index: 2;
} /* chỉ overlay đè lên ảnh popup sự kiện; trang sản phẩm dùng .tg làm hàng nhãn thường, KHÔNG được absolute (lỗi cũ: .tg dùng chung 1 class cho 2 nơi khác nhau, khiến nhãn "Giao trong 2 giờ" ở trang sản phẩm bay lên góc trên-trái toàn trang) */
.pop-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 45%,
    rgba(20, 8, 14, 0.86) 100%
  );
  pointer-events: none;
  z-index: 1;
}
/* Chuyển giữa các sự kiện trong popup: trượt + mờ dần, slide cũ/mới chồng lên nhau trong lúc chuyển để không giật layout */
.pop.pop-anim {
  overflow: hidden;
}
.pop-slide.pop-mv {
  position: absolute;
  inset: 0;
  transition:
    opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1),
    translate 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, translate;
}
/* Ảnh MỚI: mờ + lệch nhẹ rồi hiện rõ dần lên TRÊN ảnh cũ */
.pop-slide.pop-mv.from-r {
  translate: 30px 0;
  opacity: 0;
}
.pop-slide.pop-mv.from-l {
  translate: -30px 0;
  opacity: 0;
}
/* Ảnh CŨ: CHỈ trượt nhẹ sang 1 bên, KHÔNG mờ đi — luôn giữ opacity:1 làm lớp nền thật phủ kín phía dưới suốt
   animation, nhờ vậy không lúc nào lộ ra khoảng hở ở giữa chừng chuyển ảnh (trước đó cả 2 ảnh cùng mờ dần cùng
   lúc, có khoảnh khắc cả 2 chưa đủ đậm, gây cảm giác giật/chưa mượt). */
.pop-slide.pop-mv.to-l {
  translate: -30px 0;
  opacity: 1;
}
.pop-slide.pop-mv.to-r {
  translate: 30px 0;
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .pop-slide.pop-mv {
    transition: none;
  }
}
button.xb {
  border: 0;
  padding: 0;
}
.pd button.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e6cdd6;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition:
    width 0.28s var(--ease),
    background 0.28s;
}
.pd button.dot.on {
  width: 22px;
  border-radius: 5px;
  background: var(--pk);
}

/* Bộ lọc mobile: Offcanvas của Bootstrap chứa cùng khối .fl */
.offcanvas-md {
  --bs-offcanvas-width: 320px;
}
.offcanvas-title {
  font-size: 16px;
}
.offcanvas-body > .fl {
  width: 100%;
}

/* Giao diện theo mùa (bật khi có sự kiện gắn theme đang diễn ra) */
.fxs main,
.fxs footer {
  position: relative;
  z-index: 1;
}
.fxs .hbtn.out {
  background: #fff;
  animation: none;
}
.fxs .hbtn.vb {
  background: #7a5bc4;
  animation: none;
}
.fxs .tab3 {
  position: relative;
  overflow: hidden;
  transition:
    opacity 0.85s var(--ease),
    translate 0.85s var(--ease),
    scale 0.85s var(--ease),
    box-shadow 0.2s,
    transform 0.2s,
    border-color 0.2s;
  transition-delay:
    calc(var(--i, 0) * 90ms), calc(var(--i, 0) * 90ms),
    calc(var(--i, 0) * 90ms), 0s, 0s, 0s;
}
.fxs .tab3.on {
  background: var(--ac);
  border-color: var(--ac);
  color: #fff;
}
.fxs .tab3.on::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 35%,
    rgba(255, 255, 255, 0.5) 50%,
    transparent 65%
  );
  transform: translateX(-100%);
  animation: sweep 3.6s ease-in-out infinite;
  pointer-events: none;
}
#fxc {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
}
.fxt {
  position: fixed;
  left: 14px;
  bottom: 14px;
  z-index: 4;
  background: #fff;
  border: 1px solid var(--ln);
  border-radius: 20px;
  padding: 7px 14px;
  font:
    600 12.5px Inter,
    system-ui,
    sans-serif;
  color: var(--tx);
  cursor: pointer;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
}
.fx-off .fxbg::before,
.fx-off .fxa,
.fx-off .fxa::after,
.fx-off .lt i,
.fx-off .crn,
.fx-off .hbtn,
.fx-off .tab3.on::after {
  animation: none !important;
}
.fx-off #fxc {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .fxs .fxbg::before,
  .fxs .fxa,
  .fxs .fxa::after,
  .fxs .lt i,
  .fxs .crn,
  .fxs .hbtn,
  .fxs .tab3.on::after {
    animation: none !important;
  }
}
.cta.st {
  display: none;
}

@media (max-width: 767.98px) {
  :root .offcanvas-md .fl {
    display: block;
  }
  :root .offcanvas-md .offcanvas-body .fl {
    border: 0;
    padding: 0 4px;
    background: transparent;
  }
  :root .okmsg {
    margin: 16px 16px 0;
  }
  :root .ft .fl-txt {
    margin: 6px 0;
  }
  :root .eta-form {
    flex-wrap: wrap;
  }
}

/* [6] Thẻ nhanh: ảnh 5 phần – chữ 5 phần (desktop), giữ bố cục dọc của wireframe trên mobile */
:root {
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}
.ti {
  position: relative;
  overflow: hidden;
}
.ti::before {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  transition: transform 0.8s var(--ease);
}
.tc:hover .ti::before {
  transform: scale(1.08);
}
.trio .tc .td,
.trio .tc .tgo {
  display: none;
}
.tc.g .td {
  color: #3d5646;
}
.tc.y .td {
  color: #6a5326;
}
@media (min-width: 768px) {
  .trio {
    gap: 16px;
  }
  .trio .tc {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: stretch;
    padding: 10px;
    min-height: 210px;
    border-radius: 20px;
    transition: box-shadow 0.3s var(--ease);
  }
  .trio .tc:hover {
    box-shadow: 0 14px 30px rgba(120, 80, 60, 0.16);
  }
  .trio .tc .ti {
    min-height: 190px;
    height: auto;
    flex: none;
    border-radius: 14px;
  }
  .trio .tc .tx {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 6px 10px 6px 0;
  }
  .trio .tc .tt {
    font-size: 19px;
  }
  .trio .tc small {
    font-size: 13px;
    margin: 0 0 4px;
    font-weight: 600;
  }
  .trio .tc .td {
    display: block;
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
  }
  .trio .tc .tgo {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    font-weight: 700;
    font-size: 13px;
  }
  .trio .tc .tgo svg {
    transform: rotate(-90deg);
    transition: transform 0.3s var(--ease);
  }
  .trio .tc:hover .tgo svg {
    transform: rotate(-90deg) translateY(4px);
  }
}
.up .ui {
  transition:
    background 0.3s var(--ease),
    color 0.3s var(--ease),
    transform 0.3s var(--ease);
}
.up:hover .ui {
  background: var(--pk);
  color: #fff;
  transform: rotate(-8deg) scale(1.08);
}
.hbtn {
  transition:
    box-shadow 0.25s,
    filter 0.25s;
}
.hbtn:hover {
  box-shadow: 0 8px 20px rgba(232, 84, 122, 0.32);
  filter: brightness(1.04);
}
.hbtn.out:hover {
  box-shadow: 0 8px 20px rgba(232, 84, 122, 0.18);
}
.main {
  overflow-x: clip;
}

/* [7] Hiệu ứng "cuộn tới đâu hiện tới đó". Chỉ bật khi có JS (html.js); JS thêm .in khi phần tử vào khung nhìn. */
:where(
  .trio .tc,
  .usp .up,
  .main .sh,
  .flash,
  .grid .pc,
  .gp2-card,
  .p2-card,
  .fb-photo,
  .blog-card,
  .giftcta,
  .mean .mr .mt,
  .mean .mr .mi,
  .soc .sc,
  .evs .ev,
  .bc,
  .pt,
  .chips.srt,
  .dt .gl,
  .dt .inf > *,
  .pg,
  .ft > div,
  .empty
) {
  transition:
    opacity 0.85s var(--ease),
    translate 0.85s var(--ease),
    scale 0.85s var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.grid .pc {
  transition:
    opacity 0.85s var(--ease),
    translate 0.85s var(--ease),
    box-shadow 0.2s,
    transform 0.2s;
  transition-delay: calc(var(--i, 0) * 90ms), calc(var(--i, 0) * 90ms), 0s, 0s;
}
.js
  :is(
    .trio .tc,
    .usp .up,
    .main .sh,
    .flash,
    .grid .pc,
    .gp2-card,
    .p2-card,
    .fb-photo,
    .blog-card,
    .giftcta,
    .mean .mr .mt,
    .mean .mr .mi,
    .soc .sc,
    .evs .ev,
    .bc,
    .pt,
    .chips.srt,
    .dt .gl,
    .dt .inf > *,
    .pg,
    .ft > div,
    .empty
  ):not(.in) {
  opacity: 0;
  translate: 0 30px;
}
/* Thẻ trong khối lướt ngang: hiện sẵn luôn, không chờ cuộn tới mới hiện — vì nằm ngoài khung nhìn theo CHIỀU NGANG
   (phải vuốt/bấm mũi tên mới thấy), không phải do chưa cuộn tới theo chiều dọc như các khối khác, nên không hợp
   để áp hiệu ứng "mờ dần hiện ra khi cuộn tới" (sẽ có thẻ không bao giờ hiện nếu khách không cuộn đúng đến đó). */
.js .grid-slide .pc:not(.in) {
  opacity: 1 !important;
  translate: 0 0 !important;
}
.js .hero > .im:not(.in) {
  translate: 0 0;
  scale: 0.93;
}
.js .mean .mr .mi:not(.in) {
  translate: 0 0;
  scale: 0.85;
  rotate: -2.2deg;
}
.js .mean .mr.rev .mi:not(.in) {
  rotate: 2.2deg;
}
.js .mean .mr .mt:not(.in) {
  translate: -46px 0;
}
.js .mean .mr.rev .mt:not(.in) {
  translate: 46px 0;
}
.js .dt .gl:not(.in) {
  translate: -34px 0;
}
.sp {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #c93a62, #e8547a, #f28aa8);
  transform-origin: 0 50%;
  transform: scaleX(0);
  z-index: 1100;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  :where(
    .trio .tc,
    .usp .up,
    .main .sh,
    .flash,
    .grid .pc,
    .gp2-card,
    .p2-card,
    .fb-photo,
    .blog-card,
    .giftcta,
    .mean .mr .mt,
    .mean .mr .mi,
    .soc .sc,
    .evs .ev,
    .bc,
    .pt,
    .chips.srt,
    .dt .gl,
    .dt .inf > *,
    .pg,
    .ft > div,
    .empty
  ),
  .grid .pc,
  .gp2-card,
  .p2-card,
  .fb-photo,
  .blog-card {
    transition: none;
  }
  .js
    :is(
      .trio .tc,
      .usp .up,
      .main .sh,
      .flash,
      .grid .pc,
      .gp2-card,
      .p2-card,
      .fb-photo,
      .blog-card,
      .giftcta,
      .mean .mr .mt,
      .mean .mr .mi,
      .soc .sc,
      .evs .ev,
      .bc,
      .pt,
      .chips.srt,
      .dt .gl,
      .dt .inf > *,
      .pg,
      .ft > div,
      .empty
    ):not(.in) {
    opacity: 1;
    translate: none;
    scale: none;
  }
  .tc:hover .ti::before {
    transform: none;
  }
  .mr:hover .mi::before {
    transform: none;
  }
  .ev:hover .pw .im {
    transform: none;
  }
  .ev:hover {
    transform: none;
  }
  .sp {
    display: none;
  }
}

/* [8] Header sticky, dòng thông báo chạy, tìm kiếm, ô ý tưởng mobile, animation bổ sung */
/* Bootstrap bật scroll-behavior:smooth cho cả trang: mọi lần cuộn (kể cả lần trình duyệt tự cuộn khi gõ vào ô nhập) đều bị làm chậm thành "kéo từ từ". Tắt đi; các chỗ cần mượt (nút lên đầu trang...) tự khai báo behavior:'smooth' trong JS. */
:root {
  scroll-behavior: auto;
}
/* Đích của liên kết #... cách mép trên để không bị header che. KHÔNG dùng scroll-padding-top trên html: nó làm trình duyệt tự cuộn trang lên khi gõ vào ô tìm kiếm nằm trong header dính */
#tabs,
#y-tuong,
#ev,
[data-pane] {
  scroll-margin-top: 110px;
}
.ann {
  padding: 0;
  display: block;
  height: 36px;
  overflow: hidden;
}
.ann.fxa {
  height: 40px;
}
.ann-mq {
  display: flex;
  height: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 5%,
    #000 95%,
    transparent
  );
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 5%,
    #000 95%,
    transparent
  );
}
.ann-track {
  flex: none;
  min-width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 64px;
  padding-right: 64px;
  animation: ann-run 34s linear infinite;
}
.ann-track .i {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.ann:hover .ann-track {
  animation-play-state: paused;
}
@keyframes ann-run {
  to {
    transform: translateX(-100%);
  }
}

.hd {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  transition:
    box-shadow 0.3s,
    background 0.3s;
}
.fxs .hd {
  position: sticky;
  top: 0;
  z-index: 50;
}
.hd::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    #f28aa8,
    #e8547a,
    #f28aa8,
    transparent
  );
  background-size: 200% 100%;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.hd.scrolled {
  box-shadow: 0 8px 26px rgba(200, 90, 125, 0.16);
}
.hd.scrolled::after {
  opacity: 1;
  animation: hd-glow 6s linear infinite;
}
.hd .lg {
  transition:
    rotate 0.5s var(--ease),
    scale 0.4s var(--ease);
}
.hd.scrolled .lg {
  scale: 0.86;
}
.hd .logo:hover .lg {
  rotate: -10deg;
  scale: 1.08;
}
@keyframes hd-glow {
  to {
    background-position: -200% 0;
  }
}
/* Desktop: lướt xuống khỏi đầu trang thì CHỈ ẩn ô tìm kiếm (mờ dần) — logo, 3 tab danh mục và 2 nút Tạo
   thiệp/Tạo banner vẫn còn nguyên, tự dãn ra lấp chỗ trống nhờ .hrow đã đổi sang space-between ở trên. 3 tab
   danh mục trước đó chỉ hiện khi cuộn rất sâu (.tabs-on, ~60% màn hình) — giờ hiện luôn ngay khi vừa cuộn
   (dùng chung mốc .scrolled với việc ẩn ô tìm kiếm), không cần đợi cuộn sâu nữa. */
@media (min-width: 768px) {
  .hd.scrolled .sr {
    flex: 0 0 0;
    max-width: 0;
    min-width: 0;
    padding: 0;
    border-width: 0;
    margin: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  } /* co luôn về 0 bề rộng (không chỉ ẩn trong suốt) -> hết chiếm chỗ, để logo/3 tab/2 nút thật sự chia 3 vùng đều nhau qua space-between, tab rơi đúng vào giữa */
  .hd.scrolled .hd-tabs {
    max-width: 760px;
    margin-left: 0;
    opacity: 1;
    visibility: visible;
  }
}

.sr {
  transition:
    background 0.3s,
    border-color 0.3s,
    box-shadow 0.3s,
    opacity 0.25s,
    visibility 0.25s,
    max-width 0.3s,
    flex-basis 0.3s,
    padding 0.3s,
    margin 0.3s,
    border-width 0.3s;
}
.sr:focus-within {
  background: #fff;
  border-color: var(--pk);
  box-shadow: 0 0 0 4px rgba(232, 84, 122, 0.13);
}
.sr > svg {
  transition:
    transform 0.35s var(--ease),
    color 0.3s;
}
.sr:focus-within > svg {
  color: var(--pk);
  transform: scale(1.15) rotate(-10deg);
}
.sr .go {
  flex: none;
  width: 32px;
  height: 32px;
  margin-right: -9px;
  border: 0;
  border-radius: 50%;
  background: var(--pk);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    transform 0.25s var(--ease),
    box-shadow 0.25s;
}
.sr .go:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(232, 84, 122, 0.42);
}
.sr .go svg {
  color: #fff;
}

/* Nút, thẻ, tiêu đề: hiệu ứng nhẹ */
.hbtn {
  position: relative;
  overflow: hidden;
}
.hbtn .rip {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  pointer-events: none;
  translate: -50% -50%;
  width: 12px;
  height: 12px;
  animation: rip 0.65s ease-out forwards;
}
.hbtn.out .rip {
  background: rgba(232, 84, 122, 0.22);
}
@keyframes rip {
  to {
    width: 340px;
    height: 340px;
    opacity: 0;
  }
}
.page:not(.fxs) .hero .hbtn,
.page:not(.fxs) .cta .hbtn:not(.out) {
  animation: glow 2.8s ease-out infinite;
}
@keyframes glow {
  0% {
    box-shadow: 0 0 0 0 rgba(232, 84, 122, 0.4);
  }
  70%,
  100% {
    box-shadow: 0 0 0 14px rgba(232, 84, 122, 0);
  }
}
.pc .pw {
  overflow: hidden;
}
.pc .pw .im {
  transition: transform 0.7s var(--ease);
}
.pc:hover .pw .im {
  transform: scale(1.07);
}
.bg.or {
  animation: bgp 2.4s ease-in-out infinite;
}
@keyframes bgp {
  50% {
    scale: 1.09;
  }
}
.fst svg {
  animation: twinkle 2.6s ease-in-out infinite;
}
@keyframes twinkle {
  50% {
    scale: 1.2;
    rotate: 14deg;
  }
}
.cdb b.tick {
  display: block;
  animation: tick 0.45s var(--ease);
}
@keyframes tick {
  0% {
    translate: 0 -7px;
    opacity: 0.15;
  }
  100% {
    translate: 0 0;
    opacity: 1;
  }
}
.tab3 .pic img {
  animation: bob 5.5s ease-in-out infinite;
  transition: transform 0.5s var(--ease);
}
.tab3:nth-child(2) .pic img {
  animation-delay: -1.8s;
}
.tab3:nth-child(3) .pic img {
  animation-delay: -3.4s;
}
.tab3:hover .pic img {
  transform: scale(1.07) rotate(-3deg);
}
@keyframes bob {
  50% {
    translate: 0 -8px;
  }
}
.ft a:not(.inl) {
  transition:
    translate 0.25s var(--ease),
    color 0.25s;
}
.ft a:not(.inl):hover {
  translate: 5px 0;
  color: var(--pk);
}
.pane-in {
  animation: pane-in 0.6s var(--ease) both;
}
@keyframes pane-in {
  from {
    opacity: 0;
    translate: 0 18px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
.hero {
  position: relative;
}
/* Quầng sáng mờ phía sau khối chữ — thêm chiều sâu, đỡ bẹt so với nền màu đặc trước đây */
.hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: -18%;
  left: -10%;
  width: 60%;
  height: 140%;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    rgba(255, 255, 255, 0.55),
    transparent 72%
  );
  pointer-events: none;
}
.hero .ht {
  position: relative;
  z-index: 1;
}
.hero .pt {
  position: absolute;
  top: -30px;
  z-index: 0;
  pointer-events: none;
  width: 13px;
  height: 17px;
  border-radius: 0 100% 0 100%;
  background: linear-gradient(
    135deg,
    rgba(242, 138, 168, 0.75),
    rgba(232, 84, 122, 0.45)
  );
  animation: pt-fall linear infinite;
  opacity: 0;
}
@keyframes pt-fall {
  0% {
    transform: translate3d(0, 0, 0) rotate(0);
    opacity: 0;
  }
  10% {
    opacity: 0.85;
  }
  90% {
    opacity: 0.7;
  }
  100% {
    transform: translate3d(var(--dx, 40px), 400px, 0) rotate(330deg);
    opacity: 0;
  }
}
.hero > .im {
  position: relative;
  overflow: hidden;
  animation: kb 16s ease-in-out infinite alternate;
}
.hero > .im::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 40%,
    rgba(255, 255, 255, 0.4) 50%,
    transparent 60%
  );
  translate: -130% 0;
  animation: sweep2 4.5s ease-in-out 1.2s infinite;
}
@keyframes sweep2 {
  0%,
  15% {
    translate: -130% 0;
  }
  45%,
  100% {
    translate: 130% 0;
  }
}
@keyframes kb {
  from {
    scale: 1;
  }
  to {
    scale: 1.06;
  }
}
.hero {
  overflow: hidden;
}
.totop {
  position: fixed;
  right: 18px;
  bottom: 22px;
  z-index: 60;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: var(--pk);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(232, 84, 122, 0.42);
  opacity: 0;
  visibility: hidden;
  translate: 0 14px;
  transition:
    opacity 0.3s,
    translate 0.3s var(--ease),
    visibility 0.3s,
    background 0.2s;
}
.totop.show {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
}
.totop:hover {
  background: #c93a62;
}
.page-detail .totop {
  bottom: 22px;
}

/* Mobile: header gọn (cuộn xuống thì thu logo, chỉ còn ô tìm kiếm), ô tìm kiếm và ô ý tưởng dễ dùng */
@media (max-width: 767.98px) {
  :root .hrow {
    padding: 10px 14px 12px;
    gap: 10px;
  }
  /* Header dính bằng offset âm: hàng logo tự cuộn khuất, ô tìm kiếm ở lại. Chiều cao header không đổi -> không giật */
  :root .hd {
    top: -60px;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: #fff;
  }
  :root .ann-mq {
    -webkit-mask-image: none;
    mask-image: none;
  }
  :root .sr {
    flex: none;
    height: 46px;
    background: #fff;
    border: 1.5px solid #f2d3dd;
    box-shadow: 0 4px 14px rgba(200, 90, 125, 0.12);
    padding: 0 7px 0 14px;
    gap: 8px;
    transition:
      opacity 0.25s,
      visibility 0.25s;
  }
  /* Cuộn đủ sâu để thanh danh mục nổi lên (.tabs-on) thì ẩn ô tìm kiếm bằng độ trong suốt — CHỦ Ý không đổi
     kích thước/margin của nó, vì header phải giữ nguyên chiều cao (kỹ thuật dịch âm phía trên dựa vào điều
     này) để không bị giật nội dung mỗi lần chuyển trạng thái; thanh danh mục vốn đã nổi đè lên trên nên không
     cần phần tìm kiếm phía dưới nhường chỗ. */
  :root .hd.tabs-on .sr {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  /* Trang không có thanh danh mục rút gọn (danh mục sản phẩm, chi tiết sản phẩm, tìm kiếm, Blog, Feedback...):
     không có gì thế chỗ nên ẩn ô tìm kiếm ngay khi vừa lướt xuống (dùng lại .scrolled đã có sẵn, không cần đợi
     mốc cuộn sâu như ở trang chủ) — đỡ chiếm chỗ màn hình nhỏ, kéo lên lại đầu trang thì hiện lại ngay. */
  :root .hd.scrolled:not(:has(.hd-tabs)) .sr {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  /* ...và thế chỗ bằng logo nhỏ canh giữa — đỡ trống trải, vẫn thấy thương hiệu khi đang cuộn xem sản phẩm */
  :root .hd-mini {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity 0.25s,
      visibility 0.25s;
  }
  :root .hd-mini .lg {
    width: 48px;
    height: 48px;
  } /* logo thu gọn = đúng cỡ và kiểu của logo ở đầu trang (.logo) */
  :root .hd-mini .hm-t {
    display: block;
    text-align: left;
  } /* cùng cấu trúc với .logo > div: b khối + small nội tuyến -> cùng khoảng cách dòng */
  :root .hd-mini b {
    display: block;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.1;
    color: var(--tx);
    white-space: nowrap;
  }
  :root .hd-mini small {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.18em;
    color: var(--mut);
  }
  /* Tương thích HTML cũ (nếu views/layouts/main.php chưa được cập nhật): <a class="hd-mini"><span class="lg lgo"></span><b>Hoa Lan Tác Phẩm</b></a>
     — vẫn hiện đúng kiểu HOA LAN / TÁC PHẨM chỉ nhờ file CSS này. HTML mới (có .hm-t) không dính các luật bên dưới vì b không còn là con trực tiếp. */
  :root .hd-mini > b {
    display: block;
    font-size: 0;
    line-height: 0;
    color: var(--tx);
    white-space: nowrap;
  }
  :root .hd-mini > b::before {
    content: "HOA LAN";
    display: block;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.1;
    color: var(--tx);
  }
  :root .hd-mini > b::after {
    content: "TÁC PHẨM";
    display: block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.18em;
    line-height: 1;
    margin-top: 6px;
    color: var(--mut);
  }
  :root .hd.scrolled:not(:has(.hd-tabs)) .hd-mini {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  :root .sr input {
    font-size: 16px;
  }
  :root .sr .go {
    margin-right: 0;
    width: 34px;
    height: 34px;
  }
  :root .fr {
    flex-direction: column;
    gap: 10px;
  }
  :root .fr textarea {
    flex: none;
    min-height: 104px;
    font-size: 16px;
    line-height: 1.5;
  }
  :root .giftcta .gin {
    font-size: 16px;
    height: 48px;
  }
  :root .fc {
    gap: 8px;
  }
  :root .fc :is(button, span) {
    padding: 7px 13px;
    font-size: 12.5px;
  }
  :root .totop {
    bottom: 88px;
    right: 14px;
    width: 42px;
    height: 42px;
  }
  :root .page-detail .totop {
    bottom: 86px;
  }
  :root .page-detail:has(.cta.st.has-pick) .totop {
    bottom: 172px;
  } /* thanh Gọi/Zalo dính đáy cao hơn khi có hàng chọn người (từ 2 người liên hệ trở lên) -> đẩy nút lên đầu trang lên theo, khỏi đè lên chip */
  :root .hero .pt:nth-of-type(n + 6) {
    display: none;
  }
  :root .ann-track {
    gap: 44px;
    padding-right: 44px;
    animation-duration: 28s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ann-track {
    animation: none;
    justify-content: center;
  }
  .ann-track[aria-hidden] {
    display: none;
  }
  .hd::after,
  .hero > .im,
  .hero > .im::after,
  .tab3 .pic img,
  .fst svg,
  .bg.or,
  .hbtn,
  .hero .pt,
  .cdb b.tick,
  .pane-in,
  .ht em,
  .mi.in::after {
    animation: none !important;
  }
  .hero .pt {
    display: none;
  }
}

/* [9] Ba nút danh mục thu gọn trong header: hiện khi các thẻ danh mục lớn đã cuộn khuất */
.hd-slot {
  display: contents;
}
.hd-mini {
  display: none;
}
.hd-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  max-width: 0;
  margin-left: -24px;
  opacity: 0;
  visibility: hidden;
  transition:
    max-width 0.55s var(--ease),
    margin 0.45s var(--ease),
    max-height 0.45s var(--ease),
    opacity 0.35s,
    visibility 0.35s;
}
.hd-tabs::-webkit-scrollbar {
  display: none;
}
.hd.tabs-on .hd-tabs {
  max-width: 470px;
  margin-left: 0;
  opacity: 1;
  visibility: visible;
}
.hdt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px 5px 5px;
  border-radius: 26px;
  background: #fff0f3;
  border: 1.5px solid #f6c9d5;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--pkd, #c93a62);
  transition:
    background 0.25s,
    border-color 0.25s,
    color 0.25s,
    box-shadow 0.25s,
    translate 0.25s var(--ease);
}
.hdt img {
  width: 30px;
  height: 30px;
  flex: none;
  object-fit: contain;
  border-radius: 50%;
  background: #fff7f9;
  padding: 2px;
  transition: rotate 0.4s var(--ease);
}
.hdt:hover {
  border-color: var(--pk);
  background: #ffe4ea;
  translate: 0 -1px;
  box-shadow: 0 3px 10px rgba(232, 84, 122, 0.18);
}
.hdt:hover img {
  rotate: -8deg;
}
.hdt.on {
  background: var(--pk);
  border-color: var(--pk);
  color: #fff;
  box-shadow: 0 6px 16px rgba(232, 84, 122, 0.32);
}
.hdt.on img {
  background: #fff;
}
.fxs .hdt.on {
  background: var(--ac);
  border-color: var(--ac);
}
/* Tablet/mobile: thanh nút phủ ngay dưới header (position:absolute, không thay đổi chiều cao header nên nội dung không bị đẩy/giật) */
@media (max-width: 991.98px) {
  /* Ô tìm kiếm và thanh danh mục rút gọn dùng CHUNG một "ô" — thanh danh mục THẾ CHỖ ô tìm kiếm ngay tại đó
     (không còn đổ xuống thành hộp nổi che nội dung bên dưới như trước, tránh cảm giác bị "đẩy/che" khi chạm). */
  .hd-slot {
    position: relative;
    display: block;
    width: 100%;
    height: 46px;
  }
  .hd-tabs {
    position: absolute;
    inset: 0;
    flex: none;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0 2px;
    justify-content: center;
    overflow-x: auto;
    scrollbar-width: none;
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 0.3s,
      visibility 0.3s;
  }
  .hd-tabs::-webkit-scrollbar {
    display: none;
  }
  .hd.tabs-on .hd-tabs {
    max-width: none;
    margin: 0;
    opacity: 1;
    visibility: visible;
  }
  :root .sr {
    position: absolute;
    inset: 0;
  }
}
@media (max-width: 767.98px) {
  :root .hd-tabs {
    justify-content: flex-start;
  }
  :root .hdt {
    flex: 1 1 0;
    min-width: max-content;
    justify-content: center;
    gap: 5px;
    padding: 4px 9px 4px 4px;
    font-size: 11px;
    letter-spacing: 0;
    text-transform: none;
  }
  :root .hdt img {
    width: 24px;
    height: 24px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hd-tabs,
  .hdt,
  .hdt img,
  .sr,
  .hd-mini {
    transition: none;
  }
}

/* [10] Trang danh mục: cập nhật kết quả không tải lại trang */
#cat-results {
  position: relative;
  min-height: 140px;
  transition: opacity 0.25s;
}
#cat-results.is-loading {
  opacity: 0.4;
  pointer-events: none;
}
#cat-results.is-loading::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -8px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--pk), transparent)
    no-repeat;
  background-size: 45% 100%;
  animation: load-bar 1s linear infinite;
  z-index: 2;
}
@keyframes load-bar {
  from {
    background-position: -60% 0;
  }
  to {
    background-position: 160% 0;
  }
}
.drawer-done {
  display: none;
}
@media (max-width: 767.98px) {
  :root .offcanvas-md .drawer-done {
    display: flex;
    width: 100%;
    margin-top: 18px;
    position: sticky;
    bottom: 0;
    box-shadow: 0 -10px 18px #fff;
  }
}
@media (prefers-reduced-motion: reduce) {
  #cat-results {
    transition: none;
  }
  #cat-results.is-loading::before {
    animation: none;
  }
}

/* [11] Tiêu đề mục: dòng chữ nghiêng + tiêu đề + đường kẻ tự vẽ ra + nút xem thêm dạng viên thuốc */
.sh {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 16px;
  margin-bottom: 20px;
}
.sh .sht {
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.sh .eb {
  display: block;
  font:
    500 23px/1 "Dancing Script",
    cursive;
  color: var(--pk);
  margin-bottom: 3px;
}
.sh h4 {
  font-size: 27px;
  line-height: 1.15;
  letter-spacing: 0.005em;
  color: var(--tx);
}
.sh .sl {
  flex: 1;
  position: relative;
  min-width: 28px;
  height: 2px;
  margin-bottom: 10px;
  border-radius: 2px;
  background: linear-gradient(90deg, #f5b9c9, rgba(245, 185, 201, 0));
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 1.1s 0.3s var(--ease);
}
.sh .sl::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 9px;
  height: 9px;
  translate: 0 -50%;
  border-radius: 50%;
  background: var(--pk);
  box-shadow: 0 0 0 4px #fde3ea;
}
.sh.in .sl,
html:not(.js) .sh .sl {
  transform: scaleX(1);
}
.sh a {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  padding: 7px 14px 7px 16px;
  border-radius: 20px;
  background: #fff0f3;
  color: var(--pk);
  font-weight: 700;
  font-size: 13px;
  transition:
    background 0.25s,
    color 0.25s,
    box-shadow 0.25s;
}
.sh a svg {
  transition: translate 0.25s var(--ease);
}
.sh a:hover {
  background: var(--pk);
  color: #fff;
  box-shadow: 0 8px 18px rgba(232, 84, 122, 0.3);
}
.sh a:hover svg {
  translate: 4px 0;
}
@media (max-width: 767.98px) {
  :root .sh {
    gap: 10px;
    margin-bottom: 16px;
  }
  :root .sh .eb {
    font-size: 20px;
  }
  :root .sh h4 {
    font-size: 22px;
  }
  :root .sh .sl {
    margin-bottom: 9px;
    min-width: 16px;
  }
  :root .sh a {
    padding: 6px 11px 6px 13px;
    font-size: 12px;
  }
  :root .sh-nl .sl {
    display: none;
  } /* mục không có nút: tiêu đề dài xuống dòng thì không để chấm hồng lơ lửng */
}
@media (prefers-reduced-motion: reduce) {
  .sh .sl {
    transform: scaleX(1);
    transition: none;
  }
}

/* [12] Tìm kiếm: nút xóa, gợi ý khi gõ, ghi chú kết quả gần đúng */
.sr {
  position: relative;
}
.sr input::-webkit-search-cancel-button {
  display: none;
}
.sug {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 10px);
  z-index: 60;
  background: #fff;
  border: 1px solid #f2d3dd;
  border-radius: 20px;
  box-shadow: 0 24px 54px rgba(120, 50, 80, 0.24);
  overflow: hidden auto;
  max-height: min(72vh, 580px);
  overscroll-behavior: contain;
  animation: sug-in 0.22s var(--ease);
  text-align: left;
}
.sug[hidden] {
  display: none;
}
@keyframes sug-in {
  from {
    opacity: 0;
    translate: 0 -8px;
  }
}
.sug-h {
  padding: 14px 18px 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--mut);
}
.sug-cats,
.sug-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 2px 18px 12px;
}
.sug-cat,
.sug-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 18px;
  background: #fff0f3;
  color: var(--pk);
  font-weight: 700;
  font-size: 13px;
  border: 1px solid transparent;
  transition:
    background 0.2s,
    color 0.2s;
}
.sug-chip {
  background: #fff;
  border-color: var(--ln);
  color: var(--tx);
  font-weight: 500;
}
.sug-cat:hover,
.sug-cat[aria-selected="true"],
.sug-chip:hover,
.sug-chip[aria-selected="true"] {
  background: var(--pk);
  color: #fff;
  border-color: var(--pk);
}
.sug-i {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 18px;
  color: var(--tx);
  cursor: pointer;
}
.sug-i img {
  width: 48px;
  height: 48px;
  border-radius: 11px;
  object-fit: cover;
  flex: none;
  background: #ffeef1;
}
.sug-i .t {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sug-i .n {
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sug-i .m {
  font-size: 12px;
  color: var(--mut);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sug-i .p {
  margin-left: auto;
  padding-left: 8px;
  font-weight: 700;
  color: var(--pk);
  white-space: nowrap;
  font-size: 14px;
}
.sug-i mark {
  background: #ffe3ea;
  color: var(--pkd, #c93a62);
  border-radius: 3px;
  padding: 0 1px;
}
.sug-i:hover,
.sug-i[aria-selected="true"] {
  background: #fff5f8;
}
.sug-note {
  padding: 8px 18px 4px;
  font-size: 12px;
  color: #b7791f;
}
.sug-all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 18px;
  border-top: 1px solid var(--ln);
  font-weight: 700;
  color: var(--pk);
  background: #fffafb;
}
.sug-all:hover,
.sug-all[aria-selected="true"] {
  background: #fff0f3;
}
.sug-none {
  padding: 20px 18px 6px;
  color: var(--mut);
  text-align: center;
  line-height: 1.55;
}
.srch-cats {
  margin-bottom: 16px;
  align-items: center;
}
.srch-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 16px;
  padding: 10px 14px;
  border-radius: 12px;
  background: #fff6e5;
  color: #8a5a12;
  font-size: 13px;
  line-height: 1.5;
}
.srch-note svg {
  flex: none;
  margin-top: 1px;
}
/* Mobile: mở rộng gần sát mép màn hình. Dùng absolute (không dùng fixed vì header mobile có transform làm fixed định vị sai) và thấp hơn để bàn phím không che nhiều */
@media (max-width: 767.98px) {
  :root .sug {
    left: -4px;
    right: -4px;
    max-height: min(50vh, 400px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .sug {
    animation: none;
  }
}

/* [13] Giá ẩn (enable_price = 0) và video đại diện */
.pp .ask,
.pr .ask {
  color: var(--pk);
  font-weight: 700;
}
.pp-ask {
  font-size: 14px;
}
.pr-ask {
  font-size: 22px;
}
.pw {
  position: relative;
}
.pw video.im {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  height: auto;
  object-fit: cover;
  background: #ffeef1;
}
.vbadge {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(74, 30, 50, 0.6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition:
    opacity 0.25s,
    scale 0.25s var(--ease);
}
.pc:hover .vbadge,
.pc.vplay .vbadge {
  opacity: 0;
  scale: 0.7;
} /* ẩn nút ▶ khi video đang chạy */
.gm video.im {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  height: auto;
  object-fit: cover;
  border-radius: 16px;
  background: #111;
}
.th button.im {
  position: relative;
}
.th .tp {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(74, 30, 50, 0.28);
  border-radius: inherit;
}
@media (prefers-reduced-motion: reduce) {
  .vbadge {
    transition: none;
  }
}

/* [14] Mục "Sự kiện" ở trang chủ */
.ev .newest {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 14px;
  background: var(--pk);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(232, 84, 122, 0.35);
}
.ev .eb .mor {
  margin-top: 2px;
  font-weight: 700;
  color: var(--pk);
}
@media (min-width: 768px) {
  .evs.n2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .evs.n1 {
    grid-template-columns: 1fr;
  }
  .evs.n1 .ev {
    flex-direction: row;
  }
  .evs.n1 .ev .pw {
    flex: 0 0 46%;
    min-height: 230px;
  }
  .evs.n1 .ev .pw .im {
    height: 100%;
    aspect-ratio: auto;
  }
  .evs.n1 .ev .eb {
    justify-content: center;
    padding: 22px 26px;
  }
  .evs.n1 .ev h5 {
    font-size: 22px;
  }
  .evs.n1 .ev p {
    font-size: 14.5px;
  }
}

/* ===== [Feedback / Blog Story] Banner trang chủ — nền sáng, chữ viết tay lớn, trang trí hoa lá ===== */
.promo2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.p2-card {
  position: relative;
  overflow: hidden;
  display: block;
  min-height: 210px;
  padding: 22px 26px;
  border-radius: 22px;
  background: linear-gradient(135deg, #fff7f9, #ffeef2);
  border: 1px solid #ffd9e3;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 10px 24px rgba(200, 90, 125, 0.12);
  transition:
    opacity 0.85s var(--ease),
    translate 0.85s var(--ease),
    box-shadow 0.2s,
    transform 0.2s;
  transition-delay: calc(var(--i, 0) * 90ms), calc(var(--i, 0) * 90ms), 0s, 0s;
}
.p2-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(200, 90, 125, 0.2);
}
.p2-deco {
  position: absolute;
  left: -18px;
  bottom: -14px;
  z-index: 0;
  opacity: 0.9;
  pointer-events: none;
}
.p2-deco svg {
  width: 110px;
  height: 110px;
}
.p2-heart {
  position: absolute;
  top: 18px;
  right: 20px;
  color: #f2a8c0;
  opacity: 0.8;
}
.p2-pt {
  position: absolute;
  width: 11px;
  height: 13px;
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}
.p2-kicker {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--pk);
}
.p2-ic {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  color: var(--pk);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(200, 90, 125, 0.25);
}
.p2-title {
  position: relative;
  z-index: 1;
  display: block;
  font:
    700 54px/1.1 "Dancing Script",
    cursive;
  color: #c2366f;
  margin: 6px 0 0;
}
.p2-sub {
  position: relative;
  z-index: 1;
  display: block;
  font:
    500 19px/1.3 "Dancing Script",
    cursive;
  font-style: normal;
  color: #e8547a;
  margin-bottom: 16px;
}
.p2-btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #ef6b8f, #c2366f);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  padding: 9px 18px;
  border-radius: 20px;
}
.p2-photo {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 38%;
  background-size: cover;
  background-position: center;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%);
  mask-image: linear-gradient(90deg, transparent, #000 22%);
}
.p2-bg .p2-title,
.p2-bg .p2-sub {
  color: #c2366f;
}

/* ===== [Feedback] Trang /danh-gia ===== */
.fb-hero {
  text-align: center;
  max-width: 680px;
  margin: 0 auto;
}
.fb-eb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--pk);
  background: #ffe3ea;
  padding: 5px 14px;
  border-radius: 14px;
}
.fb-hero h1 {
  margin: 14px 0 8px;
  font-size: 30px;
}
.fb-hero p {
  color: var(--mut, #8a6b78);
  margin: 0;
}

/* ===== Trang "Tạo thiệp" (/tao-thiep) — khung nhúng công cụ ngoài qua iframe.
   Đã BỎ kiểu "trình duyệt giả lập" (3 chấm + thanh địa chỉ) và bố cục 2 cột của bản trước — bị phản hồi trông
   nhỏ/cứng như màn hình iPad, công cụ lại bị bóp hẹp vì chia chỗ cho cột lợi ích bên cạnh. Giờ: 3 lợi ích xếp
   thành 1 hàng ngang GỌN phía trên, còn khung công cụ chiếm TRỌN bề ngang khả dụng của trang (hết cỡ container
   1200px), không còn khung giả lập nào che bớt — cảm giác như đang dùng 1 trang full-screen thật sự. ===== */

/* 1. Hero: giữ nguyên — nền gradient kem-hồng, 2 bông hoa lớn mờ nhạt trang trí 2 góc */
.tt-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(175deg, #fffdd0 0%, #fdf0f3 55%, #fbe4ea 100%);
  border-radius: 20px;
  padding: 56px 24px 64px;
  text-align: center;
  max-width: none;
}
.tt-flower {
  position: absolute;
  color: #e8547a;
  opacity: 0.3;
  pointer-events: none;
}
.tt-flower svg {
  display: block;
}
.tt-flower1 {
  top: -30px;
  left: -30px;
}
.tt-flower2 {
  bottom: -40px;
  right: -20px;
  transform: rotate(18deg);
  opacity: 0.22;
}
.tt-hero .fb-eb {
  position: relative;
  background: #fff;
}
.tt-hero h1 {
  position: relative;
  margin: 18px 0 10px;
  font: italic 600 clamp(2.2rem, 5vw, 2.8rem) / 1.15 "Cormorant Garamond", Georgia, serif;
  color: var(--tx);
}
.tt-hero p {
  position: relative;
  max-width: 34rem;
  margin: 0 auto;
  color: var(--mut);
  font-size: 1rem;
  line-height: 1.65;
}

/* 2. Hàng lợi ích ngang, gọn — thay cho cột sidebar chiếm chỗ của bản trước */
.tt-benefits-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: -30px 0 22px;
  position: relative;
}
.tt-bi {
  flex: 1 1 220px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid #f4e2e8;
  border-radius: 14px;
  box-shadow: 0 10px 26px -14px rgba(106, 51, 80, 0.22);
  padding: 14px 16px;
}
.tt-bi b {
  display: block;
  font-size: 13.5px;
  color: var(--tx);
}
.tt-bi span {
  font-size: 12px;
  color: var(--mut);
  line-height: 1.4;
}
.tt-ic2 {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ef6b8f, var(--pk));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 6px 14px rgba(232, 84, 122, 0.35);
}

/* 3. Khung công cụ — FULL chiều rộng, không khung giả lập, chỉ bo góc + đổ bóng nhẹ */
/* Tràn hết chiều rộng màn hình (edge-to-edge) — phá khung chứa 1200px dùng chung của site bằng kỹ thuật
   "full-bleed" quen thuộc (left:50%;margin-left:-50vw...). An toàn vì .main đã có overflow-x:clip sẵn (không
   phát sinh thanh cuộn ngang). Chỉ áp dụng cho RIÊNG khung công cụ — tiêu đề/lợi ích/CTA vẫn giữ gọn trong khung
   thường để dễ đọc, tránh chữ bị kéo dài hết cỡ màn hình rất khó đọc trên màn hình rộng. */
.tt-frame {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 20px 50px -20px rgba(106, 51, 80, 0.28);
  border-top: 1px solid #f0dde4;
  border-bottom: 1px solid #f0dde4;
}
.tt-frame iframe {
  display: block;
  width: 100%;
}
@media (max-width: 767.98px) {
  .tt-frame iframe {
    height: 85vh;
  }
}

/* 4. Dải CTA cuối trang — nền gradient hồng đậm, mời đặt hoa kèm thiệp vừa tạo */
/* Dải CTA cuối trang Tạo thiệp — thiết kế lại:
   1) Tiêu đề ĐỔI từ "Cormorant Garamond" nghiêng sang "Inter" đậm — Cormorant Garamond (kiểu chữ trang trí) bị
      THIẾU SẴN một số ký tự tiếng Việt có dấu ghép (ví dụ "ế", "ồ") ở 1 số hệ điều hành/trình duyệt, khiến trình
      duyệt phải tự tách dấu ra vẽ rời, hiển thị lỗi kiểu "Thiê´t kê´ xong rô`i?". Inter là font chính của toàn
      site, đã dùng ổn định với tiếng Việt ở mọi nơi khác — an toàn tuyệt đối, không còn rủi ro vỡ dấu.
   2) Thêm 2 bông hoa lớn mờ nhạt trang trí 2 góc (đồng bộ phần hero phía trên trang) cho đỡ trống trải.
   3) Nút "Đặt hoa ngay" thêm animation: quầng sáng trắng "thở" theo nhịp + dải sáng lướt qua lặp lại — đồng bộ
      kiểu hiệu ứng đã dùng cho các nút CTA khác của site. */
.tt-cta {
  position: relative;
  overflow: hidden;
  margin-top: 40px;
  border-radius: 20px;
  background: linear-gradient(135deg, #8a2f5f, #c2366f 55%, var(--pk));
  padding: 48px 24px;
  text-align: center;
}
.tt-cta .tt-flower {
  color: #fff;
  opacity: 0.1;
}
.tt-cta h2 {
  position: relative;
  margin: 0 0 8px;
  font: 800 1.6rem/1.25 "Inter", sans-serif;
  letter-spacing: -0.01em;
  color: #fff;
}
.tt-cta p {
  position: relative;
  margin: 0 0 24px;
  color: #fbdce6;
  font-size: 14.5px;
}
.tt-cta .hbtn {
  position: relative;
  overflow: hidden;
  background: #fff;
  color: #c2366f;
  box-shadow: 0 14px 30px -8px rgba(0, 0, 0, 0.35);
  animation: ttCtaPulse 2.2s ease-in-out infinite;
}
.tt-cta .hbtn:hover {
  filter: none;
  background: #fff5f8;
  transform: translateY(-2px);
}
.tt-cta .hbtn::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -45%;
  width: 35%;
  background: linear-gradient(100deg, rgba(194, 54, 111, 0) 0%, rgba(194, 54, 111, 0.16) 50%, rgba(194, 54, 111, 0) 100%);
  transform: skewX(-20deg);
  animation: ttCtaShine 2.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes ttCtaShine {
  0%,
  25% {
    left: -45%;
  }
  75%,
  100% {
    left: 120%;
  }
}
@keyframes ttCtaPulse {
  0%,
  100% {
    box-shadow:
      0 14px 30px -8px rgba(0, 0, 0, 0.35),
      0 0 0 0 rgba(255, 255, 255, 0.5);
  }
  50% {
    box-shadow:
      0 14px 30px -8px rgba(0, 0, 0, 0.35),
      0 0 0 8px rgba(255, 255, 255, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .tt-cta .hbtn {
    animation: none;
  }
  .tt-cta .hbtn::after {
    display: none;
  }
}

.fb-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.fb-photo {
  position: relative;
  display: block;
  aspect-ratio: 1/1;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 6px rgba(200, 90, 125, 0.13);
  transition:
    opacity 0.85s var(--ease),
    translate 0.85s var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.fb-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.fb-photo .fb-cap {
  position: absolute;
  inset: auto 0 0;
  padding: 16px 10px 8px;
  font-size: 12px;
  line-height: 1.3;
  color: #fff;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.65), transparent);
}
.fb-photo .fb-cap .fb-by {
  display: block;
  margin-top: 3px;
  font:
    500 15px/1.3 "Dancing Script",
    cursive;
  letter-spacing: 0.01em;
  color: #f8d9e4;
  opacity: 0.95;
} /* đổi sang đúng font chữ viết tay "Dancing Script" — giống hệt font của chữ "Bắt đầu từ đây" ở khối Chọn mẫu hoa */
.fb-summary {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  padding: 16px 20px;
  background: #fff7f9;
  border-radius: 14px;
}
.fb-summary > b {
  font-size: 34px;
  color: var(--pk);
}
.fb-stars {
  color: #f5b800;
  letter-spacing: 1px;
}
.fb-summary small {
  display: block;
  color: var(--mut, #8a6b78);
  font-size: 12.5px;
  margin-top: 2px;
}
.fb-reviews {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.fb-rev {
  background: #fff;
  border: 1px solid var(--ln);
  border-radius: 14px;
  padding: 16px;
}
.fb-rh {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.fb-av {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}
.fb-av-i {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pk);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
}
.fb-who b {
  display: block;
  font-size: 14px;
}
.fb-txt {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--tx);
  margin: 0 0 8px;
}
.fb-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--mut, #8a6b78);
}

/* ===== [Blog Story] Trang /blog và /blog/{slug} ===== */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.blog-card {
  display: block;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 6px rgba(200, 90, 125, 0.13);
  text-decoration: none;
  color: inherit;
  transition:
    opacity 0.85s var(--ease),
    translate 0.85s var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.blog-cv {
  height: 190px;
  background-size: cover;
  background-position: center;
}
.blog-bd {
  padding: 16px 18px;
}
.blog-bd h3 {
  margin: 0 0 6px;
  font-size: 17px;
  color: var(--tx);
}
.blog-bd p {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--mut, #8a6b78);
  line-height: 1.6;
}
.blog-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--pk);
}
.blog-art {
  max-width: 760px;
  margin: 0 auto;
}
.blog-art h1 {
  font-size: 26px;
  text-align: center;
  margin: 0 0 20px;
}
.blog-cover {
  height: 320px;
  border-radius: 16px;
  background-size: cover;
  background-position: center;
  margin-bottom: 20px;
}
.blog-body {
  font-size: 15px;
  line-height: 1.8;
}
.blog-body h3 {
  font-size: 19px;
  margin: 22px 0 10px;
}
.blog-body h4 {
  font-size: 16px;
  margin: 18px 0 8px;
}

/* ===== Trang chi tiết sự kiện (/su-kien/<slug>) — tái dùng khung .blog-art/.blog-cover/.ds của trang Blog,
   chỉ thêm badge trạng thái + ngày + nút CTA riêng. KHÔNG dùng lại class ".sts" của thẻ sự kiện (nó có
   position:absolute, chỉ đúng khi nằm trong khung ảnh ".pw" — dùng ngoài ngữ cảnh đó sẽ bay lệch vị trí, đúng
   kiểu lỗi ".tg" từng gặp). ".ev-tag" dưới đây là bản TĨNH, cùng màu, dùng được ở bất kỳ đâu. */
.ev-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  justify-content: center;
  margin-bottom: 10px;
}
.ev-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 6px rgba(200, 90, 125, 0.18);
}
.ev-tag.on {
  color: var(--gn);
}
.ev-tag.soon {
  color: #b7791f;
}
.ev-tag.end {
  color: var(--mut);
}
.ev-date {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--mut);
  font-size: 13px;
}
.ev-lead {
  margin: 0 0 18px;
  color: var(--mut);
  font-size: 15px;
  line-height: 1.65;
  text-align: center;
}
.ev-cta {
  display: flex;
  width: max-content;
  margin: 24px auto 0;
}

@media (max-width: 767.98px) {
  /* Mỗi banner chiếm trọn 1 hàng riêng (2 hàng, không còn ngồi chung đôi) — đủ chỗ hiện cỡ chữ dễ đọc hơn */
  :root .promo2 {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  :root .p2-card {
    min-height: 170px;
    padding: 18px 20px;
  }
  :root .p2-title {
    font-size: 38px;
  }
  :root .p2-sub {
    font-size: 14px;
    margin-bottom: 12px;
  }
  :root .p2-kicker {
    font-size: 10.5px;
  }
  :root .p2-btn {
    padding: 8px 14px;
    font-size: 12px;
  }
  :root .p2-deco svg {
    width: 80px;
    height: 80px;
  }
  :root .p2-heart svg {
    width: 17px;
    height: 17px;
  }
  :root .p2-photo {
    width: 32%;
  }
  :root .fb-gallery {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  :root .fb-reviews {
    grid-template-columns: 1fr;
  }
  :root .fb-hero h1 {
    font-size: 24px;
  }
  :root .blog-grid {
    grid-template-columns: 1fr;
  }
  :root .blog-art h1 {
    font-size: 21px;
  }
  :root .blog-cover {
    height: 200px;
  }
}

/* ===== [Chọn mẫu hoa] Khối chọn danh mục — icon/chữ bên trái, ảnh lớn bên phải, viền màu theo danh mục ===== */
.gift-pick {
  padding-top: 18px;
}
.gp-dots {
  display: none;
}
.gp-grid.gp2 {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 22px;
}
/* Hơn 3 danh mục (.gp-wrap.gp-slide, xem views/home.php): chuyển lưới sang LƯỚT NGANG kể cả trên desktop/tablet
   — tái dùng đúng cơ chế mũi tên ".sld-nav"/"slide-wrap" và chấm trang ".gp-dot" đã có sẵn cho các khối lướt
   ngang khác của site (album, sản phẩm...), không cần thêm JS mới. Dưới 767.98px đã có khối @media riêng tự lo
   phần lướt ngang + chấm trang (áp dụng cho MỌI số lượng danh mục), không đụng tới khối này.
   Bản "chuyên nghiệp hoá": 3 điểm sửa so với bản đầu —
   1) Chừa hẳn 1 dải trống 2 bên (padding) riêng cho mũi tên đứng, KHÔNG để mũi tên đè lên chữ của thẻ cuối cùng
      đang hiện (lỗi thực tế đã gặp: mũi tên "next" nằm chồng lên đoạn mô tả của thẻ thứ 3).
   2) Thêm dải mờ dần (fade) ngay mép trong của dải trống đó — báo hiệu "còn nội dung" một cách tinh tế, kiểu
      carousel chuyên nghiệp hay dùng, thay vì thẻ kế tiếp bị cắt cụt lủn giữa chừng trông như lỗi hiển thị.
   3) Thẻ co giãn theo % bề rộng khung (thay vì px/vw cố định) để LUÔN hé lộ đúng 1 góc thẻ kế tiếp dù màn hình
      to nhỏ thế nào, không còn tình trạng gần như vừa khít 3 thẻ (không rõ còn thẻ nữa hay không). */
@media (min-width: 768px) {
  .gp-wrap.gp-slide {
    padding: 0 48px;
  }
  .gp-wrap.gp-slide .gp-grid.gp2 {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .gp-wrap.gp-slide .gp-grid.gp2::-webkit-scrollbar {
    display: none;
  }
  .gp-wrap.gp-slide .gp2-card {
    flex: 0 0 auto;
    width: calc((100% - 44px) / 3.25);
    min-width: 250px;
    scroll-snap-align: start;
  }
  /* Mũi tên đứng hẳn trong dải đệm riêng (left:0/right:0 của .gp-wrap đã có padding 48px) — không còn đè lên
     chữ của thẻ nào nữa, luôn nằm gọn trên nền trắng của trang. (Đã bỏ dải mờ trắng 2 bên theo yêu cầu — nhìn
     như viền trắng thừa đè lên góc thẻ, bỏ đi cho thẻ hiện rõ nguyên vẹn không bị che.) */
  .gp-wrap.gp-slide .sld-nav.prev {
    left: 0;
  }
  .gp-wrap.gp-slide .sld-nav.next {
    right: 0;
  }
  .gp-wrap.gp-slide .gp-dots {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-top: 16px;
  }
  .gp-wrap.gp-slide .gp-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #e9d5dc;
    transition: width 0.25s, background 0.25s;
  }
  .gp-wrap.gp-slide .gp-dot.on {
    width: 20px;
    border-radius: 4px;
    background: var(--pk);
  }
}
.gp2-card {
  display: flex;
  align-items: stretch;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  border: 2px solid #f0e4e8;
  box-shadow: 0 10px 26px rgba(60, 20, 30, 0.1);
  text-decoration: none;
  color: inherit;
  transition:
    opacity 0.85s var(--ease),
    translate 0.85s var(--ease),
    box-shadow 0.2s,
    transform 0.2s,
    border-color 0.2s;
  transition-delay:
    calc(var(--i, 0) * 90ms), calc(var(--i, 0) * 90ms), 0s, 0s, 0s;
}
.gp2-card:hover {
  box-shadow: 0 16px 34px rgba(60, 20, 30, 0.18);
  border-color: currentColor;
}
.gp2-card.on {
  border-color: currentColor;
  box-shadow:
    0 10px 26px rgba(60, 20, 30, 0.1),
    0 0 0 3px color-mix(in srgb, currentColor 18%, transparent);
}
.gp2-rose {
  border-color: #f0a9c2;
  background: #fdeef3;
}
.gp2-green {
  border-color: #9cd6ae;
  background: #eaf8ee;
}
.gp2-gold {
  border-color: #edc374;
  background: #fdf3e1;
}
.gp2-text {
  flex: 1 1 52%;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.gp2-text {
  flex: 1 1 100%;
  align-items: center;
  text-align: center;
  padding: 30px 24px;
} /* ảnh đã ẩn -> cột chữ chiếm toàn bộ thẻ, căn giữa */
.gp2-ic {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
.gp2-text h3 {
  margin: 0 0 6px;
  font-size: 19px;
  color: var(--tx);
}
.gp2-text p {
  margin: 0 0 14px;
  font-size: 12.5px;
  color: var(--mut, #8a6b78);
  line-height: 1.5;
}
.gp2-photo {
  flex: 1 1 46%;
  position: relative;
  min-height: 190px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  overflow: hidden;
} /* đổi contain->cover: ảnh PHỦ KÍN cả khung hình, không còn khoảng trống lộ nền ở quanh ảnh nữa (trước đó contain hay để hở viền quanh ảnh, mà ảnh sản phẩm lại có nền trắng studio -> nhìn như 1 mảng trắng xấu chen giữa thẻ màu) */
.gp2-photo {
  display: none;
} /* theo yêu cầu: ẩn hẳn ảnh, chữ căn giữa chiếm toàn bộ thẻ */
.gp2-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 35%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 65%
  );
  translate: -130% 0;
}
.gp2-card:hover .gp2-photo::after {
  animation: gpsweep 1s ease-out;
}
@keyframes gpsweep {
  to {
    translate: 130% 0;
  }
}
.gp-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--tx);
  font-size: 12px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  animation: gpbadge 2.6s ease-in-out infinite;
}
@keyframes gpbadge {
  0%,
  100% {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }
  50% {
    box-shadow:
      0 2px 8px rgba(0, 0, 0, 0.15),
      0 0 0 5px rgba(232, 84, 122, 0.18);
  }
}
@media (prefers-reduced-motion: reduce) {
  .gp-badge {
    animation: none;
  }
  .gp2-card:hover .gp2-photo::after {
    animation: none;
  }
}
.gp-btn {
  flex: none;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background:
    linear-gradient(135deg, #ef6b8f, #c2366f),
    linear-gradient(
      100deg,
      transparent 42%,
      rgba(255, 255, 255, 0.7) 50%,
      transparent 58%
    );
  background-size:
    100% 100%,
    240% 100%;
  background-position:
    0 0,
    200% 0;
  background-repeat: no-repeat;
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 20px;
  position: relative;
}
.gp-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, #ef6b8f, #c2366f);
  opacity: 0.55;
  animation: gpBtnPulse 2.2s ease-out infinite;
  z-index: -1;
} /* vòng sáng tự nảy ra rồi mờ dần quanh nút, lặp lại — thu hút chú ý vào nút bấm */
.gp-btn {
  animation:
    gpBtnBounce 2.2s ease-in-out infinite,
    gpBtnShine 2.6s ease-in-out 0.5s infinite;
} /* nút tự phồng nhẹ theo nhịp (khớp vòng sáng) + 1 vệt sáng tự quét qua ngay trên nền nút (2 lớp nền: màu chính + vệt sáng, vệt luôn nằm gọn trong khung nút nhờ border-radius tự cắt theo nền) */
@keyframes gpBtnPulse {
  0% {
    transform: scale(1);
    opacity: 0.55;
  }
  70% {
    transform: scale(1.35);
    opacity: 0;
  }
  100% {
    transform: scale(1.35);
    opacity: 0;
  }
}
@keyframes gpBtnBounce {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.06);
  }
}
@keyframes gpBtnShine {
  0%,
  15% {
    background-position:
      0 0,
      200% 0;
  }
  70%,
  100% {
    background-position:
      0 0,
      -100% 0;
  }
}

/* Gợi ý "bấm vào đây" — mũi tên cong + nhãn, chỉ ở thẻ đầu tiên (Hoa Lan), tự mờ hiện rồi mờ đi, lặp lại sau vài
   giây (không đứng yên liên tục, đỡ gây rối mắt khi khách ở lại trang lâu). */
/* .gp2-hint đã bỏ theo yêu cầu — dòng hướng dẫn + mũi tên nảy ở mỗi nút (.gp-tip/.gp-arrow) đã đủ rõ */
@media (prefers-reduced-motion: reduce) {
  .gp-btn::before,
  .gp-btn {
    animation: none;
  }
}

/* Dòng hướng dẫn dưới tiêu đề "Chọn mẫu hoa" + mũi tên nảy phía trên MỖI nút (áp dụng cả 3 thẻ, không chỉ thẻ đầu) */
.gp-tip {
  text-align: center;
  margin: -6px 0 20px;
  font:
    600 13.5px/1.5 "Inter",
    sans-serif;
  color: var(--mut, #6f4d5e);
}
.gp-arrow {
  display: flex;
  justify-content: center;
  color: inherit;
  opacity: 0.85;
  animation: gpArrow 1.4s ease-in-out infinite;
  margin-bottom: -2px;
}
.gp-arrow svg {
  rotate: 90deg;
  margin-top: -25px;
} /* icon mũi tên dùng lại 'arrowright' có sẵn, xoay 90 độ cho trỏ xuống thay vì thêm icon mới */
@keyframes gpArrow {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 5px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gp-arrow {
    animation: none;
  }
}
/* a.gp2-xxx (không chỉ .gp2-xxx suông): thẻ này LÀ thẻ <a>, mà site có rule nền "a, a:hover{color:inherit}"
   đặt từ đầu file — rule đó độ đặc hiệu NGANG với ".gp2-rose{color:...}" (1 class so 1 pseudo-class), lại có
   thêm điểm từ việc chỉ định rõ thẻ "a" nên THẮNG lúc hover, khiến viền (ăn theo currentColor) đổi về màu chữ
   mặc định (plum đậm, nhìn như "viền đen") thay vì giữ đúng màu hồng/xanh/vàng. Thêm "a" vào trước mỗi selector
   để độ đặc hiệu bằng nhau, lúc đó rule định nghĩa SAU trong file (đúng 3 rule này) mới thắng được. */
a.gp2-rose {
  color: var(--pk);
}
.gp2-rose .gp2-ic {
  background: #fff;
  color: var(--pk);
}
a.gp2-green {
  color: #1f8a4c;
}
.gp2-green .gp2-ic {
  background: #fff;
  color: #1f8a4c;
}
a.gp2-gold {
  color: #b5700c;
}
.gp2-gold .gp2-ic {
  background: #fff;
  color: #b5700c;
}

@media (max-width: 767.98px) {
  /* Mobile: tiêu đề "Chọn mẫu hoa" canh giữa cho cân đối (desktop vẫn canh trái + đường kẻ dài như cũ) */
  .gift-pick .sh {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .gift-pick .sh .sht {
    align-items: center;
  }
  .gift-pick .sh .sl {
    flex: none;
    width: 70px;
    margin: 0 auto;
  }
  .gift-pick .sh .sl::before {
    left: 50%;
    translate: -50% -50%;
  }
  /* Mobile: mỗi lần vuốt dừng lại gọn 1 thẻ (scroll-snap mandatory, không còn mũi tên nổi che hình) — chấm tròn
     bên dưới cho biết đang ở thẻ nào, giống kiểu vuốt ảnh quen thuộc thay vì lưới bị cắt xén nhìn rối mắt */
  /* touch-action:pan-x — BẮT BUỘC để trình duyệt hiểu rõ đây là khối chỉ vuốt NGANG, tránh nhầm lẫn với cuộn
     dọc của cả trang (lỗi "vuốt bị kéo lên/che góc" bạn gặp chính là do thiếu khai báo này) */
  .gp-grid.gp2 {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    overflow-y: hidden;
    touch-action: pan-x;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    gap: 14px;
    padding: 2px 2px 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .gp-grid.gp2::-webkit-scrollbar {
    display: none;
  }
  .gp2-card {
    flex: 0 0 auto;
    width: 88vw;
    max-width: 360px;
    scroll-snap-align: center;
  }
  .gp2-text {
    padding: 16px 14px;
    flex-basis: 56%;
  }
  .gp2-ic {
    width: 32px;
    height: 32px;
    margin-bottom: 6px;
  }
  .gp2-ic svg {
    width: 16px;
    height: 16px;
  }
  .gp2-text h3 {
    font-size: 15px;
    margin-bottom: 4px;
  }
  .gp2-text p {
    font-size: 11.5px;
    margin-bottom: 10px;
    line-height: 1.4;
  }
  .gp2-photo {
    flex-basis: 44%;
    min-height: 0;
  }
  .gp-badge {
    top: 8px;
    right: 8px;
    padding: 4px 8px;
    font-size: 10.5px;
  }
  .gp-btn {
    padding: 6px 11px;
    font-size: 11px;
  }
  .gp-dots {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-top: 14px;
  }
  .gp-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #e9d5dc;
  }
  .gp-dot.on {
    width: 20px;
    border-radius: 4px;
    background: var(--pk);
  }
}

/* ===== [Mua theo ngân sách] Tab tầm giá + danh sách đổi theo tab + nút "Xem thêm" có hoa & animation ===== */
:root {
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
} /* nhiều khối ở trên đã dùng var(--ease) mà chưa khai báo ở đâu — khai báo ở đây cho hiệu ứng chạy đúng (bỏ nếu đã khai báo nơi khác) */

/* Tab: thanh nền hồng trượt theo tab đang chọn (.bt-ind do JS đặt vị trí) */
.bt-tabs {
  position: relative;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 18px;
}
.bt-tab {
  position: relative;
  z-index: 1;
  font: inherit;
  font-size: 14px;
  color: var(--tx);
  cursor: pointer;
  padding: 9px 20px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--ln);
  transition:
    color 0.25s,
    border-color 0.25s,
    background 0.25s,
    box-shadow 0.25s,
    transform 0.25s var(--ease);
}
.bt-tab:hover:not(.on) {
  border-color: var(--pk);
  color: var(--pk);
  transform: translateY(-1px);
}
.bt-tab.on {
  background: linear-gradient(135deg, #ef6b8f, #c2366f);
  border-color: transparent;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(232, 84, 122, 0.28);
}
.bt-tab:focus-visible {
  outline: 2px solid var(--pk);
  outline-offset: 3px;
}
.bt-ind {
  position: absolute;
  z-index: 0;
  left: 0;
  top: 0;
  height: 0;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #ef6b8f, #c2366f);
  box-shadow: 0 8px 18px rgba(232, 84, 122, 0.28);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.45s var(--ease),
    width 0.45s var(--ease),
    opacity 0.2s;
}
.bt-js .bt-ind {
  opacity: 1;
}
.bt-js .bt-tab.on {
  background: transparent;
  box-shadow: none;
} /* có JS: nền hồng của tab đang chọn do .bt-ind vẽ, trượt mượt giữa các tab */

/* Chip "N mẫu" dùng lại kiểu .gp-badge của khối "Chọn mẫu hoa" (bản gốc nằm đè lên ảnh nên ở đây đưa về dòng chảy bình thường) */
.bt-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
}
.bt-meta small {
  font-size: 12.5px;
  color: var(--mut);
}
.gp-badge.bt-cnt {
  position: static;
  border: 1.5px solid #f3c7d4;
  padding: 5px 12px 5px 10px;
}
.bt-cnt svg {
  color: var(--pk);
}
.bt-cnt b {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  min-width: 1ch;
}

/* Đổi tab: chip + thẻ + nút hiện lần lượt (JS thêm .bt-in mỗi lần mở tab) */
.bt-pane[hidden] {
  display: none;
}
.bt-pane.bt-in .bt-meta {
  animation: bt-rise 0.45s var(--ease) backwards;
}
.bt-pane.bt-in .grid .pc {
  animation: bt-card 0.6s var(--ease) backwards;
  animation-delay: calc(var(--i, 0) * 70ms + 60ms);
}
.bt-pane.bt-in .slide-wrap {
  animation: bt-rise 0.5s var(--ease) backwards;
}
@keyframes bt-card {
  from {
    opacity: 0;
    transform: translateY(26px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes bt-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Nút "Xem thêm": gradient hồng của site + hoa ở góc trái */
.btn-more {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  overflow: hidden;
  isolation: isolate;
  min-height: 52px;
  padding: 0 24px 0 58px;
  border-radius: 999px;
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.01em;
  background: linear-gradient(
    115deg,
    #f27a9b,
    #ef6b8f 30%,
    #c2366f 72%,
    #ef6b8f
  );
  background-size: 220% 100%;
  background-position: 0 0;
  box-shadow:
    0 10px 22px rgba(194, 54, 111, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  animation: bm-glow 3.2s ease-in-out infinite;
  transition:
    transform 0.35s var(--ease),
    box-shadow 0.35s,
    background-position 0.8s var(--ease);
}
.btn-more:hover {
  transform: translateY(-3px) scale(1.03);
  background-position: 100% 0;
  box-shadow:
    0 16px 30px rgba(194, 54, 111, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  color: #fff;
}
.btn-more:active {
  transform: translateY(0) scale(0.97);
  transition-duration: 0.1s;
}
.btn-more:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -6px;
  box-shadow: 0 0 0 3px var(--pk);
}
.btn-more > * {
  position: relative;
  z-index: 1;
}
.btn-more::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: 0;
  width: 46%;
  background: linear-gradient(
    100deg,
    transparent,
    rgba(255, 255, 255, 0.55),
    transparent
  );
  transform: translateX(-160%) skewX(-18deg);
  animation: bm-shine 3.6s ease-in-out 1s infinite;
  pointer-events: none;
}
.btn-more:hover::after {
  animation-duration: 1.4s;
}
.bm-fl {
  position: absolute;
  z-index: 1;
  left: 0;
  top: -1px;
  width: 56px;
  height: 56px;
  pointer-events: none;
  transform-origin: 20% 70%;
  animation: bm-sway 4.2s ease-in-out infinite;
  transition: scale 0.4s var(--ease);
}
.bm-fl svg {
  display: block;
}
.bm-d {
  transform-box: fill-box;
  transform-origin: center;
  animation: bm-spin 9s linear infinite;
}
.bm-b {
  animation: bm-twinkle 2.4s ease-in-out infinite;
}
.btn-more:hover .bm-d {
  animation-duration: 2.2s;
}
.btn-more:hover .bm-fl {
  animation-duration: 1.6s;
  scale: 1.12;
}
.bm-ar {
  display: inline-flex;
  transition: translate 0.35s var(--ease);
  animation: bm-nudge 2s ease-in-out infinite;
}
.btn-more:hover .bm-ar {
  translate: 6px 0;
  animation: none;
}
.bm-p {
  position: absolute;
  z-index: 0;
  bottom: -8px;
  width: 9px;
  height: 12px;
  border-radius: 0 100% 0 100%;
  background: rgba(255, 255, 255, 0.85);
  opacity: 0;
  pointer-events: none;
}
.bm-p.p1 {
  left: 38%;
}
.bm-p.p2 {
  left: 58%;
  width: 7px;
  height: 10px;
}
.bm-p.p3 {
  left: 76%;
}
.btn-more:hover .bm-p {
  animation: bm-petal 1.5s ease-out infinite;
}
.btn-more:hover .bm-p.p2 {
  animation-delay: 0.35s;
}
.btn-more:hover .bm-p.p3 {
  animation-delay: 0.7s;
}
.btn-more .rip {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  pointer-events: none;
  translate: -50% -50%;
  width: 12px;
  height: 12px;
  animation: rip 0.65s ease-out forwards;
}
@keyframes bm-shine {
  0%,
  55% {
    transform: translateX(-160%) skewX(-18deg);
  }
  100% {
    transform: translateX(420%) skewX(-18deg);
  }
}
@keyframes bm-glow {
  0%,
  100% {
    box-shadow:
      0 10px 22px rgba(194, 54, 111, 0.32),
      0 0 0 0 rgba(232, 84, 122, 0.38),
      inset 0 1px 0 rgba(255, 255, 255, 0.28);
  }
  60% {
    box-shadow:
      0 10px 22px rgba(194, 54, 111, 0.32),
      0 0 0 14px rgba(232, 84, 122, 0),
      inset 0 1px 0 rgba(255, 255, 255, 0.28);
  }
}
@keyframes bm-sway {
  0%,
  100% {
    rotate: -5deg;
    translate: 0 0;
  }
  50% {
    rotate: 6deg;
    translate: 2px 2px;
  }
}
@keyframes bm-spin {
  to {
    rotate: 360deg;
  }
}
@keyframes bm-twinkle {
  50% {
    opacity: 0.45;
    scale: 0.85;
  }
}
@keyframes bm-nudge {
  50% {
    translate: 4px 0;
  }
}
@keyframes bm-petal {
  0% {
    transform: translate(0, 0) rotate(0);
    opacity: 0;
  }
  15% {
    opacity: 0.9;
  }
  100% {
    transform: translate(14px, -62px) rotate(200deg);
    opacity: 0;
  }
}

/* Các nút "Xem tất cả / Xem thêm" có sẵn (.sh a ở tiêu đề mục, .p2-btn ở khối Feedback/Blog): cùng ngôn ngữ chuyển động */
.sh a,
.p2-btn {
  overflow: hidden;
  isolation: isolate;
}
.sh a::after,
.p2-btn::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  width: 50%;
  background: linear-gradient(
    100deg,
    transparent,
    rgba(255, 255, 255, 0.6),
    transparent
  );
  transform: translateX(-160%) skewX(-18deg);
  pointer-events: none;
}
.sh a {
  position: relative;
  transition:
    background 0.25s,
    color 0.25s,
    box-shadow 0.25s,
    transform 0.3s var(--ease);
}
.sh a:hover {
  background: linear-gradient(135deg, #ef6b8f, #c2366f);
  transform: translateY(-2px);
}
.sh a:hover::after,
.p2-card:hover .p2-btn::after {
  animation: bm-shine 1s ease-out 1;
}
.sh a svg,
.p2-btn svg {
  animation: bm-nudge 2.4s ease-in-out infinite;
}
.sh a:hover svg {
  animation: none;
}
.p2-btn {
  transition:
    transform 0.3s var(--ease),
    box-shadow 0.3s;
}
.p2-card:hover .p2-btn {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(194, 54, 111, 0.35);
}
.p2-card:hover .p2-btn svg {
  animation: none;
  translate: 4px 0;
}
.p2-btn svg {
  transition: translate 0.3s var(--ease);
}

@media (max-width: 767.98px) {
  :root .bt-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 8px;
    margin: -6px -16px 2px -6px;
    padding: 6px 16px 16px 6px;
    scrollbar-width: none;
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
  } /* đệm quanh để bóng đổ của tab không bị khung cuộn cắt vuông */
  :root .bt-ind {
    box-shadow: 0 4px 10px rgba(232, 84, 122, 0.3);
  }
  :root .bt .sh .sht {
    flex: none;
    min-width: 0;
  }
  /* Tiêu đề mục dài + nút "Xem tất cả": xếp lưới 2 hàng — hàng 1: chữ nghiêng (trái) + nút (phải); hàng 2: tiêu đề + đường kẻ ngang chạy hết phần còn lại */
  :root .bt .sh {
    display: grid;
    grid-template-columns: auto minmax(24px, 1fr);
    align-items: end;
    column-gap: 10px;
    row-gap: 0;
  }
  :root .bt .sh .sht {
    display: contents;
  }
  :root .bt .sh .eb {
    grid-row: 1;
    grid-column: 1;
    align-self: center;
  }
  :root .bt .sh h4 {
    grid-row: 2;
    grid-column: 1;
    font-size: clamp(18px, 5.6vw, 22px);
    white-space: nowrap;
  }
  :root .bt .sh .sl {
    grid-row: 2;
    grid-column: 2;
    min-width: 0;
    margin-bottom: 9px;
  }
  :root .bt .sh a {
    grid-row: 1;
    grid-column: 1 / -1;
    justify-self: end;
    align-self: center;
    margin-bottom: 0;
    white-space: nowrap;
  }
  :root .bt-tabs::-webkit-scrollbar {
    display: none;
  }
  :root .bt-tab {
    flex: none;
    padding: 8px 16px;
    font-size: 13px;
  }
  :root .btn-more {
    min-height: 48px;
    font-size: 15px;
    padding-left: 54px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .btn-more,
  .btn-more::after,
  .bm-fl,
  .bm-d,
  .bm-b,
  .bm-ar,
  .bm-p,
  .sh a svg,
  .p2-btn svg {
    animation: none !important;
  }
  .btn-more:hover .bm-p {
    display: none;
  }
  .bt-pane.bt-in .grid .pc,
  .bt-pane.bt-in .bt-meta,
  .bt-pane.bt-in .slide-wrap {
    animation: none;
  }
  .bt-ind {
    transition: none;
  }
}

/* ===== [Header] Ảnh nhỏ của 3 tab danh mục = ĐÚNG 3 ảnh của thẻ "Chọn mẫu ..." bên dưới (lan, bó hoa, giỏ trái cây) =====
   Chỉ dùng CSS (nhận diện tab qua data-tab, ảnh lấy ../img/gp-*.jpg cùng ảnh của thẻ) nên dán được vào cả bản v1 lẫn v2, không cần sửa PHP.
   Danh mục khác (admin thêm sau) giữ nguyên ảnh nhỏ cũ. Viền/màu chip theo tông của từng thẻ: hồng / xanh lá / vàng. */
.hdt {
  --tc: var(--pk);
  --tl: #f7cddb;
}
.hdt[data-tab="hoa-lan"] {
  --pic: url(../img/gp-hoa-lan.jpg);
  --pz: 112%;
  --pp: 100% 69%;
}
.hdt[data-tab="hoa-tuoi"] {
  --tc: #1f8a4c;
  --tl: #c7e8d0;
  --tb: #e6f5ea;
  --pic: url(../img/gp-hoa-tuoi.jpg);
  --pz: 112%;
  --pp: 41% 78%;
}
.hdt[data-tab="gio-trai-cay"] {
  --tc: #b5700c;
  --tl: #f6ddb3;
  --tb: #fff1de;
  --pic: url(../img/gp-gio-trai-cay.jpg);
  --pz: 112%;
  --pp: 41% 78%;
}
.hdt {
  --tb: #fdeef2;
  background: #fff;
  border-color: var(--tl);
  color: var(--tc);
}
.hdt[data-tab="hoa-tuoi"] {
  --tb: #e6f5ea;
}
.hdt[data-tab="gio-trai-cay"] {
  --tb: #fff1de;
}
:is(
    .hdt[data-tab="hoa-lan"],
    .hdt[data-tab="hoa-tuoi"],
    .hdt[data-tab="gio-trai-cay"]
  )
  img {
  display: none;
}
:is(
  .hdt[data-tab="hoa-lan"],
  .hdt[data-tab="hoa-tuoi"],
  .hdt[data-tab="gio-trai-cay"]
)::before {
  content: "";
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #fff;
  background-image: var(--pic);
  background-repeat: no-repeat;
  background-size: var(--pz);
  background-position: var(--pp);
  box-shadow: inset 0 0 0 1.5px var(--tl);
  transition: transform 0.4s var(--ease);
}
.hdt:hover {
  border-color: var(--tc);
  background: var(--tb);
  color: var(--tc);
}
.hdt:hover::before {
  transform: rotate(-8deg) scale(1.1);
}
.hdt.on {
  background: var(--tc);
  border-color: var(--tc);
  color: #fff;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--tc) 38%, transparent);
}

/* 3 tab hiện ra: mỗi tab tự nảy lên nhẹ lần lượt (không cùng lúc) — bắt mắt hơn khi vừa xuất hiện lúc cuộn */
.hd.tabs-on .hdt,
.hd.scrolled .hdt {
  animation: hdtIn 0.4s var(--ease) backwards;
}
.hd.tabs-on .hdt:nth-child(1),
.hd.scrolled .hdt:nth-child(1) {
  animation-delay: 0.05s;
}
.hd.tabs-on .hdt:nth-child(2),
.hd.scrolled .hdt:nth-child(2) {
  animation-delay: 0.12s;
}
.hd.tabs-on .hdt:nth-child(3),
.hd.scrolled .hdt:nth-child(3) {
  animation-delay: 0.19s;
}
@keyframes hdtIn {
  from {
    opacity: 0;
    translate: 0 8px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hd.tabs-on .hdt,
  .hd.scrolled .hdt {
    animation: none;
  }
}
.hdt.on::before {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55);
}
@media (max-width: 767.98px) {
  :root .hdt::before {
    width: 24px;
    height: 24px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hdt::before {
    transition: none;
  }
  .hdt:hover::before {
    transform: none;
  }
}

/* ===== [Mobile] Các khối sản phẩm ở trang chủ (Giảm giá trong ngày / Bán chạy / Sản phẩm hot / Mua theo ngân sách):
   hiện 2 HÀNG × 2 SẢN PHẨM trong khung nhìn; còn sản phẩm thì VUỐT NGANG để xem tiếp (mỗi cột gồm 2 sản phẩm xếp trên-dưới,
   cột kế tiếp ló ra một chút để biết còn nữa). Từ 4 sản phẩm trở xuống thì không có gì để vuốt và 2 cột chiếm đủ bề ngang.
   Chỉ áp dụng ≤767px; máy tính bảng và máy tính vẫn 1 hàng lướt ngang có mũi tên như cũ. ===== */
@media (max-width: 767.98px) {
  :root .grid.grid-slide {
    display: grid;
    grid-template-columns: none;
    grid-template-rows: repeat(2, auto);
    grid-auto-flow: column;
    grid-auto-columns: max(130px, calc((100% - 38px) / 2));
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    padding-bottom: 2px;
  }
  :root .grid.grid-slide:not(:has(> .pc:nth-child(5))) {
    grid-auto-columns: calc((100% - 12px) / 2);
  } /* ≤4 sản phẩm: 2 cột đủ bề ngang */
  :root .grid.grid-slide > .pc {
    width: auto;
    min-width: 0;
    scroll-snap-align: start;
  }
}

/* ===== [Tìm kiếm] Dropdown gợi ý đẹp hơn: rộng hơn ô nhập (tên sản phẩm hiện đủ 2 dòng), chân "Xem tất cả" luôn dính ở đáy
   (không còn bị cắt), thanh cuộn mảnh màu hồng, dòng sản phẩm bo tròn có vạch hồng khi rê chuột/chọn bằng phím. ===== */
.sug {
  left: 0;
  right: auto;
  width: max(100%, 500px);
  max-width: min(560px, calc(100vw - 24px));
  top: calc(100% + 12px);
  padding: 6px 0 0;
  border: 1px solid #f7d6e0;
  border-radius: 22px;
  background: #fff;
  box-shadow:
    0 34px 70px -14px rgba(150, 40, 90, 0.3),
    0 10px 26px rgba(150, 40, 90, 0.1);
  scrollbar-width: thin;
  scrollbar-color: #f2b5c8 transparent;
  transform-origin: 26px -8px;
  animation: sug-in2 0.26s var(--ease);
}
.sug::-webkit-scrollbar {
  width: 10px;
}
.sug::-webkit-scrollbar-track {
  background: transparent;
  margin: 14px 0;
}
.sug::-webkit-scrollbar-thumb {
  background: #f6c4d3;
  border-radius: 10px;
  border: 3px solid #fff;
}
.sug::-webkit-scrollbar-thumb:hover {
  background: #ee9db6;
}
@keyframes sug-in2 {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Tiêu đề từng nhóm: chữ hồng nhỏ + đường kẻ mờ dần */
.sug-h {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #b5587f;
}
.sug-h::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, #f6d3de, rgba(246, 211, 222, 0));
}

/* Danh mục / gợi ý nhanh: viên thuốc, rê chuột thì nổi lên */
.sug-cats,
.sug-chips {
  gap: 8px;
  padding: 4px 20px 14px;
}
.sug-cat,
.sug-chip {
  padding: 7px 15px;
  border-radius: 999px;
  transition:
    background 0.2s,
    color 0.2s,
    border-color 0.2s,
    transform 0.2s var(--ease),
    box-shadow 0.2s;
}
.sug-cat {
  background: #fff0f3;
  border-color: #fadbe4;
  color: var(--pkd, #c2366f);
}
.sug-cat:hover,
.sug-cat[aria-selected="true"],
.sug-chip:hover,
.sug-chip[aria-selected="true"] {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(232, 84, 122, 0.25);
}

/* Dòng sản phẩm */
.sug-i {
  gap: 14px;
  margin: 2px 10px;
  padding: 10px 12px;
  border-radius: 14px;
  transition:
    background 0.18s,
    box-shadow 0.18s;
}
.sug-i img {
  width: 58px;
  height: 58px;
  border-radius: 12px;
  box-shadow: 0 0 0 1px #f8dde5;
}
.sug-i .t {
  flex: 1;
  gap: 3px;
}
.sug-i .n {
  font-size: 14.5px;
  line-height: 1.3;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sug-i .m {
  font-size: 12.5px;
}
.sug-i .p {
  flex: none;
  min-width: 86px;
  padding-left: 6px;
  text-align: right;
  font-size: 14.5px;
}
.sug-i:hover,
.sug-i[aria-selected="true"] {
  background: #fff3f7;
  box-shadow: inset 3px 0 0 var(--pk);
}
.sug-i mark {
  background: linear-gradient(transparent 58%, #ffd2de 58%);
  color: inherit;
  padding: 0;
  border-radius: 0;
}
.sug-note {
  margin: 2px 20px 6px;
  padding: 7px 12px;
  border-radius: 10px;
  background: #fff8e6;
  color: #9a6a0b;
}
.sug-none {
  padding: 26px 20px 8px;
}

/* Chân "Xem tất cả": luôn thấy (dính đáy khung cuộn), nút mũi tên tròn */
.sug-all {
  position: sticky;
  bottom: 0;
  z-index: 1;
  margin-top: 6px;
  padding: 14px 20px;
  border-top: 1px solid #f6dbe4;
  background: linear-gradient(180deg, #fff7fa, #ffeef3);
  color: var(--pkd, #c2366f);
  font-size: 14px;
  transition: background 0.2s;
}
.sug-all span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sug-all span:last-child {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(194, 54, 111, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    transform 0.25s var(--ease),
    background 0.2s,
    color 0.2s;
}
.sug-all:hover,
.sug-all[aria-selected="true"] {
  background: linear-gradient(180deg, #ffeef3, #ffe2ec);
}
.sug-all:hover span:last-child,
.sug-all[aria-selected="true"] span:last-child {
  transform: translateX(3px);
  background: var(--pk);
  color: #fff;
}

@media (max-width: 767.98px) {
  :root .sug {
    left: -4px;
    right: -4px;
    width: auto;
    max-width: none;
    border-radius: 18px;
    max-height: min(58vh, 460px);
  }
  :root .sug-i {
    margin: 2px 6px;
    padding: 9px 10px;
    gap: 12px;
  }
  :root .sug-i img {
    width: 52px;
    height: 52px;
  }
  :root .sug-i .p {
    min-width: 74px;
  }
  :root .sug-h {
    padding: 12px 16px 6px;
  }
  :root .sug-cats,
  :root .sug-chips {
    padding: 4px 16px 12px;
  }
  :root .sug-all {
    padding: 13px 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sug,
  .sug-cat,
  .sug-chip,
  .sug-all span:last-child {
    animation: none;
    transition: none;
  }
}

/* ===== [Chọn mẫu hoa] Nút của 3 thẻ danh mục nằm GIỮA đáy thẻ (chữ theo từng danh mục: config/site.php > cat_buttons) ===== */
.gp2-card {
  flex-direction: column;
}
.gp2-body {
  display: flex;
  align-items: stretch;
  flex: 1 1 auto;
  min-width: 0;
}
.gp2-body .gp2-text p {
  margin-bottom: 0;
}
.gp2-card > .gp-btn {
  align-self: center;
  margin: 2px 0 22px;
  padding: 10px 22px;
  font-size: 13.5px;
  box-shadow: 0 8px 18px rgba(194, 54, 111, 0.26);
  transition:
    transform 0.25s var(--ease),
    box-shadow 0.25s;
}
.gp2-card:hover > .gp-btn {
  box-shadow: 0 12px 24px rgba(194, 54, 111, 0.34);
}
@media (max-width: 767.98px) {
  .gp2-card > .gp-btn {
    margin: 0 0 16px;
    padding: 8px 18px;
    font-size: 12.5px;
  }
}

/* ===== [Tiêu đề mục canh giữa] "Bắt đầu từ đây / Chọn mẫu hoa": chữ nghiêng có 2 vệt mờ hai bên, tiêu đề lớn, đường kẻ ngắn có chấm hồng ở giữa ===== */
.sh.sh-c {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 26px;
  text-align: center;
}
.sh.sh-c .sht {
  align-items: center;
}
.sh.sh-c .eb {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 27px;
  margin-bottom: 4px;
}
.sh.sh-c .eb::before,
.sh.sh-c .eb::after {
  content: "";
  width: 38px;
  height: 1.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(240, 163, 187, 0), #f0a3bb);
}
.sh.sh-c .eb::after {
  transform: scaleX(-1);
}
.sh.sh-c h4 {
  font-size: 34px;
  letter-spacing: 0.01em;
}
:root .sh.sh-c .sl {
  display: block;
  flex: none;
  width: 130px;
  min-width: 0;
  height: 2px;
  margin: 14px auto 0;
  background: linear-gradient(
    90deg,
    rgba(245, 185, 201, 0),
    #f5b9c9 28%,
    #f5b9c9 72%,
    rgba(245, 185, 201, 0)
  );
  transform-origin: center;
}
.sh.sh-c .sl::before {
  left: 50%;
  translate: -50% -50%;
}
@media (max-width: 767.98px) {
  :root .sh.sh-c {
    margin-bottom: 20px;
  }
  :root .sh.sh-c .eb {
    font-size: 21px;
    gap: 9px;
  }
  :root .sh.sh-c .eb::before,
  :root .sh.sh-c .eb::after {
    width: 24px;
  }
  :root .sh.sh-c h4 {
    font-size: 26px;
  }
  :root .sh.sh-c .sl {
    width: 96px;
    margin-top: 11px;
  }
}

/* ===== [Phân trang dạng slide] Feedback (ảnh giao hàng) + Blog: máy tính 4 cột × 3 hàng, tablet 3 cột × 4 hàng, điện thoại 2 cột × 4 hàng ===== */
.pgs {
  position: relative;
}
.pgs-view {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  margin: -8px -6px 0;
  outline: 0;
}
.pgs-view::-webkit-scrollbar {
  display: none;
}
.pgs-view:focus-visible {
  box-shadow: 0 0 0 3px rgba(232, 84, 122, 0.25);
  border-radius: 14px;
}
.pgs-page {
  flex: 0 0 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 8px 6px 10px;
  scroll-snap-align: start;
  align-content: start;
  align-items: start;
}
.pgs-page.fb-gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.pgs-page.blog-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
/* thẻ blog gọn hơn để vừa 4 cột */
.pgs-page .blog-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.pgs-page .blog-cv {
  height: 150px;
}
.pgs-page .blog-bd {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 13px 15px 15px;
}
.pgs-page .blog-bd h3 {
  font-size: 15px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pgs-page .blog-bd p {
  font-size: 12.5px;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pgs-page .blog-more {
  margin-top: auto;
  padding-top: 2px;
}
/* thanh chuyển trang: mũi tên tròn + chấm + "Trang x / y" */
.pgs-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.pgs-nav[hidden] {
  display: none;
}
.pgs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1.5px solid #f3c7d4;
  background: #fff;
  color: var(--pk);
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(232, 84, 122, 0.14);
  transition:
    background 0.2s,
    color 0.2s,
    transform 0.25s var(--ease),
    box-shadow 0.2s,
    opacity 0.2s;
}
.pgs-btn:hover:not(:disabled) {
  background: var(--pk);
  border-color: var(--pk);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(232, 84, 122, 0.3);
}
.pgs-btn:disabled {
  opacity: 0.38;
  cursor: default;
  box-shadow: none;
}
.pgs-dots {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pgs-dots[hidden] {
  display: none;
}
.pgs-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #e9d5dc;
  cursor: pointer;
  transition:
    width 0.3s var(--ease),
    background 0.25s;
}
.pgs-dot.on {
  width: 26px;
  border-radius: 5px;
  background: var(--pk);
}
.pgs-count {
  flex-basis: 100%;
  text-align: center;
  font-size: 12.5px;
  color: var(--mut);
}
@media (max-width: 991.98px) {
  .pgs-page.fb-gallery,
  .pgs-page.blog-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 767.98px) {
  :root .pgs-page.fb-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  :root .pgs-page.blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  :root .pgs-page .blog-cv {
    height: 104px;
  }
  :root .pgs-page .blog-bd {
    padding: 10px 11px 12px;
  }
  :root .pgs-page .blog-bd h3 {
    font-size: 13.5px;
    -webkit-line-clamp: 3;
  }
  :root .pgs-page .blog-bd p {
    font-size: 12px;
    -webkit-line-clamp: 2;
  }
  :root .pgs-nav {
    gap: 10px;
    margin-top: 14px;
  }
  :root .pgs-btn {
    width: 40px;
    height: 40px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pgs-btn,
  .pgs-dot {
    transition: none;
  }
  .pgs-view {
    scroll-behavior: auto;
  }
}

/* ===== [Trang chủ] Các khối sản phẩm theo bố cục mới: hot trend / bán chạy nhất (2 HÀNG) / giỏ trái cây / hoa tươi ===== */
/* Khối 2 hàng ("Mẫu bán chạy nhất"): máy tính 5 cột × 2 hàng (10 sản phẩm, hàng trên là 5 mẫu bán chạy nhất);
   tablet 4 cột × 2 hàng (8 sản phẩm). Điện thoại dùng kiểu 2 hàng vuốt ngang chung của mọi khối (khối CSS mobile ở trên). */
@media (min-width: 768px) {
  .grid.grid-slide.grid-r2 {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    overflow: visible;
    scroll-snap-type: none;
    padding-bottom: 0;
  }
  .grid.grid-slide.grid-r2 > .pc {
    width: auto;
    min-width: 0;
  }
}
@media (min-width: 768px) and (max-width: 1099.98px) {
  .grid.grid-slide.grid-r2 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .grid.grid-slide.grid-r2 > .pc:nth-child(n + 9) {
    display: none;
  }
}
.hblk {
  margin-top: 34px;
} /* (không dùng tên .hb: đã là nút tim ở thẻ sản phẩm) */
.hblk + .hblk {
  margin-top: 38px;
}

/* ===== [Giao diện v2 = theme "Banner hero"] Mọi luật bên dưới chỉ có tác dụng khi body có lớp .lay-hero (bật ở Admin > Theme > Giao diện mặc định) ===== */
/* ===== [Banner trang chủ + header liền mạch] Nền hồng tràn ngang, header cùng màu khi ở đầu trang, chữ serif, 1 nút "Xem ngay" ===== */
:root {
  --hh: #fde7ee;
} /* màu đầu dải nền banner = màu header lúc chưa cuộn -> không thấy đường nối */

/* Logo chữ serif CHỈ ở trang chủ (khớp banner); các trang khác (danh mục, chi tiết, tìm kiếm...) giữ logo chữ đậm như cũ */
body.lay-hero .logo {
  flex: none;
}
body.lay-hero .logo b {
  white-space: nowrap;
}
body.lay-hero.page-home .logo b {
  font:
    600 28px/1 "Cormorant Garamond",
    Georgia,
    serif;
  letter-spacing: 0.03em;
}
body.lay-hero.page-home .logo small {
  font-size: 10px;
  letter-spacing: 0.24em;
  margin-top: 5px;
}

/* Header trang chủ lúc ở đầu trang: cùng màu nền banner, không viền; cuộn xuống thì về trắng mờ như cũ (.scrolled) */
body.lay-hero.page-home .page:not(.fxs) .hd:not(.scrolled) {
  background: var(--hh);
  border-bottom-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* 3 liên kết nổi bật trên header (chỉ trang chủ, chỉ máy tính): tự thu lại khi thanh danh mục rút gọn hiện ra */
.hd-hl {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-left: auto;
  flex: none;
  overflow: hidden;
  max-width: 900px;
  white-space: nowrap;
  transition:
    max-width 0.5s var(--ease),
    opacity 0.3s,
    margin 0.4s var(--ease),
    visibility 0.3s;
}
.hd-hl a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--tx);
  padding: 8px 0;
  transition: color 0.2s;
}
.hd-hl a svg {
  color: var(--pk);
}
.hd-hl a:hover {
  color: var(--pk);
}
.hd.tabs-on .hd-hl {
  max-width: 0;
  margin-left: 0;
  opacity: 0;
  visibility: hidden;
}
body.lay-hero.page-home .hd:not(.tabs-on) .sr {
  max-width: 460px;
}
body.lay-hero.page-home .hd .sr {
  transition:
    max-width 0.5s var(--ease),
    background 0.3s,
    border-color 0.3s,
    box-shadow 0.3s;
}
@media (max-width: 1099.98px) {
  .hd-hl {
    display: none;
  }
}
@media (max-width: 991.98px) {
  body.lay-hero.page-home .hd:not(.tabs-on) .sr {
    max-width: none;
  }
}

/* Banner */
.hhero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--hh) 0%, #fff3f6 64%, #fff 100%);
}
.fxs .hhero {
  background: transparent;
}
.hh-pt {
  position: absolute;
  top: 30px;
  pointer-events: none;
}
.hh-pt.l {
  left: -30px;
}
.hh-pt.r {
  right: -30px;
}
.hh-in {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
  gap: 24px;
  min-height: 500px;
  padding: 8px max(40px, calc(50% - 560px)) 40px;
}
.hh-k {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  font:
    500 27px/1.1 "Dancing Script",
    cursive;
  color: var(--pk);
}
.hh-k svg {
  flex: none;
}
.hhero h1 {
  margin: 0;
  font:
    600 clamp(44px, 5.2vw, 72px)/1.04 "Cormorant Garamond",
    Georgia,
    serif;
  letter-spacing: -0.01em;
  color: var(--tx);
  text-wrap: balance;
}
.hhero h1 em {
  font-style: italic;
  color: var(--pk);
}
.hh-d {
  max-width: 500px;
  margin: 22px 0 30px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--mut);
}
.hh-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  overflow: hidden;
  isolation: isolate;
  min-height: 52px;
  padding: 0 32px;
  border-radius: 999px;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  background: linear-gradient(135deg, #ef6b8f, #c2366f);
  box-shadow: 0 10px 24px rgba(194, 54, 111, 0.3);
  transition:
    transform 0.35s var(--ease),
    box-shadow 0.35s;
}
.hh-btn::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  width: 46%;
  background: linear-gradient(
    100deg,
    transparent,
    rgba(255, 255, 255, 0.5),
    transparent
  );
  transform: translateX(-160%) skewX(-18deg);
  animation: bm-shine 3.6s ease-in-out 1.2s infinite;
  pointer-events: none;
}
.hh-btn svg {
  animation: bm-nudge 2.2s ease-in-out infinite;
  transition: translate 0.3s var(--ease);
}
.hh-btn:hover {
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 16px 30px rgba(194, 54, 111, 0.4);
}
.hh-btn:hover svg {
  animation: none;
  translate: 5px 0;
}
.hh-img {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 500px;
}
.hh-tbl {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 0;
  height: 90px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
}
.hh-img img {
  position: relative;
  display: block;
  height: 500px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  animation: bob 6s ease-in-out infinite;
} /* nền trắng của ảnh hòa vào nền hồng nhờ multiply */
/* Chữ hiện lần lượt khi tải trang */
.js .hh-txt > * {
  animation: hh-up 0.8s var(--ease) backwards;
}
.js .hh-txt > :nth-child(2) {
  animation-delay: 0.08s;
}
.js .hh-txt > :nth-child(3) {
  animation-delay: 0.16s;
}
.js .hh-txt > :nth-child(4) {
  animation-delay: 0.24s;
}
/* Ảnh hoa: hiệu ứng vào đặt trên CHÍNH thẻ <img>, KHÔNG đặt trên khung .hh-img — khung có animation (opacity/transform) sẽ tạo "nhóm hòa trộn" riêng,
   khiến mix-blend-mode:multiply không còn trộn với nền hồng => hiện ô trắng vuông quanh ảnh trong lúc trang vừa tải. */
.js .hh-img img {
  animation:
    hh-fade 1s var(--ease) 0.1s backwards,
    bob 6s ease-in-out infinite;
}
@keyframes hh-up {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes hh-fade {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 991.98px) {
  .hh-in {
    min-height: 0;
    padding-bottom: 28px;
  }
  .hh-img,
  .hh-img img {
    height: 400px;
  }
}
/* Mobile: chữ và ảnh CHUNG 1 HÀNG (chữ trái, ảnh phải) — bỏ đoạn mô tả dài cho gọn, dễ nhìn */
@media (max-width: 767.98px) {
  :root body.lay-hero.page-home .logo b {
    font-size: 22px;
  }
  body.lay-hero.page-home .logo small {
    font-size: 8.5px;
  }
  :root .hh-in {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: 4px;
    min-height: 0;
    padding: 10px 12px 26px 20px;
  }
  :root .hh-k {
    display: block;
    font-size: 17px;
    line-height: 1.2;
    margin: 0 0 10px;
  } /* chữ xuống dòng tự nhiên, trái tim nằm ngay cuối chữ */
  :root .hh-k svg {
    display: inline;
    vertical-align: -2px;
    width: 15px;
    height: 15px;
    margin-left: 2px;
  }
  :root .hhero h1 {
    font-size: clamp(25px, 7.4vw, 32px);
    line-height: 1.08;
  }
  :root .hh-d {
    display: none;
  }
  :root .hh-btn {
    min-height: 44px;
    margin-top: 18px;
    padding: 0 22px;
    font-size: 13.5px;
    gap: 8px;
  }
  :root .hh-btn svg {
    width: 16px;
    height: 16px;
  }
  :root .hh-img {
    height: auto;
    align-self: center;
  }
  :root .hh-img img {
    width: 100%;
    height: auto;
    max-width: 210px;
  }
  :root .hh-tbl {
    height: 36px;
    left: 0;
    right: 0;
  }
  .hh-pt {
    opacity: 0.7;
    top: 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hh-btn::after,
  .hh-btn svg,
  .hh-img img {
    animation: none !important;
  }
  .js .hh-txt > *,
  .js .hh-img img {
    animation: none;
  }
}

/* ===== [Trang chủ] Ô tìm kiếm + logo đồng bộ tông hồng, icon có hiệu ứng ===== */
/* Ô tìm kiếm: kính mờ trắng, viền hồng, chữ màu logo; nút gửi gradient + quầng nhịp thở */
body.lay-hero.page-home .sr {
  background: rgba(255, 255, 255, 0.88);
  border: 1.5px solid #f4c3d2;
  box-shadow: 0 6px 18px rgba(232, 84, 122, 0.12);
}
body.lay-hero.page-home .sr:hover {
  border-color: #ec9bb4;
  box-shadow: 0 8px 22px rgba(232, 84, 122, 0.18);
}
body.lay-hero.page-home .sr:focus-within {
  background: #fff;
  border-color: var(--pk);
  box-shadow:
    0 0 0 4px rgba(232, 84, 122, 0.16),
    0 10px 24px rgba(232, 84, 122, 0.18);
}
body.lay-hero.page-home .sr > svg {
  color: var(--pk);
  animation: sr-wiggle 5s ease-in-out infinite;
}
body.lay-hero.page-home .sr:hover > svg {
  animation: none;
  transform: scale(1.12) rotate(-12deg);
}
body.lay-hero.page-home .sr input {
  color: var(--tx);
}
body.lay-hero.page-home .sr input::placeholder {
  color: #b07a92;
}
body.lay-hero.page-home .sr .go {
  position: relative;
  background: linear-gradient(135deg, #ef6b8f, #c2366f);
  animation: glow 2.8s ease-out infinite;
}
body.lay-hero.page-home .sr .go svg {
  animation: bm-nudge 2s ease-in-out infinite;
}
body.lay-hero.page-home .sr .go:hover {
  animation: none;
}
body.lay-hero.page-home .sr .go:hover svg {
  animation: none;
  translate: 2px 0;
}
@keyframes sr-wiggle {
  0%,
  88%,
  100% {
    transform: none;
  }
  92% {
    transform: scale(1.12) rotate(-14deg);
  }
  96% {
    transform: scale(1.12) rotate(10deg);
  }
}

/* Logo: HOA LAN chuyển sắc mận -> hồng đậm, TÁC PHẨM hồng đậm (cùng tông tiêu đề banner và nút) */
body.lay-hero.page-home .logo b {
  color: #6a3350;
  background: linear-gradient(90deg, #6a3350 35%, #c2366f);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
body.lay-hero.page-home .logo small {
  color: #c2366f;
}
body.lay-hero.page-home .logo .lg {
  border-color: #f4c3d2;
  box-shadow: 0 4px 12px rgba(232, 84, 122, 0.22);
}

/* 3 liên kết trên header: icon trong vòng tròn trắng, mỗi icon một chuyển động riêng; rê chuột thì vòng chuyển hồng + gợn sóng */
.hd-hl {
  padding: 12px 10px;
  margin-top: -12px;
  margin-bottom: -12px;
  gap: 22px;
} /* đệm để vòng tròn nhấc lên/gợn sóng không bị cắt */
.hd.tabs-on .hd-hl {
  padding-left: 0;
  padding-right: 0;
}
.hd-hl a {
  gap: 10px;
  padding: 0;
}
.hl-ic {
  position: relative;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--pk);
  box-shadow: 0 3px 10px rgba(232, 84, 122, 0.2);
  transition:
    background 0.3s,
    color 0.3s,
    transform 0.35s var(--ease),
    box-shadow 0.3s;
}
.hl-ic svg {
  width: 20px;
  height: 20px;
}
.hl-ic::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.5px solid var(--pk);
  opacity: 0;
}
.hd-hl a svg {
  color: inherit;
}
.hd-hl a:hover .hl-ic,
.hd-hl a:focus-visible .hl-ic {
  background: linear-gradient(135deg, #ef6b8f, #c2366f);
  color: #fff;
  transform: translateY(-3px) scale(1.08);
  box-shadow: 0 10px 20px rgba(194, 54, 111, 0.38);
}
.hd-hl a:hover .hl-ic::after {
  animation: hl-ring 0.9s ease-out infinite;
}
.hl-t {
  position: relative;
}
.hl-t::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 2px;
  border-radius: 2px;
  background: var(--pk);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}
.hd-hl a:hover .hl-t::after {
  transform: scaleX(1);
}
.hl-leaf svg {
  transform-origin: 50% 90%;
  animation: hl-sway 3.2s ease-in-out infinite;
}
.hl-truck svg {
  animation: hl-drive 2.4s ease-in-out infinite 0.3s;
}
.hl-heart svg {
  animation: beat 1.8s ease-in-out infinite 0.6s;
}
.hd-hl a:hover .hl-ic svg {
  animation-duration: 0.8s;
}
@keyframes hl-sway {
  0%,
  100% {
    rotate: -10deg;
  }
  50% {
    rotate: 10deg;
  }
}
@keyframes hl-drive {
  0%,
  100% {
    translate: -2px 0;
  }
  50% {
    translate: 2px -1.5px;
  }
}
@keyframes hl-ring {
  0% {
    opacity: 0.75;
    transform: scale(0.85);
  }
  100% {
    opacity: 0;
    transform: scale(1.55);
  }
}
/* Màn vừa (1100–1279px): thu gọn khoảng cách + cỡ chữ để ô tìm kiếm vẫn đủ rộng */
@media (min-width: 1100px) and (max-width: 1279.98px) {
  .hd-hl {
    gap: 14px;
  }
  .hd-hl a {
    gap: 8px;
    font-size: 13px;
  }
  .hl-ic {
    width: 32px;
    height: 32px;
  }
  .hl-ic svg {
    width: 18px;
    height: 18px;
  }
}

/* Trái tim ở dòng chữ viết tay của banner: đập nhẹ + quầng sáng */
.hh-heart {
  display: inline-flex;
  color: var(--pk);
  animation: beat 1.8s ease-in-out infinite;
}
.hh-heart svg {
  filter: drop-shadow(0 2px 6px rgba(232, 84, 122, 0.4));
}
/* Cánh hoa nền trôi nhẹ */
.hh-pt {
  animation: hh-float 9s ease-in-out infinite alternate;
}
.hh-pt.r {
  animation-delay: -4.5s;
}
@keyframes hh-float {
  from {
    transform: translateY(0) rotate(0);
  }
  to {
    transform: translateY(16px) rotate(3deg);
  }
}

@media (max-width: 767.98px) {
  :root .hh-heart {
    display: inline-block;
    vertical-align: -3px;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.lay-hero.page-home .sr > svg,
  body.lay-hero.page-home .sr .go,
  body.lay-hero.page-home .sr .go svg,
  .hl-leaf svg,
  .hl-truck svg,
  .hl-heart svg,
  .hh-heart,
  .hh-pt,
  .hd-hl a:hover .hl-ic::after {
    animation: none !important;
  }
}

/* ===== [Chọn mẫu hoa] Dạng SLIDE vuốt ngang từ máy tính bảng trở xuống (≤991px) + sửa lỗi bị mất góc trên khi chạm/chọn thẻ =====
   Lỗi cũ: thẻ nằm trong khung cuộn ngang (overflow-y:hidden) chỉ chừa 2px phía trên, nhưng khi chạm vào thẻ bị "nhấc lên" 4px
   (hiệu ứng :hover dính lại trên cảm ứng) + viền/bóng nên mép trên và góc bo của thẻ bị cắt mất. Cách sửa:
   (1) khung cuộn có đệm trên/dưới đủ rộng (bù bằng margin âm nên bố cục không đổi), (2) cảm ứng KHÔNG nhấc thẻ lên nữa mà chỉ
   nhấn nhẹ khi chạm, (3) từ 768–991px (tablet) cũng là slide, không còn xếp 2 + 1 thẻ lẻ loi, (4) bỏ touch-action:pan-x để vuốt dọc trên thẻ vẫn cuộn được trang. */
@media (max-width: 991.98px) {
  .gp-grid.gp2 {
    display: flex;
    grid-template-columns: none;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    margin: -14px -40px -8px;
    padding: 14px 40px 22px;
    scroll-padding-inline: 40px;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    touch-action: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .gp-grid.gp2::-webkit-scrollbar {
    display: none;
  }
  .gp2-card {
    flex: 0 0 auto;
    width: 46%;
    max-width: 380px;
    scroll-snap-align: start;
  }
  .gp-dots {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-top: 10px;
  }
  .gp-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #e9d5dc;
  }
  .gp-dot.on {
    width: 20px;
    border-radius: 4px;
    background: var(--pk);
  }
}
@media (max-width: 767.98px) {
  .gp-grid.gp2 {
    margin-inline: -16px;
    padding-inline: 16px;
    scroll-padding-inline: 16px;
  }
  .gp2-card {
    width: 82vw;
    max-width: 340px;
  }
}
/* Cảm ứng: không có "rê chuột" nên bỏ hiệu ứng nhấc thẻ lên; chạm thì nhấn nhẹ xuống thay vì nhô ra ngoài khung */
@media (hover: none) {
  .gp2-card:hover {
    transform: none;
    box-shadow: 0 10px 26px rgba(60, 20, 30, 0.1);
  }
  .gp2-card:hover > .gp-btn {
    transform: none;
    box-shadow: 0 8px 18px rgba(194, 54, 111, 0.26);
  }
  .gp2-card:active {
    transform: scale(0.985);
  }
}
@media (max-width: 991.98px) {
  .gp2-card:hover {
    transform: none;
  }
  .gp2-card:active {
    transform: scale(0.985);
  }
}

/* ===== [Gọi / Nhắn Zalo] Chọn người tư vấn khi có từ 2 người liên hệ trở lên (Admin > Liên hệ tư vấn) =====
   .cta không có .has-pick (0 hoặc 1 người) giữ NGUYÊN giao diện cũ, không có gì thay đổi ở khối này. */
.cta.has-pick {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
.cta-picker {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}
.cta-picker::-webkit-scrollbar {
  display: none;
}
.cta-chip {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 52px;
  padding: 0 14px 0 6px;
  border-radius: 999px;
  border: 1.5px solid var(--ln);
  background: #fff;
  cursor: pointer;
  text-align: left;
  transition:
    border-color 0.15s,
    background 0.15s;
}
.cta-chip:hover {
  border-color: #f2b8c8;
}
.cta-chip.on {
  border-color: var(--pk);
  background: #fdeef2;
}
.cta-av {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #efe3e7;
  color: var(--mut);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  transition:
    background 0.15s,
    color 0.15s;
}
.cta-chip.on .cta-av {
  background: var(--pk);
  color: #fff;
}
.cta-tx {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.cta-tx b {
  font-size: 13px;
  font-weight: 600;
  color: var(--tx);
  white-space: nowrap;
}
.cta-tx small {
  font-size: 11px;
  color: var(--mut);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}
.cta-btns {
  display: flex;
  gap: 12px;
}
.cta.has-pick .cta-btns {
  width: 100%;
}
.cta-hint {
  font-size: 12px;
  color: var(--mut);
}
.cta-hint b {
  color: var(--tx);
  font-weight: 600;
}
@media (max-width: 767.98px) {
  .cta-chip {
    height: 48px;
    padding: 0 12px 0 5px;
  }
  .cta-av {
    width: 34px;
    height: 34px;
    font-size: 12.5px;
  }
  .cta-tx b {
    font-size: 12.5px;
  }
  .cta-tx small {
    font-size: 10.5px;
    max-width: 110px;
  }
  :root .cta.st.has-pick {
    flex-direction: column;
    align-items: stretch;
    padding: 10px 14px;
  }
}

/* ===== Trang 404 ===== */
.nf {
  max-width: 640px;
  margin: 0 auto;
  padding: 72px 20px 56px;
  text-align: center;
}
.nf-ico {
  position: relative;
  width: 96px;
  height: 96px;
  margin: 0 auto 26px;
  border-radius: 50%;
  background: linear-gradient(160deg, #fff0f3, #ffe3ea);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pk);
}
.nf-404 {
  position: absolute;
  bottom: -10px;
  right: -14px;
  background: var(--pk);
  color: #fff;
  font:
    800 13px/1 "Inter",
    sans-serif;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 10px rgba(200, 60, 100, 0.3);
}
.nf h1 {
  margin: 0 0 10px;
  font-size: clamp(26px, 4vw, 34px);
}
.nf p {
  color: var(--mut);
  margin: 0 0 26px;
  font-size: 15px;
  line-height: 1.6;
}
.nf-sr {
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
  max-width: 420px;
  height: 46px;
  margin: 0 auto 22px;
  border-radius: 23px;
  background: #f0edea;
  border: 1px solid #e6e2da;
  padding: 0 16px;
  color: var(--mut);
}
.nf-sr svg {
  color: var(--mut);
  flex: none;
}
.nf-sr input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--tx);
  font-size: 14px;
  padding: 0;
}
.nf-sr input::placeholder {
  color: var(--mut);
  opacity: 1;
}
.nf-sr:focus-within {
  border-color: var(--pk);
  background: #fff;
}
.nf-sr .go {
  flex: none;
  width: 32px;
  height: 32px;
  margin-right: -9px;
  border: 0;
  border-radius: 50%;
  background: var(--pk);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.nf-cats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 30px;
}
.nf-home {
  display: inline-flex;
}
@media (max-width: 767.98px) {
  .nf {
    padding: 52px 16px 40px;
  }
  .nf-cats {
    gap: 8px;
  }
}

/* ===== Thanh liên hệ nổi: Gọi + Zalo chính + Zalo phụ (góc dưới phải, mọi trang) =====
   Cùng hệ tọa độ với .totop (xem các mốc bottom ở trên) + luôn cộng thêm ~58-60px để nằm NGAY TRÊN nút "Lên đầu
   trang", không bao giờ chồng lên nhau hay lên thanh Gọi/Zalo dính đáy trên trang chi tiết sản phẩm. */
.sfloat {
  position: fixed;
  right: 18px;
  bottom: 82px;
  z-index: 59;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}
/* Cụm nút Zalo/Gọi/Tạo thiệp giờ bọc riêng trong .sf-items để thêm được nút ẩn/hiện (.sf-toggle) cố định bên
   dưới cùng — ẩn cả cụm (display:none, không chỉ mờ đi) để không còn chiếm chỗ/chặn tay khi khách muốn xem
   nội dung bên dưới, bấm lại nút tròn nhỏ là hiện lại ngay. Trạng thái nhớ qua localStorage (xem app.js) nên
   đóng ở trang này thì sang trang khác vẫn đóng, không phải đóng lại nhiều lần. */
.sf-items {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}
.sfloat.collapsed .sf-items {
  display: none;
}
.sf-toggle {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--ln);
  color: var(--mut);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition:
    transform 0.3s var(--ease),
    background 0.2s,
    color 0.2s,
    border-color 0.2s;
}
.sf-toggle:hover {
  background: var(--pk);
  color: #fff;
  border-color: var(--pk);
}
/* Mũi tên quay ngược lại khi đang đóng — gợi ý "bấm để mở lại lên trên" thay vì "bấm để thu xuống" */
.sfloat.collapsed .sf-toggle {
  transform: rotate(180deg);
}
.sf-btn {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s;
}
.sf-btn:hover {
  transform: translateY(-2px) scale(1.05);
}
.sf-call {
  background: #25d366;
  color: #fff;
}
/* Nút "Tạo thiệp" trong thanh liên hệ nổi — cùng kiểu thẻ tên trượt ra như 2 nút Zalo (dễ nhận biết ngay là
   bấm vào đâu, không chỉ icon trần), nhưng viền/icon màu hồng thương hiệu thay vì xanh Zalo để phân biệt rõ
   đây không phải kênh liên hệ. KHÔNG có vòng sóng lan tỏa như Zalo chính (tránh 2 hiệu ứng tranh nhau). */
.sf-circ-card {
  border-color: var(--pk);
  color: var(--pk);
}
/* Chỉ hiện nút "Tạo thiệp" trên mobile — desktop đã có 2 nút "Tạo thiệp"/"Tạo banner" riêng ngay trên header,
   hiện thêm lần nữa ở đây dễ thành thừa/rối mắt. display:none đặt mặc định (desktop), mở lại trong khối
   @media (max-width:991.98px) bên dưới — đúng breakpoint đang dùng chung cho mọi điều chỉnh mobile của thanh này.
   Dùng tiền tố ":root" để chắc chắn thắng được rule ".sf-item{display:flex}" (cùng độ đặc hiệu, định nghĩa SAU
   trong file nên nếu không tăng độ đặc hiệu sẽ bị rule đó đè ngược lại, nút vẫn hiện trên desktop). */
:root .sf-card {
  display: none;
}

/* Hướng A: mỗi Zalo = 1 vòng tròn viền xanh + 1 thẻ tên luôn trượt ra sẵn cạnh nó (không cần hover) */
.sf-item {
  display: flex;
  align-items: center;
  gap: 0;
  text-decoration: none;
  animation: sfIn 0.5s var(--ease) backwards;
}
/* Độ trễ so le khi 2 thẻ Zalo trượt ra — dùng sibling-combinator tính từ nút "Tạo thiệp" (luôn là con đầu
   tiên) thay vì :nth-child theo vị trí tuyệt đối, để không bị lệch số khi có/không có Zalo phụ. */
.sf-card + .sf-item {
  animation-delay: 0.15s;
}
.sf-card + .sf-item + .sf-item {
  animation-delay: 0.3s;
}
@keyframes sfIn {
  from {
    opacity: 0;
    translate: 24px 0;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
.sf-tag {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
  padding: 7px 14px 7px 12px;
  margin-right: -14px;
  white-space: nowrap;
  transition: transform 0.2s;
}
.sf-tag b {
  font:
    700 12px/1.2 "Inter",
    sans-serif;
  color: var(--tx);
}
.sf-tag i {
  font:
    500 10px/1.3 "Inter",
    sans-serif;
  color: var(--mut);
  font-style: normal;
  margin-top: 2px;
}
.sf-circ {
  position: relative;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid #0068ff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  z-index: 2;
  transition: transform 0.2s;
}
.sf-item:hover .sf-circ {
  transform: scale(1.08);
}
.sf-item:hover .sf-tag {
  transform: translateX(-3px);
}

/* Vòng sóng lan tỏa nhẹ nhàng quanh Zalo chính, thu hút chú ý — không làm phiền, lặp thưa (3.2s/lần) */
.sf-main .sf-circ::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #0068ff;
  opacity: 0.5;
  animation: sfPulse 3.2s ease-out infinite;
  z-index: -1;
}
@keyframes sfPulse {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }
  75% {
    transform: scale(1.8);
    opacity: 0;
  }
  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sf-main .sf-circ::before,
  .sf-item {
    animation: none;
  }
}
@media (max-width: 991.98px) {
  :root .sfloat {
    bottom: 146px;
    right: 14px;
    gap: 10px;
  }
  :root .sf-card {
    display: flex;
  }
  :root .sf-btn,
  :root .sf-circ {
    width: 42px;
    height: 42px;
  }
  :root .sf-toggle {
    width: 26px;
    height: 26px;
  }
  :root .sf-tag {
    padding: 6px 11px 6px 10px;
  }
  :root .sf-tag b {
    font-size: 11px;
  }
  :root .sf-tag i {
    font-size: 9.5px;
  }
  :root .page-detail .sfloat {
    bottom: 144px;
  }
  :root .page-detail:has(.cta.st.has-pick) .sfloat {
    bottom: 230px;
  }
}

/* ===== Popup ẢNH trang chủ (Admin > Popup ảnh) — thẻ dọc: thanh tiêu đề đếm số ảnh, ảnh TRÀN VIỀN (full-bleed)
   phủ kín toàn bộ phần giữa, nút đóng/mũi tên/chấm trang/ô tick đè trực tiếp lên ảnh (có lớp phủ tối mờ dưới đáy
   ảnh để luôn đọc được), thanh nút "Chọn ngay" cố định dưới cùng. Bản này quay lại kiểu TRÀN VIỀN thay vì kiểu
   "ảnh co nhỏ + viền đệm" của bản trước — bản trước tạo khoảng trống chết quanh ảnh khi tỉ lệ ảnh không khớp
   khung, trông rời rạc; tràn viền thì ảnh LUÔN lấp đầy, không bao giờ hở khoảng trống, mọi nút đều nằm gọn trên
   1 khối ảnh liền mạch thay vì rải rác trên nhiều vùng nền khác nhau. Dùng cqw (% bề rộng thẻ) để mọi kích thước
   co giãn đồng đều ở mọi cỡ màn hình, không cần viết riêng cho mobile/desktop.
   QUAN TRỌNG: mọi selector trong khối này đều scope qua ".pop-photo" — KHÔNG viết ".pop-slide"/".im" trần, vì
   2 class đó dùng CHUNG với popup sự kiện (#eventModal) ở khối CSS cách xa phía trên; viết trần sẽ đè mất CSS
   của popup sự kiện do nằm sau trong file (lỗi thật đã gặp: popup sự kiện mất ảnh, .pop cao 0px). ===== */
#photoModal{--pp-w:min(400px,78vw,calc((100vh - 84px)*.6))}
#photoModal .modal-dialog{width:var(--pp-w);max-width:none;margin-left:auto;margin-right:auto}
#photoModal.fade .modal-dialog{transform:none;transition:none}
#photoModal.show .modal-dialog{animation:ppIn .36s cubic-bezier(.2,1.1,.4,1)}
@keyframes ppIn{from{opacity:0;transform:scale(.92) translateY(16px)}}
#photoModal .modal-content{background:transparent;border:0;--bs-modal-bg:transparent;width:100%;container-type:inline-size}
@media (prefers-reduced-motion:reduce){#photoModal.show .modal-dialog{animation:none}}

.pop.pop-photo{width:100%;max-width:none;aspect-ratio:400/540;border-radius:clamp(12px,2.6cqw,18px);overflow:hidden;background:#FAF0E6;display:flex;flex-direction:column;box-shadow:0 30px 70px -16px rgba(106,51,80,.4);border:1px solid rgba(201,184,90,.35)}   /* hạ bớt chiều cao khung (600 -> 540): khung càng cao-hẹp thì khoảng hở quanh ảnh "contain" (khi ảnh không khớp tỉ lệ) càng dễ bị lộ thành từng mảng rõ rệt, nhất là ảnh chụp ngang (khổ rộng) */

/* 1. Thanh tiêu đề: nền kem, icon hoa nhỏ, số lượng tô màu hồng thương hiệu */
.pp-head{flex:none;height:clamp(46px,12.5cqw,58px);display:flex;align-items:center;justify-content:center;gap:1.8cqw;background:#FAF0E6;border-bottom:1px solid #ece48f;color:#6a3350;font:800 clamp(16px,4.2cqw,20px)/1 'Inter',sans-serif;letter-spacing:.04em;text-transform:uppercase}
.pp-head svg{width:clamp(16px,4cqw,19px);height:clamp(16px,4cqw,19px);color:#e8547a;flex:none}

/* Hiệu ứng bắt mắt cho thanh tiêu đề: icon hoa lắc nhẹ như gió thổi, chữ có ánh sáng lướt qua (shine sweep) lặp
   lại mỗi vài giây, số lượng ảnh "(N)" nảy nhẹ để hút mắt vào con số mới. Cả 3 hiệu ứng đều NHẸ NHÀNG, lặp vô hạn
   nhưng không giật/chói mắt — tắt hết khi người dùng bật "giảm chuyển động" (prefers-reduced-motion). */
.pp-head-ic{display:inline-flex;transform-origin:50% 60%;animation:ppIconWiggle 1.8s ease-in-out infinite}
@keyframes ppIconWiggle{0%,100%{transform:rotate(0) scale(1)}20%{transform:rotate(-22deg) scale(1.22)}50%{transform:rotate(18deg) scale(1.22)}75%{transform:rotate(-10deg) scale(1.05)}}

.pp-head-txt{position:relative;display:inline-block;background-image:linear-gradient(100deg,#6a3350 35%,#ffe3ec 50%,#6a3350 65%);background-size:260% 100%;background-position:160% 0;-webkit-background-clip:text;background-clip:text;color:transparent;animation:ppShine 2.2s ease-in-out infinite,ppBounce 1.8s ease-in-out infinite}
@keyframes ppShine{0%,20%{background-position:160% 0}65%,100%{background-position:-60% 0}}
@keyframes ppBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

/* Hạt lấp lánh nhỏ nhấp nháy 2 bên chữ, lệch nhịp nhau cho rộn ràng hơn */
.pp-spark{position:absolute;top:-6px;font-style:normal;font-size:10px;color:#ffd166;-webkit-text-fill-color:#ffd166;text-shadow:0 0 6px rgba(255,209,102,.9);animation:ppSparkle 1.4s ease-in-out infinite}
.pp-spark1{left:-4px;animation-delay:0s}
.pp-spark2{right:-4px;top:auto;bottom:-8px;animation-delay:.6s}
@keyframes ppSparkle{0%,100%{opacity:0;transform:scale(.4) rotate(0deg)}50%{opacity:1;transform:scale(1.15) rotate(25deg)}}

/* Quầng sáng hồng nảy xung quanh số lượng "(N)" — kiểu hiệu ứng "nhãn mới" hay thấy, kết hợp phóng to mạnh hơn */
.pp-head-cnt{position:relative;display:inline-block;font-weight:800;color:#e8547a;animation:ppCntPop 1.8s ease-in-out infinite}
.pp-head-cnt::before{content:'';position:absolute;inset:-5px -7px;border-radius:999px;background:rgba(232,84,122,.22);animation:ppCntRing 1.8s ease-out infinite;z-index:-1}
@keyframes ppCntPop{0%,100%{transform:scale(1)}50%{transform:scale(1.32)}}
@keyframes ppCntRing{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.9);opacity:0}}

@media (prefers-reduced-motion:reduce){
  .pp-head-ic,.pp-head-txt,.pp-head-cnt,.pp-head-cnt::before,.pp-spark{animation:none}
  .pp-head-txt{background:none;color:inherit;-webkit-background-clip:unset;background-clip:unset}
  .pp-spark{display:none}
}

/* 2. Vùng ảnh: 2 lớp chồng nhau — lớp DƯỚI (.bg) là chính ảnh đó phóng to + làm mờ, LẤP ĐẦY toàn khung (không hở
   khoảng trống); lớp TRÊN (.im) là ảnh THẬT, dùng "contain" nên LUÔN hiện trọn vẹn, KHÔNG BAO GIỜ cắt mất góc/cạnh
   dù ảnh dọc hay ngang. Cách này vừa không mất góc ảnh, vừa không để lộ khoảng nền trống đơn điệu như kiểu
   "contain trần" đã thử trước đó (nền trống đơn sắc nhìn rời rạc) — khoảng hở hai bên/trên dưới giờ được lấp bằng
   chính ảnh đó mờ đi, luôn đồng điệu màu sắc với ảnh chính. */
.pp-body{position:relative;flex:1 1 auto;min-height:0;background:#2a2630;overflow:hidden}
.pop-photo .pop-slide{position:absolute;inset:0}
.pop-photo .pop-slide[hidden]{display:none}
.pop-photo .pop-slide .bg{position:absolute;inset:-6%;background-size:cover;background-position:center;background-color:transparent;filter:blur(28px) brightness(.92) saturate(1.2);z-index:0}   /* giảm độ tối (brightness .72 -> .92) — ảnh studio nền đen khi làm mờ + tối thêm sẽ ra GẦN NHƯ ĐEN TUYỀN, trông như mảng chết/lỗi hình chứ không giống "ảnh mờ hậu cảnh"; để sáng hơn thì dù ảnh nền tối vẫn còn thấy sắc màu/kết cấu mờ nhòe, rõ là chủ ý */
.pop-photo .pop-slide .im{position:absolute;inset:0;background-size:contain;background-repeat:no-repeat;background-position:center top;background-color:transparent;z-index:1}   /* neo lên mép TRÊN thay vì canh giữa: khung popup khá cao-hẹp (nhất là trên mobile), ảnh "contain" canh giữa dễ bị dải trống phía trên khá rõ (ngay dưới nút đóng), trông như "ảnh bị kéo xuống". Neo lên trên thì ảnh bám sát luôn phần đầu khung, hết dải trống trên; phần hở (nếu có) dồn hết xuống đáy — ít bị để ý hơn vì đã có lớp phủ tối + chấm trang + ô tick che ở đó */
/* Lớp phủ tối mờ dưới đáy ảnh — để chấm trang/ô tick luôn đọc được dù ảnh nền sáng hay tối, gộp mọi nút điều
   khiển vào CÙNG 1 vùng liền mạch thay vì rải rác như bản trước */
.pop-photo .pop-slide::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(42,20,35,0) 78%,rgba(42,20,35,.55) 100%)}   /* thu hẹp + giảm độ đậm (60%->78% mới bắt đầu, .72->.55) vì nền mờ giờ đã sáng hơn, không cần lớp phủ tối dày nữa — tránh cộng dồn thành 1 mảng tối phẳng lì ở đáy */

/* 2a. Chữ nghiêng đè trên ảnh (tùy chọn, admin để trống thì tự ẩn) */
.pp-quote{position:absolute;z-index:3;left:4.4cqw;top:3.6cqw;right:15cqw;margin:0;pointer-events:none;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.55);font:italic 600 clamp(18px,5.4cqw,24px)/1.25 'Cormorant Garamond',Georgia,serif}

/* 2b. Nút đóng góc trên-phải: nền trắng đặc, rõ trên mọi nền */
.pop-photo .xb{position:absolute;z-index:3;top:2.8cqw;right:2.8cqw;width:clamp(28px,7.6cqw,33px);height:clamp(28px,7.6cqw,33px);border-radius:50%;border:0;background:rgba(255,255,255,.96);color:#e8547a;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;box-shadow:0 6px 14px rgba(60,20,35,.3);transition:transform .2s,box-shadow .2s}
.pop-photo .xb svg{width:42%;height:42%}
.pop-photo .xb:hover{transform:scale(1.08);box-shadow:0 8px 18px rgba(60,20,35,.38)}

/* 2c. Mũi tên trái/phải — nền trắng đặc, canh giữa chiều cao ảnh */
.pp-nav{position:absolute;z-index:3;top:50%;translate:0 -50%;width:clamp(30px,8.4cqw,36px);aspect-ratio:1;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:#e8547a;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;box-shadow:0 6px 14px rgba(60,20,35,.25);transition:background .2s,color .2s,transform .2s}
.pp-nav svg{width:42%;height:42%}
.pp-prev{left:2.8cqw}
.pp-next{right:2.8cqw}
.pp-next svg{transform:scaleX(-1)}
.pp-nav:hover{background:#fff;color:#c2366f}
.pp-nav:active{translate:0 -50%;transform:scale(.94)}

/* 2d. Chấm trang — nằm ngay trên lớp phủ tối đáy ảnh, cùng hàng với ô tick cho gọn 1 dải duy nhất */
.pp-dots{position:absolute;z-index:3;left:0;right:0;bottom:4cqw;display:flex;justify-content:center;gap:5px}
.pp-dot{width:6px;height:6px;border-radius:50%;border:0;padding:0;cursor:pointer;background:rgba(255,255,255,.5);transition:width .25s,background .25s}
.pp-dot.on{width:18px;border-radius:3px;background:#fff}

/* 2e. Ô "Không hiện lại hôm nay" góc dưới-trái, đè trên lớp phủ tối đáy ảnh — cùng mặt phẳng với chấm trang,
   không còn tách riêng xuống dưới ảnh như bản trước (đó là nguồn gốc cảm giác "rời rạc, nhiều khoảng trống thừa") */
.ck-photo{position:absolute;z-index:3;left:3.2cqw;bottom:3.2cqw;margin:0;justify-content:flex-start;gap:6px;padding:5px 10px 5px 7px;border-radius:999px;background:rgba(255,255,255,.94);color:#6a3350;font-size:clamp(11px,2.9cqw,12.5px);box-shadow:0 6px 14px rgba(0,0,0,.2)}
.ck-photo i{position:relative;width:14px;height:14px;border-radius:4px;border-color:#d9a9bb;pointer-events:none}   /* pointer-events:none: <i> không được che mất click xuống <input> tuyệt đối bên dưới */
.ck-photo.on i{background:#e8547a;border-color:#e8547a}
.ck-photo.on i::after{content:'';position:absolute;left:30%;top:6%;width:30%;height:58%;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(40deg)}
.ck-photo span{font-weight:500}

/* 3. Thanh dưới cùng: nền kem, nút "Chọn ngay" viên thuốc gradient hồng thương hiệu nổi giữa (đồng bộ .hbtn) */
.pp-foot{flex:none;padding:clamp(10px,2.6cqw,14px) clamp(16px,4.4cqw,22px);background:#FAF0E6;border-top:1px solid #ece48f;display:flex;justify-content:center}
.pp-cta{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:1.6cqw;width:100%;height:clamp(40px,11cqw,48px);border-radius:999px;background:linear-gradient(135deg,#34c165,#1e9e4f);color:#fff;text-decoration:none;font:700 clamp(14.5px,3.7cqw,18px)/1 'Inter',sans-serif;letter-spacing:.03em;text-transform:uppercase;box-shadow:0 14px 26px -8px rgba(30,158,79,.6);transition:transform .2s,box-shadow .2s;animation:ppCtaPulse 1.7s ease-in-out infinite}
.pp-cta svg{position:relative;z-index:1;width:clamp(16px,4cqw,19px);height:clamp(16px,4cqw,19px)}
.pp-cta span{position:relative;z-index:1}
.pp-cta:hover{color:#fff;transform:translateY(-1px) scale(1.04);box-shadow:0 16px 32px -8px rgba(30,158,79,.75)}
/* Dải sáng chéo lướt qua nút lặp lại, kiểu hiệu ứng nút khuyến mãi hay dùng để hút click */
.pp-cta::after{content:'';position:absolute;top:0;bottom:0;left:-40%;width:35%;background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 100%);transform:skewX(-20deg);animation:ppCtaShine 2.6s ease-in-out infinite}
@keyframes ppCtaShine{0%,25%{left:-40%}75%,100%{left:120%}}
/* Nút "thở" phồng nhẹ + quầng sáng xanh nảy theo nhịp, hút mắt về phía nút bấm */
@keyframes ppCtaPulse{0%,100%{box-shadow:0 14px 26px -8px rgba(30,158,79,.6),0 0 0 0 rgba(52,193,101,.55)}50%{box-shadow:0 14px 26px -8px rgba(30,158,79,.6),0 0 0 9px rgba(52,193,101,0)}}
@media (prefers-reduced-motion:reduce){.pp-cta{animation:none}.pp-cta::after{display:none}}

/* ===== Trang chi tiết sản phẩm: tab "Hoa này hợp tặng dịp nào?" (dưới ảnh/thông tin, trên gợi ý sản phẩm) ===== */
.occ-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.occ-tab {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid #ecd9df;
  background: #fff7f9;
  color: var(--mut, #6f4d5e);
  font:
    600 12px/1 "Inter",
    sans-serif;
}