/* Font tiêu đề của thiết kế (Fz Brothership) */
@font-face {
  font-family: "Fz Brothership";
  src: url("FzBrothership.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --hh-green: #009981;
  --hh-green-btn: #0daf78;
  --hh-red: #f96153;
  --hh-pink: #fc5576;
  --hh-gold: #e5a021;
  --hh-text: #424242;
}

/* Toàn bộ CSS bên dưới đều scope trong .haihoa2026 (namespace riêng cho game) để không
   đè/bị đè bởi CSS chung của site khi nhúng vào layout PJ06 (header/footer thật). */
/* .wrapper của layout PJ06 là flex container: khai báo width + flex rõ ràng để .haihoa2026 không bị co theo flexbox. */
.haihoa2026 { width: 100%; flex: 1 1 auto; min-width: 0; margin: 0; background: #fff; color: var(--hh-text); font-family: Inter, Arial, sans-serif; }
.haihoa2026 * { box-sizing: border-box; }
.haihoa2026 button, .haihoa2026 a { font: inherit; }
.haihoa2026 button { color: inherit; }
.haihoa2026 [hidden] { display: none !important; }
.haihoa2026 img { display: block; max-width: none; }

/* ===== Trang không đăng nhập / chưa bắt đầu / đã kết thúc ===== */
.haihoa2026 #game-close { display: flex; align-items: center; justify-content: center; min-height: 60vh; padding: 24px; }
.haihoa2026 #game-close .bg { max-width: 480px; text-align: center; padding: 32px; border: 2px solid var(--hh-pink); border-radius: 20px; background: #fff; box-shadow: 0 4px 4px rgba(252, 85, 118, .25); }
.haihoa2026 #game-close h3 { color: var(--hh-green); margin-top: 0; }
.haihoa2026 .game-welcome { display: flex; align-items: center; justify-content: center; min-height: 60vh; padding: 24px; }
.haihoa2026 .game-welcome h2 { color: var(--hh-green); }
.haihoa2026 .game-welcome .welcome-btn { display: inline-block; margin-top: 16px; padding: 14px 32px; border-radius: 30px; background: var(--hh-green-btn); color: #fff; font-weight: 700; text-decoration: none; text-transform: uppercase; }

/* ===== Khung trang (shell + stage + page scale-to-fit, JS tính scale theo chiều rộng khung chứa) ===== */
.haihoa2026 .hh-shell { position: relative; width: 100%; overflow: hidden; background: url("page-bg.png") center top / cover no-repeat, #cfeaf9; }
.haihoa2026 .hh-stage { position: relative; width: 100%; min-height: 2100px; }
.haihoa2026 .hh-page { position: absolute; top: 0; left: 50%; width: 1200px; margin-left: -600px; padding-bottom: 40px; transform-origin: top center; transform: scale(var(--page-scale, 1)); }

.haihoa2026 .hh-hero { position: relative; height: 300px; }
.haihoa2026 .hh-hero-img { position: absolute; left: 87px; top: 0; width: 778px; }
.haihoa2026 .hh-hero-img img { width: 100%; height: auto; }

.haihoa2026 .hh-program { display: flex; flex-direction: column; gap: 80px; width: 1200px; }
.haihoa2026 .hh-row { display: flex; gap: 40px; }
.haihoa2026 .hh-row-1 { height: 582px; }
.haihoa2026 .hh-row-2 { height: 465px; }

/* ===== Tiêu đề font script (Fz Brothership theo Figma) ===== */
.haihoa2026 .hh-title {
  position: absolute;
  z-index: 3;
  margin: 0;
  font-family: "Fz Brothership", "Segoe Script", cursive;
  font-style: normal;
  font-weight: 400;
  font-size: 40px;
  line-height: 1.2;
  white-space: nowrap;
  color: #fffa90;
  -webkit-text-stroke: 4px #0a8f78;
  paint-order: stroke fill;
  text-shadow: 0 2px 2px rgba(0, 80, 60, .35);
}
.haihoa2026 .hh-title-game { left: calc(50% - 140px); top: 100px; }
.haihoa2026 .hh-title-score { left: calc(50% - 112px); top: 110px; }
.haihoa2026 .hh-title-voucher { left: 243px; top: 0px; }
.haihoa2026 .hh-title-gift { left: 113.28px; top: 80px; }

.haihoa2026 .hh-tulip { position: absolute; top: 0; width: 436px; height: 181px; pointer-events: none; }

/* ===== Vườn hoa ===== */
.haihoa2026 .hh-game { position: relative; flex: none; width: 812px; height: 582px; }
.haihoa2026 .hh-game .hh-tulip { left: 188px; }
.haihoa2026 .hh-card { border-radius: 20px; box-shadow: 0 4px 4px rgba(252, 85, 118, .25); }
.haihoa2026 .hh-game-card {
  position: absolute;
  top: 131px;
  left: 0;
  width: 812px;
  height: 451px;
  padding: 24px 20px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  background: url("page-bg.png") 0 -173px / 100% 150.71% no-repeat;
}
.haihoa2026 .hh-hint { margin: 0; font-family: Barlow, Inter, sans-serif; font-weight: 600; font-size: 24px; line-height: 28px; color: var(--hh-green); text-align: center; }

.haihoa2026 .hh-board { position: relative; flex: none; width: 768px; }
.haihoa2026 .hh-trees { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; width: 768px; }
.haihoa2026 .hh-tree { width: 140.8px; height: 140.8px; padding: 0; border: 0; background: transparent; cursor: pointer; transition: transform .2s, filter .2s; }
.haihoa2026 .hh-tree img { width: 100%; height: 100%; object-fit: contain; }
.haihoa2026 .hh-tree:hover, .haihoa2026 .hh-tree.selected { transform: scale(1.06); filter: drop-shadow(0 0 10px rgba(255, 255, 255, .9)) brightness(1.05); }
.haihoa2026 .hh-tree:disabled { cursor: default; }
.haihoa2026 .hh-overlay { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: rgba(18, 18, 18, .65); transition: opacity .25s; }
.haihoa2026 .hh-board.is-ready .hh-overlay { display: none; }
.haihoa2026 .hh-board.is-idle .hh-countdown { display: none; }
.haihoa2026 .hh-board.is-done .hh-start { display: none; }
.haihoa2026 .hh-countdown { margin: 0; font-family: Barlow, Inter, sans-serif; font-weight: 600; font-size: 24px; line-height: 32px; color: #fff; text-align: center; }
.haihoa2026 .hh-countdown b { color: #fc4f78; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Nút nền ảnh (Bắt đầu chọn cây / Đóng) */
.haihoa2026 .hh-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  padding: 0 24px;
  color: #fff;
  cursor: pointer;
  font-family: Barlow, Inter, sans-serif;
  font-weight: 600;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .25);
  background: url("btn-link.png") center bottom / 100% 100% no-repeat;
}
.haihoa2026 .hh-start { width: 250px; height: 68px; font-size: 24px; }

.haihoa2026 .hh-turns { margin: 0; font-weight: 500; font-size: 16px; line-height: 24px; text-align: center; color: var(--hh-text); }
.haihoa2026 .hh-turns strong { font-weight: 600; font-size: 24px; line-height: 30px; color: var(--hh-green); }

.haihoa2026 .hh-rules-btn {
  position: absolute;
  top: 20px;
  left: 702px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid #fff;
  border-radius: 8px;
  background: var(--hh-green);
  box-shadow: 0 2px 1px rgba(0, 0, 0, .15);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
}
.haihoa2026 .hh-rules-btn img { width: 16px; height: 16px; }

.haihoa2026 .hh-sound { z-index: 4; display: flex; align-items: center; justify-content: center; padding: 0; background: #fff; border: 2px solid var(--hh-red); border-radius: 8px; cursor: pointer; }
.haihoa2026 .hh-sound[aria-pressed="true"] { opacity: .55; }
.haihoa2026 .hh-sound-d { position: absolute; left: 0; top: 106px; width: 60px; height: 60px; }
.haihoa2026 .hh-sound-d img { width: 32px; height: 24.7px; }
.haihoa2026 .hh-sound-m { display: none; }

/* ===== Tổng điểm ===== */
.haihoa2026 .hh-score { position: relative; flex: none; width: 348px; height: 582px; }
.haihoa2026 .hh-score-box { position: absolute; left: 0; top: 0; width: 348px; height: 403px; }
.haihoa2026 .hh-score-card { position: absolute; left: 28px; top: 139.39px; width: 294px; height: 442.6px; background: #fff; border-radius: 0 0 12px 12px; box-shadow: 0 4px 4px rgba(252, 85, 118, .25); }
.haihoa2026 .hh-score-body { position: absolute; left: 28px; top: 170px; width: 294px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.haihoa2026 .hh-score-num { display: flex; align-items: center; gap: 12px; height: 97px; font-weight: 800; line-height: normal; white-space: nowrap; }
.haihoa2026 .hh-score-num span { color: transparent; -webkit-background-clip: text; background-clip: text; background-position: center; background-size: cover; background-repeat: no-repeat; }
.haihoa2026 .hh-score-num .num { font-size: 80px; background-image: url("text-score-fill.png"); }
.haihoa2026 .hh-score-num .unit { font-size: 40px; background-image: url("text-diem-fill.png"); }
/* Điểm từ 4 chữ số trở lên: thu nhỏ chữ để không tràn khung 294px */
.haihoa2026 .hh-score-num.is-long .num { font-size: 64px; }
.haihoa2026 .hh-score-num.is-long .unit { font-size: 34px; }
.haihoa2026 .hh-score-num.is-xlong .num { font-size: 52px; }
.haihoa2026 .hh-score-num.is-xlong .unit { font-size: 30px; }
.haihoa2026 .hh-score-sep { position: relative; width: 100%; height: 32px; }
.haihoa2026 .hh-score-sep .line { position: absolute; left: 0; top: 17px; width: 100%; height: auto; }
.haihoa2026 .hh-score-sep .badge { position: absolute; left: 55px; top: 0; display: flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 12px; background: var(--hh-red); color: #fff; font-weight: 600; font-size: 16px; line-height: 24px; white-space: nowrap; }
.haihoa2026 .hh-score-sep .badge img { width: 20px; height: 20px; }
.haihoa2026 .hh-flowers { display: flex; flex-direction: column; gap: 12px; width: 268px; height: 238px; }
.haihoa2026 .hh-flower { flex: 1 1 0; min-height: 0; display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 8px; background: #a6a7aa; color: #eaebf0; }
.haihoa2026 .hh-flower.is-got { color: #fff; }
.haihoa2026 .hh-flower.is-got[data-flower="phuong"] { background: linear-gradient(to top, #f96153, #fda3b4); }
.haihoa2026 .hh-flower.is-got[data-flower="sua"] { background: linear-gradient(to top, #eb6a94, #fdcdde); }
.haihoa2026 .hh-flower.is-got[data-flower="banglang"] { background: linear-gradient(to top, #8a38f5, #dd9bfa); }
.haihoa2026 .hh-flower .thumb { position: relative; flex: none; width: 52px; height: 52px; border: 1px solid #fff; border-radius: 8px; overflow: hidden; }
.haihoa2026 .hh-flower .thumb img { width: 100%; height: 100%; object-fit: contain; }
.haihoa2026 .hh-flower[data-flower="phuong"] .thumb img { object-fit: cover; }
.haihoa2026 .hh-flower:not(.is-got) .thumb::after { content: ""; position: absolute; inset: 0; background: rgba(18, 18, 18, .2); }
.haihoa2026 .hh-flower .txt { width: 140px; overflow: hidden; font-family: Barlow, Inter, sans-serif; font-weight: 600; text-overflow: ellipsis; }
.haihoa2026 .hh-flower .txt b { display: block; margin-bottom: 2px; font-weight: 600; font-size: 20px; line-height: normal; }
.haihoa2026 .hh-flower .txt i { display: block; font-style: normal; font-size: 14px; line-height: normal; }

/* ===== Chuyên cần tích điểm ===== */
.haihoa2026 .hh-voucher { position: relative; flex: none; width: 826px; height: 465px; }
.haihoa2026 .hh-voucher .hh-tulip { left: 186px; }
.haihoa2026 .hh-voucher-wrap { position: absolute; left: 0; top: 99px; width: 826px; height: 365px; filter: drop-shadow(0 4px 2px rgba(252, 85, 118, .25)); }
.haihoa2026 .hh-voucher-card { position: absolute; left: 0; top: 25px; width: 826px; padding: 42px 20px 20px; display: flex; flex-direction: column; align-items: center; gap: 16px; box-shadow: none; background: url("page-bg.png") center / cover no-repeat; }
.haihoa2026 .hh-vouchers { display: flex; align-items: center; gap: 8px; }
.haihoa2026 .hh-vcard { position: relative; flex: none; width: 160px; height: 196px; }
.haihoa2026 .hh-vcard-body { width: 160px; height: 180px; padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--hh-pink); border-radius: 20px; filter: drop-shadow(0 4px 2px rgba(0, 0, 0, .05)); }
.haihoa2026 .hh-vcard-text { margin: 0; font-weight: 600; font-size: 16px; line-height: 24px; text-align: center; white-space: nowrap; color: var(--hh-text); }
.haihoa2026 .hh-vcard-text span { color: var(--hh-gold); }
.haihoa2026 .hh-ticket { position: relative; flex: none; width: 125px; height: 76px; color: #fff; }
.haihoa2026 .hh-ticket .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.haihoa2026 .hh-ticket .lbl { position: absolute; left: 0; right: 0; top: 1px; font-weight: 700; font-size: 8px; line-height: 16px; text-align: center; white-space: nowrap; }
.haihoa2026 .hh-ticket .rate { position: absolute; left: 0; right: 0; top: 6px; font-family: Barlow, Inter, sans-serif; font-weight: 700; font-size: 44px; line-height: normal; text-align: center; white-space: nowrap; text-shadow: 0 4px 4px rgba(249, 97, 83, .25); }
.haihoa2026 .hh-ticket .rate small { font-size: 32px; }
.haihoa2026 .hh-ticket .line { position: absolute; left: 50%; top: 57px; width: 101px; margin-left: -50.5px; height: auto; }
.haihoa2026 .hh-ticket .cap { position: absolute; left: 0; right: 0; top: 58px; font-weight: 700; font-size: 10px; line-height: 16px; text-align: center; white-space: nowrap; }
.haihoa2026 .hh-redeem { position: absolute; left: 38px; top: 166px; padding: 6px 20px; border: 0; border-radius: 40px; background: var(--hh-green-btn); color: #fff; font-family: Barlow, Inter, sans-serif; font-weight: 600; font-size: 14px; line-height: normal; white-space: nowrap; cursor: pointer; }
.haihoa2026 .hh-redeem:disabled { background: #ddd; cursor: default; }
.haihoa2026 .hh-redeem.is-redeemed { background: #a6a7aa; opacity: 1; }
.haihoa2026 .hh-arrow { flex: none; width: 32px; height: 26.6px; transform: scaleX(-1); }
.haihoa2026 .hh-voucher-note { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; line-height: 20px; color: var(--hh-text); }
.haihoa2026 .hh-voucher-note img { flex: none; width: 24px; height: 24px; }

/* ===== Đổi hoa ===== */
.haihoa2026 .hh-gift { position: relative; flex: none; width: 334px; height: 465px; }
.haihoa2026 .hh-gift-box { position: absolute; left: 0; top: -1px; width: 334px; height: 308px; overflow: hidden; pointer-events: none; }
.haihoa2026 .hh-gift-box img { position: absolute; left: -.01%; top: -13.65%; width: 102.95%; height: 113.65%; }
.haihoa2026 .hh-gift-card { position: absolute; left: 28px; top: 113px; width: 277px; height: 352px; background: #fff; border-radius: 0 0 12px 12px; box-shadow: 0 4px 4px rgba(252, 85, 118, .25); }
.haihoa2026 .hh-gift-list { position: absolute; left: 41px; top: 141px; display: flex; flex-direction: column; gap: 12px; }
.haihoa2026 .hh-gift-item, .haihoa2026 .hh-prize { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 8px; background: linear-gradient(to bottom, #fdcdde 18.6%, #eb6a94); color: #fff; }
.haihoa2026 .hh-gift-item { width: 251px; height: 80px; }
.haihoa2026 .hh-gift-item .pic { flex: none; width: 60px; height: 60px; padding: 2px; display: flex; align-items: center; justify-content: center; }
.haihoa2026 .crop { position: relative; display: block; overflow: hidden; }
.haihoa2026 .hh-gift-item .txt { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.haihoa2026 .hh-gift-item .txt i, .haihoa2026 .hh-prize .txt i { font-style: normal; font-weight: 500; font-size: 14px; line-height: 20px; }
.haihoa2026 .hh-gift-item .txt b, .haihoa2026 .hh-prize .txt b { font-weight: 600; font-size: 16px; line-height: 24px; }
.haihoa2026 .hh-gift-note { position: absolute; left: calc(50% + 3px); top: 415px; width: 256px; margin: 0; transform: translateX(-50%); font-size: 14px; line-height: 20px; text-align: center; color: var(--hh-text); }

/* ===== Bốc thăm may mắn ===== */
.haihoa2026 .hh-lucky { position: relative; display: flex; align-items: flex-end; gap: 20px; width: 1200px; padding: 40px 20px 20px; border-radius: 20px; box-shadow: 0 4px 4px rgba(252, 85, 118, .25); background: url("page-bg.png") 0 -.3px / 100% 203.5% no-repeat; }
.haihoa2026 .hh-prize { flex: 1 1 0; min-width: 0; height: 175px; flex-direction: column; justify-content: flex-start; }
.haihoa2026 .hh-prize .pic { flex: none; width: 80px; height: 80px; padding: 2px; display: flex; align-items: center; justify-content: center; }
.haihoa2026 .hh-prize .pic > img { width: 100%; height: 100%; object-fit: contain; }
.haihoa2026 .hh-prize .txt { display: flex; flex-direction: column; align-items: center; width: 100%; text-align: center; }
.haihoa2026 .hh-info { flex: none; width: 230px; height: 258px; padding: 12px; border-radius: 20px; background: #fff; filter: drop-shadow(0 4px 2px rgba(0, 0, 0, .05)); }
.haihoa2026 .hh-info h3 { margin: 0 0 8px; font-weight: 600; font-size: 16px; line-height: 24px; color: var(--hh-gold); }
.haihoa2026 .hh-info ul { margin: 0; padding-left: 21px; font-size: 14px; line-height: 20px; list-style: disc; }
.haihoa2026 .hh-info ul li { margin-bottom: 8px; }
.haihoa2026 .hh-info p { margin: 0; font-size: 14px; line-height: 20px; }
.haihoa2026 .hh-lucky-title { position: absolute; left: -20px; top: 0; z-index: 3; width: 422px; height: 107.37px; pointer-events: none; }
.haihoa2026 .hh-lucky-title .box { position: relative; width: 422px; height: 107.37px; overflow: hidden; }
.haihoa2026 .hh-lucky-title .box img { position: absolute; left: -2.57%; top: -47.46%; width: 104.06%; height: 171.78%; }
.haihoa2026 .hh-lucky-title .text { position: absolute; left: 158.72px; top: 23.34px; width: 240.5px; height: 63px; display: flex; align-items: center; justify-content: center; }
.haihoa2026 .hh-lucky-title .text img { width: 237.7px; height: 42.9px; transform: rotate(-4.91deg); }
.haihoa2026 .hh-petal { position: absolute; z-index: 2; pointer-events: none; }
.haihoa2026 .hh-petal-1 { left: 507px; top: 36px; width: 38px; height: 33px; }
.haihoa2026 .hh-petal-2 { left: 687px; top: 5px; width: 56px; height: 47px; }
.haihoa2026 .hh-ribbon-m { display: none; }

/* ===== Liên kết nhanh + lưu ý ===== */
.haihoa2026 .hh-links { display: flex; justify-content: center; gap: 24px; width: 1200px; margin-top: -40px; }
.haihoa2026 .hh-link { display: flex; align-items: center; justify-content: center; width: 250px; height: 68px; padding: 0 32px; color: #fff; text-decoration: none; font-family: Barlow, Inter, sans-serif; font-weight: 600; font-size: 24px; text-shadow: 0 2px 4px rgba(0, 0, 0, .25); white-space: nowrap; background: url("btn-link.png") center bottom / 100% 100% no-repeat; }
.haihoa2026 .hh-notice { align-self: center; display: flex; align-items: center; gap: 8px; margin-top: -40px; padding: 12px; border-radius: 12px; background: #fff; filter: drop-shadow(0 4px 2px rgba(252, 85, 118, .25)); }
.haihoa2026 .hh-notice img { flex: none; width: 32px; height: 32px; }
.haihoa2026 .hh-notice p { width: 617px; margin: 0; font-size: 16px; line-height: 24px; color: var(--hh-green); }

/* ===== Crop ảnh quà (theo tỉ lệ crop của Figma) ===== */
.haihoa2026 .crop-fit3 { width: 44px; height: 55px; }
.haihoa2026 .crop-fit3 img { left: -27.27%; top: -11.78%; width: 159.09%; height: 119.86%; }
.haihoa2026 .crop-wh { width: 36px; height: 56px; }
.haihoa2026 .crop-wh img { left: -40.17%; top: -11.83%; width: 177.73%; height: 123.66%; }
.haihoa2026 .crop-band { width: 40px; height: 52px; }
.haihoa2026 .crop-band img { left: -29.31%; top: -12.05%; width: 158.05%; height: 122.77%; }
.haihoa2026 .crop-wf { width: 65px; height: 70px; }
.haihoa2026 .crop-wf img { left: -26.75%; top: -14.19%; width: 153.14%; height: 141.88%; object-fit: fill; }
.haihoa2026 .crop img { position: absolute; max-width: none; }

/* ===== Popup thông báo ===== */
.haihoa2026 .hh-popup-backdrop { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .55); animation: hh-fade-in .22s ease; }
.haihoa2026 .hh-popup-backdrop.is-closing { opacity: 0; transition: opacity .22s ease; }
.haihoa2026 .hh-popup-scaler { transform: scale(var(--popup-scale, 1)); transform-origin: center; }
.haihoa2026 .hh-popup { position: relative; width: 496px; min-height: 516px; display: flex; align-items: center; justify-content: center; padding: 60px 40px; }
.haihoa2026 .hh-popup-frame { position: absolute; left: -3.31%; top: -.84%; width: 106.97%; height: 102.85%; background-position: center; background-size: 100% 100%; background-repeat: no-repeat; pointer-events: none; }
.haihoa2026 .hh-popup-content { position: relative; display: flex; flex-direction: column; align-items: center; gap: 32px; width: 100%; }
.haihoa2026 .hh-popup-img { display: flex; align-items: center; justify-content: center; width: 160px; height: 160px; border: 1px solid #fff; border-radius: 12px; overflow: hidden; background: #fde7ee; }
.haihoa2026 .hh-popup-img .hh-ticket { flex: none; transform: scale(1.2); }
.haihoa2026 .hh-popup-img img { width: 100%; height: 100%; object-fit: cover; }
.haihoa2026 .hh-popup-img.is-contain img { object-fit: contain; padding: 12px; }
.haihoa2026 .hh-popup-copy { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; text-align: center; }
.haihoa2026 .hh-popup-title { margin: 0; font-weight: 800; font-size: 20px; line-height: 1.3; color: transparent; background: linear-gradient(to bottom, #fb2a68, #f96153); -webkit-background-clip: text; background-clip: text; }
.haihoa2026 .hh-popup-desc { margin: 0; font-weight: 500; font-size: 16px; line-height: 24px; color: var(--hh-text); word-break: break-word; }
.haihoa2026 .hh-popup-close { width: 154px; height: 42px; font-size: 20px; box-shadow: 0 4px 4px rgba(0, 0, 0, .25); }

@keyframes hh-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ===== Popup thể lệ ===== */
.haihoa2026 .hh-rules-backdrop { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, .55); animation: hh-fade-in .22s ease; }
.haihoa2026 .hh-rules-backdrop.is-closing { opacity: 0; transition: opacity .22s ease; }
.haihoa2026 .hh-rules { position: relative; width: 100%; max-width: 760px; max-height: 88vh; display: flex; flex-direction: column; border: 4px solid #fff; border-radius: 20px; background: #fff; box-shadow: 0 8px 24px rgba(252, 85, 118, .35); overflow: hidden; }
.haihoa2026 .hh-rules-close { position: absolute; top: 8px; right: 12px; z-index: 2; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--hh-red); color: #fff; font-size: 24px; line-height: 36px; cursor: pointer; }
.haihoa2026 .hh-rules-content { padding: 24px 28px 28px; overflow-y: auto; font-size: 14px; line-height: 22px; }
.haihoa2026 .hh-rules-content h2 { margin: 0 40px 8px 0; font-size: 20px; line-height: 28px; color: var(--hh-green); }
.haihoa2026 .hh-rules-content h3 { margin: 16px 0 6px; font-size: 16px; color: var(--hh-red); }
.haihoa2026 .hh-rules-content p { margin: 6px 0; }
.haihoa2026 .hh-rules-content ul { margin: 6px 0; padding-left: 20px; list-style: disc; }

@media (prefers-reduced-motion: reduce) {
  .haihoa2026 .hh-popup-backdrop, .haihoa2026 .hh-rules-backdrop { animation: none; }
}

/* =========================== MOBILE (thiết kế rộng 382px, scale-to-fit bằng JS) =========================== */
@media (max-width: 767px) {
  .haihoa2026 .hh-shell { background: linear-gradient(180deg, #c5eafc 0%, #fff 50%, #ffcde0 100%); }
  .haihoa2026 .hh-stage { min-height: 3000px; }
  .haihoa2026 .hh-page { width: 382px; margin-left: -191px; padding-bottom: 20px; }

  .haihoa2026 .hh-hero { height: 140px; }
  .haihoa2026 .hh-hero-img { left: -16px; top: 0; width: 340px; height: 137px; overflow: hidden; }
  .haihoa2026 .hh-hero-img img { position: absolute; left: -10.75%; top: 0; width: 110.75%; height: 99.65%; }
  .haihoa2026 .hh-sound-m { position: absolute; left: 342px; top: 97px; width: 40px; height: 40px; display: flex; border-width: 1px; }
  .haihoa2026 .hh-sound-m img { width: 20px; height: 15.5px; }
  .haihoa2026 .hh-sound-d { display: none; }

  .haihoa2026 .hh-program { width: 382px; gap: 32px; }
  .haihoa2026 .hh-row { flex-direction: column; gap: 32px; }
  .haihoa2026 .hh-row-1, .haihoa2026 .hh-row-2 { height: auto; }

  .haihoa2026 .hh-title { font-size: 36px; }
  .haihoa2026 .hh-title-game { left: 73px; top: 83px; }
  .haihoa2026 .hh-title-score { left: calc(50% - 110px); top: 121px; }
  .haihoa2026 .hh-title-voucher { left: 61px; top: 15px; font-size: 32px; }
  .haihoa2026 .hh-title-gift { left: 135px; top: 109.37px; }
  .haihoa2026 .hh-tulip { width: 320px; height: 133px; }
  .haihoa2026 .hh-game .hh-tulip, .haihoa2026 .hh-voucher .hh-tulip { left: 31px; }

  /* Vườn hoa */
  .haihoa2026 .hh-game { width: 382px; height: 653px; }
  .haihoa2026 .hh-game-card { top: 93px; width: 382px; height: auto; padding: 32px 20px 20px; background: url("page-bg.png") -207px 0 / 208.44% 100% no-repeat; }
  .haihoa2026 .hh-hint { font-size: 20px; }
  .haihoa2026 .hh-board { width: 342px; }
  .haihoa2026 .hh-trees { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; width: 342px; }
  .haihoa2026 .hh-tree { width: 100%; height: auto; aspect-ratio: 1 / 1; }
  .haihoa2026 .hh-countdown { padding: 0 16px; font-size: 20px; }
  .haihoa2026 .hh-start { width: 220px; height: 60px; font-size: 20px; }
  .haihoa2026 .hh-rules-btn { position: static; }

  /* Tổng điểm */
  .haihoa2026 .hh-score { width: 382px; height: 582px; }
  .haihoa2026 .hh-score-box { width: 382px; }
  .haihoa2026 .hh-score-card { left: 30.74px; width: 322.7px; }
  .haihoa2026 .hh-score-body { left: calc(50% + 1px); width: 322px; transform: translateX(-50%); }
  .haihoa2026 .hh-score-sep .badge { left: 18.71%; width: 61.56%; }
  .haihoa2026 .hh-flowers { width: 296px; }

  /* Chuyên cần tích điểm */
  .haihoa2026 .hh-voucher { width: 382px; height: 685px; }
  .haihoa2026 .hh-voucher-wrap { top: 68px; width: 382px; height: auto; }
  .haihoa2026 .hh-voucher-card { width: 382px; padding: 32px 20px 20px; background: url("page-bg.png") -207px 0 / 208.44% 100% no-repeat; }
  .haihoa2026 .hh-voucher-hint { width: 250px; }
  .haihoa2026 .hh-vouchers { display: grid; grid-template-columns: repeat(2, 160px); grid-template-rows: repeat(2, 196px); grid-auto-flow: column; gap: 20px; }
  .haihoa2026 .hh-arrow { display: none; }
  .haihoa2026 .hh-voucher-note { width: 100%; }
  .haihoa2026 .hh-voucher-note span, .haihoa2026 .hh-voucher-note { flex: 1 1 auto; }

  /* Đổi hoa */
  .haihoa2026 .hh-gift { width: 382px; height: 490px; }
  .haihoa2026 .hh-gift-box { width: 382px; height: 351.5px; }
  .haihoa2026 .hh-gift-card { left: 31.9px; top: 135.67px; width: 317px; height: 352.8px; }
  .haihoa2026 .hh-gift-list { left: 46px; top: 159.45px; width: 289px; }
  .haihoa2026 .hh-gift-item { width: 100%; }
  .haihoa2026 .hh-gift-note { left: 67px; top: 433px; width: 249px; transform: none; }

  /* Bốc thăm may mắn */
  .haihoa2026 .hh-lucky { flex-wrap: wrap; align-items: stretch; align-content: flex-start; gap: 10px 20px; width: 382px; padding: 90px 20px 20px; }
  .haihoa2026 .hh-lucky-title { display: none; }
  .haihoa2026 .hh-ribbon-m { position: absolute; left: -21px; top: 0; z-index: 3; display: block; width: 314px; height: 80px; pointer-events: none; }
  .haihoa2026 .hh-prize { height: auto; min-height: 172px; }
  .haihoa2026 .hh-prize-1 { flex: 1 1 100%; height: 142px; min-height: 0; flex-direction: row; justify-content: center; padding: 12px; }
  .haihoa2026 .hh-prize-1 .txt { flex: 1 1 0; width: auto; }
  .haihoa2026 .hh-prize-2, .haihoa2026 .hh-prize-3 { flex: 1 1 calc(50% - 10px); }
  .haihoa2026 .hh-info { flex: 1 1 100%; width: 100%; height: auto; }
  .haihoa2026 .hh-petal-1 { left: 268px; top: 644px; }
  .haihoa2026 .hh-petal-2 { left: -8px; top: 630px; }

  /* Liên kết nhanh + lưu ý */
  .haihoa2026 .hh-links { flex-direction: column; align-items: center; gap: 16px; width: 382px; margin-top: 0; }
  .haihoa2026 .hh-notice { align-self: stretch; align-items: flex-start; margin-top: 0; }
  .haihoa2026 .hh-notice img { width: 20px; height: 20px; }
  .haihoa2026 .hh-notice p { flex: 1 1 0; width: auto; font-size: 14px; line-height: 20px; }

  /* Popup thể lệ */
  .haihoa2026 .hh-rules-content { padding: 20px 18px 24px; }
}