/*
 * Pro Nails Core – khối nội dung (P2), phần dùng chung. Port từ mockup v3 (31/10).
 * Độ ưu tiên: chữ (h1–h3, p) viết :where(.pnb) để Elementor (Global Fonts, tab Style) thắng;
 * màu link/nút viết .pnb .x để thắng CSS reset của theme. Không dùng !important (trừ [hidden]).
 */

/* ---------- khung ---------- */
:where(.pnb){box-sizing:border-box;font-family:var(--f-sans);color:var(--ink);font-size:1rem;line-height:1.6;font-variation-settings:"opsz" 14;-webkit-text-size-adjust:100%}
:where(.pnb) *,:where(.pnb) *::before,:where(.pnb) *::after{box-sizing:border-box}
.pnb :where(h1,h2,h3){font-family:var(--f-serif);font-weight:600;line-height:1.15;text-wrap:balance;margin:0;color:inherit}
.pnb :where(p,figure,ul,ol,li){margin:0}
.pnb :where(img){display:block;max-width:100%;height:auto;border:0;border-radius:0;box-shadow:none}
.pnb [hidden]{display:none!important}
:where(.pnb) .pnb-wrap{max-width:var(--wrap,1160px);margin:0 auto;padding-left:var(--gut-l,16px);padding-right:var(--gut-r,16px)}
:where(.pnb-cards,.pnb-offers,.pnb-gallery,.pnb-visit,.pnb-menu){padding-block:clamp(56px,8vw,96px)}
.pnb :is(a,button,summary):focus-visible{outline:2px solid var(--wine);outline-offset:3px}
.pnb .pnb-i{display:inline-block;width:18px;height:18px;flex:none;vertical-align:middle}

/* ---------- đầu mục ---------- */
:where(.pnb) .pnb-eyebrow{display:inline-block;font-size:.88rem;letter-spacing:.16em;text-transform:uppercase;color:var(--wine);font-weight:600}
:where(.pnb) .pnb-head{display:grid;gap:10px;max-width:640px;margin-bottom:clamp(28px,4vw,44px)}
:where(.pnb) .pnb-head.pnb-center{text-align:center;margin-inline:auto;justify-items:center}
:where(.pnb) .pnb-head h2{font-size:clamp(1.9rem,3.6vw,2.7rem)}
:where(.pnb) .pnb-head h2 em{font-style:italic;color:var(--brick-hi)}
:where(.pnb) .pnb-head p{color:var(--muted)}

/* ---------- link chữ có mũi tên ---------- */
.pnb .pnb-link,.pnb .pnb-link:visited{display:inline-flex;align-items:center;gap:4px;color:var(--wine);font-weight:600;font-size:.94rem;text-decoration:none}
.pnb .pnb-link:hover,.pnb .pnb-link:focus{color:var(--wine);text-decoration:underline}
.pnb .pnb-arr{display:inline-block;transition:transform .2s}
.pnb .pnb-link:hover .pnb-arr{transform:translateX(3px)}
.pnb .pn-btn .pnb-i{width:18px;height:18px}
.pnb .pn-btn{text-decoration:none}

/* ---------- nhãn, trạng thái ---------- */
:where(.pnb) .pnb-chip{display:inline-flex;align-items:center;gap:6px;font-size:.9rem;font-weight:500;padding:7px 12px;border-radius:8px;background:var(--blush);color:var(--ink);line-height:1.3}
:where(.pnb) .pnb-chip .pnb-i{width:14px;height:14px;color:var(--wine)}
:where(.pnb) .pnb-status{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:.94rem;min-height:1.6em}
:where(.pnb) .pnb-status.is-open::before,:where(.pnb) .pnb-status.is-closed::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
:where(.pnb) .pnb-status.is-open{color:var(--ok)}
:where(.pnb) .pnb-status.is-closed{color:var(--closed)}
/* "Price to confirm": chỉ người quản lý thấy */
:where(.pnb) .pnb-tmp{display:inline-block;font:600 11px/1 var(--f-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--gold);border:1px dashed var(--gold);border-radius:4px;padding:3px 5px;vertical-align:middle;margin-left:6px;white-space:nowrap}

