/* ════════════════════════════════════════════════════════════
   VTM WEBSITE · PAGES.CSS  ·  style dùng chung cho 4 trang con
   (vtm-school · su-kien · showroom · lien-he)
   Kế thừa tokens & component từ vtm-core.css
   ════════════════════════════════════════════════════════════ */

/* ════════ PAGE HERO (nhẹ hơn hero trang chủ) ════════ */
.page-hero{
  position:relative;width:100%;
  min-height:clamp(520px,80vh,820px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:calc(var(--nav-h) + 40px) clamp(20px,5vw,84px) clamp(60px,10vh,110px);
  overflow:hidden;isolation:isolate;
  background:radial-gradient(ellipse 80% 70% at 50% 38%,#5A1622 0%,#3A1118 52%,#240A0E 100%);
}
.page-hero .fx-ambient,.page-hero .fx-beams,.page-hero .fx-sweep{z-index:-1;}
.page-hero .hero-rings .ring{border-color:rgba(240,208,112,.22);}
.page-hero-ghost{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  z-index:0;font-family:var(--f-disp);font-weight:900;
  font-size:clamp(180px,32vw,460px);line-height:.8;
  color:transparent;-webkit-text-stroke:1.5px rgba(248,233,184,.08);
  user-select:none;pointer-events:none;white-space:nowrap;letter-spacing:.02em;
}
.ph-eye{
  font-family:var(--f-ui);font-size:clamp(10px,1.2vw,13px);letter-spacing:.46em;
  text-transform:uppercase;color:var(--gold-bright);margin-bottom:22px;
  display:inline-flex;align-items:center;gap:14px;
  opacity:0;animation:hUp 1s ease forwards .35s;
}
.ph-eye::before,.ph-eye::after{content:'';width:clamp(20px,4vw,52px);height:1px;background:linear-gradient(90deg,transparent,var(--gold));}
.ph-eye::before{background:linear-gradient(90deg,var(--gold),transparent);}
.ph-title{
  font-family:var(--f-disp);font-weight:900;line-height:1.06;letter-spacing:.012em;
  font-size:clamp(40px,7.4vw,108px);color:var(--ivory);
  text-shadow:0 8px 44px rgba(0,0,0,.5);max-width:1100px;
  opacity:0;animation:hUp 1.1s ease forwards .55s;position:relative;z-index:2;
}
.ph-title em{
  font-style:italic;font-weight:800;
  background:linear-gradient(120deg,var(--gold-cream),var(--gold-bright) 45%,var(--gold-warm));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  padding:.18em .14em;margin:-.18em -.14em;
}
.ph-sub{
  font-family:var(--f-sub);font-style:italic;font-size:clamp(16px,2.2vw,26px);
  color:var(--gold-cream);max-width:760px;margin:26px auto 0;line-height:1.7;
  opacity:0;animation:hUp 1.1s ease forwards .8s;position:relative;z-index:2;
}
.ph-cta{
  display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:38px;
  opacity:0;animation:hUp 1s ease forwards 1.05s;position:relative;z-index:2;
}

/* breadcrumb đặt trên page-hero */
.crumbs{
  font-family:var(--f-ui);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(248,233,184,.55);margin-bottom:24px;display:inline-flex;align-items:center;gap:10px;
  opacity:0;animation:hUp 1s ease forwards .25s;position:relative;z-index:2;
}
.crumbs a{color:rgba(248,233,184,.55);transition:color .3s;}
.crumbs a:hover{color:var(--gold-bright);}
.crumbs .sep{opacity:.4;}

/* ════════ KHOÁ HỌC / BỘ MÔN ════════ */
.course-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2.4vw,28px);margin-top:clamp(48px,7vh,80px);width:100%;
}
.course-card{
  position:relative;padding:clamp(26px,2.8vw,40px) clamp(22px,2.4vw,32px);
  border-radius:16px;text-align:left;overflow:hidden;
  background:linear-gradient(165deg,rgba(110,26,38,0.55),rgba(40,12,16,0.62));
  border:1px solid var(--glass-bd);
  transition:transform .45s var(--ease),border-color .45s,box-shadow .45s;
}
.course-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold-bright),transparent);opacity:.7;
}
.course-card:hover{transform:translateY(-10px);border-color:rgba(240,208,112,.5);
  box-shadow:0 26px 64px rgba(0,0,0,.45),0 0 46px rgba(240,208,112,.16);}
.course-ico{font-family:var(--f-disp);font-weight:800;font-size:clamp(34px,4vw,52px);line-height:1;margin-bottom:16px;
  background:linear-gradient(120deg,var(--gold-cream),var(--gold-bright),var(--gold-warm));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.course-h{font-family:var(--f-disp);font-weight:700;font-size:clamp(18px,2vw,24px);color:var(--ivory);margin-bottom:10px;}
.course-p{font-size:clamp(13px,1.4vw,14.5px);color:var(--ivory-dim);line-height:1.84;font-weight:300;margin-bottom:18px;}
.course-tags{display:flex;flex-wrap:wrap;gap:7px;}
.tag{font-family:var(--f-ui);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  padding:5px 12px;border-radius:30px;color:var(--gold-cream);
  border:1px solid rgba(201,168,76,.32);background:rgba(40,12,16,.4);}

/* ════════ LỘ TRÌNH HỌC ════════ */
.steps{
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.2vw,28px);
  margin-top:clamp(48px,7vh,80px);width:100%;position:relative;
}
.steps::before{
  content:'';position:absolute;top:38px;left:8%;right:8%;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),var(--gold-bright),var(--gold),transparent);
  opacity:.5;z-index:0;
}
.step{position:relative;text-align:center;padding:0 8px;z-index:1;}
.step-num{
  width:76px;height:76px;border-radius:50%;margin:0 auto 22px;
  display:flex;align-items:center;justify-content:center;font-family:var(--f-disp);font-weight:800;
  font-size:30px;color:var(--gold-cream);
  background:linear-gradient(165deg,rgba(110,26,38,0.75),rgba(40,12,16,0.85));
  border:1px solid var(--glass-bd);
  box-shadow:0 10px 30px rgba(0,0,0,.4),inset 0 0 18px rgba(240,208,112,.14);
}
.step-h{font-family:var(--f-disp);font-weight:700;font-size:clamp(15px,1.7vw,19px);color:var(--ivory);margin-bottom:8px;}
.step-p{font-size:clamp(12px,1.3vw,13.5px);color:var(--ivory-dim);line-height:1.78;font-weight:300;}

/* ════════ GIẢNG VIÊN ════════ */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,28px);
  margin-top:clamp(48px,7vh,80px);width:100%;}
.teacher{padding:clamp(26px,2.6vw,36px) clamp(18px,2vw,28px);border-radius:14px;text-align:center;
  background:linear-gradient(165deg,rgba(110,26,38,0.46),rgba(40,12,16,0.6));border:1px solid var(--glass-bd);
  transition:transform .4s var(--ease),border-color .4s;}
.teacher:hover{transform:translateY(-7px);border-color:rgba(240,208,112,.4);}
.teacher-av{width:96px;height:96px;border-radius:50%;margin:0 auto 18px;
  background:radial-gradient(circle at 35% 30%,rgba(240,208,112,.55),rgba(110,26,38,.7) 70%);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--f-disp);font-weight:800;font-size:34px;color:var(--gold-cream);
  border:1px solid rgba(240,208,112,.3);box-shadow:inset 0 0 22px rgba(240,208,112,.18);}
.teacher-name{font-family:var(--f-disp);font-weight:700;font-size:clamp(15px,1.6vw,18px);color:var(--ivory);margin-bottom:4px;}
.teacher-role{font-family:var(--f-ui);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-bright);margin-bottom:12px;}
.teacher-bio{font-size:12.5px;color:var(--ivory-dim);line-height:1.72;font-weight:300;}

/* ════════ SỰ KIỆN ════════ */
.event-feat{
  position:relative;display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(28px,3.2vw,52px);
  margin-top:clamp(46px,7vh,80px);padding:clamp(34px,4vw,60px);border-radius:20px;
  background:linear-gradient(135deg,rgba(170,50,39,.32),rgba(40,12,16,.65));
  border:1px solid rgba(240,208,112,.32);overflow:hidden;
  box-shadow:0 28px 72px rgba(0,0,0,.45),0 0 60px rgba(240,208,112,.1);
}
.event-feat::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 50% at 80% 30%,rgba(240,208,112,.18),transparent 70%);pointer-events:none;}
.ef-meta{font-family:var(--f-ui);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-bright);margin-bottom:18px;}
.ef-title{font-family:var(--f-disp);font-weight:800;font-size:clamp(28px,3.8vw,46px);line-height:1.18;color:var(--ivory);margin-bottom:18px;}
.ef-title em{font-style:italic;background:linear-gradient(120deg,var(--gold-cream),var(--gold-bright),var(--gold-warm));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.ef-desc{font-family:var(--f-sub);font-style:italic;font-size:clamp(15px,1.7vw,19px);color:var(--gold-cream);line-height:1.76;margin-bottom:22px;}
.ef-info{display:flex;flex-direction:column;gap:9px;margin-bottom:24px;font-size:14px;color:var(--ivory-dim);}
.ef-info b{color:var(--gold-cream);font-weight:600;}
.ef-visual{position:relative;border-radius:14px;overflow:hidden;
  background:radial-gradient(ellipse 80% 80% at 50% 40%,#8B1A2E,#3E1417 70%,#240A0E);
  min-height:280px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--glass-bd);}
.ef-visual-num{font-family:var(--f-disp);font-weight:900;font-size:clamp(80px,12vw,180px);line-height:.85;letter-spacing:.02em;
  background:linear-gradient(120deg,var(--gold-cream),var(--gold-bright),var(--gold-warm));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 30px rgba(240,208,112,.35));}
.ef-visual-sub{position:absolute;bottom:24px;left:0;right:0;text-align:center;
  font-family:var(--f-sub);font-style:italic;font-size:clamp(13px,1.5vw,17px);color:var(--gold-cream);letter-spacing:.16em;}

.event-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,28px);
  margin-top:clamp(40px,6vh,72px);width:100%;
}
.event-card{
  position:relative;padding:clamp(24px,2.6vw,36px) clamp(22px,2.4vw,32px);border-radius:16px;text-align:left;
  background:linear-gradient(165deg,rgba(110,26,38,0.5),rgba(40,12,16,0.62));border:1px solid var(--glass-bd);
  transition:transform .45s var(--ease),border-color .45s,box-shadow .45s;display:flex;flex-direction:column;
}
.event-card:hover{transform:translateY(-8px);border-color:rgba(240,208,112,.5);box-shadow:0 22px 60px rgba(0,0,0,.42);}
.event-date{display:inline-flex;align-items:baseline;gap:8px;font-family:var(--f-disp);font-weight:800;
  color:var(--gold-bright);margin-bottom:14px;}
.event-date .d{font-size:clamp(28px,3.4vw,42px);line-height:1;}
.event-date .m{font-family:var(--f-ui);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-cream);}
.event-date .y{font-family:var(--f-ui);font-size:11px;letter-spacing:.18em;color:var(--ivory-dim);}
.event-cat{font-family:var(--f-ui);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-warm);margin-bottom:10px;}
.event-h{font-family:var(--f-disp);font-weight:700;font-size:clamp(17px,1.9vw,22px);color:var(--ivory);line-height:1.32;margin-bottom:10px;}
.event-p{font-size:13px;color:var(--ivory-dim);line-height:1.78;font-weight:300;margin-bottom:18px;flex:1;}
.event-loc{font-family:var(--f-ui);font-size:11px;letter-spacing:.12em;color:var(--gold-cream);}

.past-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,22px);margin-top:clamp(38px,6vh,68px);width:100%;}
.past{position:relative;aspect-ratio:4/5;border-radius:12px;overflow:hidden;
  background:linear-gradient(165deg,rgba(110,26,38,0.6),rgba(40,12,16,0.7));border:1px solid var(--glass-bd);
  display:flex;flex-direction:column;justify-content:flex-end;padding:22px;
  transition:transform .4s var(--ease);}
.past::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 50% 30%,rgba(240,208,112,.18),transparent 70%);}
.past:hover{transform:translateY(-6px);}
.past-y{font-family:var(--f-disp);font-weight:900;font-size:clamp(34px,4.4vw,54px);line-height:1;
  background:linear-gradient(120deg,var(--gold-cream),var(--gold-bright));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:8px;position:relative;}
.past-h{font-family:var(--f-disp);font-weight:600;font-size:14px;color:var(--ivory);line-height:1.35;position:relative;}

/* ════════ SHOWROOM ════════ */
.shop-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,2.6vw,32px);
  margin-top:clamp(48px,7vh,80px);width:100%;
}
.shop-card{
  position:relative;padding:clamp(28px,3vw,42px);border-radius:16px;text-align:left;overflow:hidden;
  background:linear-gradient(135deg,rgba(110,26,38,0.55),rgba(40,12,16,0.65));border:1px solid var(--glass-bd);
  transition:transform .45s var(--ease),border-color .45s,box-shadow .45s;display:grid;grid-template-columns:auto 1fr;gap:22px;
}
.shop-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold-bright),transparent);opacity:.7;}
.shop-card:hover{transform:translateY(-8px);border-color:rgba(240,208,112,.5);box-shadow:0 24px 64px rgba(0,0,0,.45);}
.shop-badge{
  width:78px;height:78px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--f-disp);font-weight:800;font-size:32px;color:var(--gold-cream);
  background:linear-gradient(165deg,rgba(170,50,39,.6),rgba(40,12,16,.85));
  border:1px solid rgba(240,208,112,.34);box-shadow:inset 0 0 18px rgba(240,208,112,.15);
}
.shop-name{font-family:var(--f-disp);font-weight:700;font-size:clamp(18px,2vw,24px);color:var(--ivory);margin-bottom:6px;}
.shop-tag{font-family:var(--f-ui);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-bright);margin-bottom:14px;}
.shop-row{display:flex;gap:10px;font-size:13.5px;color:var(--ivory-dim);line-height:1.75;margin-bottom:7px;font-weight:300;}
.shop-row .ico{color:var(--gold-bright);width:18px;flex-shrink:0;font-size:14px;line-height:1.6;}
.shop-row b{color:var(--gold-cream);font-weight:500;}
.shop-actions{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap;}
.shop-actions a{font-family:var(--f-ui);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  padding:9px 18px;border-radius:30px;border:1px solid rgba(240,208,112,.4);color:var(--gold-cream);
  transition:.3s;display:inline-flex;align-items:center;gap:6px;}
.shop-actions a:hover{background:rgba(240,208,112,.12);border-color:var(--gold-bright);color:var(--gold-bright);}
.shop-actions .pri{background:linear-gradient(135deg,var(--gold-bright),var(--gold));color:var(--red-deep);border:none;font-weight:600;}
.shop-actions .pri:hover{background:linear-gradient(135deg,var(--gold-bright),var(--gold-warm));color:var(--red-deep);}

/* ════════ THÔNG TIN / INFO CARDS ════════ */
.info-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,24px);
  margin-top:clamp(44px,6vh,72px);width:100%;}
.info-card{padding:clamp(26px,2.8vw,36px) clamp(20px,2.2vw,28px);border-radius:14px;text-align:center;
  background:linear-gradient(165deg,rgba(110,26,38,0.5),rgba(40,12,16,0.6));border:1px solid var(--glass-bd);
  transition:transform .4s var(--ease),border-color .4s;}
.info-card:hover{transform:translateY(-6px);border-color:rgba(240,208,112,.45);}
.info-ico{font-family:var(--f-disp);font-weight:800;font-size:34px;line-height:1;margin-bottom:14px;
  background:linear-gradient(120deg,var(--gold-cream),var(--gold-bright));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.info-lb{font-family:var(--f-ui);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-bright);margin-bottom:12px;}
.info-val{font-family:var(--f-disp);font-weight:600;font-size:clamp(16px,1.8vw,20px);color:var(--ivory);line-height:1.45;}
.info-val a{color:inherit;transition:color .3s;}
.info-val a:hover{color:var(--gold-bright);}
.info-sub{font-size:12.5px;color:var(--ivory-dim);margin-top:6px;line-height:1.65;}

/* ════════ FORM LIÊN HỆ ════════ */
.cform-wrap{
  display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(28px,4vw,64px);
  margin-top:clamp(46px,7vh,80px);width:100%;align-items:start;text-align:left;
}
.cform{
  padding:clamp(28px,3.2vw,48px);border-radius:18px;
  background:linear-gradient(165deg,rgba(110,26,38,0.55),rgba(40,12,16,0.65));border:1px solid var(--glass-bd);
  box-shadow:0 24px 60px rgba(0,0,0,.4);
}
.cform-h{font-family:var(--f-disp);font-weight:700;font-size:clamp(20px,2.4vw,28px);color:var(--ivory);margin-bottom:10px;}
.cform-sub{font-family:var(--f-sub);font-style:italic;font-size:15px;color:var(--gold-cream);margin-bottom:24px;line-height:1.6;}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;}
.cfield{display:flex;flex-direction:column;gap:7px;margin-bottom:14px;}
.cfield.full{grid-column:1/-1;}
.cfield label{font-family:var(--f-ui);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-bright);}
.cfield input,.cfield select,.cfield textarea{
  width:100%;padding:13px 16px;font-family:var(--f-body);font-size:14.5px;color:var(--ivory);
  background:rgba(28,8,12,0.65);border:1px solid rgba(201,168,76,0.22);border-radius:10px;
  transition:border-color .3s,background .3s,box-shadow .3s;outline:none;
}
.cfield input::placeholder,.cfield textarea::placeholder{color:rgba(248,233,184,0.35);font-style:italic;}
.cfield input:focus,.cfield select:focus,.cfield textarea:focus{
  border-color:var(--gold-bright);background:rgba(36,10,14,0.85);
  box-shadow:0 0 0 4px rgba(240,208,112,.14),0 0 22px rgba(240,208,112,.18);
}
.cfield textarea{min-height:140px;resize:vertical;font-family:var(--f-body);}
.cfield select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--gold-bright) 50%),linear-gradient(135deg,var(--gold-bright) 50%,transparent 50%);
  background-position:calc(100% - 22px) 50%,calc(100% - 15px) 50%;background-size:7px 7px;background-repeat:no-repeat;padding-right:46px;}
