/* ==========================================================================
   LỚP GIAO DIỆN KIỂU APP (nạp sau cùng)
   - Khoá zoom, bỏ chạm kép phóng to, bỏ kéo nảy trang
   - Mobile: header gọn + thanh tab dưới đáy + chánh điện vừa đúng 1 màn hình
   - "Viết sớ" là bottom sheet trượt lên, có nền mờ, vuốt xuống để đóng
   - Chuyển trang mượt (View Transitions), phản hồi khi chạm
   ========================================================================== */
:root {
  --hdr-m: 52px;
  --tab-h: 60px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  touch-action: manipulation;           /* bỏ chạm kép để phóng to, không làm chậm cú chạm */
  overscroll-behavior-y: none;          /* bỏ kéo nảy / kéo để tải lại kiểu trình duyệt */
}
body { overscroll-behavior-y: none; overflow-x: clip; }
a, button, label, summary, [role=button] { -webkit-tap-highlight-color: transparent; }
button, .co-btn, .co-tab, .co-head, .co-tabbar, .pp-rite, .pp-toggle, .co-offer-btn, .co-chip, .co-seg label { -webkit-user-select: none; user-select: none; }
.co-temple img, .co-tabbar svg, .co-head svg { -webkit-touch-callout: none; -webkit-user-drag: none; }

/* Phản hồi khi chạm: lún nhẹ như nút của app */
.co-btn, .co-tab, .pp-rite, .pp-toggle, .co-offer-btn, .co-chip, .co-pn-item, .co-card, .co-rand-link, .co-mine-item,
.co-que-grid a, .pp-links a, .pp-pop-grid button, .pp-pop-row button, .co-menu-btn, .co-head-me, .co-head-lunar {
  transition: transform .12s ease, background-color .15s ease, border-color .15s ease;
}
.co-btn:active, .co-tab:active, .pp-rite:active:not(:disabled), .pp-toggle:active, .co-offer-btn:active, .co-chip:active,
.co-pn-item:active, .co-card:active, .co-rand-link:active, .co-mine-item:active, .co-que-grid a:active, .pp-links a:active,
.pp-pop-grid button:active, .pp-pop-row button:active, .co-menu-btn:active, .co-head-me:active, .co-head-lunar:active {
  transform: scale(.965);
}

/* Chuyển trang mượt như app (Chrome/Edge/Safari mới), header và thanh tab đứng yên */
@view-transition { navigation: auto; }
.co-head { view-transition-name: co-head; }
.co-tabbar { view-transition-name: co-tabbar; }
::view-transition-old(root) { animation: co-vt-out .16s ease both; }
::view-transition-new(root) { animation: co-vt-in .22s ease both; }
@keyframes co-vt-out { to { opacity: 0; } }
@keyframes co-vt-in { from { opacity: 0; transform: translateY(8px); } }

/* Ô nhập ≥16px để iPhone không tự phóng to khi bấm vào */
input, select, textarea, button { font-size: max(16px, 1em); }
input[type=submit], .comment-form .submit { font-size: 16px; }

.co-tabbar, .co-head-lunar { display: none; }

/* ==========================================================================
   MOBILE
   ========================================================================== */