/* ---------- khung gợi ý trong Elementor ---------- */
.pnb .pnb-empty{margin:16px 0;padding:14px 16px;border:2px dashed var(--gold);border-radius:10px;background:#FFFBEF;color:#5B4A1E;font:500 14px/1.45 var(--f-sans);text-align:left}
.pnb .pnb-empty a{color:#8A5A00;font-weight:600}

/* ---------- thanh thông báo (Trang chủ › dưới header) ---------- */
.pnb-notice{background:var(--blush);border-bottom:1px solid var(--line);color:var(--ink);font:500 .94rem/1.45 var(--f-sans);text-align:center}
.pnb-notice .pnb-wrap{max-width:var(--wrap,1160px);margin:0 auto;padding:10px var(--gut-r,16px) 10px var(--gut-l,16px)}
.pnb-notice a,.pnb-notice a:visited{color:var(--wine);font-weight:600;text-decoration:none}
.pnb-notice a:hover{text-decoration:underline;color:var(--wine)}

/* =================================================================
 * Hiệu ứng (tab Hiệu ứng → class trên body)
 * ================================================================= */
body{--fx-dur:.6s;--rv-range:55%}
body.pn-speed-slow{--fx-dur:.95s;--rv-range:85%}
body.pn-speed-fast{--fx-dur:.35s;--rv-range:30%}

/* hiện dần khi cuộn: CSS thuần (trình duyệt mới); trình duyệt cũ dùng JS (.pnb-rv-pre) */
@keyframes pnb-rv{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:none}}
/* chỉ khi máy KHÔNG bật "giảm chuyển động" (sửa P2b: trước đây luật này thắng luật tắt bên dưới) */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline: view()){
    body:not(.pn-fx-off):not(.pn-fx-noreveal):not(.elementor-editor-active) .pnb-rv{animation:pnb-rv linear both;animation-timeline:view();animation-range:entry 0% entry var(--rv-range)}
  }
}
.pnb .pnb-rv-t{transition:opacity var(--fx-dur) ease,transform var(--fx-dur) ease}
.pnb .pnb-rv-pre{opacity:0;transform:translateY(32px)}

/* phóng ảnh khi rê chuột */
.pnb .pnb-zoom img{transition:transform var(--fx-dur) ease}
body:not(.pn-fx-off):not(.pn-fx-nohover) .pnb .pnb-zoom:hover img,
body:not(.pn-fx-off):not(.pn-fx-nohover) .pnb .pnb-zoom:focus-visible img{transform:scale(1.07)}
@media (hover:none){body:not(.pn-fx-off) .pnb .pnb-zoom:active img{transform:scale(1.04)}}

/* điện thoại: Nhẹ = bỏ hiện dần + zoom chậm; Tắt = bỏ hết */
@media (max-width:760px){
  body:is(.pn-fxm-light,.pn-fxm-off) .pnb .pnb-rv{animation:none}
  body.pn-fxm-off .pnb .pnb-zoom img{transition:none;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .pnb .pnb-rv{animation:none}
  .pnb .pnb-rv-pre{opacity:1;transform:none}
  .pnb .pnb-zoom img,.pnb .pnb-arr{transition:none}
}

/* ---------- lightbox (Gallery) ---------- */
.pnb-lb{position:fixed;inset:0;z-index:100000;background:rgba(var(--shade),.94);display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr);align-items:center;gap:8px;padding:calc(56px + env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) calc(56px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));font-family:var(--f-sans)}
.pnb-lb[hidden]{display:none}
.pnb-lb-fig{height:100%;min-height:0;margin:0;display:grid;place-items:center;min-width:0;overflow:hidden}
.pnb-lb-fig img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;animation:pnb-lbin var(--fx-dur,.6s) ease}
@keyframes pnb-lbin{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.pnb-lb button{background:rgba(255,255,255,.12);color:#fff;border:0;border-radius:50%;width:48px;height:48px;padding:0;font:400 2rem/1 var(--f-sans);cursor:pointer;display:grid;place-items:center}
.pnb-lb button:hover,.pnb-lb button:focus{background:rgba(255,255,255,.25);color:#fff}
.pnb-lb button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.pnb-lb .pnb-lb-x{position:absolute;top:calc(8px + env(safe-area-inset-top,0px));right:max(12px,env(safe-area-inset-right,0px))}
.pnb-lb-cap{position:absolute;left:0;right:0;bottom:calc(16px + env(safe-area-inset-bottom,0px));text-align:center;color:#fff;font-size:.94rem;padding:0 16px}
@media (max-width:640px){.pnb-lb{grid-template-columns:minmax(0,1fr)}.pnb-lb .pnb-lb-nav{position:absolute;bottom:calc(52px + env(safe-area-inset-bottom,0px))}.pnb-lb .pnb-lb-prev{left:16px}.pnb-lb .pnb-lb-next{right:16px}}
@media (prefers-reduced-motion:reduce){.pnb-lb-fig img{animation:none}}

/* neo #gift #about #faq #book…: chừa chỗ cho header dính (+ thanh admin) */
.pnb{--pnb-top:0px}
body.pn-sticky .pnb{--pnb-top:var(--pn-hdr,73px)}
body.pn-sticky.admin-bar .pnb{--pnb-top:calc(var(--pn-hdr,73px) + 32px)}
@media (max-width:782px){body.pn-sticky.admin-bar .pnb{--pnb-top:calc(var(--pn-hdr,73px) + 46px)}}
@media (max-width:600px){body.pn-sticky.admin-bar .pnb{--pnb-top:var(--pn-hdr,73px)}}
.pnb[id],.pnb .pnb-book{scroll-margin-top:calc(var(--pnb-top) + 8px)}