/* Gánh Phố — trang /ganh-pho (layout riêng views/ganh-pho/layout.ejs). Theo style.md: tông peach pastel,
   Nunito cho tiêu đề/nút, Comfortaa cho chữ, bo tròn, shadow pastel, mobile-first.
   Phần BÊN TRONG khung game (#san-khau) do bundle game tự style — đừng đụng ở đây. */

.gp-body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text-main);
  background: var(--bg-gradient);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.gp-body *, .gp-body *::before, .gp-body *::after { box-sizing: border-box; }

/* ───────── thanh trên ───────── */
.gp-appbar {
  position: sticky; top: 0; z-index: 500; height: 56px; padding: 0 12px;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  background: linear-gradient(180deg, rgba(255, 250, 248, .92), rgba(255, 246, 242, .8));
  backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px);
  border-bottom: 1.5px solid var(--border-soft);
}
.gp-ab-back {
  width: 38px; height: 38px; border-radius: var(--radius-pill); display: inline-flex; align-items: center; justify-content: center;
  color: #c98f7d; background: rgba(255, 255, 255, .7); border: 1px solid var(--border-soft); text-decoration: none;
}
.gp-ab-back svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.gp-ab-brand { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.gp-ab-brand b { font-family: 'Baloo 2', var(--font-display); font-weight: 800; font-size: 1.3rem; color: var(--accent); }
.gp-ab-brand small { font-family: var(--font-display); font-weight: 700; font-size: .56rem; letter-spacing: .3em; text-transform: uppercase; color: #c6ada4; margin-top: 3px; }
.gp-ab-side { justify-self: end; display: flex; align-items: center; gap: 6px; }
.gp-ab-avatar { width: 38px; height: 38px; border-radius: var(--radius-pill); object-fit: cover; border: 2px solid var(--primary-peach); }

/* ───────── bố cục trang ───────── */
.gp-main { padding: 12px 10px 28px; }
.gp-trang { max-width: 1500px; margin: 0 auto; display: grid; gap: 14px; }
@media (min-width: 1001px) {
  .gp-trang { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
  .gp-ben { position: sticky; top: 68px; max-height: calc(100vh - 80px); }
}

.gp-khung-game { min-width: 0; }
.gp-khung-game #san-khau { border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); }
.gp-khung-game:fullscreen { background: #2b2118; display: flex; flex-direction: column; justify-content: center; }
.gp-khung-game:fullscreen #san-khau { border-radius: 0; }
.gp-khung-game:fullscreen .gp-thanh-game { display: none; }
.gp-thanh-game { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; font-size: .86rem; color: var(--text-muted); }
.gp-goi-y-xoay { display: none; }
@media (max-width: 1000px) and (orientation: portrait) { .gp-goi-y-xoay { display: inline; } }
.gp-khach { flex-basis: 100%; }

/* ───────── nút ───────── */
.gp-nut {
  font-family: var(--font-display); font-weight: 800; font-size: .92rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: none; border-radius: var(--radius-pill); padding: 10px 18px; cursor: pointer;
  color: #fff; background: linear-gradient(135deg, var(--accent-soft), var(--accent));
  box-shadow: var(--shadow-btn); transition: transform .15s, box-shadow .15s;
  position: relative;
}
.gp-nut:hover { transform: translateY(-1px); box-shadow: var(--shadow-pop); }
.gp-nut:disabled { opacity: .55; cursor: default; transform: none; }
.gp-nut-nho { padding: 7px 13px; font-size: .8rem; }
.gp-nut-phu { color: var(--accent); background: var(--surface); border: 1.5px solid var(--border-peach); box-shadow: none; }
.gp-nut svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gp-lien-ket { background: none; border: none; padding: 0; color: var(--accent); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }

/* ───────── bảng bên ───────── */
.gp-ben {
  display: flex; flex-direction: column; min-height: 0;
  background: var(--surface); border: 1.5px solid var(--border-soft); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); overflow: hidden;
}
.gp-tab { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 6px; background: var(--peach-light); }
.gp-tab button {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--font-display); font-weight: 800; font-size: .85rem; color: var(--text-muted);
  background: none; border: none; border-radius: var(--radius-pill); padding: 9px 6px; cursor: pointer; white-space: nowrap;
}
.gp-tab button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.gp-tab button.chon { color: var(--accent); background: var(--surface); box-shadow: 0 4px 12px -6px rgba(214, 125, 99, .5); }
.gp-noi-dung { padding: 14px; overflow-y: auto; min-height: 260px; }
@media (max-width: 1000px) { .gp-noi-dung { max-height: 70vh; } }

.gp-cham {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-pill);
  background: var(--accent); color: #fff; font-family: var(--font-display); font-size: .66rem; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}
.gp-cham[hidden] { display: none; }
.gp-nut .gp-cham { position: absolute; top: -6px; right: -6px; }

.gp-tieu-de { margin: 0 0 4px; font-family: var(--font-display); font-weight: 800; font-size: 1.08rem; color: var(--accent-soft); }
.gp-phu { margin: 0 0 12px; font-size: .78rem; color: var(--text-muted); }
.gp-nhom { margin: 16px 0 6px; font-family: var(--font-display); font-weight: 800; font-size: .88rem; color: var(--text-main); }
.gp-rong { margin: 8px 0; color: var(--text-muted); font-size: .85rem; }

.gp-cua-toi {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: 12px; padding: 10px 14px;
  background: var(--bg-hero); border-radius: var(--radius-md); font-size: .85rem;
}
.gp-cua-toi b { font-family: var(--font-display); font-weight: 800; color: var(--accent); }
.gp-cua-toi small { flex-basis: 100%; color: var(--warning-fg); }

/* danh sách người */
.gp-ds { list-style: none; margin: 0; padding: 0; }
.gp-ds li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 8px 4px; border-bottom: 1px dashed var(--border-soft); }
.gp-ds li.bam-duoc { cursor: pointer; border-radius: var(--radius-sm); }
.gp-ds li.bam-duoc:hover { background: var(--peach-light); }
.gp-av { width: 40px; height: 40px; border-radius: var(--radius-pill); object-fit: cover; border: 2px solid var(--border-soft); flex: none; background: var(--peach-light); }
.gp-av-wrap { position: relative; flex: none; }
.gp-online { position: absolute; right: 0; bottom: 1px; width: 11px; height: 11px; border-radius: 50%; background: var(--pastel-mint); border: 2px solid #fff; }
.gp-tt { flex: 1; min-width: 130px; display: flex; flex-direction: column; }
.gp-tt b { font-family: var(--font-display); font-weight: 800; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gp-tt small { color: var(--text-muted); font-size: .75rem; }
.gp-nut-nhom { display: flex; gap: 6px; flex: none; align-items: center; margin-left: auto; }

.gp-xep-hang .gp-hang { width: 26px; text-align: center; font-family: var(--font-display); font-weight: 800; color: var(--text-muted); flex: none; }
.gp-xep-hang li.top .gp-hang { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.gp-xep-hang li.top-1 .gp-hang { background: linear-gradient(135deg, #ffd27a, #f2a541); }
.gp-xep-hang li.top-2 .gp-hang { background: linear-gradient(135deg, #e3d4f0, #b9a5cf); }
.gp-xep-hang li.top-3 .gp-hang { background: linear-gradient(135deg, #fbc1b0, #e59882); }

.gp-o-nhap {
  width: 100%; font: inherit; font-size: .88rem; color: var(--text-main);
  background: var(--input-bg); border: 1.5px solid var(--border-soft); border-radius: var(--radius-sm); padding: 10px 12px; outline: none;
}
.gp-o-nhap:focus { border-color: var(--border-peach); box-shadow: 0 0 0 3px rgba(250, 208, 196, .45); }
.gp-tim { margin-bottom: 6px; }
.gp-tim .gp-ds { margin-top: 6px; }
.gp-nut-mo { margin-top: 14px; }

/* menu ba chấm */
.gp-menu { position: relative; }
.gp-ba-cham { padding: 7px 8px; }
.gp-ba-cham svg { fill: currentColor; stroke: none; }
.gp-menu-ds {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; display: flex; flex-direction: column; gap: 6px;
  background: var(--surface); border: 1.5px solid var(--border-soft); border-radius: var(--radius-md); padding: 8px; box-shadow: var(--shadow-pop);
}
.gp-menu-ds[hidden] { display: none; }

/* chat */
.gp-chat-dau { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--border-soft); }
.gp-chat-dau > b { flex: 1; min-width: 0; font-family: var(--font-display); font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gp-lui { padding: 7px; }
.gp-chat-ds { display: flex; flex-direction: column; gap: 6px; padding: 12px 2px; height: 46vh; min-height: 220px; overflow-y: auto; }
.gp-tin { max-width: 80%; align-self: flex-start; }
.gp-tin span {
  display: inline-block; padding: 8px 12px; border-radius: 18px 18px 18px 6px; background: var(--peach-light);
  font-size: .86rem; line-height: 1.4; white-space: pre-wrap; word-break: break-word;
}
.gp-tin.cua-toi { align-self: flex-end; }
.gp-tin.cua-toi span { background: linear-gradient(135deg, var(--primary-peach), var(--primary-peach-hover)); border-radius: 18px 18px 6px 18px; }
.gp-chat-gui { display: flex; gap: 8px; }

/* hộp báo cáo */
.gp-hop-nen { position: fixed; inset: 0; z-index: 900; background: rgba(92, 75, 71, .28); display: flex; align-items: center; justify-content: center; padding: 16px; }
.gp-hop { width: min(380px, 100%); background: var(--surface); border-radius: var(--radius-xl); padding: 20px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow-pop); }
.gp-hop .gp-nut-nhom { justify-content: flex-end; }

/* toast */
.gp-toast {
  position: fixed; left: 50%; bottom: 22px; z-index: 950; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: var(--surface); color: var(--text-main); border: 1.5px solid var(--border-peach); border-radius: var(--radius-pill);
  padding: 10px 18px; font-family: var(--font-display); font-weight: 700; font-size: .88rem; box-shadow: var(--shadow-pop); transition: .25s;
  max-width: calc(100% - 32px); text-align: center;
}
.gp-toast.hien { opacity: 1; transform: translate(-50%, 0); }
.gp-toast.loi { color: var(--error-fg); background: var(--error-bg); border-color: #f3b5a8; }

/* ───────── điện thoại ───────── */
.gp-khung-game { position: relative; }
.gp-phu-doc { display: none; }
@media (max-width: 700px) and (orientation: portrait) {
  .gp-phu-doc {
    position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 16 / 9; z-index: 5;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    border: none; border-radius: var(--radius-lg); cursor: pointer; color: #fff; font-family: var(--font-display);
    /* không dùng backdrop-filter: lớp mờ đè lên canvas đang chạy phải làm mờ lại mỗi khung → điện thoại tụt FPS */
    background: rgba(92, 75, 71, .55);
  }
  .gp-phu-doc svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .gp-phu-doc b { font-weight: 800; font-size: 1.02rem; }
  .gp-phu-doc small { font-size: .78rem; opacity: .9; }
  .gp-goi-y-xoay { display: none !important; }
}
/* điện thoại xoay ngang: nhường cả chiều cao cho game, bảng bên nằm dưới */
@media (orientation: landscape) and (max-height: 500px) {
  .gp-appbar { display: none; }
  .gp-main { padding: 4px 6px 20px; }
  .gp-khung-game #san-khau { border-radius: 12px; }
}

/* ───────── bạn bè & tin nhắn trong khung game (toàn màn hình / điện thoại xoay ngang) ───────── */
.gp-hop-thu {
  display: none; position: absolute; right: .6em; bottom: .6em; z-index: 6;
  width: 3em; height: 3em; min-width: 40px; min-height: 40px; border-radius: 50%; cursor: pointer;
  align-items: center; justify-content: center; padding: 0;
  background: #fff7ec; border: .16em solid #5c4b47; box-shadow: 0 .18em 0 #5c4b47; color: #5c4b47;
}
.gp-hop-thu svg { width: 55%; height: 55%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gp-hop-thu-dem {
  position: absolute; top: -.35em; right: -.35em; min-width: 1.5em; height: 1.5em; padding: 0 .35em; border-radius: 999px;
  background: #e5533d; color: #fff; font-family: var(--font-display); font-size: .78em; font-weight: 800; line-height: 1.5em;
  border: 2px solid #fff;
}
.gp-hop-thu-dem[hidden] { display: none; }
.gp-khung-game.gp-dang-toan-man .gp-hop-thu { display: flex; }

/* ───────── chế độ chơi toàn màn hình (trang.js vaoChoi) ───────── */
html.gp-dang-choi, html.gp-dang-choi body { overflow: hidden; overscroll-behavior: none; }
.gp-khung-game.gp-choi {
  position: fixed; inset: 0; z-index: 990; margin: 0; background: #2b2118;
  display: flex; flex-direction: column; align-items: center; justify-content: center; touch-action: none;
}
/* máy không tự xoay được mà đang cầm dọc: xoay cả khung (game + ngăn kéo + popup) 90° */
.gp-khung-game.gp-choi.gp-xoay {
  inset: auto; top: 50%; left: 50%; width: 100vh; width: 100dvh; height: 100vw;
  transform: translate(-50%, -50%) rotate(90deg);
}
.gp-khung-game.gp-choi #san-khau { border-radius: 0; box-shadow: none; }
.gp-khung-game.gp-choi .gp-thanh-game, .gp-khung-game.gp-choi .gp-phu-doc { display: none !important; }
.gp-thoat {
  display: none; position: absolute; top: 3.3em; right: .6em; z-index: 8; align-items: center; gap: .3em;
  padding: .3em .75em; border-radius: 999px; cursor: pointer; font-family: var(--font-display); font-weight: 800; font-size: .9em;
  background: #fff7ec; color: #5c4b47; border: .14em solid #5c4b47; box-shadow: 0 .16em 0 #5c4b47;
}
.gp-thoat svg { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.gp-khung-game.gp-choi .gp-thoat { display: inline-flex; }
.gp-vao-lai {
  position: absolute; left: 50%; top: 12px; z-index: 9; transform: translateX(-50%); pointer-events: none;
  background: rgba(43, 33, 24, .85); color: #fff; border-radius: 999px; padding: 8px 16px;
  font-family: var(--font-display); font-weight: 700; font-size: .85rem; white-space: nowrap;
}
.gp-vao-lai[hidden] { display: none; }

.gp-bao-game {
  position: absolute; left: 50%; bottom: 4.2em; z-index: 7; transform: translateX(-50%);
  display: flex; align-items: center; gap: .7em; max-width: calc(100% - 2em);
  background: #fff7ec; border: .16em solid #5c4b47; box-shadow: 0 .2em 0 #5c4b47; border-radius: 1em;
  padding: .45em .55em .45em 1em; font-family: var(--font-display); font-weight: 700; font-size: .95em; color: #5c4b47;
  animation: gpBaoVao .3s ease;
}
.gp-bao-game[hidden] { display: none; }
.gp-bao-game-xem {
  border: none; border-radius: 999px; padding: .35em 1em; cursor: pointer; white-space: nowrap;
  background: linear-gradient(135deg, #fad0c4, #fbc1b0); color: #5c4b47; font: inherit; font-weight: 800;
}
@keyframes gpBaoVao { from { opacity: 0; transform: translate(-50%, .6em); } to { opacity: 1; transform: translate(-50%, 0); } }

.gp-ngan-keo { position: absolute; inset: 0; z-index: 20; background: rgba(43, 33, 24, .45); display: flex; justify-content: flex-end; }
.gp-ngan-keo[hidden] { display: none; }
.gp-ngan-than {
  position: relative; width: min(380px, 92%); height: 100%; overflow: auto; -webkit-overflow-scrolling: touch;
  background: var(--bg-main); padding: 44px 10px 10px; animation: gpKeoVao .25s ease;
}
.gp-ngan-than .gp-ben { position: static; max-height: none; min-height: 100%; }
.gp-ngan-dong {
  position: absolute; top: 6px; right: 8px; width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--surface); color: var(--text-muted); font-size: 1.3rem; line-height: 1; box-shadow: var(--shadow-card);
}
@keyframes gpKeoVao { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }

/* điện thoại xoay ngang (iPhone không có toàn màn hình cho phần tử): bảng bên tụt xuống dưới game */
@media (orientation: landscape) and (max-height: 500px) {
  .gp-hop-thu { display: flex; }
}

/* ───────── cặp đôi, bạn đời, mời bạn ───────── */
.gp-chon-bxh { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 12px; background: var(--peach-light); border-radius: var(--radius-pill); }
.gp-chon-bxh button {
  font-family: var(--font-display); font-weight: 800; font-size: .8rem; color: var(--text-muted);
  background: none; border: none; border-radius: var(--radius-pill); padding: 7px 14px; cursor: pointer;
}
.gp-chon-bxh button.chon { background: var(--surface); color: var(--accent); box-shadow: 0 4px 12px -6px rgba(214, 125, 99, .5); }
.gp-doi-av { display: flex; align-items: center; flex: none; }
.gp-doi-av .gp-av { width: 34px; height: 34px; }
.gp-doi-av .gp-av + .gp-doi-tim + .gp-av { margin-left: -6px; }
.gp-doi-tim { width: 18px; height: 18px; margin: 0 -4px; position: relative; z-index: 1; }
.gp-ten-hong { color: #d6336c; }
.gp-ic-tim { width: 16px; height: 16px; vertical-align: -3px; }

/* bạn đời trong danh sách: khung trái tim quanh ảnh, tên hồng */
.gp-ds li.gp-ban-doi { background: linear-gradient(90deg, #fff0f5, transparent); border-radius: var(--radius-sm); }
.gp-ban-doi .gp-av-wrap { width: 40px; height: 40px; margin: 6px; }
.gp-ban-doi .gp-av { border-color: #ffc2d4; }
.gp-khung-tim { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; transform: translate(-50%, -50%); pointer-events: none; }
.gp-nut-hong { background: linear-gradient(135deg, #ff9eb5, #e0607e); color: #fff; }

.gp-the-moi { margin: 4px 0 6px; padding: 12px; border-radius: var(--radius-md); background: linear-gradient(135deg, #fff0f5, #fff7f5); border: 1.5px solid #ffd6e6; }
.gp-the-moi-dau { display: flex; gap: 10px; align-items: center; }
.gp-the-moi-dau img { width: 42px; height: 42px; flex: none; }
.gp-the-moi-dau b { display: block; font-family: var(--font-display); font-weight: 800; color: var(--accent); font-size: .92rem; }
.gp-the-moi-dau small { color: var(--text-muted); font-size: .76rem; }
.gp-the-moi-link { display: flex; gap: 6px; margin-top: 10px; }
.gp-the-moi-link .gp-nut { white-space: nowrap; flex: none; }
.gp-the-moi-link .gp-o-nhap { font-size: 16px; padding: 7px 10px; min-width: 0; }
.gp-the-moi-so { display: block; margin-top: 6px; color: var(--text-muted); font-size: .74rem; }

/* popup cầu hôn */
.gp-ch-nen {
  position: fixed; inset: 0; z-index: 980; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: radial-gradient(circle at 50% 40%, rgba(255, 214, 230, .55), rgba(92, 75, 71, .45)); animation: gpChMo .25s ease-out;
}
.gp-ch-nen.dong { opacity: 0; transition: opacity .25s; }
.gp-ch {
  position: relative; overflow: hidden; width: min(360px, 100%); max-height: calc(100% - 8px); overflow-y: auto;
  background: linear-gradient(180deg, #fff 0%, #fff5f8 100%); border: 2px solid #ffd6e6; border-radius: var(--radius-xl);
  padding: 18px 20px 16px; text-align: center; box-shadow: 0 24px 60px -18px rgba(214, 51, 108, .45);
  animation: gpChNay .45s cubic-bezier(.2, 1.4, .4, 1);
}
.gp-ch-anh { position: relative; width: 132px; height: 132px; object-fit: contain; margin: -4px auto 2px; display: block; animation: gpChBong 2.4s ease-in-out infinite; }
.gp-ch-doi { position: relative; display: flex; align-items: center; justify-content: center; gap: 4px; margin-bottom: 6px; }
.gp-ch-av { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 3px solid #ffc2d4; background: var(--peach-light); }
.gp-ch-tim { width: 26px; height: 26px; animation: gpChTim 1s ease-in-out infinite; }
.gp-ch h3 { position: relative; margin: 4px 0 6px; font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; color: #d6336c; }
.gp-ch p { position: relative; margin: 0 0 12px; font-size: .88rem; line-height: 1.5; color: var(--text-main); }
.gp-ch-nut { position: relative; display: flex; gap: 10px; justify-content: center; }
.gp-ch-nut .gp-nut { flex: 1; padding: 12px 14px; font-size: .95rem; }
.gp-ch-ghi { position: relative; display: block; margin-top: 10px; color: var(--text-muted); font-size: .74rem; }
.gp-ch-bay { position: absolute; inset: 0; pointer-events: none; }
.gp-ch-bay i {
  position: absolute; bottom: -20px; width: 14px; height: 14px; background: url('/images/ganh-pho/ic-tim.webp') center/contain no-repeat;
  opacity: 0; animation: gpChBay 4s linear infinite;
}
.gp-ch-mung { border-color: #ffe9b3; background: linear-gradient(180deg, #fffdf5 0%, #fff0f5 100%); }
@keyframes gpChMo { from { opacity: 0; } }
@keyframes gpChNay { from { transform: scale(.7) translateY(30px); opacity: 0; } }
@keyframes gpChBong { 50% { transform: translateY(-6px) rotate(-3deg); } }
@keyframes gpChTim { 50% { transform: scale(1.25); } }
@keyframes gpChBay { 0% { opacity: 0; transform: translateY(0) scale(.6); } 15% { opacity: .8; } 100% { opacity: 0; transform: translateY(-420px) scale(1.2) rotate(25deg); } }
@media (prefers-reduced-motion: reduce) { .gp-ch, .gp-ch-anh, .gp-ch-tim, .gp-ch-bay i { animation: none; } }
@media (orientation: landscape) and (max-height: 500px) {
  .gp-ch { padding: 12px 18px; }
  .gp-ch-anh { width: 84px; height: 84px; }
}

/* ───────── giới thiệu (SEO) dưới game ───────── */
.gp-gioi-thieu { max-width: 1100px; margin: 28px auto 40px; padding: 0 16px; color: var(--text-main); }
.gp-gioi-thieu h1 { margin: 0 0 10px; font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; line-height: 1.25; color: var(--accent-soft); }
.gp-gioi-thieu h2 { margin: 0 0 12px; font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; color: var(--accent); padding-bottom: 8px; border-bottom: 2px dashed var(--border-soft); }
.gp-gt-mo { margin: 0 0 18px; line-height: 1.65; }
.gp-gt-khoi { background: var(--surface); border: 1.5px solid var(--border-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 18px 16px; margin-bottom: 18px; }
.gp-gt-boi { background: linear-gradient(135deg, #fff7f5, #fff0f5); }
.gp-gt-dau { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.gp-gt-dau img { flex: none; }
.gp-gt-dau h2 { border: none; padding: 0; margin-bottom: 4px; }
.gp-gt-dau p { margin: 0; font-size: .9rem; line-height: 1.55; }
.gp-ds-boi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.gp-boi {
  display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: var(--radius-md); text-decoration: none; color: var(--text-main);
  background: var(--surface); border: 1.5px solid var(--border-soft); transition: transform .2s, box-shadow .2s;
}
.gp-boi:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }
.gp-boi img { flex: none; }
.gp-boi span { min-width: 0; display: flex; flex-direction: column; }
.gp-boi b { font-family: var(--font-display); font-weight: 800; font-size: .88rem; color: var(--accent); }
.gp-boi small { font-size: .74rem; color: var(--text-muted); line-height: 1.35; }
.gp-ds-tn { display: grid; grid-template-columns: 1fr; gap: 12px; }
.gp-tn { display: flex; gap: 12px; align-items: flex-start; }
.gp-tn img { flex: none; }
.gp-tn h3 { margin: 0 0 2px; font-family: var(--font-display); font-weight: 800; font-size: .95rem; }
.gp-tn p { margin: 0; font-size: .86rem; line-height: 1.5; color: var(--text-muted); }
.gp-cach-choi { margin: 0; padding-left: 20px; line-height: 1.6; font-size: .9rem; }
.gp-cach-choi li { margin-bottom: 6px; }
.gp-hoi { border-bottom: 1px dashed var(--border-soft); padding: 10px 0; }
.gp-hoi summary { cursor: pointer; font-family: var(--font-display); font-weight: 800; font-size: .92rem; }
.gp-hoi p { margin: 8px 0 0; font-size: .88rem; line-height: 1.6; }
@media (min-width: 700px) {
  .gp-ds-boi { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gp-ds-tn { grid-template-columns: 1fr 1fr; }
  .gp-gioi-thieu h1 { font-size: 1.9rem; }
}