.cf-note{font-size:11.5px;color:var(--ivory-dim);margin:12px 0 18px;line-height:1.6;font-style:italic;}
.cf-submit{width:100%;padding:16px 32px;border:none;cursor:pointer;
  font-family:var(--f-ui);font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  border-radius:46px;background:linear-gradient(135deg,var(--gold-bright),var(--gold));color:var(--red-deep);
  box-shadow:0 10px 36px rgba(201,168,76,.4);transition:transform .35s var(--ease),box-shadow .35s;}
.cf-submit:hover{transform:translateY(-3px);box-shadow:0 16px 50px rgba(240,208,112,.6);}

.cside{display:flex;flex-direction:column;gap:16px;}
.cside-card{
  padding:clamp(22px,2.4vw,30px);border-radius:14px;
  background:linear-gradient(165deg,rgba(110,26,38,0.42),rgba(40,12,16,0.55));border:1px solid var(--glass-bd);
}
.cside-h{font-family:var(--f-disp);font-weight:700;font-size:18px;color:var(--gold-bright);margin-bottom:14px;}
.cside-row{display:flex;align-items:flex-start;gap:14px;margin-bottom:13px;font-size:14px;color:var(--ivory-dim);line-height:1.7;}
.cside-row .ico{color:var(--gold-bright);font-size:16px;flex-shrink:0;min-width:20px;}
.cside-row b{color:var(--gold-cream);font-weight:500;display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:3px;}
.cside-row a{color:var(--ivory);transition:color .3s;}
.cside-row a:hover{color:var(--gold-bright);}

/* ════════ BẢN ĐỒ EMBED ════════ */
.map-wrap{
  position:relative;width:100%;border-radius:18px;overflow:hidden;margin-top:clamp(40px,6vh,70px);
  border:1px solid var(--glass-bd);box-shadow:0 24px 60px rgba(0,0,0,.45);
  aspect-ratio:16/8;
}
.map-wrap iframe{width:100%;height:100%;border:0;display:block;filter:saturate(.86) contrast(1.08) brightness(.88);}
.map-overlay{position:absolute;top:18px;left:18px;z-index:2;padding:14px 22px;border-radius:14px;
  background:rgba(36,10,14,0.85);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--glass-bd);font-family:var(--f-ui);font-size:12px;color:var(--gold-cream);
  letter-spacing:.14em;text-transform:uppercase;pointer-events:none;}

/* ════════ KÊNH HỖ TRỢ / PHÒNG BAN ════════ */
.dept-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.2vw,24px);
  margin-top:clamp(46px,7vh,80px);width:100%;}
.dept{padding:clamp(26px,2.8vw,38px) clamp(20px,2.2vw,28px);border-radius:14px;text-align:left;
  background:linear-gradient(165deg,rgba(110,26,38,0.46),rgba(40,12,16,0.6));border:1px solid var(--glass-bd);
  transition:transform .4s var(--ease),border-color .4s;}
.dept:hover{transform:translateY(-7px);border-color:rgba(240,208,112,.45);}
.dept-h{font-family:var(--f-disp);font-weight:700;font-size:clamp(16px,1.8vw,20px);color:var(--gold-bright);margin-bottom:10px;}
.dept-p{font-size:13px;color:var(--ivory-dim);line-height:1.78;font-weight:300;margin-bottom:14px;}
.dept-c{font-family:var(--f-ui);font-size:12.5px;color:var(--gold-cream);font-weight:500;letter-spacing:.06em;}
.dept-c a{color:inherit;transition:color .3s;}
.dept-c a:hover{color:var(--gold-bright);}

/* ════════ RESPONSIVE ════════ */
@media(max-width:1000px){
  .course-grid,.event-grid,.team-grid,.dept-grid{grid-template-columns:repeat(2,1fr);}
  .info-grid{grid-template-columns:repeat(2,1fr);}
  .steps{grid-template-columns:repeat(2,1fr);}
  .steps::before{display:none;}
  .past-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:760px){
  .event-feat{grid-template-columns:1fr;}
  .shop-grid{grid-template-columns:1fr;}
  .shop-card{grid-template-columns:1fr;text-align:center;}
  .shop-badge{margin:0 auto;}
  .cform-wrap{grid-template-columns:1fr;}
  .cf-row{grid-template-columns:1fr;}
}
@media(max-width:560px){
  .course-grid,.event-grid,.team-grid,.dept-grid,.info-grid,.past-grid,.steps{grid-template-columns:1fr;}
}

/* ── đoạn giới thiệu chi tiết (dùng được mọi trang) ── */
.intro-lead{
  font-family:var(--f-sub);font-size:clamp(17px,2.2vw,27px);font-style:italic;
  color:var(--gold-cream);max-width:880px;margin:0 auto;line-height:1.74;
}
.intro-body{
  font-size:clamp(14px,1.5vw,16.5px);color:var(--ivory-dim);font-weight:300;
  max-width:760px;margin:26px auto 0;line-height:1.95;
}

/* ════════════════════════════════════════════════════════════
   TRANG CHI TIẾT SẢN PHẨM · san-pham.html
   ════════════════════════════════════════════════════════════ */
