/* ============================================================
   Phaphoc.net - trang chu, chuong trinh, ve Thay (25/10/2026)
   Nau den chu dao, xam + xanh den, nut vang cam Phat.
   Chu to hon trang hoc (nguoi doc phan lon trung nien).
   ============================================================ */
:root{
  --ph-nau:#1c1410;
  --ph-nau-2:#2a1f18;
  --ph-nau-3:#3d3029;
  --ph-xam:#6b625c;
  --ph-xam-nhat:#ece7e1;
  --ph-xanh-den:#16222f;
  --ph-xanh-den-2:#1f3042;
  --ph-vang:#e39a2a;
  --ph-vang-dam:#b06a0c;
  --ph-vang-nhat:#f6d79f;
  --ph-kem:#f7f3ee;
  --ph-chu:#211912;
}
.ph{font-size:16px;line-height:1.65;color:var(--ph-chu)}
.ph h2{font-size:clamp(24px,3vw,34px);line-height:1.2;letter-spacing:-.01em;margin:0 0 12px}
.ph h3{font-size:19px;line-height:1.3;margin:0 0 8px}
.ph p{margin:0 0 14px}
.ph-wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.ph-sec{padding:72px 0}
.ph-sec.toi{background:var(--ph-nau);color:#efe7dc}
.ph-sec.xanh{background:var(--ph-xanh-den);color:#e6ecf2}
.ph-sec.xam{background:var(--ph-xam-nhat)}
.ph-sec.toi h2,.ph-sec.xanh h2,.ph-sec.toi h3,.ph-sec.xanh h3{color:#fff}
.ph-nhan{display:inline-block;font-size:13px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--ph-vang);margin-bottom:10px}
.ph-dau{max-width:760px;margin:0 auto 40px;text-align:center}
.ph-dau p{color:var(--ph-xam);font-size:17px}
.ph-sec.toi .ph-dau p,.ph-sec.xanh .ph-dau p{color:#bfb3a6}
.ph-hoa{display:block;width:44px;height:2px;margin:14px auto 0;background:var(--ph-vang)}

/* Nut */
.ph-nut{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 26px;border-radius:999px;
  font-weight:800;font-size:16px;text-decoration:none;border:0;cursor:pointer;transition:transform .15s,background .15s;font-family:inherit}
.ph-nut:hover{transform:translateY(-1px)}
.ph-nut.vang{background:linear-gradient(135deg,#f0ac40,#cf7d12);color:#1c1410;box-shadow:0 8px 22px rgba(207,125,18,.35)}
.ph-nut.vang:hover{background:linear-gradient(135deg,#f5b856,#b86e0c)}
.ph-nut.vien{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)}
.ph-nut.vien-toi{background:transparent;color:var(--ph-nau);box-shadow:inset 0 0 0 2px var(--ph-nau-3)}
.ph-nut.nho{padding:10px 18px;font-size:14px}

/* Hero */
.ph-hero{position:relative;isolation:isolate;color:#fff;padding:70px 0 80px;
  background:var(--ph-nau) url(/assets/img/ph/thay-chuong-xoay.webp) center 30%/cover no-repeat}
.ph-hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(20,14,10,.94) 0%,rgba(20,14,10,.82) 48%,rgba(22,34,47,.62) 100%)}
.ph-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.ph-hero h1{font-size:clamp(32px,4.6vw,56px);line-height:1.08;margin:0 0 18px;color:#fff;letter-spacing:-.02em;font-weight:900}
.ph-hero h1 em{font-style:normal;color:var(--ph-vang)}
.ph-hero .ph-lead{font-size:19px;color:#e2d6c8;max-width:34em;margin:0 0 26px}
.ph-so{display:flex;gap:28px;flex-wrap:wrap;margin:0 0 30px;padding:0;list-style:none}
.ph-so li{display:flex;flex-direction:column}
.ph-so b{font-size:34px;line-height:1;color:var(--ph-vang);font-weight:900}
.ph-so span{font-size:14px;color:#c9bcad;margin-top:6px}
.ph-hero-nut{display:flex;gap:12px;flex-wrap:wrap}
.ph-hero .hero-card{font-size:11.2px}

/* 3 doi tuong */
.ph-ba{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ph-the-dt{background:linear-gradient(160deg,var(--ph-nau-2),var(--ph-nau));border:1px solid #4a3a2c;border-radius:20px;padding:30px 26px;text-align:center;color:#eadfd2}
.ph-the-dt .bieu{width:58px;height:58px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;font-size:26px;
  background:radial-gradient(circle at 30% 30%,#f6c76a,#b06a0c);color:var(--ph-nau)}
.ph-the-dt h3{color:var(--ph-vang-nhat);font-size:18px;text-transform:uppercase;letter-spacing:.03em}
.ph-the-dt p{color:#cbbfb1;margin:0}

/* Lo trinh 100 bai */
.ph-hoc{display:grid;grid-template-columns:1.15fr .85fr;gap:30px;align-items:start}
.ph-video{position:relative;padding-top:56.25%;border-radius:18px;overflow:hidden;background:#000;box-shadow:0 18px 40px rgba(0,0,0,.25)}
.ph-video iframe,.ph-video img,.ph-video button{position:absolute;inset:0;width:100%;height:100%;border:0}
.ph-video img{object-fit:cover}
.ph-video button{background:rgba(0,0,0,.25);cursor:pointer;display:grid;place-items:center}
.ph-video button span{width:76px;height:76px;border-radius:50%;background:var(--ph-vang);display:grid;place-items:center;font-size:30px;color:var(--ph-nau);padding-left:6px;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.ph-video-chu{margin-top:14px;font-size:15px;color:var(--ph-xam)}
.ph-phan{border:1px solid #ddd3c7;border-radius:16px;background:#fff;margin-bottom:12px;overflow:hidden}
.ph-phan summary{list-style:none;cursor:pointer;padding:16px 18px;display:flex;gap:12px;align-items:center}
.ph-phan summary::-webkit-details-marker{display:none}
.ph-phan summary .so{flex:none;width:42px;height:42px;border-radius:12px;background:var(--ph-nau);color:var(--ph-vang);display:grid;place-items:center;font-weight:900;font-size:18px}
.ph-phan summary b{display:block;font-size:16px;line-height:1.3}
.ph-phan summary small{display:block;color:var(--ph-xam);font-size:13px}
.ph-phan summary::after{content:"+";margin-left:auto;font-size:24px;color:var(--ph-vang-dam);font-weight:700}
.ph-phan[open] summary::after{content:"–"}
.ph-phan[open] summary{border-bottom:1px solid #eee5da;background:#fbf8f4}
.ph-ds{list-style:none;margin:0;padding:6px 0;max-height:420px;overflow:auto}
.ph-ds li a{display:flex;gap:12px;align-items:baseline;padding:9px 18px;text-decoration:none;color:var(--ph-chu);font-size:15px}
.ph-ds li a:hover{background:#fdf4e4}
.ph-ds li i{font-style:normal;flex:none;width:34px;color:var(--ph-vang-dam);font-weight:800;font-size:14px}
.ph-ds li em{font-style:normal;margin-left:auto;flex:none;color:var(--ph-xam);font-size:13px}
.ph-ds li.cho a{color:#a59a90}
.ph-loi{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}
.ph-loi div{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--ph-chu)}
.ph-loi div::before{content:"✦";color:var(--ph-vang-dam);font-weight:900}

/* Hoat dong */
.ph-hd{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.ph-the{display:flex;flex-direction:column;background:var(--ph-nau-2);border:1px solid #45362a;border-radius:20px;overflow:hidden;text-decoration:none;color:#eadfd2;transition:transform .2s,box-shadow .2s}
.ph-the:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(0,0,0,.35)}
.ph-the .anh{aspect-ratio:16/10;background:#000 center/cover no-repeat}
.ph-the .than{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.ph-the .tag{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ph-vang);margin-bottom:6px}
.ph-the h3{color:#fff;font-size:20px}
.ph-the p{color:#c6b9ab;font-size:15px;flex:1}
.ph-the .xem{color:var(--ph-vang);font-weight:800;font-size:15px}

/* Su kien sap toi */
.ph-sk{display:grid;grid-template-columns:auto 1fr auto;gap:26px;align-items:center;background:linear-gradient(120deg,var(--ph-xanh-den-2),var(--ph-xanh-den));
  border:1px solid #2f4357;border-radius:22px;padding:26px 30px;color:#dfe7ef}
.ph-sk .ngay{background:var(--ph-vang);color:var(--ph-nau);border-radius:16px;padding:12px 18px;text-align:center;font-weight:900;line-height:1.05}
.ph-sk .ngay b{display:block;font-size:40px}
.ph-sk .ngay span{font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.ph-sk h3{color:#fff;font-size:22px;margin:0 0 4px}
.ph-sk p{margin:0;color:#b9c6d3}

/* Ve Thay */
.ph-thay{display:grid;grid-template-columns:.8fr 1.2fr;gap:44px;align-items:center}
.ph-thay img{width:100%;border-radius:22px;box-shadow:0 20px 50px rgba(0,0,0,.35)}
.ph-thay ul{list-style:none;padding:0;margin:0 0 24px}
.ph-thay li{position:relative;padding:8px 0 8px 30px;border-bottom:1px solid rgba(255,255,255,.08);color:#ddd2c4}
.ph-thay li::before{content:"☸";position:absolute;left:0;top:7px;color:var(--ph-vang)}

/* Thu vien anh */
.ph-anh{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:190px;gap:10px}
.ph-anh figure{margin:0;position:relative;border-radius:14px;overflow:hidden;background:#000}
.ph-anh figure.rong{grid-column:span 2}
.ph-anh figure.cao{grid-row:span 2}
.ph-anh img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.ph-anh figure:hover img{transform:scale(1.04)}
.ph-anh figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 12px 10px;font-size:13px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.75))}

/* Chan trang */
.ph-chan{background:#120d0a;color:#a99d90;padding:50px 0 34px;font-size:15px}
.ph-chan-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:30px}
.ph-chan h4{color:#fff;margin:0 0 12px;font-size:16px}
.ph-chan a{color:#e0d3c4;text-decoration:none}
.ph-chan a:hover{color:var(--ph-vang)}
.ph-chan ul{list-style:none;padding:0;margin:0}
.ph-chan li{padding:4px 0}
.ph-chan .ban-quyen{border-top:1px solid #2a211b;margin-top:30px;padding-top:18px;font-size:13px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* Trang chuong trinh */
.ph-trang-dau{position:relative;isolation:isolate;padding:64px 0 56px;color:#fff;background:var(--ph-nau) center/cover no-repeat}
.ph-trang-dau::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(20,14,10,.78),rgba(20,14,10,.92))}
.ph-trang-dau h1{font-size:clamp(30px,4vw,48px);color:#fff;margin:0 0 12px;font-weight:900}
.ph-trang-dau p{font-size:18px;color:#ddd0c1;max-width:44em;margin:0}
.ph-muc-luc{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.ph-muc-luc a{padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.1);color:#fff;text-decoration:none;font-size:14px;font-weight:700}
.ph-muc-luc a:hover{background:var(--ph-vang);color:var(--ph-nau)}
.ph-ct{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px;align-items:start}
.ph-ct > *{min-width:0}
.ph-ct.dao .ph-ct-anh{order:2}
.ph-ct-anh{position:sticky;top:80px}
.ph-ct-anh img{width:100%;border-radius:18px;box-shadow:0 18px 44px rgba(0,0,0,.2)}
.ph-ct-anh .phu{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.ph-ct-anh .phu img{aspect-ratio:4/3;object-fit:cover;border-radius:12px;box-shadow:none}
.ph-ct ul.diem{padding:0;list-style:none;margin:0 0 18px}
.ph-ct ul.diem li{position:relative;padding:6px 0 6px 28px}
.ph-ct ul.diem li::before{content:"✦";position:absolute;left:2px;color:var(--ph-vang-dam)}
.ph-sec.toi .ph-ct ul.diem li::before,.ph-sec.xanh .ph-ct ul.diem li::before{color:var(--ph-vang)}
.ph-bang{min-width:0;width:100%;border-collapse:collapse;margin:8px 0 18px;font-size:15px;background:#fff;color:var(--ph-chu);border-radius:12px;overflow:hidden}
.ph-bang th,.ph-bang td{white-space:normal;padding:10px 12px;border-bottom:1px solid #eee5da;text-align:left}
.ph-bang th{background:var(--ph-nau);color:var(--ph-vang-nhat);font-size:13px;letter-spacing:.04em}
.ph-bang tr.nay td{background:#fdf1db;font-weight:700}
.ph-hop{border-radius:16px;padding:18px 20px;background:#fff;border:1px solid #e6dccf;margin:0 0 18px}
.ph-sec.toi .ph-hop,.ph-sec.xanh .ph-hop{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
.ph-hop b.to{font-size:28px;color:var(--ph-vang-dam)}
.ph-sec.toi .ph-hop b.to{color:var(--ph-vang)}
.ph-lich{list-style:none;padding:0;margin:0;font-size:15px}
.ph-lich li{display:grid;grid-template-columns:64px 1fr;gap:10px;padding:7px 0;border-bottom:1px dashed rgba(255,255,255,.14)}
.ph-lich li b{color:var(--ph-vang)}
.ph-pk{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ph-pk div{background:#fff;border:1px solid #e6dccf;border-radius:18px;padding:24px}
.ph-pk .bieu{font-size:34px;margin-bottom:6px}
.ph-dd{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.ph-dd article{background:var(--ph-nau-2);border:1px solid #45362a;border-radius:18px;overflow:hidden}
.ph-dd article img{width:100%;aspect-ratio:16/9;object-fit:cover}
.ph-dd article div{padding:18px 20px}
.ph-dd article p{color:#c6b9ab;font-size:15px;margin:0}

/* Form dang ky */
.ph-form{background:#fff;color:var(--ph-chu);border-radius:20px;padding:26px;box-shadow:0 18px 44px rgba(0,0,0,.18);border:1px solid #e6dccf}
.ph-form h3{color:var(--ph-chu)!important}
.ph-form label{display:block;font-size:14px;font-weight:700;margin:12px 0 6px}
.ph-form input,.ph-form select,.ph-form textarea{width:100%;font:inherit;font-size:16px;padding:12px 14px;border:1px solid #d7ccbf;border-radius:12px;background:#fdfbf8;color:var(--ph-chu)}
.ph-form input:focus,.ph-form select:focus,.ph-form textarea:focus{outline:2px solid var(--ph-vang);border-color:transparent}
.ph-form .hai{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ph-form .ph-nut{width:100%;margin-top:18px}
.ph-form .an{position:absolute;left:-9999px}
.ph-form .tb{margin-top:12px;font-size:15px;font-weight:700}
.ph-form .tb.ok{color:#15803d}.ph-form .tb.loi{color:#b42318}
.ph-ck{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;background:#fff;border-radius:16px;padding:16px;border:1px solid #e6dccf;margin-bottom:18px;color:var(--ph-chu)}
.ph-ck img{width:150px;border-radius:10px}
.ph-ck b{color:var(--ph-chu)}

@media (max-width:960px){
  .ph-hero-grid,.ph-hoc,.ph-thay,.ph-ct{grid-template-columns:1fr}
  .ph-ct.dao .ph-ct-anh{order:0}
  .ph-ct-anh{position:static}
  .ph-ct{grid-template-columns:minmax(0,1fr)}
  .ph-hd{grid-template-columns:1fr 1fr}
  .ph-anh{grid-template-columns:repeat(2,1fr)}
  .ph-chan-grid{grid-template-columns:1fr 1fr}
  .ph-sk{grid-template-columns:auto 1fr}
  .ph-sk .ph-nut{grid-column:1/-1}
  .ph-pk{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .ph-bang{font-size:13px}.ph-bang th,.ph-bang td{padding:8px 6px}
  .ph-sec{padding:52px 0}
  .ph-hero{padding:44px 0 50px}
  .ph-ba,.ph-hd,.ph-loi,.ph-pk,.ph-dd{grid-template-columns:1fr}
  .ph-anh{grid-auto-rows:140px}
  .ph-anh figure.rong{grid-column:span 2}
  .ph-chan-grid{grid-template-columns:1fr}
  .ph-form .hai{grid-template-columns:1fr}
  .ph-ck{grid-template-columns:1fr}
  .ph-ck img{width:180px;margin:0 auto}
  .ph-so{gap:20px}
  .ph-so b{font-size:28px}
}