@media (max-width: 900px) {
  :root { --co-head-h: var(--hdr-m); }
  body { padding-bottom: calc(var(--tab-h) + var(--safe-b)); }

  /* ---------- header gọn ---------- */
  .co-head { height: calc(var(--hdr-m) + var(--safe-t)); padding-top: var(--safe-t); }
  .co-head-in { padding: 0 12px; gap: 10px; }
  .co-brand-mark { width: 26px; height: 26px; }
  .co-brand-name { font-size: 17px; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; }
  .co-head-me { display: none; }
  .co-brand { align-self: stretch; min-width: 0; }
  .gate-quiet { min-height: 44px; padding: 10px 14px; }
  .co-article-cat { min-height: 34px; display: inline-flex; align-items: center; }
  .co-lunar { display: none; }
  .co-head-lunar {
    display: flex; flex-direction: column; align-items: center; justify-content: center; margin-left: auto;
    min-width: 54px; height: 40px; padding: 0 8px; border: 1px solid var(--co-line);
    font-family: var(--co-f-head); font-weight: 700; font-size: 15px; line-height: 1; color: var(--co-paper); text-decoration: none;
  }
  .co-head-lunar small { font-family: var(--co-f-ui); font-weight: 400; font-size: 9.5px; color: var(--co-leaf); margin-top: 3px; }
  .co-menu-btn { margin-left: 0; width: 44px; height: 40px; }
  .co-nav { top: calc(var(--hdr-m) + var(--safe-t)); }
  .co-menu a { min-height: 48px; }
  .admin-bar .co-head { top: 0; }

  /* ---------- thanh tab dưới đáy ---------- */
  .co-tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; z-index: 70; left: 0; right: 0; bottom: 0;
    height: calc(var(--tab-h) + var(--safe-b)); padding-bottom: var(--safe-b);
    background: rgba(16, 6, 4, .97); border-top: 1px solid var(--co-line);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  }
  .co-tab {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    color: var(--co-muted); text-decoration: none; font-family: var(--co-f-ui); font-size: 11px; line-height: 1.1;
  }
  .co-tab svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .co-tab.is-on { color: var(--co-leaf-hi); }
  .co-tab.is-on::before { content: ''; position: absolute; top: -1px; left: 26%; right: 26%; height: 2px; background: var(--co-leaf-hi); }

  /* ---------- vùng chạm tối thiểu 44px ---------- */
  .co-btn { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; }
  .co-foot-menu a { display: block; padding: 11px 0; }
  .co-foot-menu { gap: 0; }
  .co-cal-head a { padding: 12px 4px; }
  .co-crumb a { display: inline-block; padding: 8px 0; }
  .co-tags a, .co-rand-shuffle { min-height: 40px; display: inline-flex; align-items: center; }
  .co-toc-head { min-height: 48px; }
  .co-toc-list a { padding-top: 11px; padding-bottom: 11px; }
  .co-field input, .co-field select, .co-field textarea { min-height: 48px; }
  .co-form .co-btn, .co-offer .co-btn, .co-restore .co-btn { width: 100%; }
  .co-share .co-btn { flex: 1 1 100%; }
  .co-foot-in { padding-bottom: 24px; }
  .co-foot-copy { padding-bottom: 20px; }

  /* Thông báo + hộp nổi nằm trên thanh tab */
  .pp-toast { bottom: calc(var(--tab-h) + var(--safe-b) + 12px) !important; }
  .pp-pop { bottom: calc(var(--tab-h) + var(--safe-b) + 10px); }

  /* ======================================================================
     CHÁNH ĐIỆN = MÀN HÌNH APP
     ====================================================================== */
  body.web-mode { --bar-h: 140px; --app-h: calc(100dvh - var(--hdr-m) - var(--safe-t) - var(--tab-h) - var(--safe-b)); }
  body.web-mode .co-temple { height: var(--app-h); min-height: 0; overflow: hidden; }
  body.web-mode .app-workspace { height: 100%; flex-direction: column; justify-content: flex-start; padding: 0; gap: 0; }
  body.web-mode .stage-wrapper {
    height: min(calc(var(--app-h) - var(--bar-h)), calc(100vw * 16 / 9));
    flex-shrink: 0; border: 0; border-radius: 0; box-shadow: none;
  }
  .co-fest-ribbon { top: 38px; font-size: 12.5px; padding: 6px 12px; }

  /* Thanh nghi thức gọn bên dưới sân khấu */
  body.web-mode .pilgrim-panel {
    position: relative; flex: 1 0 var(--bar-h); width: 100%; max-height: none; overflow: hidden;
    padding: 8px 10px 8px; gap: 8px; border-width: 1px 0 0; justify-content: flex-start;
  }
  body.web-mode .pp-head, body.web-mode .pp-handle { display: none; }
  body.web-mode .pp-rites { order: 2; }
  body.web-mode .pp-rite { min-height: 54px; }
  body.web-mode .pp-rite-name { font-size: 11.5px; }
  body.web-mode .pp-tools { order: 3; gap: 8px; }
  body.web-mode .pp-toggle { min-height: 42px; font-size: 13px; }
  body.web-mode #ppInstall { flex: 0 0 auto; padding: 0 14px; }

  /* "Viết sớ" = bottom sheet */
  .pp-backdrop {
    position: fixed; z-index: 78; inset: 0; background: rgba(5, 2, 1, .62);
    animation: co-fade .2s ease;
  }
  @keyframes co-fade { from { opacity: 0; } }
  body.web-mode .pilgrim-panel.is-open {
    position: fixed; z-index: 79; left: 0; right: 0; top: auto;
    bottom: calc(var(--tab-h) + var(--safe-b));
    max-height: calc(100dvh - var(--tab-h) - var(--safe-b) - var(--safe-t) - 28px);
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    padding: 0 14px 14px; gap: 12px;
    border-top: 1px solid var(--leaf); box-shadow: 0 -20px 60px rgba(0, 0, 0, .6);
    animation: co-sheet-up .26s cubic-bezier(.2, .8, .2, 1);
  }
  @keyframes co-sheet-up { from { transform: translateY(40%); opacity: .4; } }
  body.web-mode .pilgrim-panel.is-dragging { animation: none; transition: none; }
  body.web-mode .pilgrim-panel.is-open .pp-handle {
    display: flex; justify-content: center; position: sticky; top: 0; z-index: 2;
    margin: 0 -14px; padding: 10px 0 8px; background: var(--wood-2); order: 0; cursor: grab; touch-action: none;
  }
  .pp-handle span { width: 44px; height: 4px; background: var(--smoke); opacity: .6; }
  body.web-mode .pilgrim-panel.is-open .pp-sheet { display: flex; order: 1; }
  body.web-mode .pilgrim-panel.is-open .pp-rites { order: 2; }
  body.web-mode .pilgrim-panel.is-open .pp-tools { order: 3; flex-wrap: wrap; }
  body.web-mode .pilgrim-panel.is-open #ppHear { display: block; }
  body.web-mode .pilgrim-panel.is-open .pp-yt { display: block; order: 4; }
  body.web-mode .pilgrim-panel.is-open .pp-me { display: block; order: 4; }
  body.web-mode .pilgrim-panel.is-open .pp-book { display: block; order: 5; }
  body.web-mode .pilgrim-panel.is-open .pp-links { display: grid; order: 6; }
  body.web-mode .pilgrim-panel.is-open .pp-wall { display: flex; flex-direction: column; order: 7; }
  body.co-sheet-open { overflow: hidden; }
  body.co-sheet-open .pp-toast { bottom: auto !important; top: calc(var(--safe-t) + 10px); }

  /* Ô nhập trong sheet: chữ ≥16px */
  .pp-field input { font-size: 16px; min-height: 46px; }
  .pp-slip textarea { font-size: 17px; }

  /* Phần nội dung SEO bên dưới vẫn cuộn được như trang thường */
  .co-home { padding-top: 28px; }
}

/* App đã cài ra màn hình chính: chừa tai thỏ / thanh trạng thái */
@media (display-mode: standalone) {
  .co-head { padding-top: var(--safe-t); height: calc(var(--co-head-h, 60px) + var(--safe-t)); }
  .co-skip { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .pilgrim-panel.is-open, .pp-backdrop { animation: none !important; }
}