.pd-section{
  position:relative;width:100%;min-height:auto;
  padding:calc(var(--nav-h) + 40px) clamp(20px,5vw,84px) clamp(56px,9vh,100px);
  background:radial-gradient(ellipse 90% 70% at 50% 38%,#5A1622 0%,#3A1118 50%,#240A0E 100%);
  overflow:hidden;isolation:isolate;
}
.pd-crumbs{
  font-family:var(--f-ui);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(248,233,184,.55);margin-bottom:30px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.pd-crumbs a{color:rgba(248,233,184,.55);transition:color .3s;}
.pd-crumbs a:hover{color:var(--gold-bright);}
.pd-crumbs .sep{opacity:.4;}

#pdWrap{
  max-width:var(--w-max);margin:0 auto;position:relative;z-index:2;
}
.pd-top{
  display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(28px,4vw,64px);
  align-items:start;margin-bottom:clamp(48px,6vh,72px);
}
.pd-media-wrap{position:relative;}
.pd-media{
  aspect-ratio:1/1;border-radius:18px;overflow:hidden;background:#ffffff;
  border:1px solid rgba(201,168,76,0.32);
  box-shadow:0 22px 60px rgba(0,0,0,.5),0 0 60px rgba(240,208,112,.1);
}
.pd-badge{top:18px;left:18px;font-size:14px;padding:7px 14px;}

.pd-info{padding:clamp(8px,1.4vw,18px) clamp(8px,1vw,12px);}
.pd-brand{
  font-family:var(--f-ui);font-size:11px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--gold-bright);margin-bottom:14px;
}
.pd-name{
  font-family:var(--f-disp);font-weight:800;font-size:clamp(26px,3.6vw,46px);line-height:1.18;
  color:var(--ivory);margin-bottom:14px;letter-spacing:.005em;
}
.pd-tagline{
  font-family:var(--f-sub);font-style:italic;font-size:clamp(15px,1.7vw,19px);
  color:var(--gold-cream);line-height:1.6;margin-bottom:20px;
}
.pd-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px;}
.pd-tag{
  font-family:var(--f-ui);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  padding:6px 13px;border-radius:30px;color:var(--gold-cream);font-weight:600;
  border:1px solid rgba(201,168,76,.32);background:rgba(40,12,16,.4);
}
.pd-tag.hot{background:linear-gradient(135deg,#C24A2A,#8B1A2E);color:#FFF0CF;border:none;}
.pd-tag.flash{background:linear-gradient(135deg,#FFB347,#F0801F);color:#1E0807;border:none;}
.pd-price{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:28px;
  padding:18px 22px;border-radius:14px;
  background:linear-gradient(135deg,rgba(170,50,39,.18),rgba(40,12,16,.55));
  border:1px solid rgba(240,208,112,.22);}
.pd-price .now{
  font-family:var(--f-disp);font-weight:800;font-size:clamp(26px,3.2vw,40px);line-height:1;
  background:linear-gradient(120deg,var(--gold-cream),var(--gold-bright),var(--gold-warm));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.pd-price .was{
  font-family:var(--f-ui);font-size:clamp(13px,1.4vw,16px);color:rgba(248,233,184,.45);
  text-decoration:line-through;
}
.pd-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:24px;}
.pd-cta .btn-gold,.pd-cta .btn-ghost{padding:15px 28px;font-size:11.5px;letter-spacing:.18em;}
.pd-cta .pd-buy{flex:1;text-align:center;min-width:240px;}
.pd-bullets{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px;
  padding-top:22px;border-top:1px solid rgba(201,168,76,.16);}
.pd-bullets li{
  font-size:13.5px;color:var(--ivory-dim);line-height:1.65;font-weight:300;
  padding-left:22px;position:relative;
}
.pd-bullets li::before{content:'✦';position:absolute;left:0;top:0;color:var(--gold-bright);font-size:11px;}
.pd-bullets b{color:var(--gold-cream);font-weight:500;}
.pd-bullets a{color:var(--gold-bright);transition:color .3s;}
.pd-bullets a:hover{color:var(--gold-cream);}

/* placeholder khi không tìm thấy */
.pd-empty{
  max-width:680px;margin:60px auto 0;text-align:center;padding:50px clamp(20px,4vw,60px);
  border-radius:18px;background:linear-gradient(165deg,rgba(110,26,38,0.5),rgba(40,12,16,0.65));
  border:1px solid var(--glass-bd);
}
.pd-empty h2{font-family:var(--f-disp);font-weight:700;font-size:clamp(22px,2.6vw,32px);color:var(--ivory);margin-bottom:14px;}
.pd-empty p{font-family:var(--f-sub);font-style:italic;font-size:17px;color:var(--gold-cream);margin-bottom:30px;}
.pd-empty code{font-family:var(--f-ui);font-size:13px;color:var(--ivory);background:rgba(28,8,12,.7);padding:3px 9px;border-radius:6px;}
.pd-empty-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}

/* sản phẩm liên quan */
.pd-related-wrap{margin-top:clamp(54px,8vh,90px);}
.pd-related-title{
  font-family:var(--f-disp);font-weight:700;font-size:clamp(22px,2.8vw,34px);
  color:var(--ivory);margin-bottom:8px;text-align:center;
}
.pd-related-title em{font-style:italic;
  background:linear-gradient(120deg,var(--gold-cream),var(--gold-bright),var(--gold-warm));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.pd-related-sub{font-family:var(--f-sub);font-style:italic;font-size:15px;color:var(--gold-cream);text-align:center;margin-bottom:36px;}
#pdRelated{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:clamp(16px,2.2vw,26px);max-width:var(--w-max);margin:0 auto;
}

/* responsive */
@media(max-width:980px){
  .pd-top{grid-template-columns:1fr;}
  .pd-media{max-width:600px;margin:0 auto;}
  #pdRelated{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:560px){
  #pdRelated{grid-template-columns:1fr;}
  .pd-cta{flex-direction:column;}
  .pd-cta .pd-buy{min-width:auto;}
}

/* ────────────────────────────────────────────
   GALLERY: ảnh chính + thumbnail strip
   ──────────────────────────────────────────── */
.pd-media img{width:100%;height:100%;object-fit:contain;display:block;background:#fff;}
.pd-thumbs{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));
  gap:8px;margin-top:12px;
}
.pd-thumb{
  aspect-ratio:1/1;border-radius:10px;overflow:hidden;cursor:pointer;
  background:#fff;border:2px solid rgba(201,168,76,.22);
  padding:0;transition:border-color .25s,transform .25s,box-shadow .25s;
}
.pd-thumb img{width:100%;height:100%;object-fit:contain;display:block;}
.pd-thumb:hover{transform:translateY(-2px);border-color:rgba(240,208,112,.55);}
.pd-thumb.on{border-color:var(--gold-bright);box-shadow:0 4px 14px rgba(240,208,112,.3);}

.pd-tag.soft{background:rgba(60,18,24,.5);color:var(--ivory-dim);border:1px solid rgba(201,168,76,.18);}

/* ────────────────────────────────────────────
   PD BLOCK · Mô tả · Specs · Variants
   ──────────────────────────────────────────── */
.pd-block{
  margin-top:clamp(36px,5vh,56px);
  padding:clamp(22px,3vw,38px) clamp(20px,3.4vw,42px);
  border-radius:18px;
  background:linear-gradient(165deg,rgba(60,18,24,0.4),rgba(28,8,12,0.5));
  border:1px solid rgba(201,168,76,.18);
  box-shadow:0 14px 40px rgba(0,0,0,.3);
}
.pd-h2{
  font-family:var(--f-disp);font-weight:700;font-size:clamp(20px,2.4vw,28px);
  color:var(--ivory);margin-bottom:22px;letter-spacing:.005em;line-height:1.2;
  padding-bottom:14px;border-bottom:1px solid rgba(201,168,76,.18);
}
.pd-h2 em{font-style:italic;
  background:linear-gradient(120deg,var(--gold-cream),var(--gold-bright),var(--gold-warm));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}

/* ═══════════════════════════════════════════════════════════════
   MÔ TẢ SẢN PHẨM — CHUẨN HOÁ TYPOGRAPHY (MỘT QUY TẮC · MỌI MODEL)
   HTML mô tả nhập từ nhà SX rất lộn xộn: font Times/Arial lẫn lộn,
   cỡ chữ px/pt tuỳ tiện, màu inline, căn justify… Lớp dưới đây dùng
   !important để ÉP toàn bộ về hệ thống brand → mọi trang SP đọc
   nhất quán, cỡ chữ mượt, căn trái sạch. Áp tự động cho cả 783 mô tả
   hiện có lẫn mọi SP thêm sau này (không cần sửa từng SP).
   ═══════════════════════════════════════════════════════════════ */
.pd-desc-body{
  font-family:var(--f-store);
  font-size:clamp(15px,0.4vw + 14px,16.5px);
  line-height:1.78;color:var(--ivory-dim);font-weight:400;
  text-align:left;overflow-wrap:break-word;word-break:break-word;
}
/* 1 · ÉP mọi phần tử con về font đọc thống nhất (Mulish, fallback Be
       Vietnam Pro) + bỏ giãn chữ/nền lạ inline. Khớp hệ font "đọc kiểu
       Sweetwater" đã chốt 31/05 → p, li, td, span… cùng MỘT font. */
.pd-desc-body *{font-family:var(--f-store)!important;letter-spacing:normal!important;}
.pd-desc-body [style*="background"]{background:transparent!important;}
/* 2 · VĂN BẢN THƯỜNG: thừa hưởng cỡ + màu hệ thống, luôn căn trái
       (xoá font-size px/pt + color + text-align:justify inline) */
.pd-desc-body p,.pd-desc-body li,.pd-desc-body span,
.pd-desc-body div,.pd-desc-body td,.pd-desc-body font,.pd-desc-body label{
  font-size:inherit!important;line-height:1.78!important;
  color:inherit!important;text-align:left!important;
}
.pd-desc-body p{margin:0 0 15px;}
.pd-desc-body p:last-child{margin-bottom:0;}
/* 3 · TIÊU ĐỀ PHỤ trong mô tả — thang chữ nhỏ hơn tiêu đề mục,
       đồng nhất, đậm dễ đọc (ép cả cỡ inline của nhà SX) */
.pd-desc-body h1,.pd-desc-body h2,.pd-desc-body h3,
.pd-desc-body h4,.pd-desc-body h5,.pd-desc-body h6{
  font-weight:700;color:var(--gold-cream);text-align:left!important;
  line-height:1.34!important;margin:26px 0 12px;letter-spacing:.002em;
}
.pd-desc-body :is(h1,h2,h3,h4,h5,h6) *{font-size:inherit!important;color:inherit!important;}
.pd-desc-body h1,.pd-desc-body h2{font-size:clamp(18.5px,1.5vw,21px)!important;}
.pd-desc-body h3{font-size:clamp(16.5px,1.2vw,18px)!important;}
.pd-desc-body h4,.pd-desc-body h5,.pd-desc-body h6{font-size:15.5px!important;}
.pd-desc-body :is(h1,h2,h3,h4,h5,h6):first-child{margin-top:0;}
/* 4 · NHẤN MẠNH + LIÊN KẾT (giữ accent, ghi đè màu inline) */
.pd-desc-body strong,.pd-desc-body b{color:var(--gold-cream)!important;font-weight:600;}
.pd-desc-body em,.pd-desc-body i{color:var(--gold-bright)!important;font-style:italic;}
.pd-desc-body a{color:var(--gold-bright)!important;text-decoration:underline;text-decoration-color:rgba(240,208,112,.4);}
.pd-desc-body a:hover{color:var(--gold-cream)!important;}
/* 5 · DANH SÁCH */
.pd-desc-body ul,.pd-desc-body ol{margin:10px 0 18px;padding-left:24px;}
.pd-desc-body li{margin-bottom:7px;}
.pd-desc-body ul li::marker{color:var(--gold-bright);}
/* 6 · ẢNH + VIDEO + KHOÁ khoảng trống (ổn định mọi SP/bề rộng) */
.pd-desc-body img{max-width:100%;height:auto;border-radius:10px;margin:14px auto;display:block;}
.pd-desc-body iframe{max-width:100%;width:100%;aspect-ratio:16/9;height:auto;border-radius:10px;margin:14px 0;}
.pd-desc-body hr{border:none;border-top:1px solid rgba(201,168,76,.2);margin:22px 0;}
.pd-desc-body p:empty{display:none!important;margin:0!important;}
.pd-desc-body p > img:only-child{margin:2px auto;}
.pd-desc-body p:has(> img:only-child){margin:14px 0;}
/* 7 · BẢNG TRONG MÔ TẢ — ghi đè width/căn inline, đồng nhất */
.pd-desc-body table{
  width:100%!important;border-collapse:collapse;margin:16px 0;table-layout:auto;
  background:rgba(28,8,12,.4);border-radius:10px;overflow:hidden;
  border:1px solid rgba(201,168,76,.18);
}
.pd-desc-body table th,.pd-desc-body table td{
  padding:11px 14px;text-align:left!important;vertical-align:top;width:auto!important;
  border-bottom:1px solid rgba(201,168,76,.12);font-size:inherit!important;
}
.pd-desc-body table th{
  color:var(--gold-cream)!important;font-size:13px!important;
  font-weight:600;letter-spacing:.04em;background:rgba(110,26,38,.18)!important;
}
.pd-desc-body table tr:last-child th,.pd-desc-body table tr:last-child td{border-bottom:none;}
.pd-desc-body blockquote{
  margin:16px 0;padding:14px 18px;border-left:3px solid var(--gold-bright);
  background:rgba(28,8,12,.35)!important;border-radius:0 10px 10px 0;
  font-style:italic;color:var(--gold-cream)!important;
}

/* Bảng thông số kỹ thuật */
.pd-specs{overflow-x:auto;}
.pd-specs table{
  width:100%;border-collapse:collapse;font-size:14.5px;
  background:rgba(28,8,12,.35);border-radius:12px;overflow:hidden;
  border:1px solid rgba(201,168,76,.18);
}
.pd-specs th,.pd-specs td{
  padding:13px 18px;text-align:left;vertical-align:top;
  border-bottom:1px solid rgba(201,168,76,.12);
  line-height:1.55;
}
.pd-specs th{
  font-family:var(--f-ui);font-size:12px;font-weight:600;letter-spacing:.06em;
  color:var(--gold-cream);background:rgba(110,26,38,.18);
  width:38%;min-width:160px;
}
.pd-specs td{color:var(--ivory-dim);font-weight:300;}
.pd-specs tr:last-child th,.pd-specs tr:last-child td{border-bottom:none;}
.pd-specs tr:hover{background:rgba(240,208,112,.04);}

/* Biến thể */
.pd-vars{display:flex;flex-wrap:wrap;gap:10px;}
.pd-var{
  display:flex;align-items:center;gap:10px;padding:11px 18px;
  background:rgba(28,8,12,.5);border:1px solid rgba(201,168,76,.28);
  border-radius:30px;transition:border-color .25s,background .25s,transform .25s;
  cursor:default;
}
.pd-var:hover{border-color:rgba(240,208,112,.5);background:rgba(40,12,16,.65);}
.pd-var b{font-family:var(--f-ui);font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--gold-cream);}
.pd-var-p{font-family:var(--f-disp);font-weight:700;font-size:14px;color:var(--ivory);}
.pd-var-x{font-family:var(--f-ui);font-size:10.5px;letter-spacing:.08em;color:#E08070;
  padding:3px 9px;border-radius:20px;background:rgba(193,74,42,.18);}
.pd-var.unavail{opacity:.5;}
.pd-var.unavail .pd-var-p{text-decoration:line-through;}

@media(max-width:560px){
  .pd-specs th{width:auto;min-width:120px;font-size:11.5px;padding:10px 12px;}
  .pd-specs td{padding:10px 12px;font-size:13.5px;}
  .pd-block{padding:18px;}
  .pd-h2{font-size:18px;}
}

/* ════════════════════════════════════════════════════════════
   NAV CART ICON + BADGE
   ════════════════════════════════════════════════════════════ */
.nav-cart{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:50%;
  border:1px solid rgba(240,208,112,.42);color:var(--gold-cream);
  transition:border-color .3s,background .3s,transform .3s;
  flex-shrink:0;
}
.nav-cart:hover{border-color:var(--gold-bright);background:rgba(240,208,112,.1);transform:translateY(-2px);}
.nav-cart svg{width:19px;height:19px;}
.nav-cart-badge{
  position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;
  padding:0 5px;border-radius:18px;
  background:linear-gradient(135deg,#FFB347,#F0801F);color:#1E0807;
  font-family:var(--f-ui);font-size:10px;font-weight:700;letter-spacing:0;
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--red-deep);
  opacity:0;transform:scale(.6);transition:opacity .3s,transform .3s;
  pointer-events:none;
}
.nav-cart-badge.on{opacity:1;transform:scale(1);}

/* ════════════════════════════════════════════════════════════
   NÚT TÌM KIẾM TOÀN CỤC (nav) + OVERLAY Ô NHẬP · mọi trang
   ════════════════════════════════════════════════════════════ */
.nav-search-btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:50%;cursor:pointer;
  border:1px solid rgba(240,208,112,.42);color:var(--gold-cream);
  background:none;flex-shrink:0;transition:border-color .3s,background .3s,transform .3s;
}
.nav-search-btn:hover{border-color:var(--gold-bright);background:rgba(240,208,112,.1);transform:translateY(-2px);}
.nav-search-btn svg{width:19px;height:19px;}
body.pd-lite .nav-search-btn,body.sw-home .nav-search-btn,body.champ .nav-search-btn{
  color:#6E1A26;border-color:rgba(176,145,58,.5);background:rgba(255,255,255,.5);
}
body.pd-lite .nav-search-btn:hover,body.sw-home .nav-search-btn:hover,body.champ .nav-search-btn:hover{
  border-color:#A8163C;background:#fff;
}
/* overlay */
.nav-search-ov{position:fixed;inset:0;z-index:1200;display:none;}
.nav-search-ov.open{display:block;}
.nss-backdrop{position:absolute;inset:0;background:rgba(20,6,9,.6);backdrop-filter:blur(4px);animation:nssFade .25s ease;}
.nss-box{
  position:relative;z-index:2;margin:clamp(70px,12vh,140px) auto 0;
  max-width:680px;width:calc(100% - 36px);
  display:flex;align-items:center;gap:10px;
  background:#fff;border-radius:16px;padding:10px 12px 10px 16px;
  box-shadow:0 26px 70px rgba(0,0,0,.4);animation:nssPop .28s cubic-bezier(.2,.8,.2,1);
}
.nss-ic{display:flex;color:#A8163C;flex-shrink:0;}
.nss-ic svg{width:22px;height:22px;}
.nss-input{
  flex:1;min-width:0;border:none;outline:none;background:none;
  font-family:var(--f-store,'Mulish',sans-serif);font-size:clamp(16px,2.2vw,19px);
  color:#241410;padding:8px 4px;
}
.nss-input::placeholder{color:#9A8C7E;}
.nss-go{
  flex-shrink:0;border:none;cursor:pointer;border-radius:10px;
  padding:0 22px;height:44px;background:#A8163C;color:#FBF1D2;
  font-family:var(--f-ui);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
.nss-go:hover{background:#C73456;}
.nss-x{
  flex-shrink:0;border:none;background:none;cursor:pointer;
  font-size:30px;line-height:1;color:#9A8C7E;padding:0 6px;
}
.nss-x:hover{color:#A8163C;}
@keyframes nssFade{from{opacity:0}to{opacity:1}}
@keyframes nssPop{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@media(max-width:560px){.nss-go{padding:0 14px;}}

/* ════════════════════════════════════════════════════════════
   PRODUCT DETAIL · BUY ROW (qty + add to cart)
   ════════════════════════════════════════════════════════════ */
.pd-buyrow{display:flex;gap:14px;align-items:stretch;margin-bottom:18px;flex-wrap:wrap;}
.pd-qty{
  display:inline-flex;align-items:center;
  border:1px solid rgba(240,208,112,.32);border-radius:30px;background:rgba(28,8,12,.55);
  overflow:hidden;
}
.pd-qty-btn{
  width:42px;height:48px;background:transparent;border:none;cursor:pointer;
  color:var(--gold-bright);font-size:22px;line-height:1;transition:background .25s,color .25s;
}
.pd-qty-btn:hover{background:rgba(240,208,112,.12);color:var(--gold-cream);}
.pd-qty input{
  width:54px;height:48px;border:none;background:transparent;
  font-family:var(--f-disp);font-weight:700;font-size:18px;color:var(--ivory);
  text-align:center;outline:none;-moz-appearance:textfield;
}
.pd-qty input::-webkit-outer-spin-button,.pd-qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.pd-add{flex:1;min-width:200px;padding:15px 26px;font-size:11.5px;letter-spacing:.2em;}

.pd-contact{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:24px;}
.pd-contact-btn{
  display:flex;align-items:center;gap:12px;padding:13px 16px;border-radius:14px;
  background:linear-gradient(165deg,rgba(110,26,38,0.42),rgba(40,12,16,0.6));
  border:1px solid var(--glass-bd);color:var(--ivory);
  transition:transform .3s,border-color .3s,box-shadow .3s;
}
.pd-contact-btn:hover{transform:translateY(-3px);border-color:rgba(240,208,112,.5);
  box-shadow:0 10px 28px rgba(0,0,0,.4);}
.pd-contact-btn .ic{font-size:22px;line-height:1;flex-shrink:0;}
.pd-contact-btn b{display:block;font-family:var(--f-disp);font-weight:700;font-size:15px;color:var(--gold-cream);}
.pd-contact-btn em{display:block;font-family:var(--f-sub);font-style:italic;font-size:12px;color:var(--ivory-dim);margin-top:1px;}

/* ════════════════════════════════════════════════════════════
   TOAST notification
   ════════════════════════════════════════════════════════════ */
.vtm-toast{
  position:fixed;left:50%;bottom:30px;transform:translate(-50%,30px);
  padding:14px 22px;border-radius:14px;z-index:9999;
  background:linear-gradient(135deg,#3E1417,#240A0E);
  border:1px solid var(--gold-bright);color:var(--ivory);
  font-family:var(--f-ui);font-size:13.5px;letter-spacing:.02em;
  box-shadow:0 14px 36px rgba(0,0,0,.5),0 0 30px rgba(240,208,112,.25);
  opacity:0;transition:opacity .3s,transform .35s var(--ease);
  max-width:90vw;
}
.vtm-toast b{color:var(--gold-cream);}
.vtm-toast a{color:var(--gold-bright);text-decoration:underline;margin-left:6px;}
.vtm-toast.on{opacity:1;transform:translate(-50%,0);}
.vtm-toast.ok{border-color:#9BD06A;}

/* ════════════════════════════════════════════════════════════
   TRANG GIỎ HÀNG · gio-hang.html
   ════════════════════════════════════════════════════════════ */
.gh-head{margin-bottom:32px;text-align:left;position:relative;z-index:2;}
.gh-title{
  font-family:var(--f-disp);font-weight:900;font-size:clamp(32px,4.8vw,56px);
  color:var(--ivory);margin-bottom:8px;line-height:1.1;letter-spacing:.005em;
}
.gh-title em{font-style:italic;font-weight:800;
  background:linear-gradient(120deg,var(--gold-cream),var(--gold-bright),var(--gold-warm));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.gh-sub{font-family:var(--f-sub);font-style:italic;font-size:17px;color:var(--gold-cream);}

.gh-wrap{display:grid;grid-template-columns:minmax(0,1fr) clamp(360px,28vw,460px);gap:clamp(20px,3vw,40px);align-items:start;position:relative;z-index:2;}
.gh-list{display:flex;flex-direction:column;gap:14px;}
.gh-row{
  display:grid;grid-template-columns:96px 1fr auto auto auto auto;gap:18px;align-items:center;
  padding:18px;border-radius:14px;
  background:linear-gradient(165deg,rgba(110,26,38,0.42),rgba(40,12,16,0.6));
  border:1px solid var(--glass-bd);transition:border-color .3s;
}
.gh-row:hover{border-color:rgba(240,208,112,.4);}
.gh-thumb{display:block;width:96px;}
.gh-thumb .pmedia{aspect-ratio:1/1;border-radius:10px;margin:0;}
.gh-info{min-width:0;}
.gh-brand{font-family:var(--f-ui);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-bright);margin-bottom:4px;}
.gh-name{display:block;font-family:var(--f-disp);font-weight:700;font-size:15.5px;color:var(--ivory);line-height:1.3;margin-bottom:4px;}
.gh-name:hover{color:var(--gold-cream);}
.gh-cat{font-family:var(--f-ui);font-size:11px;color:var(--ivory-dim);letter-spacing:.04em;}
.gh-price{text-align:right;min-width:110px;}
.gh-now{font-family:var(--f-disp);font-weight:700;font-size:15px;
  background:linear-gradient(120deg,var(--gold-cream),var(--gold-bright));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.gh-price .was{display:block;font-size:11.5px;color:rgba(248,233,184,.4);text-decoration:line-through;margin-top:3px;}
.gh-qty{display:inline-flex;align-items:center;border:1px solid rgba(240,208,112,.3);border-radius:24px;overflow:hidden;background:rgba(28,8,12,.55);}
.gh-qty-btn{width:30px;height:38px;background:transparent;border:none;cursor:pointer;color:var(--gold-bright);font-size:17px;line-height:1;}
.gh-qty-btn:hover{background:rgba(240,208,112,.1);}
.gh-qty input{width:42px;height:38px;border:none;background:transparent;color:var(--ivory);text-align:center;font-family:var(--f-disp);font-weight:700;font-size:14px;outline:none;-moz-appearance:textfield;}
.gh-qty input::-webkit-outer-spin-button,.gh-qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.gh-sub{
  font-family:var(--f-disp);font-weight:800;font-size:16px;color:var(--gold-cream);min-width:120px;text-align:right;
}
.gh-x{
  width:32px;height:32px;border:none;background:transparent;cursor:pointer;
  font-size:26px;line-height:1;color:rgba(248,233,184,.4);transition:color .25s,transform .25s;
}
.gh-x:hover{color:#FF6B6B;transform:scale(1.1);}

.gh-side{display:flex;flex-direction:column;gap:16px;position:sticky;top:calc(var(--nav-h) + 20px);}
.gh-summary{
  padding:24px 28px;border-radius:16px;
  background:linear-gradient(165deg,rgba(170,50,39,.32),rgba(40,12,16,.7));
  border:1px solid rgba(240,208,112,.32);
}
.gh-sum-row{display:flex;justify-content:space-between;font-size:14px;color:var(--ivory-dim);margin-bottom:10px;}
.gh-sum-row b{color:var(--gold-cream);font-weight:500;}
.gh-sum-total{display:flex;justify-content:space-between;align-items:baseline;
  padding-top:14px;border-top:1px solid rgba(201,168,76,.2);margin-top:6px;}
.gh-sum-total span{font-family:var(--f-ui);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-bright);}
.gh-sum-total b{font-family:var(--f-disp);font-weight:800;font-size:24px;
  background:linear-gradient(120deg,var(--gold-cream),var(--gold-bright),var(--gold-warm));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.gh-sum-note{font-family:var(--f-sub);font-style:italic;font-size:12.5px;color:var(--ivory-dim);margin-top:14px;line-height:1.6;}

.gh-form{padding:24px 28px;}
.gh-form .cform-h{font-size:18px;}
.gh-form .cform-sub{font-size:13.5px;margin-bottom:18px;}
.gh-form-alt{text-align:center;margin-top:14px;font-size:12px;color:var(--ivory-dim);}
.gh-form-alt a{color:var(--gold-bright);font-weight:600;margin:0 4px;}
.gh-form-alt a:hover{color:var(--gold-cream);}

/* trạng thái rỗng */
.gh-empty{
  max-width:520px;margin:40px auto;text-align:center;padding:60px clamp(20px,4vw,60px);
  border-radius:18px;background:linear-gradient(165deg,rgba(110,26,38,0.45),rgba(40,12,16,0.65));
  border:1px solid var(--glass-bd);position:relative;z-index:2;
}
.gh-empty-ico{font-family:var(--f-disp);font-size:80px;color:rgba(240,208,112,.4);margin-bottom:14px;}
.gh-empty h2{font-family:var(--f-disp);font-weight:700;font-size:clamp(22px,2.4vw,30px);color:var(--ivory);margin-bottom:12px;}
.gh-empty p{font-family:var(--f-sub);font-style:italic;font-size:16px;color:var(--gold-cream);margin-bottom:30px;}

/* trạng thái đã gửi đơn */
.gh-done{
  max-width:680px;margin:40px auto;text-align:center;padding:54px clamp(22px,4vw,60px);
  border-radius:20px;background:linear-gradient(165deg,rgba(110,26,38,0.5),rgba(40,12,16,0.7));
  border:1px solid rgba(240,208,112,.4);position:relative;z-index:2;
  box-shadow:0 28px 70px rgba(0,0,0,.45),0 0 50px rgba(240,208,112,.12);
}
.gh-done-ico{
  width:78px;height:78px;border-radius:50%;margin:0 auto 22px;
  background:linear-gradient(135deg,#9BD06A,#5FA838);color:#1E0807;
  display:flex;align-items:center;justify-content:center;font-size:42px;font-weight:800;
  box-shadow:0 10px 28px rgba(155,208,106,.32);
}
.gh-done h2{font-family:var(--f-disp);font-weight:800;font-size:clamp(24px,3vw,34px);color:var(--ivory);margin-bottom:14px;}
.gh-done > p{font-family:var(--f-sub);font-style:italic;font-size:17px;color:var(--gold-cream);margin-bottom:26px;}
.gh-done > p b{color:var(--ivory);font-weight:600;}
.gh-done-card{padding:22px;border-radius:14px;
  background:rgba(28,8,12,.4);border:1px solid rgba(201,168,76,.2);
  text-align:left;margin-bottom:22px;}
.gh-done-card h4{font-family:var(--f-disp);font-weight:700;font-size:15px;color:var(--gold-bright);margin-bottom:10px;}
.gh-done-card p{font-size:13.5px;color:var(--ivory-dim);line-height:1.85;}
.gh-done-card b{color:var(--gold-cream);}
.gh-done-note{font-size:12.5px;color:rgba(248,233,184,.45);font-style:italic;margin-bottom:24px;}
.gh-done-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}

/* responsive */
@media(max-width:980px){
  .gh-wrap{grid-template-columns:1fr;}
  .gh-side{position:static;}
}
@media(max-width:720px){
  .gh-row{grid-template-columns:78px 1fr;gap:14px;}
  .gh-thumb{width:78px;}
  .gh-price,.gh-qty,.gh-sub,.gh-x{grid-column:2;}
  .gh-price{text-align:left;}
  .gh-sub{text-align:left;}
}

/* ════════════════════════════════════════════════════════════
   TRANG KHÁM PHÁ · kham-pha.html (gộp 4 trang con)
   ════════════════════════════════════════════════════════════ */
/* Master hero — 4 quick anchors */
.kp-master-hero{min-height:clamp(620px,90vh,920px);}
.kp-hero-nav{
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.4vw,18px);
  margin-top:clamp(36px,5.5vh,56px);width:100%;max-width:1100px;position:relative;z-index:2;
  opacity:0;animation:hUp 1.1s ease forwards 1.05s;
}
.kp-jump{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:18px 14px;border-radius:14px;
  background:linear-gradient(165deg,rgba(110,26,38,0.5),rgba(40,12,16,0.62));
  border:1px solid var(--glass-bd);
  color:var(--ivory);transition:transform .4s var(--ease),border-color .4s,box-shadow .4s;
}
.kp-jump:hover{transform:translateY(-6px);border-color:rgba(240,208,112,.55);
  box-shadow:0 16px 40px rgba(0,0,0,.42),0 0 40px rgba(240,208,112,.18);}
.kp-jump-i{
  font-family:var(--f-disp);font-weight:800;font-size:24px;line-height:1;
  background:linear-gradient(120deg,var(--gold-cream),var(--gold-bright),var(--gold-warm));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.kp-jump-l{
  font-family:var(--f-ui);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-cream);text-align:center;line-height:1.3;font-weight:600;
}

/* Anchor target (scroll vào sau navbar) */
.kp-anchor{position:relative;top:calc(var(--nav-h) * -0.55);}

/* Block label — header phân tách giữa 4 block */
.kp-block-label{
  position:relative;text-align:center;padding:clamp(60px,9vh,110px) 20px 20px;
  background:radial-gradient(ellipse 80% 60% at 50% 50%,rgba(110,26,38,.4),transparent 70%);
}
.kp-block-label::before,.kp-block-label::after{
  content:'';display:block;width:clamp(60px,12vw,160px);height:1px;margin:0 auto 22px;
  background:linear-gradient(90deg,transparent,var(--gold-bright),transparent);
}
.kp-block-label::after{margin:22px auto 0;}
.kp-block-eye{
  font-family:var(--f-ui);font-size:clamp(11px,1.3vw,14px);letter-spacing:.5em;
  text-transform:uppercase;color:var(--gold-bright);margin-bottom:14px;
}
.kp-block-name{
  font-family:var(--f-disp);font-weight:800;font-style:italic;
  font-size:clamp(28px,4.4vw,54px);line-height:1.16;
  background:linear-gradient(120deg,var(--gold-cream),var(--gold-bright),var(--gold-warm));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}

/* Block hero — nhỏ hơn page-hero gốc khi nằm trong kham-pha */
.kp-block-hero{
  min-height:clamp(440px,62vh,640px);
  padding:clamp(30px,5vh,60px) clamp(20px,5vw,84px) clamp(40px,7vh,80px);
}
.kp-block-hero .page-hero-ghost{font-size:clamp(130px,24vw,330px);}
.kp-block-hero .ph-title{font-size:clamp(32px,5.6vw,82px);}

/* responsive */
@media(max-width:760px){
  .kp-hero-nav{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:480px){
  .kp-hero-nav{grid-template-columns:1fr;}
}

/* ════════════════════════════════════════════════════════════
   PRODUCT DETAIL v2 · Sweetwater/MF layout (Set B color system)
   ════════════════════════════════════════════════════════════ */
.pd-layout{
  display:grid;grid-template-columns:minmax(0,1fr) clamp(340px,30vw,430px);
  gap:clamp(26px,3.4vw,52px);align-items:start;margin-bottom:clamp(36px,5vh,60px);
}
.pd-main-col{min-width:0;}
.pd-gallery-col{position:relative;margin-bottom:clamp(22px,3vh,40px);}
/* gallery ở đầu cột trái — cap để ảnh không quá to */
.pd-gallery-col .pd-media{max-width:660px;margin:0;}
/* nội dung chảy ở cột trái cạnh buy box sticky; prose giới hạn dễ đọc */
.pd-sections{max-width:none;margin:0;}
.pd-desc-body{max-width:var(--w-read);}

/* ── buy box (sticky) ── */
.pd-buybox{
  position:sticky;top:calc(var(--nav-h) - 28px);
  padding:clamp(20px,2.4vw,30px);border-radius:18px;
  background:linear-gradient(168deg,rgba(60,18,24,.62),rgba(26,6,8,.72));
  border:1px solid rgba(229,199,107,.22);
  box-shadow:0 24px 60px rgba(0,0,0,.46);
}
.pd-buybox .pd-brand{margin-bottom:10px;color:var(--champagne);}
.pd-buybox .pd-name{font-size:clamp(23px,2.6vw,34px);margin-bottom:12px;}

.pd-rating{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap;}
.pd-rating .stars{color:var(--champagne-deep);letter-spacing:2px;font-size:15px;opacity:.55;}
.pd-rating .rr-link{font-family:var(--f-ui);font-size:12px;color:var(--ivory-dim);
  text-decoration:underline;text-decoration-color:rgba(229,199,107,.3);transition:color .3s;}
.pd-rating .rr-link:hover{color:var(--champagne);}

.pd-tag.sale{background:var(--cherry-sale);color:#fff;border:none;font-weight:600;}
.pd-price .off{font-family:var(--f-ui);font-size:12px;font-weight:600;color:#fff;
  background:var(--cherry-sale);padding:3px 9px;border-radius:20px;letter-spacing:.04em;}
.pd-buybox .pd-price{
  background:linear-gradient(135deg,rgba(168,22,60,.16),rgba(26,6,8,.5));
  border:1px solid rgba(229,199,107,.2);margin-bottom:14px;
}
.pd-buybox .pd-price .now{
  background:linear-gradient(120deg,var(--champagne-pale),var(--champagne),var(--champagne-deep));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.pd-finance{
  font-family:var(--f-ui);font-size:12.5px;color:var(--ivory-dim);margin-bottom:18px;
  padding:9px 14px;border-radius:10px;background:rgba(15,76,117,.16);
  border:1px solid rgba(46,110,155,.3);line-height:1.5;
}
.pd-finance i{font-style:normal;font-weight:700;color:var(--education-pale);margin-right:4px;}
.pd-finance b{color:var(--champagne);font-weight:600;}
.pd-finance span{opacity:.7;}

.pd-buybox-vars{margin-bottom:18px;}
.pd-mini-label{display:block;font-family:var(--f-ui);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ivory-dim);margin-bottom:9px;}

/* qty + wishlist row */
.pd-buybox .pd-buyrow{display:flex;gap:12px;align-items:center;margin-bottom:12px;}
.pd-wish{
  width:48px;height:48px;flex-shrink:0;border-radius:12px;cursor:pointer;
  background:rgba(40,12,16,.5);border:1px solid rgba(229,199,107,.3);
  color:var(--champagne);font-size:21px;line-height:1;transition:all .25s;
}
.pd-wish:hover{border-color:var(--cherry-light);color:var(--cherry-light);}
.pd-wish.on{background:var(--cherry);border-color:var(--cherry);color:#fff;}
.pd-cta2{display:flex;flex-direction:column;gap:10px;margin-bottom:20px;}
.pd-cta2 .pd-add{width:100%;padding:15px;font-size:11.5px;letter-spacing:.2em;}
.pd-cta2 .pd-buynow{
  width:100%;padding:13px;font-size:11px;letter-spacing:.2em;
  border:1px solid var(--cherry);color:var(--cherry-light);background:transparent;
}
.pd-cta2 .pd-buynow:hover{background:var(--cherry);color:#fff;border-color:var(--cherry);}

/* stock card */
.pd-stock{
  margin-bottom:18px;padding:14px 16px;border-radius:12px;
  background:rgba(26,6,8,.42);border:1px solid rgba(229,199,107,.16);
}
.pd-stock-h{font-family:var(--f-ui);font-size:12px;font-weight:600;letter-spacing:.04em;
  color:var(--champagne);margin-bottom:10px;}
.pd-stock-h i{font-style:normal;margin-right:5px;}
.pd-stock-row{display:flex;align-items:center;gap:10px;padding:6px 0;
  border-top:1px solid rgba(229,199,107,.08);font-family:var(--f-ui);font-size:12.5px;}
.pd-stock-row .dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;
  background:var(--warn);box-shadow:0 0 8px rgba(229,169,60,.5);}
.pd-stock-city{color:var(--ivory);font-weight:500;flex:1;}
.pd-stock-note{color:var(--ivory-dim);font-size:11.5px;}
.pd-stock-cta{display:block;margin-top:11px;text-align:center;font-family:var(--f-ui);
  font-size:11.5px;font-weight:600;letter-spacing:.08em;color:var(--education-pale);
  padding:9px;border-radius:9px;border:1px solid rgba(46,110,155,.4);
  background:rgba(15,76,117,.16);transition:all .25s;}
.pd-stock-cta:hover{background:rgba(15,76,117,.32);color:#fff;}

/* trust row */
.pd-trust{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap;}
.pd-trust-i{flex:1;min-width:90px;display:flex;flex-direction:column;align-items:center;
  gap:4px;text-align:center;padding:10px 6px;border-radius:10px;
  background:rgba(15,76,117,.1);border:1px solid rgba(46,110,155,.22);}
.pd-trust-i .ic{font-size:18px;}
.pd-trust-i span:last-child{font-family:var(--f-ui);font-size:10.5px;color:var(--ivory-dim);line-height:1.3;}

/* advisor card */
.pd-advisor{display:flex;gap:13px;align-items:flex-start;padding:14px;border-radius:12px;
  background:linear-gradient(135deg,rgba(168,22,60,.14),rgba(26,6,8,.4));
  border:1px solid rgba(229,199,107,.18);}
.pd-advisor-av{width:46px;height:46px;flex-shrink:0;border-radius:50%;display:flex;
  align-items:center;justify-content:center;font-size:22px;
  background:linear-gradient(135deg,var(--champagne-deep),var(--cherry));}
.pd-advisor-body{flex:1;}
.pd-advisor-body b{display:block;font-family:var(--f-disp);font-weight:700;font-size:15px;color:var(--champagne-pale);}
.pd-advisor-body em{display:block;font-family:var(--f-sub);font-style:italic;font-size:12.5px;
  color:var(--ivory-dim);line-height:1.5;margin:3px 0 10px;}
.pd-advisor-btns{display:flex;gap:8px;flex-wrap:wrap;}
.pd-advisor-btns a{font-family:var(--f-ui);font-size:11px;font-weight:600;letter-spacing:.04em;
  padding:8px 14px;border-radius:8px;transition:all .25s;}
.adv-call{background:var(--champagne);color:var(--bg-deepest);}
.adv-call:hover{background:var(--champagne-pale);}
.adv-zalo{background:transparent;border:1px solid var(--education-pale);color:var(--education-pale);}
.adv-zalo:hover{background:var(--education);color:#fff;border-color:var(--education);}

/* luxury tier buy box */
.pd-lux-note{font-family:var(--f-sub);font-style:italic;font-size:15px;color:var(--champagne-pale);
  line-height:1.6;margin-bottom:16px;}
.pd-lux-btns{display:flex;flex-direction:column;gap:10px;margin-bottom:20px;}
.pd-lux-btns .pd-buy{width:100%;text-align:center;padding:16px;font-size:11.5px;letter-spacing:.16em;}
.pd-lux-btns .pd-buy2{width:100%;text-align:center;padding:13px;font-size:11px;letter-spacing:.14em;}

/* zoom button + lightbox */
.pd-zoom{position:absolute;bottom:14px;right:14px;width:40px;height:40px;border-radius:10px;
  background:rgba(26,6,8,.62);border:1px solid rgba(229,199,107,.4);color:var(--champagne);
  font-size:17px;cursor:pointer;backdrop-filter:blur(6px);transition:all .25s;z-index:3;}
.pd-zoom:hover{background:var(--cherry);color:#fff;border-color:var(--cherry);}
.pd-media img{cursor:zoom-in;}
.pd-lightbox{position:fixed;inset:0;z-index:11000;display:flex;align-items:center;justify-content:center;
  background:rgba(10,3,4,.92);opacity:0;transition:opacity .3s;padding:30px;cursor:zoom-out;}
.pd-lightbox.on{opacity:1;}
.pd-lightbox img{max-width:94vw;max-height:90vh;object-fit:contain;border-radius:12px;background:#fff;
  box-shadow:0 30px 90px rgba(0,0,0,.7);}
.pd-lb-x{position:absolute;top:22px;right:26px;width:44px;height:44px;border-radius:50%;
  background:rgba(60,18,24,.7);border:1px solid rgba(229,199,107,.4);color:var(--champagne);
  font-size:26px;line-height:1;cursor:pointer;}

/* anchor nav (sticky scroll-spy) */
.pd-anchornav{position:sticky;top:clamp(82px,9vw,118px);z-index:60;margin:0 0 16px;
  background:#1A0608;border-radius:12px;
  border:1px solid rgba(229,199,107,.16);overflow:hidden;
  box-shadow:0 14px 30px rgba(0,0,0,.40);}
.pd-anchornav-in{display:flex;gap:4px;overflow-x:auto;padding:6px;scrollbar-width:none;}
.pd-anchornav-in::-webkit-scrollbar{display:none;}
.pd-anchornav a{flex-shrink:0;font-family:var(--f-ui);font-size:12px;font-weight:500;letter-spacing:.06em;
  padding:9px 16px;border-radius:8px;color:var(--ivory-dim);white-space:nowrap;transition:all .25s;}
.pd-anchornav a:hover{color:var(--champagne);background:rgba(229,199,107,.08);}
.pd-anchornav a.on{color:var(--bg-deepest);background:var(--champagne);font-weight:600;}

/* highlights */
.pd-lead{font-family:var(--f-sub);font-style:italic;font-size:clamp(16px,1.8vw,20px);
  color:var(--champagne-pale);line-height:1.6;margin-bottom:18px;}
.pd-highlights{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.pd-highlights li{display:flex;flex-direction:column;gap:2px;padding:12px 15px;border-radius:11px;
  background:rgba(40,12,16,.4);border:1px solid rgba(229,199,107,.14);}
.pd-highlights .hl-k{font-family:var(--f-ui);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--champagne-deep);}
.pd-highlights .hl-v{font-family:var(--f-body);font-size:14px;color:var(--ivory);font-weight:500;}

/* video */
.pd-video{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;
  border:1px solid rgba(229,199,107,.22);background:#000;}
.pd-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}

/* warranty grid */
.pd-warranty{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;}
.pd-wcard{padding:16px;border-radius:12px;background:rgba(15,76,117,.1);
  border:1px solid rgba(46,110,155,.22);}
.pd-wcard .ic{font-size:24px;display:block;margin-bottom:8px;}
.pd-wcard b{display:block;font-family:var(--f-disp);font-weight:700;font-size:15px;color:var(--champagne-pale);margin-bottom:4px;}
.pd-wcard em{font-family:var(--f-body);font-style:normal;font-size:12.5px;color:var(--ivory-dim);line-height:1.5;}
.pd-wcard a{color:var(--education-pale);}
.pd-wcard a:hover{color:var(--champagne);}

/* "coming soon / contact" honest placeholders */
.pd-soon{display:flex;gap:16px;align-items:center;padding:22px;border-radius:13px;
  background:rgba(40,12,16,.34);border:1px dashed rgba(229,199,107,.26);}
.pd-soon .ic{font-size:30px;color:var(--champagne-deep);flex-shrink:0;}
.pd-soon p{font-family:var(--f-body);font-size:14px;color:var(--ivory-dim);line-height:1.6;margin:0;}
.pd-soon a{color:var(--champagne);text-decoration:underline;text-decoration-color:rgba(229,199,107,.4);}
.pd-soon a:hover{color:var(--champagne-pale);}

/* recently viewed grid (reuse related styling) */
#pdRecent{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:clamp(16px,2.2vw,26px);max-width:var(--w-max);margin:0 auto;}

/* mobile sticky bottom bar */
.pd-mobilebar{position:fixed;left:0;right:0;bottom:0;z-index:800;display:none;
  align-items:center;justify-content:space-between;gap:12px;
  padding:11px 16px;padding-bottom:calc(11px + env(safe-area-inset-bottom));
  background:rgba(26,6,8,.96);backdrop-filter:blur(16px);
  border-top:1px solid rgba(229,199,107,.22);transform:translateY(110%);transition:transform .3s var(--ease);}
.pd-mobilebar.on{transform:none;}
.pd-mb-price{font-family:var(--f-disp);font-weight:800;font-size:18px;
  background:linear-gradient(120deg,var(--champagne-pale),var(--champagne));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.pd-mb-btns{display:flex;gap:8px;}
.pd-mb-btns .btn-gold,.pd-mb-btns .btn-ghost{padding:11px 18px;font-size:11px;letter-spacing:.1em;}
.pd-mb-btns .btn-ghost{border:1px solid var(--cherry);color:var(--cherry-light);}

/* ── responsive ── */
@media(max-width:980px){
  .pd-layout{display:flex;flex-direction:column;}
  .pd-main-col{display:contents;}
  .pd-gallery-col{order:1;margin-bottom:16px;}
  .pd-gallery-col .pd-media{max-width:600px;margin:0 auto;}
  .pd-buybox{order:2;position:static;}
  .pd-box-suggest{display:none!important;}    /* mobile 1 cột — không cần lấp trong box */
  .pd-anchornav{order:3;display:none;}
  .pd-sections{order:4;}
  #pdRecent{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:640px){
  .pd-mobilebar{display:flex;}
}
@media(max-width:560px){
  #pdRecent{grid-template-columns:1fr;}
  .pd-highlights{grid-template-columns:1fr;}
  .pd-trust{flex-direction:row;}
}

/* ════════════════════════════════════════════════════════════
   LIGHT "WARM PAPER" THEME — scoped to body.pd-lite
   (chỉ trang sản phẩm; #cta + footer giữ nền tối)
   Nguyên tắc: chữ = mực đậm · vàng = accent đậm · giá/CTA = cherry
   ════════════════════════════════════════════════════════════ */
body.pd-lite .pd-section{
  background:radial-gradient(ellipse 120% 80% at 50% 0%,#FFFDF8 0%,var(--bg-paper) 46%,#F3EADB 100%);
  color:var(--ink);
}
body.pd-lite .pd-crumbs,
body.pd-lite .pd-crumbs a{color:var(--ink-mute);}
body.pd-lite .pd-crumbs a:hover{color:var(--cherry);}

/* buy box → white card */
body.pd-lite .pd-buybox{
  background:var(--bg-paper-3);border:1px solid var(--line-warm);
  box-shadow:0 18px 44px rgba(60,40,12,.1);
}
body.pd-lite .pd-brand{color:var(--gold-ink);}
body.pd-lite .pd-name{color:var(--ink);}
body.pd-lite .pd-rating .stars{color:var(--gold-line);opacity:.8;}
body.pd-lite .pd-rating .rr-link{color:var(--ink-mute);}
body.pd-lite .pd-rating .rr-link:hover{color:var(--cherry);}

/* tags */
body.pd-lite .pd-tag{background:var(--bg-paper-2);border:1px solid var(--line-warm);color:var(--ink-soft);}
body.pd-lite .pd-tag.sale{background:var(--cherry-sale);color:#fff;border:none;}
body.pd-lite .pd-tag.flash{background:linear-gradient(135deg,#F0801F,#C2710F);color:#fff;border:none;}

/* price → cherry, no gold gradient text on light */
body.pd-lite .pd-price{background:#FBF1F2;border:1px solid #EAD0D6;}
body.pd-lite .pd-price .now{
  background:none;-webkit-text-fill-color:initial;color:var(--cherry);
}
body.pd-lite .pd-price .was{color:var(--ink-mute);}

/* finance */
body.pd-lite .pd-finance{background:#EEF3F8;border:1px solid #CFE0EC;color:var(--ink-soft);}
body.pd-lite .pd-finance i{color:var(--education);}
body.pd-lite .pd-finance b{color:var(--cherry);}

body.pd-lite .pd-mini-label{color:var(--ink-mute);}
body.pd-lite .pd-var{background:var(--bg-paper-2);border:1px solid var(--line-warm);}
body.pd-lite .pd-var b{color:var(--gold-ink);}
body.pd-lite .pd-var-p{color:var(--ink);}
body.pd-lite .pd-var:hover{border-color:var(--gold-line);background:#fff;}

/* qty + wishlist */
body.pd-lite .pd-qty{background:var(--bg-paper-2);border-color:var(--line-warm);}
body.pd-lite .pd-qty-btn{color:var(--ink-soft);}
body.pd-lite .pd-qty-btn:hover{background:rgba(176,145,58,.14);color:var(--gold-ink);}
body.pd-lite .pd-qty input{color:var(--ink);}
body.pd-lite .pd-wish{background:var(--bg-paper-2);border-color:var(--line-warm);color:var(--cherry);}
body.pd-lite .pd-wish:hover{border-color:var(--cherry);}
body.pd-lite .pd-wish.on{background:var(--cherry);border-color:var(--cherry);color:#fff;}

/* stock card */
body.pd-lite .pd-stock{background:var(--bg-paper-2);border:1px solid var(--line-warm);}
body.pd-lite .pd-stock-h{color:var(--gold-ink);}
body.pd-lite .pd-stock-row{border-top-color:var(--line-warm);}
body.pd-lite .pd-stock-city{color:var(--ink);}
body.pd-lite .pd-stock-note{color:var(--ink-mute);}
body.pd-lite .pd-stock-cta{background:#EEF3F8;border-color:#CFE0EC;color:var(--education);}
body.pd-lite .pd-stock-cta:hover{background:var(--education);color:#fff;}

/* trust */
body.pd-lite .pd-trust-i{background:#EEF3F8;border:1px solid #CFE0EC;}
body.pd-lite .pd-trust-i span:last-child{color:var(--ink-soft);}

/* advisor */
body.pd-lite .pd-advisor{background:#FBF1F2;border:1px solid #EAD0D6;}
body.pd-lite .pd-advisor-body b{color:var(--cherry-deep);}
body.pd-lite .pd-advisor-body em{color:var(--ink-soft);}
body.pd-lite .adv-call{background:var(--cherry);color:#fff;}
body.pd-lite .adv-call:hover{background:var(--cherry-light);}
body.pd-lite .adv-zalo{border-color:var(--education);color:var(--education);}
body.pd-lite .adv-zalo:hover{background:var(--education);color:#fff;}

/* luxury note */
body.pd-lite .pd-lux-note{color:var(--ink-soft);}

/* anchor nav */
body.pd-lite .pd-anchornav{background:#FFFDF8;border:1px solid var(--line-warm);box-shadow:0 14px 30px rgba(60,20,16,.18);}
body.pd-lite .pd-anchornav a{color:var(--ink-soft);}
body.pd-lite .pd-anchornav a:hover{color:var(--cherry);background:rgba(176,145,58,.12);}
body.pd-lite .pd-anchornav a.on{background:var(--cherry);color:#fff;}

/* content blocks */
body.pd-lite .pd-block{
  background:var(--bg-paper-3);border:1px solid var(--line-warm);
  box-shadow:0 10px 30px rgba(60,40,12,.06);
}
body.pd-lite .pd-h2{color:var(--ink);}
body.pd-lite .pd-h2 em{background:none;-webkit-text-fill-color:initial;color:var(--cherry);}
body.pd-lite .pd-lead{color:var(--ink-soft);}

/* highlights */
body.pd-lite .pd-highlights li{background:var(--bg-paper-2);border:1px solid var(--line-warm);}
body.pd-lite .pd-highlights .hl-k{color:var(--gold-ink);}
body.pd-lite .pd-highlights .hl-v{color:var(--ink);}

/* description — nền sáng: !important để thắng accent đậm của lớp chuẩn hoá */
body.pd-lite .pd-desc-body{color:var(--ink);}
body.pd-lite .pd-desc-body strong,body.pd-lite .pd-desc-body b{color:var(--ink)!important;}
body.pd-lite .pd-desc-body em,body.pd-lite .pd-desc-body i{color:var(--cherry)!important;}
body.pd-lite .pd-desc-body a{color:var(--education)!important;text-decoration-color:rgba(15,76,117,.4);}
body.pd-lite .pd-desc-body a:hover{color:var(--cherry)!important;}
body.pd-lite .pd-desc-body :is(h1,h2,h3,h4,h5,h6){color:var(--ink)!important;}
body.pd-lite .pd-desc-body ul li::marker{color:var(--gold-ink);}
body.pd-lite .pd-desc-body table th{background:var(--bg-paper-2)!important;color:var(--gold-ink)!important;}
body.pd-lite .pd-desc-body table td{color:var(--ink-soft)!important;}
body.pd-lite .pd-desc-body table th,body.pd-lite .pd-desc-body table td{border-color:var(--line-warm)!important;}
body.pd-lite .pd-desc-body blockquote{color:var(--ink-soft)!important;background:#FBF6EC!important;border-left-color:var(--gold-ink);}
body.pd-lite .pd-desc-body hr{border-top-color:var(--line-warm);}

/* specs */
body.pd-lite .pd-specs th{color:var(--ink);}
body.pd-lite .pd-specs td{color:var(--ink-soft);}
body.pd-lite .pd-specs th,body.pd-lite .pd-specs td{border-color:var(--line-warm);}
body.pd-lite .pd-specs tr:hover{background:rgba(176,145,58,.06);}

/* warranty */
body.pd-lite .pd-wcard{background:#EEF3F8;border:1px solid #CFE0EC;}
body.pd-lite .pd-wcard b{color:var(--cherry-deep);}
body.pd-lite .pd-wcard em{color:var(--ink-soft);}
body.pd-lite .pd-wcard a{color:var(--education);}
body.pd-lite .pd-wcard a:hover{color:var(--cherry);}

/* "soon" placeholders */
body.pd-lite .pd-soon{background:var(--bg-paper-2);border:1px dashed var(--line-warm-2);}
body.pd-lite .pd-soon .ic{color:var(--gold-line);}
body.pd-lite .pd-soon p{color:var(--ink-soft);}
body.pd-lite .pd-soon a{color:var(--education);}
body.pd-lite .pd-soon a:hover{color:var(--cherry);}

/* gallery + thumbs on light */
body.pd-lite .pd-media{border-color:var(--line-warm);box-shadow:0 18px 44px rgba(60,40,12,.12);}
body.pd-lite .pd-thumb{border-color:var(--line-warm);}
body.pd-lite .pd-thumb.on{border-color:var(--gold-line);box-shadow:0 4px 12px rgba(176,145,58,.3);}

/* related / recent titles */
body.pd-lite .pd-related-title{color:var(--ink);}
body.pd-lite .pd-related-title em{background:none;-webkit-text-fill-color:initial;color:var(--cherry);}
body.pd-lite .pd-related-sub{color:var(--ink-soft);}

/* product cards (related/recent) on light */
body.pd-lite .pcard{background:var(--bg-paper-3);border:1px solid var(--line-warm);}
body.pd-lite .pcard .pbrand{color:var(--gold-ink);}
body.pd-lite .pcard .pname{color:var(--ink);}
body.pd-lite .pcard .pprice .now{background:none;-webkit-text-fill-color:initial;color:var(--cherry);}
body.pd-lite .pcard .pprice .was{color:var(--ink-mute);}
body.pd-lite .pcard .psold{color:var(--ink-mute);}
body.pd-lite .pcard .pgo{color:var(--gold-ink);}

/* empty state */
body.pd-lite .pd-empty{background:var(--bg-paper-3);border:1px solid var(--line-warm);}
body.pd-lite .pd-empty h2{color:var(--ink);}
body.pd-lite .pd-empty p{color:var(--ink-soft);}
body.pd-lite .pd-empty code{background:var(--bg-paper-2);color:var(--cherry);}

/* mobile sticky bar on light */
body.pd-lite .pd-mobilebar{background:rgba(255,253,248,.97);border-top:1px solid var(--line-warm);}
body.pd-lite .pd-mb-price{background:none;-webkit-text-fill-color:initial;color:var(--cherry);}

/* NOTE: global body.pd-lite token-remap + structural overrides
   live in vtm-core.css (loaded by every page). Only .pd-* product
   detail light rules stay here. */

/* ════════════════════════════════════════════════════════════
   SHOP / CỬA HÀNG v2 — toolbar + sidebar filter + grid + compare
   (DARK cinematic · full-width tới --w-max)
   ════════════════════════════════════════════════════════════ */
.shop-toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  max-width:var(--w-max);margin:8px auto 16px;}
.shop-toolbar .store-search{flex:1;min-width:220px;}
.shop-count{font-family:var(--f-ui);font-size:12.5px;color:var(--ivory-dim);margin-left:auto;white-space:nowrap;}
.shop-filter-toggle{display:none;font-family:var(--f-ui);font-size:12px;font-weight:600;letter-spacing:.04em;
  padding:9px 16px;border-radius:9px;border:1px solid var(--glass-bd);background:rgba(40,12,16,.55);color:var(--gold-cream);cursor:pointer;}

.shop-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:clamp(18px,2.4vw,34px);
  align-items:start;max-width:var(--w-max);margin:0 auto;}

/* sidebar */
.shop-sidebar{position:sticky;top:calc(var(--nav-h) - 18px);max-height:calc(100vh - var(--nav-h));
  overflow-y:auto;padding:16px;border-radius:14px;
  background:linear-gradient(165deg,rgba(110,26,38,0.5),rgba(40,12,16,0.62));border:1px solid var(--glass-bd);
  box-shadow:0 16px 40px rgba(0,0,0,.4);}
.sf-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;
  padding-bottom:12px;border-bottom:1px solid var(--glass-bd);}
.sf-title{font-family:var(--f-disp);font-weight:700;font-size:16px;color:var(--gold-cream);}
.sf-reset{font-family:var(--f-ui);font-size:11.5px;color:var(--gold-bright);background:none;border:none;cursor:pointer;text-decoration:underline;}
.sf-group{margin-bottom:18px;}
.sf-group h4{font-family:var(--f-ui);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold-bright);margin:0 0 9px;font-weight:600;}
.sf-cats{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;}
.sf-cat{width:100%;display:flex;justify-content:space-between;align-items:center;gap:8px;
  font-family:var(--f-body);font-size:13px;color:var(--ivory-dim);background:none;border:none;cursor:pointer;
  padding:7px 9px;border-radius:7px;text-align:left;transition:all .2s;}
.sf-cat span{font-size:11px;color:var(--ivory-dim);background:rgba(20,6,9,.5);padding:1px 7px;border-radius:20px;}
.sf-cat:hover{background:rgba(240,208,112,.08);color:var(--ivory);}
.sf-cat.on{background:linear-gradient(135deg,var(--gold-bright),var(--gold));color:var(--red-deep);font-weight:600;}
.sf-cat.on span{background:rgba(36,10,14,.28);color:var(--red-deep);}
.sf-brands{display:flex;flex-direction:column;gap:3px;}
.sf-check,.sf-radio{display:flex;align-items:center;gap:8px;font-family:var(--f-body);font-size:13px;
  color:var(--ivory-dim);cursor:pointer;padding:5px 6px;border-radius:6px;transition:background .2s;}
.sf-check:hover,.sf-radio:hover{background:rgba(240,208,112,.07);}
.sf-check input,.sf-radio input{width:15px;height:15px;accent-color:var(--gold-bright);flex-shrink:0;cursor:pointer;}
.sf-check span,.sf-radio span{flex:1;}
.sf-check em{font-style:normal;font-size:11px;color:rgba(248,233,184,.45);}
.sf-price{list-style:none;margin:0;padding:0;}
.sf-more{margin-top:7px;font-family:var(--f-ui);font-size:11.5px;color:var(--gold-bright);
  background:none;border:none;cursor:pointer;text-decoration:underline;padding:2px 6px;}

/* grid full-width */
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:clamp(14px,1.6vw,22px);}
.shop-grid .store-empty{grid-column:1/-1;}

/* catalog card controls */
.catalog-card{position:relative;}
.pc-ctrls{position:absolute;top:10px;right:10px;z-index:3;display:flex;flex-direction:column;gap:6px;
  opacity:0;transform:translateY(-4px);transition:opacity .25s,transform .25s;}
.catalog-card:hover .pc-ctrls,.catalog-card:focus-within .pc-ctrls{opacity:1;transform:none;}
.pc-ctrl{width:32px;height:32px;border-radius:9px;cursor:pointer;font-size:15px;line-height:1;
  background:rgba(36,12,16,.82);border:1px solid var(--glass-bd);color:var(--gold-cream);
  display:flex;align-items:center;justify-content:center;transition:all .2s;backdrop-filter:blur(4px);}
.pc-ctrl:hover{border-color:var(--gold-bright);color:var(--gold-bright);}
.pc-wish.on{background:var(--cherry);border-color:var(--cherry);color:#fff;}
.pc-cmp.on{background:linear-gradient(135deg,var(--gold-bright),var(--gold));border-color:var(--gold);color:var(--red-deep);}
.pc-finance{font-family:var(--f-ui);font-size:11px;color:var(--ivory-dim);margin-top:5px;}
.pc-finance b{color:var(--gold-cream);font-weight:600;}
@media(hover:none){.pc-ctrls{opacity:1;transform:none;}}

/* pagination */
.pagination{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;align-items:center;
  margin-top:clamp(24px,4vh,40px);}
.pagination .pg{min-width:38px;height:38px;padding:0 11px;border-radius:9px;cursor:pointer;
  font-family:var(--f-ui);font-size:13px;font-weight:500;
  background:rgba(40,12,16,.55);border:1px solid var(--glass-bd);color:var(--ivory-dim);transition:all .2s;}
.pagination .pg:hover:not(:disabled):not(.on){border-color:var(--gold-bright);color:var(--gold-cream);}
.pagination .pg.on{background:linear-gradient(135deg,var(--gold-bright),var(--gold));border-color:var(--gold);color:var(--red-deep);}
.pagination .pg:disabled{opacity:.4;cursor:default;}
.pagination .pg-ell{color:var(--ivory-dim);padding:0 2px;}

/* compare bar */
.cmp-bar{position:fixed;left:0;right:0;bottom:0;z-index:850;display:none;align-items:center;gap:14px;
  padding:11px clamp(16px,4vw,40px);padding-bottom:calc(11px + env(safe-area-inset-bottom));
  background:rgba(28,8,12,.96);backdrop-filter:blur(16px);border-top:1px solid var(--glass-bd);
  box-shadow:0 -8px 30px rgba(0,0,0,.5);transform:translateY(110%);transition:transform .3s var(--ease);}
.cmp-bar.on{display:flex;transform:none;}
.cmp-info{font-family:var(--f-ui);font-size:12.5px;font-weight:600;color:var(--gold-cream);white-space:nowrap;}
.cmp-thumbs{display:flex;gap:7px;flex-wrap:wrap;flex:1;overflow:hidden;}
.cmp-thumb{font-family:var(--f-ui);font-size:11.5px;color:var(--ivory-dim);background:rgba(40,12,16,.6);
  border:1px solid var(--glass-bd);border-radius:20px;padding:4px 10px;max-width:200px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;cursor:pointer;}
.cmp-thumb i{font-style:normal;color:var(--gold-bright);font-weight:700;margin-left:4px;}
.cmp-actions{display:flex;gap:8px;flex-shrink:0;}
.cmp-clear{font-family:var(--f-ui);font-size:12px;background:none;border:1px solid var(--glass-bd);
  color:var(--ivory-dim);border-radius:8px;padding:9px 14px;cursor:pointer;}
.cmp-go{font-family:var(--f-ui);font-size:12px;font-weight:600;
  background:linear-gradient(135deg,var(--gold-bright),var(--gold));color:var(--red-deep);
  border:none;border-radius:8px;padding:9px 18px;cursor:pointer;}
.cmp-go:disabled{opacity:.5;cursor:default;}

/* compare modal */
.cmp-modal{position:fixed;inset:0;z-index:11000;display:flex;align-items:center;justify-content:center;
  background:rgba(14,4,7,.86);opacity:0;transition:opacity .3s;padding:20px;}
.cmp-modal.on{opacity:1;}
.cmp-modal-in{position:relative;border-radius:16px;max-width:1100px;width:100%;
  background:linear-gradient(165deg,#3E1119,#240A0E);border:1px solid var(--glass-bd);
  max-height:86vh;overflow:auto;padding:26px clamp(18px,3vw,32px);box-shadow:0 30px 80px rgba(0,0,0,.6);}
.cmp-modal-x{position:absolute;top:14px;right:16px;width:38px;height:38px;border-radius:50%;
  background:rgba(40,12,16,.7);border:1px solid var(--glass-bd);color:var(--gold-cream);font-size:22px;cursor:pointer;}
.cmp-modal-in h3{font-family:var(--f-disp);font-weight:700;font-size:22px;color:var(--ivory);margin:0 0 18px;}
.cmp-table-wrap{overflow-x:auto;}
.cmp-table{width:100%;border-collapse:collapse;font-family:var(--f-body);font-size:13px;}
.cmp-table th,.cmp-table td{border:1px solid var(--glass-bd);padding:10px 12px;text-align:left;vertical-align:top;color:var(--ivory-dim);}
.cmp-table thead th{background:rgba(40,12,16,.5);min-width:170px;}
.cmp-table thead img{width:100%;max-width:130px;height:90px;object-fit:contain;background:#fff;display:block;margin-bottom:8px;border-radius:6px;}
.cmp-nm{font-weight:500;color:var(--ivory);font-size:13px;line-height:1.4;}
.cmp-pr{color:var(--gold-cream);font-weight:600;margin:4px 0;}
.cmp-view{font-size:11.5px;color:var(--gold-bright);}
.cmp-rowh{background:rgba(40,12,16,.6);font-weight:600;color:var(--gold-cream);white-space:nowrap;}

/* ════════════════════════════════════════════════════════════
   SHARED "FULLER CONTENT" BLOCKS — USP · brands · categories ·
   stats · FAQ (dark cinematic, full-width tới --w-max)
   ════════════════════════════════════════════════════════════ */
/* USP commitment bar */
.usp-bar{max-width:var(--w-max);margin:0 auto;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;
  background:var(--glass-bd);border:1px solid var(--glass-bd);border-radius:14px;overflow:hidden;}
.usp{display:flex;align-items:center;gap:12px;padding:18px 20px;
  background:linear-gradient(165deg,rgba(62,17,25,.92),rgba(28,9,13,.94));}
.usp-i{font-size:24px;line-height:1;flex-shrink:0;}
.usp b{display:block;font-family:var(--f-ui);font-size:13px;font-weight:600;color:var(--gold-cream);letter-spacing:.01em;}
.usp em{display:block;font-style:normal;font-size:11.5px;color:var(--ivory-dim);margin-top:2px;}

/* brand strip */
.brand-strip{max-width:var(--w-max);margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;
  gap:10px 12px;}
.brand-chip{font-family:var(--f-disp);font-weight:700;font-size:clamp(15px,1.7vw,20px);letter-spacing:.04em;
  color:var(--gold-cream);opacity:.62;padding:8px 18px;border-radius:30px;border:1px solid var(--glass-bd);
  background:rgba(40,12,16,.4);transition:opacity .3s,color .3s,border-color .3s;}
.brand-chip:hover{opacity:1;color:var(--gold-bright);border-color:rgba(240,208,112,.4);}

/* category quick-links */
.cat-grid{max-width:var(--w-max);margin:0 auto;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:clamp(12px,1.6vw,18px);}
.cat-card{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
  padding:26px 16px;border-radius:14px;border:1px solid var(--glass-bd);
  background:linear-gradient(165deg,rgba(110,26,38,0.4),rgba(40,12,16,0.55));
  transition:transform .35s var(--ease),border-color .35s,box-shadow .35s;}
.cat-card:hover{transform:translateY(-5px);border-color:rgba(240,208,112,.42);
  box-shadow:0 18px 40px rgba(0,0,0,.4),0 0 30px rgba(240,208,112,.08);}
.cat-card .ci{font-size:34px;line-height:1;}
.cat-card b{font-family:var(--f-ui);font-size:13.5px;font-weight:600;color:var(--gold-cream);letter-spacing:.02em;}
.cat-card em{font-style:normal;font-size:11px;color:var(--ivory-dim);}

/* 30-year stats band */
.stats-band{max-width:var(--w-max);margin:0 auto;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:clamp(14px,2vw,28px);text-align:center;}
.stat-b{padding:22px 12px;border-radius:14px;border:1px solid var(--glass-bd);
  background:linear-gradient(165deg,rgba(110,26,38,0.34),rgba(40,12,16,0.5));}
.stat-b b{display:block;font-family:var(--f-disp);font-weight:800;font-size:clamp(34px,4.4vw,54px);line-height:1;
  background:linear-gradient(120deg,var(--gold-cream),var(--gold-bright) 45%,var(--gold-warm));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.stat-b span{display:block;font-family:var(--f-sub);font-style:italic;font-size:clamp(13px,1.4vw,16px);
  color:var(--ivory-dim);margin-top:8px;}

/* FAQ accordion (native details) */
.faq{max-width:920px;margin:0 auto;display:flex;flex-direction:column;gap:10px;}
.faq details{border:1px solid var(--glass-bd);border-radius:12px;overflow:hidden;
  background:linear-gradient(165deg,rgba(62,17,25,.6),rgba(28,9,13,.72));}
.faq summary{list-style:none;cursor:pointer;padding:16px 20px;display:flex;justify-content:space-between;
  align-items:center;gap:14px;font-family:var(--f-ui);font-size:14.5px;font-weight:500;color:var(--gold-cream);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:'+';font-size:22px;color:var(--gold-bright);transition:transform .3s;line-height:1;flex-shrink:0;}
.faq details[open] summary::after{transform:rotate(45deg);}
.faq summary:hover{color:var(--gold-bright);}
.faq-a{padding:0 20px 18px;font-size:13.5px;line-height:1.75;color:var(--ivory-dim);}
.faq-a a{color:var(--gold-bright);}

/* tighter top spacing when these sit as standalone bands */
.section.band{min-height:auto;padding:clamp(48px,7vh,86px) 0;}

/* shop responsive */
@media(max-width:980px){
  .shop-layout{grid-template-columns:1fr;}
  .shop-filter-toggle{display:inline-block;}
  .shop-count{margin-left:0;}
  .shop-sidebar{position:fixed;top:0;left:0;bottom:0;width:300px;max-width:86vw;max-height:100vh;z-index:1100;
    border-radius:0;transform:translateX(-105%);transition:transform .3s var(--ease);}
  .shop-sidebar.open{transform:none;box-shadow:0 0 60px rgba(0,0,0,.4);}
  body.sf-open #overlay{opacity:1;pointer-events:auto;}
}
@media(max-width:560px){
  .shop-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;}
  .cmp-thumbs{display:none;}
}

/* ════ PRODUCT DETAIL LIGHT (Sweetwater) trên nền trang ấm ════ */
body.pd-lite{background:radial-gradient(ellipse 92% 70% at 50% 42%,#9E2A2C 0%,#6E1A26 36%,#3E1417 68%,#240A0E 100%) fixed,#240A0E!important;}
body.pd-lite .pd-section{background:transparent!important;}
body.pd-lite footer{background:radial-gradient(ellipse 110% 140% at 50% 16%,#9E2A2C 0%,#6E1A26 36%,#3E1417 68%,#240A0E 100%)!important;}
body.pd-lite .section.band{background:transparent!important;}
body.pd-lite .section .eyebrow{color:#79600F!important;}
body.pd-lite .section .s-title{color:#211A16!important;}
body.pd-lite .section .s-title em{background:none!important;-webkit-text-fill-color:#A8163C!important;color:#A8163C!important;}
body.pd-lite .usp-bar{background:#E8E1D4!important;border-color:#E8E1D4!important;}
body.pd-lite .usp{background:#fff!important;}
body.pd-lite .usp b{color:#211A16!important;} body.pd-lite .usp em{color:#5E564E!important;}
body.pd-lite .cat-card{background:#FAF7F1!important;border:1px solid #E8E1D4!important;}
body.pd-lite .cat-card b{color:#211A16!important;} body.pd-lite .cat-card em{color:#5E564E!important;}
body.pd-lite .faq details{background:#FAF7F1!important;border:1px solid #E8E1D4!important;}
body.pd-lite .faq summary{color:#211A16!important;}
body.pd-lite .faq summary::after{color:#A8163C!important;}
body.pd-lite .faq-a{color:#5E564E!important;}
body.pd-lite .faq-a a{color:#0F4C75!important;}

/* ════ FIX tiêu đề trên nền ấm = SÁNG + GIỎ HÀNG → panel sáng ════ */
body.pd-lite .section .eyebrow{color:var(--gold-bright)!important;}
body.pd-lite .pd-crumbs,body.pd-lite .pd-crumbs a{color:var(--gold-cream)!important;}
body.pd-lite .section .s-title,body.pd-lite .gh-title{color:var(--ivory)!important;}
body.pd-lite .section .s-title em,body.pd-lite .gh-title em{background:linear-gradient(120deg,var(--gold-cream),var(--gold-bright) 45%,var(--gold-warm))!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;color:transparent!important;}
body.pd-lite .gh-sub{color:var(--gold-cream)!important;}
body.pd-lite .gh-row,body.pd-lite .gh-summary,body.pd-lite .gh-form,body.pd-lite .gh-empty,body.pd-lite .gh-done,body.pd-lite .gh-done-card{background:#FFFFFF!important;border:1px solid #E8E1D4!important;box-shadow:0 10px 26px rgba(40,20,10,.08)!important;}
body.pd-lite .gh-name{color:#211A16!important;}
body.pd-lite .gh-brand,body.pd-lite .gh-cat{color:#79600F!important;}
body.pd-lite .gh-now,body.pd-lite .gh-price,body.pd-lite .gh-sum-total{color:#A8163C!important;-webkit-text-fill-color:#A8163C!important;background:none!important;}
body.pd-lite .gh-thumb{background:#fff!important;border-color:#E8E1D4!important;}
body.pd-lite .gh-qty{background:#F2EADB!important;border-color:#E8E1D4!important;}
body.pd-lite .gh-qty-btn{color:#5E564E!important;}
body.pd-lite .gh-x{color:#8C8178!important;}
body.pd-lite .gh-sum-row{color:#5E564E!important;}
body.pd-lite .gh-sum-note,body.pd-lite .gh-info{color:#8C8178!important;}
body.pd-lite .cform-h{color:#211A16!important;}
body.pd-lite .cform-sub{color:#5E564E!important;}
body.pd-lite .cfield label{color:#5E564E!important;}
body.pd-lite .cfield input,body.pd-lite .cfield textarea{background:#fff!important;border:1px solid #E8E1D4!important;color:#211A16!important;-webkit-text-fill-color:#211A16!important;}
body.pd-lite .cf-note{color:#8C8178!important;}
body.pd-lite .gh-form-alt{color:#5E564E!important;}
body.pd-lite .gh-form-alt a{color:#A8163C!important;}
body.pd-lite .gh-empty h2,body.pd-lite .gh-done h2,body.pd-lite .gh-done-card h4{color:#211A16!important;}
body.pd-lite .gh-empty p,body.pd-lite .gh-done p{color:#5E564E!important;}
body.pd-lite .gh-empty-ico{color:#B0913A!important;}
body.pd-lite .gh-done-ico{background:#3B6D11!important;color:#fff!important;}
body.pd-lite .gh-done-note{color:#8C8178!important;}

/* ── variant chip = nút bấm được + trạng thái đang chọn ── */
.pd-var{cursor:pointer;font-family:inherit;text-align:left;-webkit-appearance:none;appearance:none;}
.pd-var[disabled]{cursor:default;opacity:.45;}
.pd-var.on{border-color:var(--gold-bright)!important;box-shadow:0 0 0 2px rgba(240,208,112,.3);}
body.pd-lite .pd-var.on{border-color:var(--cherry)!important;box-shadow:0 0 0 2px rgba(168,22,60,.2);background:#fff!important;}

/* ════ Trợ lý gợi ý + dải "Cùng thương hiệu" (đắm chìm danh mục) ════ */
#pdBrand{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:clamp(16px,2.2vw,26px);max-width:var(--w-max);margin:0 auto;}
.pd-helper{max-width:var(--w-max);margin:clamp(40px,6vh,72px) auto 0;padding:clamp(22px,3vw,36px);border-radius:18px;
  background:linear-gradient(165deg,rgba(62,17,25,.6),rgba(28,9,13,.72));border:1px solid var(--glass-bd);}
body.pd-lite .pd-helper{background:#FFFFFF;border:1px solid #E8E1D4;box-shadow:0 16px 40px rgba(40,20,10,.08);}
.pdh-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:16px;}
.pdh-ic{font-size:26px;line-height:1;flex-shrink:0;}
.pdh-head h3{font-family:var(--f-disp);font-weight:800;font-size:clamp(18px,2.2vw,24px);margin:0;color:var(--gold-cream);}
body.pd-lite .pdh-head h3{color:#211A16;}
.pdh-head p{font-family:var(--f-body);font-size:13px;line-height:1.5;margin:3px 0 0;color:var(--ivory-dim);}
body.pd-lite .pdh-head p{color:#5E564E;}
.pdh-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px;}
.pdh-chip{font-family:var(--f-ui);font-size:12.5px;font-weight:600;padding:9px 16px;border-radius:30px;cursor:pointer;transition:all .2s;
  background:rgba(40,12,16,.5);border:1px solid var(--glass-bd);color:var(--gold-cream);}
.pdh-chip.on{background:linear-gradient(135deg,var(--gold-bright),var(--gold));border-color:var(--gold);color:var(--red-deep);}
body.pd-lite .pdh-chip{background:#FAF7F1;border:1px solid #E8E1D4;color:#5E564E;}
body.pd-lite .pdh-chip:hover{border-color:var(--cherry);color:var(--cherry);}
body.pd-lite .pdh-chip.on{background:var(--cherry);border-color:var(--cherry);color:#fff;}
.pdh-result{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:clamp(12px,1.6vw,20px);}
.pdh-empty{grid-column:1/-1;font-family:var(--f-sub);font-style:italic;font-size:15px;color:var(--ivory-dim);}
body.pd-lite .pdh-empty{color:#5E564E;}
.pdh-empty a,.pdh-foot a{color:var(--gold-bright);font-weight:600;}
body.pd-lite .pdh-empty a,body.pd-lite .pdh-foot a{color:var(--cherry);}
.pdh-foot{margin-top:16px;font-family:var(--f-ui);font-size:12.5px;color:var(--ivory-dim);}
body.pd-lite .pdh-foot{color:#5E564E;}
@media(max-width:560px){.pdh-result,#pdBrand{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));}}

/* card Trợ lý theo nhu cầu (Chạm để cảm) */
.pdh-needs{border-top:3px solid var(--gold)!important;}
.pdh-foot-cta{display:flex;gap:12px 16px;align-items:center;flex-wrap:wrap;}
.pdh-foot-cta .btn-gold{padding:11px 22px;font-size:11.5px;letter-spacing:.14em;}
.pdh-foot-cta span{font-family:var(--f-sub);font-style:italic;font-size:13.5px;color:var(--ivory-dim);}
body.pd-lite .pdh-foot-cta span{color:#5E564E;}

/* ════ Chi Tiết SP — dày đặc hơn, ít khoảng trống, danh mục cân ════ */
/* danh mục nhanh: 4 cột (8 mục = 2 hàng cân đối) */
.cat-grid{grid-template-columns:repeat(4,1fr)!important;}
@media(max-width:760px){.cat-grid{grid-template-columns:repeat(2,1fr)!important;}}
/* mô tả lấp đầy cột trái (không bó hẹp gây trống phải) */
.pd-desc-body{max-width:none!important;}
/* gallery: ảnh lớn hơn, panel bớt thừa trắng */
.pd-media{aspect-ratio:4/3!important;}
.pd-gallery-col .pd-media{max-width:820px!important;margin:0!important;}
/* giảm khoảng cách dọc giữa các khối */
.pd-block{margin-top:clamp(16px,2.4vh,28px)!important;}
.pd-related-wrap{margin-top:clamp(24px,3.6vh,42px)!important;}
.pd-helper{margin-top:clamp(22px,3.4vh,38px)!important;}
.section.band{padding:clamp(16px,2.4vh,32px) 0!important;min-height:auto!important;}

/* ════ Chi Tiết SP: FULL trái-phải như Cửa Hàng + fix sticky buy box ════ */
body.pd-lite .pd-section{overflow:visible!important;}              /* overflow:hidden phá position:sticky → cột phải trống */
body.pd-lite .pd-section > .fx-ambient{display:none!important;}
.pd-section{padding-left:clamp(8px,1.1vw,22px)!important;padding-right:clamp(8px,1.1vw,22px)!important;}
#pdWrap{max-width:none!important;}

/* ════ Chi Tiết SP — fix 3 điểm (sticky giá / chữ tiêu đề / full width) ════ */
/* 1. body overflow-x:hidden phá sticky → dùng clip; buy box vừa màn hình */
body.pd-lite{overflow-x:clip!important;}
/* buy box: JS tự cap chiều cao khi cần (max-height/overflow set bằng JS) */
.pd-buybox{overflow-x:hidden;scrollbar-width:thin;}
.pd-buybox::-webkit-scrollbar{width:7px;}
.pd-buybox::-webkit-scrollbar-thumb{background:rgba(168,22,60,.3);border-radius:6px;}
/* 2. tiêu đề "cùng danh mục/thương hiệu" trên nền ấm → SÁNG (đang đen, khó đọc) */
body.pd-lite .pd-related-title{color:var(--ivory)!important;}
body.pd-lite .pd-related-title em{background:linear-gradient(120deg,var(--gold-cream),var(--gold-bright) 45%,var(--gold-warm))!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;color:transparent!important;}
body.pd-lite .pd-related-sub{color:var(--gold-cream)!important;}
/* 3. full trái-phải bằng Cửa Hàng (bỏ mọi chặn trần) */
#pdRelated,#pdRecent,#pdBrand,.pd-sections,.pd-helper,.cat-grid,.usp-bar,.faq{max-width:none!important;}
body.pd-lite .section.band .wrap,body.pd-lite .pd-section .wrap{max-width:none!important;}

/* ════ FULL trái-phải BẰNG Cửa Hàng — bỏ padding .wrap kép (tới 84px) ════ */
/* .pd-section: CAP + CANH GIỮA (~1360px) để màn rộng không hở dải trống bên phải ảnh gallery · 30/05 */
body.pd-lite .pd-section > .wrap{max-width:1360px!important;margin-left:auto!important;margin-right:auto!important;
  padding-left:clamp(16px,3vw,40px)!important;padding-right:clamp(16px,3vw,40px)!important;}
/* các band dưới (USP/FAQ/CTA) cũng full như Cửa Hàng */
body.pd-lite .section.band > .wrap,body.pd-lite #cta > .wrap{padding-left:clamp(8px,1.1vw,22px)!important;padding-right:clamp(8px,1.1vw,22px)!important;max-width:none!important;}

/* ════ Lấp đầy cột trái + lưới đủ hàng (không khoảng trống khi cuộn) ════ */
.pd-layout{align-items:start!important;}                 /* 2 cột độc lập, buy box không bị kéo cao */
.pd-fill-grid{display:grid;gap:clamp(14px,1.7vw,24px);margin-top:18px;}
.pd-fill-explore{margin-top:clamp(18px,2.4vh,30px);}

/* ════ Gợi ý TRONG buy box (lấp khi cột trái cao hơn — không đè, sticky) ════ */
.pd-box-suggest{margin-top:18px;padding-top:16px;border-top:1px dashed rgba(168,22,60,.22);}
.pd-bs-head{font-family:var(--f-ui);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--cherry);margin-bottom:12px;}
.pd-bs-list{display:grid;grid-template-columns:1fr;gap:12px;}
.pd-bs-list .pcard{width:100%;}
body.pd-lite .pd-box-suggest{border-top-color:#E8E1D4;}
/* CTA/.section trên trang thương mại: bỏ full 100vh, nén gọn */
body.pd-lite .section{min-height:auto!important;padding:clamp(40px,6vh,72px) 0!important;}
body.pd-lite #cta{min-height:auto!important;}
/* khoảng giữa các khối liên quan: gọn lại */
body.pd-lite .pd-related-wrap{margin-top:clamp(20px,2.8vh,34px)!important;}
body.pd-lite .pd-helper,body.pd-lite .pd-helper.pdh-needs{margin-top:clamp(16px,2.4vh,28px)!important;}

/* ════ Giỏ hàng — lưới gợi ý lấp đầy khi trống ════ */
.gh-suggest{margin-top:clamp(20px,3vh,38px);}
.gh-suggest-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(14px,1.6vw,22px);}
@media(max-width:1200px){.gh-suggest-grid{grid-template-columns:repeat(4,minmax(0,1fr));}}
@media(max-width:900px){.gh-suggest-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(max-width:560px){.gh-suggest-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}

/* ════ Siết thêm khoảng cách tiêu đề khối (pd-lite) ════ */
body.pd-lite .pd-related-sub{margin-bottom:18px!important;}
body.pd-lite .pd-related-title{margin-bottom:6px!important;}
body.pd-lite .section .eyebrow{margin-bottom:12px!important;}
body.pd-lite .section.band .s-title,body.pd-lite #cta .s-title{margin-bottom:10px!important;}

/* ════════════════════════════════════════════════════════════
   CHẠM ĐỂ CẢM — Touch To Feel signature band (khu vực sáng)
   Một "sân khấu" tối phát sáng giữa các panel trắng → tạo nhịp + dấu ấn
   ════════════════════════════════════════════════════════════ */
.ttf-band{position:relative;width:100%;padding:clamp(44px,7vh,82px) clamp(14px,4vw,40px);overflow:hidden;isolation:isolate;text-align:center;}
.ttf-band::before{content:"";position:absolute;inset:clamp(8px,1.6vh,22px) clamp(8px,1.4vw,26px);border-radius:24px;
  background:radial-gradient(ellipse 72% 95% at 50% 6%,rgba(229,199,107,.17),transparent 56%),linear-gradient(168deg,#3E1417,#240A0E 72%,#180509);
  border:1px solid rgba(229,199,107,.26);box-shadow:0 30px 80px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,236,190,.08);z-index:-1;}
.ttf-inner{max-width:780px;margin:0 auto;position:relative;}
.ttf-eye{display:inline-block;font-family:var(--f-ui);font-size:clamp(10px,1.1vw,12px);letter-spacing:.42em;text-transform:uppercase;color:var(--gold-bright);opacity:.88;margin-bottom:14px;}
.ttf-title{font-family:'Dancing Script',cursive;font-weight:700;font-size:clamp(48px,8vw,96px);line-height:.95;margin:0 0 16px;
  background:linear-gradient(110deg,var(--gold-cream),var(--gold-bright) 40%,#fff6df 56%,var(--gold-warm));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 6px 26px rgba(229,199,107,.28));}
.ttf-lead{font-family:var(--f-sub);font-style:italic;font-size:clamp(16px,2vw,22px);line-height:1.62;color:var(--ivory);opacity:.93;margin:0 auto 26px;max-width:60ch;}
.ttf-cta{display:flex;gap:18px;align-items:center;justify-content:center;flex-wrap:wrap;}
.ttf-link{font-family:var(--f-ui);font-size:13px;letter-spacing:.08em;color:var(--gold-cream);text-decoration:none;border-bottom:1px solid rgba(229,199,107,.4);padding-bottom:2px;transition:color .3s,border-color .3s;}
.ttf-link:hover{color:#fff;border-color:var(--gold-bright);}
.ttf-spark{position:absolute;color:rgba(240,208,112,.55);font-size:13px;pointer-events:none;z-index:-1;animation:ttfFloat 7s ease-in-out infinite;}
@keyframes ttfFloat{0%,100%{transform:translateY(0) scale(1);opacity:.25}50%{transform:translateY(-13px) scale(1.15);opacity:.8}}
@media(max-width:560px){.ttf-band::before{inset:6px;border-radius:16px;}}
/* ép màu sáng cho band trên trang pd-lite (panel trắng không được phủ lên) */
body.pd-lite .ttf-title{color:transparent!important;}
body.pd-lite .ttf-lead{color:var(--ivory)!important;}
body.pd-lite .ttf-eye{color:var(--gold-bright)!important;}

/* ═══════════ SIẾT SECTION — 5 TRANG NỘI DUNG (pg-dense) · 30/05 ═══════════ */
/* Bỏ full 100vh ở các dải .section (GIỮ .page-hero / .kp-*-hero), nén cho dày sát */
body.pg-dense .section{min-height:auto;padding:clamp(56px,8vh,84px) 0;}

/* ghi chú khi thông số là fallback (SP thiếu chi tiết) · 30/05 */
.pd-specs-note{margin-top:14px;font-size:clamp(13px,1.4vw,14.5px);color:var(--ivory-dim);font-style:italic;line-height:1.7;}
.pd-specs-note a{color:var(--gold-bright);font-weight:600;}
body.pd-lite .pd-specs-note{color:#5A4632;}
body.pd-lite .pd-specs-note a{color:#A8163C;}

/* ════════════════════════════════════════════════════════════
   MOBILE EDGE-TO-EDGE & DENSITY (trang thương mại + nội dung) · 31/05/2026
   Tràn viền + dẹp khoảng trống dư trên điện thoại.
   ════════════════════════════════════════════════════════════ */
@media(max-width:560px){
  /* Chi tiết SP: bớt khoảng thở thừa trên/dưới (GIỮ phần kê navbar) */
  .pd-section{padding-top:calc(var(--nav-h) + 14px)!important;padding-bottom:clamp(34px,6vh,60px)!important;}
  /* Giỏ trống / SP trống: thẻ thấp lại, hết hộp rỗng cao */
  .gh-empty{margin:18px auto;padding:34px clamp(16px,4vw,30px);max-width:none;}
  .gh-empty-ico{font-size:60px;margin-bottom:10px;}
  .gh-empty p{margin-bottom:20px;}
  .pd-empty{padding:34px 16px;}
  /* Lưới gợi ý/giỏ gọn hơn */
  .gh-suggest-grid,.pd-box-suggest .pd-rel-grid{gap:10px;}
  /* Dải nội dung phụ (.section.band) sát mép */
  body.pd-lite .section.band .wrap,body.pd-lite .pd-section .wrap{padding-left:3px!important;padding-right:3px!important;}
  .pd-section{padding-left:3px!important;padding-right:3px!important;}
}
@media(max-width:430px){
  .gh-empty{padding:28px 14px;}
  .gh-suggest-grid{gap:8px;}
}

/* ════════════════════════════════════════════════════════════
   FIX TRÀN NGANG CHI TIẾT SP TRÊN MOBILE · 31/05/2026
   Nội dung dài (mô tả tiếng Anh, thông số gộp) ép khung tới ~780px
   → cả trang phình ra, bị overflow:clip cắt mất bên phải. Ép xuống dòng
   + cho khung co lại + ảnh/bảng trong mô tả không vượt khổ.
   ════════════════════════════════════════════════════════════ */
@media(max-width:560px){
  .pd-highlights{grid-template-columns:1fr;}
  .pd-highlights li{min-width:0;}
  .pd-highlights .hl-k,.pd-highlights .hl-v{min-width:0;overflow-wrap:anywhere;word-break:break-word;}
  .pd-block,.pd-block *{min-width:0;max-width:100%;}
  .pd-block p,.pd-block li,.pd-block h2,.pd-block h3,.pd-block span,.pd-block div,
  .pd-desc,.pd-desc *{overflow-wrap:anywhere;word-break:break-word;}
  .pd-block img,.pd-desc img{height:auto;}
  /* bảng trong mô tả / bảng thông số: xuống dòng thay vì kéo ngang phá khổ */
  .pd-block table,.pd-desc table{display:block;width:100%;max-width:100%;overflow-x:auto;}
  .pd-specs table{width:100%;table-layout:fixed;}
  .pd-specs th,.pd-specs td{white-space:normal;overflow-wrap:anywhere;word-break:break-word;}
}

/* FIX gốc tràn ngang: cột nội dung (.pd-sections) là grid-item 1fr, min-width:auto
   khiến nó phình theo min-content (~836px) → cả trang tràn. Cho co lại. · 31/05 */
@media(max-width:560px){
  .pd-top{min-width:0;}
  .pd-top > *{min-width:0;}
  .pd-sections{min-width:0;}
  .pd-sections *{min-width:0;}
}

/* KEYSTONE FIX · 31/05: ở mobile/tablet .pd-layout xếp dọc (flex column) nhưng
   rule .pd-layout{align-items:start!important} (cho 2 cột desktop) khiến item co
   theo BỀ RỘNG NỘI DUNG (~836px) → tràn ngang, cắt phải. Ép giãn đầy bề ngang. */
@media(max-width:980px){
  .pd-layout{align-items:stretch!important;}
  .pd-layout > *{min-width:0;max-width:100%;}
  .pd-gallery-col,.pd-buybox,.pd-sections{width:100%;min-width:0;max-width:100%;}
}

/* ════════════════════════════════════════════════════════════
   TINH CHỈNH THƯƠNG MẠI · 31/05/2026
   A) Sửa tương phản chữ khó đọc trên nền trắng (giỏ + đơn)
   B) Font số giá → Cormorant Garamond (trang trọng, cảm xúc)
   C) Tăng cỡ chữ chi tiết SP theo chuẩn sweetwater (~16px)
   ════════════════════════════════════════════════════════════ */

/* ── B · FONT SỐ GIÁ (elegant serif) ── */
.pd-price .now,.pd-buybox .pd-price .now,
.gh-now,.gh-sub,.gh-sum-total b,
.swp-now,.pcard .pprice .now,.mcard .now,.swr-now{
  font-family:var(--f-sub)!important;font-weight:600!important;letter-spacing:.005em;
}
.pd-price .now,.pd-buybox .pd-price .now{font-size:clamp(31px,3.8vw,46px);}
.swp-now{font-size:22px;}
.gh-now{font-size:18px;} .gh-sub{font-size:20px;} .gh-sum-total b{font-size:29px;}

/* ── C · CỠ CHỮ CHI TIẾT SP (chuẩn sweetwater ~16px) ── */
.pd-desc-body{font-size:16.5px;line-height:1.8;}
.pd-desc-body h2{font-size:21px;} .pd-desc-body h3{font-size:18px;} .pd-desc-body h4{font-size:16px;}
.pd-highlights .hl-v{font-size:16px;line-height:1.5;}
.pd-highlights .hl-k{font-size:12px;}
.pd-specs table{font-size:15.5px;}
.pd-specs th{font-size:14px;} .pd-specs td{font-size:15.5px;}
.swp-name{font-size:14.5px;line-height:1.45;}

/* ── A · TƯƠNG PHẢN (body.pd-lite — nền trắng, ép chữ ĐẬM/đủ tối) ── */
body.pd-lite .gh-sub{color:#A8163C!important;-webkit-text-fill-color:#A8163C!important;}
body.pd-lite .gh-qty input{color:#211A16!important;}
body.pd-lite .gh-sum-row{color:#3A2E26!important;}
body.pd-lite .gh-sum-row b{color:#211A16!important;font-weight:600!important;}
body.pd-lite .gh-done h2{color:#211A16!important;}
body.pd-lite .gh-done > p{color:#5A4632!important;}
body.pd-lite .gh-done > p b{color:#A8163C!important;}
body.pd-lite .gh-done-card h4{color:#A8163C!important;}
body.pd-lite .gh-done-card p{color:#3A2E26!important;}
body.pd-lite .gh-done-card b{color:#A8163C!important;-webkit-text-fill-color:#A8163C!important;}
body.pd-lite .gh-done-note{color:#8C8178!important;}
/* mô tả: chữ in đậm vàng nhạt → cherry cho rõ trên nền trắng */
body.pd-lite .pd-desc-body strong,body.pd-lite .pd-desc-body b{color:#A8163C!important;}

/* ════════════════════════════════════════════════════════════
   FONT ĐỌC KIỂU SWEETWATER · 31/05 — sans hình học (Mulish) cho
   nội dung đọc trang thương mại. Fallback Be Vietnam Pro (đủ dấu VN).
   Giữ: giá = Cormorant, tiêu đề thương hiệu = Playfair.
   ════════════════════════════════════════════════════════════ */
:root{--f-store:'Mulish','Be Vietnam Pro',sans-serif;}
.pd-desc-body,.pd-desc-body p,.pd-desc-body li,.pd-desc-body span,
.pd-desc-body h2,.pd-desc-body h3,.pd-desc-body h4,
.pd-highlights .hl-v,.pd-highlights .hl-k,
.pd-specs th,.pd-specs td,
.pd-bullets,.pd-bullets li,
.pd-soon,.pd-soon *,.pd-warranty,.pd-warranty *,
.pd-advisor-body,.pd-advisor-body *,
.swp-name,.swp-brand,.swp-fin{
  font-family:var(--f-store)!important;
}

/* TỔNG GIÁ TRỊ: bỏ gradient vàng (khó đọc) → đỏ cherry đặc · 31/05 */
body.pd-lite .gh-sum-total b{
  background:none!important;-webkit-background-clip:border-box!important;
  -webkit-text-fill-color:#A8163C!important;color:#A8163C!important;
}
body.pd-lite .gh-sum-total span{color:#A8163C!important;}

/* ════════════════════════════════════════════════════════════
   FULL-BLEED DESKTOP · CHI TIẾT SP · 31/05
   Bỏ cap 1360 + canh giữa (gây dải burgundy 600px hai bên trên màn
   rộng). Cho nội dung phủ full viewport, khe 2 cột mỏng, ảnh gallery
   lấp đầy cột (không để dải trống cạnh ảnh).
   ════════════════════════════════════════════════════════════ */
@media(min-width:981px){
  body.pd-lite .pd-section > .wrap{
    max-width:none!important;margin-left:0!important;margin-right:0!important;
    padding-left:clamp(18px,2.2vw,44px)!important;padding-right:clamp(18px,2.2vw,44px)!important;
  }
  .pd-layout{gap:clamp(16px,1.5vw,26px)!important;}
  /* gallery: lấp đầy bề ngang cột, chặn chiều cao để ảnh không quá khổ */
  body.pd-lite .pd-gallery-col .pd-media{
    max-width:none!important;aspect-ratio:auto!important;height:clamp(340px,40vh,520px)!important;
  }
}

/* Tỉ lệ 2 cột chi tiết SP (desktop) = 65/35 · 31/05 */
@media(min-width:981px){
  .pd-layout{grid-template-columns:65fr 35fr!important;}
}

/* ════════════════════════════════════════════════════════════
   FONT TIÊU ĐỀ ĐỒNG NHẤT (trang Cửa Hàng) · 31/05
   Cormorant Garamond, một format duy nhất — bỏ kiểu in nghiêng/
   gradient lẫn lộn ở "em". Thanh lịch, trang trọng, nhất quán.
   ════════════════════════════════════════════════════════════ */
body.pd-lite .pd-name,body.pd-lite .pd-h2,body.pd-lite .pd-related-title,
body.pd-lite .gh-title,body.pd-lite .gh-done h2,body.pd-lite .gh-done-card h4,
body.pd-lite .gh-empty h2,body.pd-lite .section .s-title,body.pd-lite .ph-title,
body.sw-home .sw-h,body.sw-home .ph-title,body.sw-home .s-title{
  font-family:var(--f-sub)!important;font-weight:700!important;font-style:normal!important;
  letter-spacing:.004em;
}
/* "em" (từ nhấn) trong tiêu đề → CÙNG kiểu, hết nghiêng, hết gradient */
body.pd-lite .pd-name em,body.pd-lite .pd-h2 em,body.pd-lite .pd-related-title em,
body.pd-lite .gh-title em,body.pd-lite .section .s-title em,body.pd-lite .ph-title em,
body.sw-home .sw-h em,body.sw-home .ph-title em,body.sw-home .s-title em{
  font-family:var(--f-sub)!important;font-style:normal!important;font-weight:700!important;
  background:none!important;-webkit-text-fill-color:initial!important;color:inherit!important;
}
/* bù cỡ (Cormorant nhìn nhỏ hơn Playfair) cho tiêu đề có sức nặng */
body.pd-lite .pd-h2{font-size:clamp(27px,3vw,38px);}
body.pd-lite .pd-buybox .pd-name{font-size:clamp(26px,2.8vw,38px);line-height:1.15;}

/* ════════════════════════════════════════════════════════════
   FIX SHOWROOM · 01/06 — (1) class .shop-grid bị đụng với store
   (1289) làm thẻ co hẹp 5 cột chữ rớt từng từ → ép lưới đủ rộng.
   (2) nhãn <b> dính liền giá trị ("Địa chỉ386") → cho nhãn xuống
   dòng riêng, tách rõ nhãn / giá trị.
   ════════════════════════════════════════════════════════════ */
body.pg-dense .shop-grid{grid-template-columns:repeat(auto-fill,minmax(330px,1fr))!important;}
body.pg-dense .shop-row{align-items:flex-start;}
body.pg-dense .shop-row b{display:block;margin-bottom:1px;}

/* ════════════════════════════════════════════════════════════
   FIX KHOẢNG TRỐNG MOBILE · chi tiết SP / giỏ (pd-lite) · 01/06
   Trên mobile, padding/margin GIỮA CÁC SECTION (warranty→reviews→qa→
   helper→related→ttf→usp→cat→faq→cta) tạo dải trống 80–160px.
   Nén ~½ cho mobile. Desktop (>600px) GIỮ NGUYÊN nhịp cinematic.
   ════════════════════════════════════════════════════════════ */
@media(max-width:600px){
  body.pd-lite .section,body.pd-lite .section.band{padding:24px 0!important;min-height:auto!important;}
  body.pd-lite #cta{padding:28px 0!important;}
  body.pd-lite .ttf-band{padding:30px 14px!important;}
  body.pd-lite .pd-block{margin-top:14px!important;}
  body.pd-lite .pd-related-wrap{margin-top:18px!important;}
  body.pd-lite .pd-helper,body.pd-lite .pd-helper.pdh-needs{margin-top:14px!important;}
  /* tiêu đề section bớt margin để khít hơn */
  body.pd-lite .section .eyebrow{margin-bottom:8px!important;}
  body.pd-lite .section .s-title,body.pd-lite #cta .s-title{margin-bottom:8px!important;}
  body.pd-lite .usp-bar{margin:0 auto!important;}
  body.pd-lite .divider{height:16px!important;}
  /* mô tả: nén khoảng quanh ảnh & tiêu đề trong HTML nhà sản xuất */
  body.pd-lite .pd-desc-body img{margin:8px auto!important;}
  body.pd-lite .pd-desc-body h2,body.pd-lite .pd-desc-body h3{margin:14px 0 8px!important;}
  body.pd-lite .pd-desc-body p{margin:0 0 10px!important;}
}

/* ════════════════════════════════════════════════════════════
   FONT HIỂN THỊ TRANG THƯƠNG MẠI · 02/06
   Đổi serif (Playfair/Cormorant — số kiểu oldstyle "uốn éo cong
   queo") → MULISH: nét thẳng đứng, bo tròn, số lining thẳng hàng,
   dễ đọc. CHỈ áp Cửa Hàng (sw-home) + Chi tiết SP & Giỏ (pd-lite);
   trang Trang chủ + thương hiệu giữ nguyên serif sang trọng.
   MỘT QUY TẮC: định nghĩa lại biến --f-disp/--f-sub trong phạm vi
   này → mọi tên SP, giá, tiêu đề mục ("Điểm nổi bật", "Mô tả chi
   tiết"…), thẻ SP liên quan, tiêu đề cửa hàng… tự động đổi font.
   ════════════════════════════════════════════════════════════ */
body.pd-lite,body.sw-home{
  --f-disp:'Mulish','Be Vietnam Pro',sans-serif;
  --f-sub:'Mulish','Be Vietnam Pro',sans-serif;
}
/* số tiền + số lượng: luôn lining + tabular (thẳng hàng, không nghiêng) */
body.pd-lite .pd-price .now,body.pd-lite .pd-price .was,
body.pd-lite .pcard .pprice .now,body.pd-lite .pcard .pprice .was,
body.pd-lite .pm-price .now,body.pd-lite .pm-price .was,
body.pd-lite .pd-mb-price,body.pd-lite .gh-now,body.pd-lite .gh-sum-total b,
body.pd-lite .gh-sum-total span,body.pd-lite .gh-qty input,
body.sw-home .swp-now,body.sw-home .swp-was,
body.sw-home .pcard .pprice .now,body.sw-home .pcard .pprice .was{
  font-variant-numeric:lining-nums tabular-nums;
  font-feature-settings:"lnum" 1,"tnum" 1;
  font-style:normal!important;
}

/* ════════════════════════════════════════════════════════════
   TYPOGRAPHY KIỂU SWEETWATER — TRANG CHI TIẾT SP · 03/06
   Font Inter (grotesk trung tính, rất giống Aktiv Grotesk của
   Sweetwater) + HỖ TRỢ ĐẦY ĐỦ TIẾNG VIỆT — dùng thay cho font gốc
   của Sweetwater (không có dấu). GIỮ NGUYÊN bố cục/khung như cũ,
   chỉ đổi CHỮ–SỐ: kiểu, cỡ, độ đậm, giãn dòng theo thang Sweetwater.
   ════════════════════════════════════════════════════════════ */
body.pd-lite{
  --f-disp:'Inter','Be Vietnam Pro',sans-serif;
  --f-sub:'Inter','Be Vietnam Pro',sans-serif;
  --f-store:'Inter','Be Vietnam Pro',sans-serif;
}
body.pd-lite .pd-main-col,body.pd-lite .pd-buybox{font-family:'Inter','Be Vietnam Pro',sans-serif;}
/* nhãn thương hiệu (CASIO…) — hoa nhỏ, xám, giãn chữ */
body.pd-lite .pd-brand{
  font-family:var(--f-disp)!important;font-weight:600!important;font-size:13px!important;
  letter-spacing:.12em!important;text-transform:uppercase!important;color:var(--ink-mute)!important;
}
/* tên sản phẩm — đậm, gần đen */
body.pd-lite .pd-name{
  font-family:var(--f-disp)!important;font-weight:700!important;
  font-size:clamp(24px,3vw,33px)!important;line-height:1.18!important;
  letter-spacing:-.012em!important;color:var(--ink)!important;
}
/* giá — đậm, số lining tabular thẳng hàng (giữ màu cherry thương hiệu) */
body.pd-lite .pd-price .now{
  font-family:var(--f-disp)!important;font-weight:700!important;
  font-size:clamp(26px,3vw,33px)!important;letter-spacing:-.01em!important;
  font-variant-numeric:lining-nums tabular-nums!important;font-feature-settings:"lnum" 1,"tnum" 1!important;
}
body.pd-lite .pd-price .was{
  font-family:var(--f-disp)!important;font-weight:400!important;font-size:18px!important;
  font-variant-numeric:lining-nums tabular-nums!important;
}
body.pd-lite .pd-price .off{font-family:var(--f-disp)!important;font-weight:700!important;}
/* tiêu đề mục */
body.pd-lite .pd-h2{
  font-family:var(--f-disp)!important;font-weight:700!important;
  font-size:clamp(20px,2.3vw,25px)!important;letter-spacing:-.006em!important;line-height:1.25!important;
}
/* thân mô tả + danh sách */
body.pd-lite .pd-desc-body{font-size:clamp(15px,1.05vw,16.5px)!important;line-height:1.62!important;}
body.pd-lite .pd-desc-body li{margin-bottom:8px!important;}
/* nhãn nhỏ / tab / chip / highlights → Inter */
body.pd-lite .pd-anchornav a,body.pd-lite .pd-mini-label,body.pd-lite .pd-tag,
body.pd-lite .hl-k,body.pd-lite .hl-v{font-family:var(--f-disp)!important;}
/* BẢNG THÔNG SỐ kiểu Sweetwater: zebra, nhãn đậm, viền tối giản */
body.pd-lite .pd-specs table,body.pd-lite .pd-desc-body table{border:none!important;border-radius:0!important;background:none!important;}
body.pd-lite .pd-specs tr:nth-child(even),
body.pd-lite .pd-desc-body table tr:nth-child(even){background:rgba(20,12,8,.045)!important;}
body.pd-lite .pd-specs th,body.pd-lite .pd-desc-body table th{
  font-family:var(--f-disp)!important;font-weight:700!important;color:var(--ink)!important;background:none!important;letter-spacing:0!important;
}
body.pd-lite .pd-specs td,body.pd-lite .pd-desc-body table td{font-family:var(--f-disp)!important;color:var(--ink-soft)!important;}

/* ════════════════════════════════════════════════════════════
   BỘ FONT CỬA HÀNG — SF PRO DISPLAY · 03/06
   Bộ font hoàn chỉnh (Light→Black) từ folder FONT/. Sang trọng kiểu
   Apple, nét thẳng, cực dễ đọc, KHÔNG cong queo — hỗ trợ đầy đủ
   tiếng Việt. Self-host woff2 (subset Latin+Việt ~55KB/weight).
   Áp cho TOÀN TRANG CỬA HÀNG: sw-home (Cửa Hàng) + pd-lite (Chi
   tiết SP, Giỏ). Trang thương hiệu giữ serif cinematic.
   ════════════════════════════════════════════════════════════ */
@font-face{font-family:'SF Pro Display';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/SFProDisplay-Light.woff2') format('woff2');}
@font-face{font-family:'SF Pro Display';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/SFProDisplay-Regular.woff2') format('woff2');}
@font-face{font-family:'SF Pro Display';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/SFProDisplay-Medium.woff2') format('woff2');}
@font-face{font-family:'SF Pro Display';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/SFProDisplay-Semibold.woff2') format('woff2');}
@font-face{font-family:'SF Pro Display';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/SFProDisplay-Bold.woff2') format('woff2');}
@font-face{font-family:'SF Pro Display';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/SFProDisplay-Bold.woff2') format('woff2');}
@font-face{font-family:'SF Pro Display';font-style:normal;font-weight:900;font-display:swap;src:url('../fonts/SFProDisplay-Black.woff2') format('woff2');}
/* gán bộ font cho toàn bộ trang Cửa Hàng */
body.pd-lite,body.sw-home{
  --f-disp:'SF Pro Display','Inter','Be Vietnam Pro',sans-serif;
  --f-sub:'SF Pro Display','Inter','Be Vietnam Pro',sans-serif;
  --f-store:'SF Pro Display','Inter','Be Vietnam Pro',sans-serif;
  --f-body:'SF Pro Display','Inter','Be Vietnam Pro',sans-serif;
  --f-ui:'SF Pro Display','Inter','Be Vietnam Pro',sans-serif;
}
body.pd-lite,body.sw-home,
body.pd-lite .pd-main-col,body.pd-lite .pd-buybox{
  font-family:'SF Pro Display','Inter','Be Vietnam Pro',sans-serif;
}
/* các phần tử hardcode font khác trên trang Cửa Hàng → ép về SF Pro
   (gồm chữ ký "Chạm để cảm" vốn dùng Dancing Script cong queo) */
body.pd-lite .ttf-title,body.sw-home .ttf-title,
body.pd-lite .ttf-eye,body.pd-lite .ttf-lead,body.pd-lite .ttf-link,
body.pd-lite .gh-empty-ico,body.pd-lite .pd-empty-ico{
  font-family:'SF Pro Display','Inter','Be Vietnam Pro',sans-serif!important;
}

/* ════════════════════════════════════════════════════════════
   FONT NHÓM TRANG THƯƠNG HIỆU — v3 (user chốt theo font-all) · 03/06
   HERO mỗi trang = font user chọn; tiêu đề mục = Ccc Paro (đọc tốt);
   chữ nhấn (em) = cursive theo trang (giữ gradient vàng); thân = SF Pro.
   Trang Chủ #2 Ccc Paro · VTM School #5 FR Trad · Sự Kiện #9 PL ·
   Showroom+Liên Hệ #10 TZ · Khám Phá #2 Ccc Paro (trang nền tảng).
   ════════════════════════════════════════════════════════════ */
@font-face{font-family:'Ccc Paro';font-display:swap;src:url('../fonts/CccParo.woff2') format('woff2');}
@font-face{font-family:'PW DK';font-display:swap;src:url('../fonts/PWDKLoopet.woff2') format('woff2');}
@font-face{font-family:'PW FR';font-display:swap;src:url('../fonts/PWFRTrad.woff2') format('woff2');}
@font-face{font-family:'PW PL';font-display:swap;src:url('../fonts/PWPL.woff2') format('woff2');}
@font-face{font-family:'PW TZ';font-display:swap;src:url('../fonts/PWTZ.woff2') format('woff2');}
/* nền tảng: thân bài + nhãn = SF Pro */
body.pg-home,body.pg-explore,body.pg-school,body.pg-event,body.pg-showroom,body.pg-contact{
  --f-body:'SF Pro Display','Be Vietnam Pro',sans-serif;
  --f-ui:'SF Pro Display','Be Vietnam Pro',sans-serif;
  --f-disp:'Ccc Paro','SF Pro Display',sans-serif;   /* tiêu đề/thẻ phụ → Ccc Paro (đồng bộ) */
  --f-sub:'SF Pro Display','Be Vietnam Pro',sans-serif; /* phụ đề → SF Pro (dễ đọc) */
}
/* TIÊU ĐỀ MỤC (.s-title) → Ccc Paro (đọc tốt) trên cả nhóm */
body.pg-home .s-title,body.pg-explore .s-title,body.pg-school .s-title,
body.pg-event .s-title,body.pg-showroom .s-title,body.pg-contact .s-title{
  font-family:'Ccc Paro','SF Pro Display',sans-serif!important;font-weight:400!important;letter-spacing:.004em!important;line-height:1.22!important;
}
/* HERO TITLE — font riêng mỗi trang */
body.pg-explore .ph-title{font-family:'Ccc Paro','SF Pro Display',sans-serif!important;font-weight:400!important;letter-spacing:.004em!important;}
body.pg-home .home-tagline{font-family:'Ccc Paro','SF Pro Display',sans-serif!important;font-weight:400!important;letter-spacing:.02em!important;}
/* School → font của Event (Playwrite PL) */
body.pg-school .ph-title{font-family:'PW PL','SF Pro Display',cursive!important;font-weight:400!important;letter-spacing:normal!important;line-height:1.5!important;}
/* Event → font của Câu Chuyện (Playfair Display serif, đậm) */
body.pg-event .ph-title{font-family:'Playfair Display',serif!important;font-weight:800!important;letter-spacing:.01em!important;line-height:1.16!important;}
/* Showroom + Liên Hệ → Playwrite TZ, ĐẬM HƠN bằng nét viền (faux-bold) */
body.pg-showroom .ph-title,body.pg-contact .ph-title{font-family:'PW TZ','SF Pro Display',cursive!important;font-weight:400!important;letter-spacing:normal!important;line-height:1.5!important;-webkit-text-stroke:1.8px currentColor;}
body.pg-showroom .ph-title em,body.pg-contact .ph-title em{-webkit-text-stroke:1.8px var(--gold-bright)!important;}
/* Hero School + Event: giữ 2 dòng (theo <br>), không ngắt cụt — desktop không wrap thêm, cỡ chữ co giãn để vừa */
body.pg-school .ph-title,body.pg-event .ph-title{font-size:clamp(30px,4.6vw,60px)!important;}
@media(min-width:760px){body.pg-school .ph-title,body.pg-event .ph-title{white-space:nowrap!important;}}
/* CHỮ NHẤN (em) — cursive theo trang, giữ accent vàng */
body.pg-school .s-title em,body.pg-school .ph-title em{font-family:'PW PL',cursive!important;font-weight:400!important;letter-spacing:normal!important;}
body.pg-event .s-title em,body.pg-event .ph-title em{font-family:'Dancing Script','Playfair Display',cursive!important;font-weight:700!important;letter-spacing:normal!important;}
body.pg-showroom .s-title em,body.pg-contact .s-title em,body.pg-showroom .ph-title em,body.pg-contact .ph-title em{font-family:'PW TZ',cursive!important;font-weight:400!important;letter-spacing:normal!important;}
body.pg-home .s-title em,body.pg-explore .s-title em,body.pg-explore .ph-title em{font-family:'PW DK',cursive!important;font-weight:400!important;letter-spacing:normal!important;font-style:italic;}

/* ════════════════════════════════════════════════════════════
   VTM SCHOOL — KHỐI DỮ LIỆU TỪ vietthuong.edu.vn · 03/06
   (triết lý, chương trình chi tiết, lợi ích, tin tức, thư viện ảnh)
   ════════════════════════════════════════════════════════════ */
/* triết lý 3 cấp độ */
.vts-philo{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px;}
.vts-philo .pl{background:linear-gradient(165deg,rgba(60,18,24,.4),rgba(28,8,12,.5));border:1px solid rgba(201,168,76,.2);border-radius:16px;padding:26px 22px;}
.vts-philo .pl-eye{font-family:var(--f-ui);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-bright);margin-bottom:10px;}
.vts-philo .pl-h{font-family:var(--f-disp);font-weight:700;font-size:clamp(18px,2vw,22px);color:var(--ivory);line-height:1.3;}
.vts-quote{max-width:780px;margin:30px auto 0;text-align:center;font-family:var(--f-sub);font-style:italic;font-size:clamp(17px,2.2vw,24px);line-height:1.6;color:var(--gold-cream);}
/* chương trình chi tiết */
.vts-prog{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:30px;}
.vts-prog .pg{background:linear-gradient(165deg,rgba(60,18,24,.42),rgba(28,8,12,.52));border:1px solid rgba(201,168,76,.22);border-radius:18px;padding:clamp(22px,2.6vw,34px);}
.vts-prog .pg-tag{font-family:var(--f-ui);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-bright);}
.vts-prog .pg-h{font-family:var(--f-disp);font-weight:800;font-size:clamp(22px,2.6vw,30px);color:var(--ivory);margin:8px 0 14px;line-height:1.18;}
.vts-prog .pg-p{font-size:14.5px;line-height:1.75;color:var(--ivory-dim);margin-bottom:16px;}
.vts-prog .pg-l{list-style:none;padding:0;margin:0 0 18px;}
.vts-prog .pg-l li{position:relative;padding-left:22px;margin-bottom:9px;font-size:14px;color:var(--ivory-dim);line-height:1.6;}
.vts-prog .pg-l li::before{content:"♪";position:absolute;left:0;color:var(--gold-bright);}
.vts-prog .pg-l li b{color:var(--gold-cream);font-weight:600;}
.vts-fact{display:flex;flex-wrap:wrap;gap:8px;}
.vts-fact span{font-family:var(--f-ui);font-size:11px;letter-spacing:.04em;padding:6px 12px;border-radius:30px;background:rgba(110,26,38,.22);border:1px solid rgba(201,168,76,.2);color:var(--gold-cream);}
/* lợi ích */
.vts-benefit{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:30px;}
.vts-benefit .bf{text-align:center;padding:18px 12px;border-radius:13px;background:rgba(28,8,12,.4);border:1px solid rgba(201,168,76,.16);}
.vts-benefit .bf .ic{font-size:26px;}
.vts-benefit .bf b{display:block;font-family:var(--f-disp);font-weight:700;font-size:14px;color:var(--ivory);margin-top:8px;line-height:1.3;}
/* tin tức */
.vts-news{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px;}
.vts-news a{display:flex;flex-direction:column;background:rgba(28,8,12,.4);border:1px solid rgba(201,168,76,.16);border-radius:14px;overflow:hidden;text-decoration:none;transition:transform .3s,border-color .3s;}
.vts-news a:hover{transform:translateY(-6px);border-color:rgba(240,208,112,.5);}
.vts-news .nw-img{aspect-ratio:16/10;background:#2a0c10 center/cover no-repeat;}
.vts-news .nw-b{padding:15px 16px 18px;}
.vts-news .nw-date{font-family:var(--f-ui);font-size:11px;letter-spacing:.06em;color:var(--gold-bright);}
.vts-news .nw-h{font-family:var(--f-disp);font-weight:700;font-size:15.5px;color:var(--ivory);line-height:1.35;margin:6px 0 6px;}
.vts-news .nw-p{font-size:13px;color:var(--ivory-dim);line-height:1.6;}
/* thư viện ảnh */
.vts-gallery{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:30px;}
.vts-gallery a{aspect-ratio:1/1;border-radius:11px;overflow:hidden;background:#2a0c10 center/cover no-repeat;border:1px solid rgba(201,168,76,.16);transition:transform .3s;}
.vts-gallery a:hover{transform:scale(1.05);}
@media(max-width:900px){.vts-philo,.vts-prog,.vts-news{grid-template-columns:1fr;}.vts-benefit{grid-template-columns:repeat(2,1fr);}.vts-gallery{grid-template-columns:repeat(3,1fr);}}