/* Phù Điêu 3D — trang giới thiệu (phu-dieu.html). Chỉ nạp ở trang này; mọi lớp gói trong .trang-pd */
.trang-pd {
  --da: #1C1814; --da-2: #28211B; --da-vien: #3B3128;
  --dong: #C89455; --dong-sang: #EBC489; --nga: #F2E6D2; --nga-phu: #B9A88F;
  --f-khac: "Cormorant Garamond", "Times New Roman", serif;
}
.pd-trang { background: radial-gradient(90% 50% at 85% 0%, #33281E 0%, var(--da) 55%); color: var(--nga); padding-bottom: 30px; }
.pd-trang h1, .pd-trang h2, .pd-trang h3 { color: inherit; }
.pd-trang .khoi { padding: 56px 0; }
.pd-trang .mo.nho { font-size: 13.5px; margin-top: 14px; }
.pd-trang .chon + .chon { margin-left: -6px; }
.pd-trang .nut { display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; font-weight: 700; font-size: 15px; border-radius: 14px; padding: 12px 20px; border: 2px solid transparent; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s; white-space: nowrap; }
.pd-trang .nut:hover { transform: translateY(-1px); }
.pd-trang .nut-choco { background: var(--choco); color: #FFF7EE; box-shadow: 0 8px 20px rgba(74,44,17,.22); }
.pd-trang .nut-xanh { background: var(--xanh-nut); color: #fff; box-shadow: 0 8px 20px rgba(94,135,241,.3); }
.pd-trang .nut-vien { border-color: var(--vien); color: var(--choco); background: var(--the); }
.pd-trang .nut-dong { background: linear-gradient(180deg, var(--dong-sang), var(--dong)); color: #2A1B0C; box-shadow: 0 8px 24px rgba(200,148,85,.28), inset 0 1px 0 rgba(255,255,255,.4); }
.pd-trang .nut-vien-dong { border-color: rgba(235,196,137,.45); color: var(--dong-sang); background: transparent; }
.pd-trang .nut-nho { padding: 9px 16px; font-size: 14px; border-radius: 12px; }

.pd-trang .nhan { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.pd-trang .nhan img { height: 22px; width: auto; }


.pd-trang .khung-demo { border-radius: 22px; overflow: hidden; border: 1px solid var(--da-vien); background: #0F0C0A; min-width: 0; }
.pd-trang .khung-demo canvas { width: 100%; height: auto; display: block; aspect-ratio: 4 / 3; touch-action: none; cursor: grab; }
.pd-trang .thanh-demo { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; padding: 14px 16px; background: var(--da-2); border-top: 1px solid var(--da-vien); font-size: 14px; }
.pd-trang .chon { display: inline-flex; background: #1A1511; border: 1px solid var(--da-vien); border-radius: 12px; padding: 3px; gap: 2px; }
.pd-trang .chon button { font: inherit; font-size: 13px; font-weight: 600; color: var(--nga-phu); background: none; border: 0; padding: 6px 12px; border-radius: 9px; cursor: pointer; }
.pd-trang .chon button.on { background: var(--dong); color: #22160A; }
.pd-trang .thanh-demo label { display: inline-flex; align-items: center; gap: 10px; color: var(--nga-phu); }
.pd-trang .thanh-demo input[type=range] { accent-color: var(--dong); width: 130px; }
.pd-trang .goi-y { font-size: 12.5px; color: var(--nga-phu); padding: 0 16px 14px; background: var(--da-2); }

.pd-trang .hang-nut-pd { margin-top: 36px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.pd-trang .hang-nut-pd small { color: var(--nga-phu); font-size: 13px; }


/* ---------- trang Phù Điêu riêng ---------- */
.pd-trang { background: var(--da); color: var(--nga); }
.pd-trang .pd-hero { padding-block: 56px 40px; display: grid; grid-template-columns: 1fr 1.15fr; gap: 36px; align-items: center; }
@media (max-width: 900px) { .pd-hero { grid-template-columns: 1fr; } }
.pd-trang .pd-hero h1 { font-family: var(--f-khac); font-weight: 700; color: var(--dong-sang); font-size: clamp(44px, 6.4vw, 80px); line-height: 1; letter-spacing: -.01em; }
.pd-trang .pd-hero .sl { font-size: clamp(19px, 2.2vw, 24px); color: var(--nga); margin-top: 14px; font-weight: 500; }
.pd-trang .pd-hero p.mo { color: var(--nga-phu); margin-top: 14px; font-size: 16.5px; max-width: 52ch; }
.pd-trang .pd-hero .hang-nut-pd { margin-top: 26px; }
.pd-trang .pd-hero .khung-demo canvas { aspect-ratio: 4/3; }
.pd-trang .tn-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .tn-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .tn-grid { grid-template-columns: 1fr; } }
.pd-trang .tn { border: 1px solid var(--da-vien); border-radius: 20px; padding: 20px; background: var(--da-2); display: grid; gap: 8px; align-content: start; }
.pd-trang .tn h3 { font-size: 18px; color: var(--nga); }
.pd-trang .tn p { color: var(--nga-phu); font-size: 15px; }
.pd-trang .tn .bieu { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(200,148,85,.12); border: 1px solid rgba(235,196,137,.3); }
.pd-trang .tn .bieu svg { width: 22px; height: 22px; stroke: var(--dong-sang); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pd-trang .pd-dau h2 { font-family: var(--f-khac); font-weight: 700; font-size: clamp(30px, 3.8vw, 44px); color: var(--dong-sang); }
.pd-trang .pd-dau p { color: var(--nga-phu); margin-top: 8px; max-width: 62ch; }
.pd-trang .pd-dau { margin-bottom: 28px; }
.pd-trang .xuat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 760px) { .xuat { grid-template-columns: 1fr; } }
.pd-trang .xuat div { border-left: 2px solid var(--dong); padding: 4px 0 4px 16px; display: grid; gap: 4px; }
.pd-trang .xuat b { color: var(--nga); font-size: 17px; }
.pd-trang .xuat span { color: var(--nga-phu); font-size: 14.5px; }
.pd-trang .ket-noi { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; border-radius: 24px; padding: 26px; background: linear-gradient(110deg, #FFF6EC 0%, #FDEFF3 100%); color: var(--chu); }
@media (max-width: 760px) { .ket-noi { grid-template-columns: 1fr; } }
.pd-trang .ket-noi h3 { color: var(--choco); font-size: 21px; }
.pd-trang .ket-noi p { color: var(--phu); margin-top: 6px; }
.pd-trang .ket-noi img { height: 30px; width: auto; }
.pd-trang .faq details { background: var(--da-2); border-color: var(--da-vien); }
.pd-trang .faq summary { color: var(--nga); }
.pd-trang .faq summary::after, .pd-trang .faq details p { color: var(--nga-phu); }
.pd-trang .tam { display: inline-block; font-size: 11px; font-weight: 700; color: #22160A; background: var(--dong-sang); border-radius: 6px; padding: 1px 6px; margin-left: 6px; vertical-align: 2px; }


.pd-trang .faq { max-width: 860px; display: grid; gap: 10px; }
.pd-trang .faq details { border-radius: 16px; padding: 4px 18px; border: 1px solid var(--da-vien); }
.pd-trang .faq summary { cursor: pointer; font-weight: 700; padding: 12px 0; }
.pd-trang .faq details p { padding-bottom: 14px; }
@media (prefers-reduced-motion: reduce) { .pd-trang * { transition: none !important; } }