/* ============================================================
   Go Go Korea — v62
   theme.css-ийн дараа ачаална.
   ============================================================ */

/* ---------- Уншигдах байдал: бүдэг текстийг тод болгох ---------- */
:root { --text-soft: #CAD6F0; --text-dim: #AFBEDF; }
input::placeholder, textarea::placeholder { color: #8FA2CE !important; opacity: 1; }
.ggk-hint, .vz-hint, .get-code-hint, .info-body, .check-desc, .callout-body, .tip-body, .prose p,
.qa-a, .section-intro, .g53tile .tx > span, .offer-desc, .app-desc, .org-addr, .org-hours { color: #CAD6F0 !important; }
.ggk-hint, .vz-hint, .get-code-hint { font-size: 13px !important; line-height: 1.55 !important; }
.ggk-lbl, .vz-lbl, .g-grp { color: #DCE5F8 !important; }

/* ---------- Буцах товч: үргэлж дээр, тод ---------- */
.detail-header { position: sticky; position: -webkit-sticky; top: 0; z-index: 20; }
.back-btn { background: #FFFFFF !important; color: #0B1F44 !important; border: 0 !important; width: 44px !important; height: 44px !important; font-size: 26px !important; font-weight: 700; box-shadow: 0 6px 16px -6px rgba(0,0,0,.6) !important; }

/* ---------- Нэвтрэх: үнэгүй туршилт ---------- */
.trial62 { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 16px 14px 12px; margin-bottom: 6px; border-radius: 22px;
  background: linear-gradient(160deg, rgba(255,255,255,.13), rgba(255,255,255,.05)); border: 1px solid rgba(255,255,255,.2); }
.t62-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; font-size: 12.5px; color: #D3DEF7; font-weight: 600; }
.t62-badge { padding: 4px 10px; border-radius: 999px; background: #3DDC97; color: #06301E; font-size: 11.5px; font-weight: 800; letter-spacing: .03em; }
.trial62 #emailInput { margin-bottom: 10px !important; }
.t62-btn { margin-top: 2px; font-size: 16.5px !important; background: linear-gradient(120deg, #37D5FF, #4C7DFF 55%, #8B6CFF) !important; }
.trial62 .mk53 { margin: 10px 2px 2px !important; }
.t62-note { margin: 6px 2px 0; font-size: 12.5px; color: #C9D6F2; line-height: 1.5; }
.t62-go { display: block; margin-top: 8px; font-weight: 800; color: #7FE3FF; text-decoration: underline; }
#trialError a, #loginError a { color: #7FE3FF; text-decoration: underline; }
.code62 { display: flex; gap: 8px; align-items: stretch; }
.code62 #codeInput { flex: 1; min-width: 0; margin: 0 !important; }
.btn-ghost62 { flex: 0 0 auto; padding: 0 20px; border-radius: 16px; border: 0; background: #FFFFFF; color: #0B1F44; font: inherit; font-weight: 800; font-size: 15px; cursor: pointer; }
.btn-ghost62:disabled { opacity: .6; }
.btn-ghost62 .spinner { border-color: rgba(11,31,68,.25); border-top-color: #0B1F44; }
#loginError { margin-top: 8px; }

/* ---------- Утсандаа суулгах ---------- */
.a2hs62 { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; width: 100%; margin: 4px 0 14px; padding: 12px 14px; border-radius: 18px; border: 1px solid rgba(127,227,255,.45);
  background: linear-gradient(120deg, rgba(55,213,255,.18), rgba(76,125,255,.12)); color: #F4F7FF; font: inherit; text-align: left; cursor: pointer; }
.a2hs62.home { margin: 0; padding-right: 34px; }
.a2hs62-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(150deg, #7DE6FF, #139BD0); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.55); }
.a2hs62-ic svg { width: 22px; height: 22px; }
.a2hs62-tx b { display: block; font-size: 14px; line-height: 1.25; }
.a2hs62-tx small { display: block; font-size: 12px; color: #D3DEF7; margin-top: 2px; line-height: 1.35; }
.a2hs62-go { padding: 8px 12px; border-radius: 999px; background: #FFFFFF; color: #0B1F44; font-size: 12.5px; font-weight: 800; white-space: nowrap; }
.a2hs62-x { position: absolute; top: 4px; right: 6px; width: 26px; height: 26px; display: grid; place-items: center; color: #C9D6F2; font-size: 13px; }
.a2s62 { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: flex-end; justify-content: center; background: rgba(2,6,22,.6); opacity: 0; pointer-events: none; transition: opacity .2s; }
.a2s62.on { opacity: 1; pointer-events: auto; }
.a2s62-in { position: relative; width: 100%; max-width: 480px; padding: 22px 20px calc(24px + env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0; background: #F4F7FF; color: #0B1F44; transform: translateY(20px); transition: transform .25s; }
.a2s62.on .a2s62-in { transform: none; }
.a2s62-in h3 { margin: 0 0 6px; font-size: 19px; }
.a2s62-in p { margin: 0 0 12px; font-size: 14px; color: #3D4F7A; line-height: 1.5; }
.a2s62-in ol { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.a2s62-in li { display: flex; gap: 12px; align-items: center; font-size: 14.5px; line-height: 1.45; }
.a2s62-in li i { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #2F55DE; color: #fff; font-style: normal; font-weight: 800; font-size: 13px; }
.a2s62-in .inl { width: 18px; height: 18px; vertical-align: -3px; color: #2F55DE; }
.a2s62-note { font-size: 12.5px !important; }
.a2s62-x { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: #E2E8F5; color: #0B1F44; font-size: 15px; cursor: pointer; }
.a2s62-copy { width: 100%; height: 48px; border-radius: 14px; border: 0; background: #0B1F44; color: #fff; font: inherit; font-weight: 800; cursor: pointer; }

/* ---------- Зураг: хэсгийн толгой, жагсаалтын жижиг зураг ---------- */
.hero62 { position: relative; margin: -4px 0 4px; border-radius: 20px; overflow: hidden; aspect-ratio: 16 / 9; background: #12256A; }
.hero62 img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero62::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3,10,36,0) 45%, rgba(3,10,36,.75)); }
.hero62 figcaption { position: absolute; left: 14px; bottom: 10px; z-index: 1; font-size: 12.5px; font-weight: 700; color: #F4F7FF; }
.g-list .g-row.has-th { grid-template-columns: 64px 1fr auto; }
.th62 { position: relative; width: 64px; height: 52px; border-radius: 12px; overflow: visible; flex: 0 0 auto; }
.th62 img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; display: block; background: #12256A; }
.th62 .gi { position: absolute; right: -6px; bottom: -6px; --s: 26px !important; box-shadow: 0 3px 8px rgba(0,0,0,.45) !important; }
.gi.xs { --s: 26px; }
.sub-body .post-hero, .detail-body .post-hero { border-radius: 18px; aspect-ratio: 16 / 9; object-fit: cover; width: 100%; height: auto; }

@media (prefers-reduced-motion: reduce) { .a2s62, .a2s62-in { transition: none; } }

/* ============================================================
   v62 ДИЗАЙН — «гэгээлэг шил»: суурь нь уусгалттай navy хэвээр,
   дээр нь өнгөт гялгар icon, цагаан/цайвар карт, зураг.
   ============================================================ */
:root {
  --bg: #071233; --bg-2: #0A1846; --bg-3: #0D2160;
  --c-blue: linear-gradient(150deg, #86ABFF, #2F55DE);   --s-blue: rgba(76,125,255,.65);   --k-blue: #1F3AA8;
  --c-cyan: linear-gradient(150deg, #7DE6FF, #139BD0);   --s-cyan: rgba(55,213,255,.6);    --k-cyan: #0D6E96;
  --c-pink: linear-gradient(150deg, #FF9CB0, #E2416A);   --s-pink: rgba(255,95,122,.6);    --k-pink: #A3234A;
  --c-amber: linear-gradient(150deg, #FFD585, #EE8A12);  --s-amber: rgba(255,181,71,.6);   --k-amber: #A85A06;
  --c-green: linear-gradient(150deg, #74F2BC, #17A56C);  --s-green: rgba(61,220,151,.6);   --k-green: #0C6E47;
  --c-violet: linear-gradient(150deg, #B59CFF, #6A47E8); --s-violet: rgba(139,108,255,.6); --k-violet: #4527B8;
  --c-red: linear-gradient(150deg, #FF8FA3, #D9264F);    --s-red: rgba(255,80,110,.65);    --k-red: #8E1233;
}
html, body { background: var(--bg); }
#app {
  background:
    radial-gradient(420px 300px at 8% -4%, rgba(76,125,255,.45), transparent 62%),
    radial-gradient(380px 320px at 105% 28%, rgba(139,108,255,.30), transparent 60%),
    radial-gradient(360px 300px at -10% 72%, rgba(55,213,255,.16), transparent 60%),
    linear-gradient(180deg, #0D2160 0%, #0A1846 45%, #071233 100%) !important;
}

/* ---------- Гялгар icon (бүх icon) ---------- */
.gi { --hc: var(--c-blue); --hs: var(--s-blue); --hk: var(--k-blue);
  background: var(--hc) !important;
  box-shadow: 0 10px 20px -8px var(--hs), inset 0 1px 0 rgba(255,255,255,.55), inset 0 -6px 12px rgba(0,0,0,.16) !important; }
.gi::before { inset: auto 12% auto 12% !important; top: 6% !important; height: 42% !important; padding: 0 !important;
  border-radius: 40% 40% 60% 60% !important; background: linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,0)) !important;
  -webkit-mask: none !important; mask: none !important; }
.gi svg { color: #FFFFFF !important; filter: drop-shadow(0 1px 1px rgba(0,0,0,.22)) !important; }
.gi svg .c { fill: var(--hk) !important; }
.gi.ln svg { stroke-width: 2 !important; }
.gi.h-blue { --hc: var(--c-blue); --hs: var(--s-blue); --hk: var(--k-blue); }
.gi.h-cyan { --hc: var(--c-cyan); --hs: var(--s-cyan); --hk: var(--k-cyan); }
.gi.h-pink { --hc: var(--c-pink); --hs: var(--s-pink); --hk: var(--k-pink); }
.gi.h-amber { --hc: var(--c-amber); --hs: var(--s-amber); --hk: var(--k-amber); }
.gi.h-green { --hc: var(--c-green); --hs: var(--s-green); --hk: var(--k-green); }
.gi.h-violet { --hc: var(--c-violet); --hs: var(--s-violet); --hk: var(--k-violet); }
.gi.h-red, .gi.red { --hc: var(--c-red); --hs: var(--s-red); --hk: var(--k-red); }

/* ---------- Шил карт (нийтлэг) ---------- */
.glass62, .g53tile, .g-list, .acc-item, .block, .m53 {
  background: linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.05)) !important;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.e53::before, .block::before, .acc-item::before, .g-list::before {
  background: linear-gradient(160deg, rgba(255,255,255,.34), rgba(255,255,255,.08) 50%, rgba(127,227,255,.25)) !important; opacity: 1 !important; padding: 1px !important; }
.g-list .g-row + .g-row { border-top-color: rgba(255,255,255,.1) !important; }

/* ---------- Нүүрний хэсгүүд: дээрээ зурагтай ---------- */
.g53tile { min-height: 0 !important; padding: 0 0 13px !important; overflow: hidden; justify-content: flex-start !important; gap: 0; }
.g53tile.has-ph .gi { margin: -24px 0 0 12px; position: relative; z-index: 1; }
.g53tile .tx { padding: 0 12px; }
.g53tile:not(.has-ph) .gi { margin: 12px 0 0 12px; }
.g53tile.wide { padding: 13px !important; }
.g53tile.wide .gi { margin: 0 !important; }
.g53tile.wide .tx { padding: 0; }
.g53tile .gi.lg { --s: 50px; }
.ph62 { display: block; height: 86px; background-size: cover; background-position: center; position: relative; }
.ph62::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,18,51,0) 40%, rgba(7,18,51,.55)); }
.g53tile b { font-size: 14.5px !important; margin-top: 8px !important; }

/* ---------- Нүүрний толгой ---------- */
.h53-greet { color: #D3DEF7 !important; }
.h53-sos { padding: 6px 10px 6px 6px; border-radius: 999px; background: rgba(255,95,122,.16); border: 1px solid rgba(255,140,160,.45) !important; color: #FFD2DA !important; }
.h53-sos .gi { --s: 28px !important; }

/* Хэрэгслийн картууд (tools.js) — нэг гэр бүлийн өнгө */
.ggk-hcard { border: 1px solid rgba(255,255,255,.18) !important; }
.ggk-hcard.is-new, .vz-entry { background: linear-gradient(120deg, rgba(76,125,255,.38), rgba(139,108,255,.22)) !important; }
.ggk-hc-go, .t53 .ar { background: #FFFFFF; color: #0B1F44 !important; }
.t53 { background: linear-gradient(120deg, rgba(76,125,255,.34), rgba(139,108,255,.18)) !important; border: 1px solid rgba(255,255,255,.18); }
.t53 small { color: #D3DEF7 !important; }

/* Үндсэн товч */
.btn-primary { background: linear-gradient(120deg, #37D5FF, #4C7DFF 55%, #8B6CFF) !important; box-shadow: 0 12px 28px -8px rgba(76,125,255,.8) !important; }

/* ============================================================
   v62 ЗАР (ads62.js)
   ============================================================ */
.t-coral { --ac: linear-gradient(120deg, #FF8A5B, #FF5F7A 55%, #B45CFF); --as: rgba(255,95,122,.55); }
.t-blue { --ac: linear-gradient(120deg, #37A5FF, #4C7DFF 55%, #7A5CFF); --as: rgba(76,125,255,.55); }
.t-green { --ac: linear-gradient(120deg, #2FD39A, #12A0A8 60%, #2F7BFF); --as: rgba(47,211,154,.5); }
.t-amber { --ac: linear-gradient(150deg, #FFD27A, #F08A1C); --as: rgba(255,181,71,.5); }
.t-violet { --ac: linear-gradient(150deg, #8FA8FF, #8B6CFF 55%, #C46CFF); --as: rgba(139,108,255,.55); }
.ad62-tag { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; padding: 3px 8px; border-radius: 999px; background: rgba(0,0,0,.24); color: #fff; }

.ad62-ban { position: relative; height: 158px; border-radius: 22px; overflow: hidden; }
.ad62-slide { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 14px 16px 14px; color: #fff; text-decoration: none;
  background: var(--ac); box-shadow: 0 14px 30px -10px var(--as); opacity: 0; transform: translateX(14px); transition: opacity .45s, transform .45s; pointer-events: none; }
.ad62-slide.on { opacity: 1; transform: none; pointer-events: auto; }
.ad62-top { display: flex; justify-content: space-between; align-items: center; }
.ad62-n { font-size: 11px; font-weight: 700; opacity: .9; }
.ad62-mid small { display: block; font-size: 11.5px; font-weight: 800; opacity: .9; margin-bottom: 2px; }
.ad62-mid b { display: block; font-size: 19px; line-height: 1.18; font-weight: 800; }
.ad62-mid > span { display: block; font-size: 12.5px; font-weight: 600; margin-top: 4px; opacity: .95; }
.ad62-cta { position: absolute; right: 14px; top: 44px; padding: 7px 12px; border-radius: 999px; background: #fff; color: #0B1F44; font-size: 12px; font-weight: 800; }
.ad62-dots { position: absolute; right: 16px; bottom: 14px; display: flex; gap: 5px; z-index: 2; pointer-events: none; }
.ad62-dots i { width: 6px; height: 6px; border-radius: 6px; background: rgba(255,255,255,.5); transition: width .3s; }
.ad62-dots i.on { width: 18px; background: #fff; }
.ad62-own { position: absolute; left: 16px; bottom: 12px; z-index: 2; font-size: 11px; font-weight: 700; color: rgba(255,255,255,.92); display: none; }

.ad62-par { border-radius: 22px; padding: 14px; background: #F4F7FF; color: #0B1F44; display: flex; flex-direction: column; gap: 11px; box-shadow: 0 16px 34px -14px rgba(0,0,0,.6); }
.ad62-par-hd { display: flex; justify-content: space-between; align-items: center; }
.ad62-par-hd b { font-size: 14.5px; } .ad62-par-hd span { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; color: #4A5C86; }
.ad62-par-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ad62-p { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px; border-radius: 14px; background: #fff; border: 1px solid #DCE3F2; text-decoration: none; color: #0B1F44; text-align: center; }
.ad62-p b { font-size: 11.5px; line-height: 1.2; } .ad62-p small { font-size: 10.5px; color: #4A5C86; }
.ad62-lg { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 12px; display: grid; place-items: center; background: var(--ac); color: #fff; font-weight: 800; font-size: 13px; overflow: hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,.5); }
.ad62-lg img { width: 100%; height: 100%; object-fit: cover; }
.ad62-par-own { font-size: 12px; font-weight: 700; color: #2340B8; text-align: center; }

.ad62-nat { display: flex; gap: 12px; align-items: center; margin-top: 18px; padding: 12px; border-radius: 20px; text-decoration: none; color: #F4F7FF;
  background: linear-gradient(120deg, rgba(255,181,71,.2), rgba(255,95,122,.12)); border: 1px solid rgba(255,196,110,.5); }
.ad62-nat .ad62-lg { width: 52px; height: 52px; border-radius: 14px; color: #3A2200; }
.ad62-nat-tx { flex: 1; min-width: 0; }
.ad62-nat-tx small { display: block; font-size: 10px; font-weight: 800; letter-spacing: .08em; color: #FFE2B0; }
.ad62-nat-tx b { display: block; font-size: 14px; margin-top: 2px; line-height: 1.3; }
.ad62-nat-tx span { display: block; font-size: 12px; color: #FFEBD0; margin-top: 2px; }
.ad62-arr { font-size: 22px; color: #FFE2B0; }

.ad62-full { position: fixed; inset: 0; z-index: 10001; display: grid; place-items: center; padding: 20px 18px; background: rgba(3,8,28,.94); opacity: 0; transition: opacity .25s; }
.ad62-full.on { opacity: 1; }
.ad62-full-in { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 14px; }
.ad62-full-card { display: block; border-radius: 26px; overflow: hidden; background: #F4F7FF; color: #0B1F44; text-decoration: none; box-shadow: 0 30px 60px -20px rgba(0,0,0,.8); }
.ad62-full-img { display: block; aspect-ratio: 1 / 1; max-height: 46vh; width: 100%; background: var(--ac); }
.ad62-full-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ad62-full-tx { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; }
.ad62-full-tx b { font-size: 20px; line-height: 1.2; } .ad62-full-tx span { font-size: 14px; color: #3D4F7A; line-height: 1.45; }
.ad62-full-tx em { font-style: normal; margin-top: 6px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: #0B1F44; color: #fff; font-weight: 800; }
.ad62-skip { height: 52px; border-radius: 16px; display: flex; align-items: center; justify-content: center; gap: 10px; background: rgba(255,255,255,.12); border: 1.5px solid rgba(255,255,255,.3); color: #F4F7FF; font: inherit; font-weight: 800; cursor: pointer; }
.ad62-skip:disabled { opacity: .6; cursor: default; }
.ad62-skip i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #0B1F44; font-style: normal; font-size: 13px; }
.ad62-full-note { margin: 0; text-align: center; font-size: 12px; color: #B7C5E6; }
@media (prefers-reduced-motion: reduce) { .ad62-slide, .ad62-full { transition: none; } }
.ad62-full-img { position: relative; }
.ad62-ph { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; padding: 24px; text-align: center; color: #fff; }
.ad62-ph b { font-size: 26px; line-height: 1.2; text-shadow: 0 4px 16px rgba(20,10,80,.35); }
.ad62-ph small { font-size: 12.5px; font-weight: 700; padding: 5px 12px; border-radius: 999px; background: rgba(0,0,0,.2); }

/* v63: «Солонгост амьдрах» онцлох tile */
.g53tile.feat { grid-column: 1 / -1; }
.g53tile.feat .ph62 { height: 112px; background-position: center; }
.g53tile.feat .tx > span { font-size: 12.5px; }
.new63 { position: absolute; top: 10px; left: 10px; z-index: 2; font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .2px;
  color: #0D2160; background: #FFD34D; padding: 4px 9px; border-radius: 999px; box-shadow: 0 4px 12px rgba(0,0,0,.25); }

/* v64: Hello Korea promo (нүүр) */
.hk64 { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; padding: 13px 14px; border-radius: 20px; text-decoration: none; color: #fff;
  background: linear-gradient(120deg, #6D4CFF 0%, #3A7BFF 60%, #19B6E6 100%); box-shadow: 0 10px 26px rgba(58,123,255,.35); position: relative; overflow: hidden; }
.hk64::after { content: ""; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px; border-radius: 50%; background: rgba(255,255,255,.12); }
.hk64-ic { flex: 0 0 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font: 800 24px/1 system-ui, sans-serif; background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.45); }
.hk64-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; position: relative; z-index: 1; }
.hk64-tx small { font-size: 10.5px; font-weight: 700; letter-spacing: .3px; opacity: .85; text-transform: uppercase; }
.hk64-tx b { font-size: 14.5px; line-height: 1.25; }
.hk64-tx span { font-size: 11.5px; opacity: .9; }
.hk64-go { position: relative; z-index: 1; flex: 0 0 auto; font-size: 12px; font-weight: 800; color: #3A3FD8; background: #fff; padding: 7px 11px; border-radius: 999px; }