/* Web Sao Kim Studio — trang trong (dịch vụ x3 / Kho giao diện / mẫu giao diện / liên hệ). Tiền tố ski- */
.ski-h2 { font-size: 36px; line-height: 1.2; font-weight: 800; letter-spacing: -.015em; margin: 0 0 8px; color: var(--c2); }
.ski p { color: var(--mu); }
/* hero dịch vụ: khối chàm trái + ảnh phải */
.ski-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 440px; background: var(--c2); }
.ski-hero-l { position: relative; background: var(--c2); clip-path: polygon(0 0, 100% 0, 86% 100%, 0 100%); margin-right: -12%; z-index: 1; display: flex; align-items: center; justify-content: flex-end; }
.ski-hero-t { width: 100%; max-width: 640px; padding: 40px 60px 40px 20px; box-sizing: border-box; }
.ski-hero .b9i-crumb, .ski-hero .b9i-crumb a, .ski-hero .b9i-crumb em { color: rgba(255,255,255,.85) !important; }
.ski-hero h1 { color: #fff; font-size: 50px; line-height: 1.15; font-weight: 800; margin: 18px 0 16px; letter-spacing: -.02em; }
.ski-hero p { color: rgba(255,255,255,.9); font-size: 18px; line-height: 1.55; margin: 0 0 28px; }
.ski-hero .ski-bw { background: var(--c1); border-color: var(--c1); }
.ski-hero-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* dải tiêu đề (cửa hàng/liên hệ) */
.ski-band, .ski-in .b9i-band { background: var(--c2); color: #fff; }
.ski-in .b9i-band { text-align: center; padding: 30px 0 22px; }
.ski-in .b9i-band .b9-w { display: flex; flex-direction: column; align-items: center; }
.ski-in .b9i-band-t { color: #fff; order: 1; margin: 0 0 8px; font-size: 44px; }
.ski-in .b9i-band-s { color: rgba(255,255,255,.88); order: 2; font-size: 17px; }
.ski-in .b9i-crumb { order: 3; margin-top: 12px; justify-content: center; }
.ski-in .b9i-crumb, .ski-in .b9i-crumb a, .ski-in .b9i-crumb em, .ski-band .b9i-crumb, .ski-band .b9i-crumb a, .ski-band .b9i-crumb em { color: rgba(255,255,255,.85) !important; }
.ski-in.single-product .b9i-crumb, .ski-in.single-product .b9i-crumb a { color: var(--mu) !important; }
.ski-in.single-product .b9i-crumb em { color: var(--c1) !important; }
.ski-band-l { padding: 30px 0 40px; }
.ski-band h1 { color: #fff; font-size: 54px; line-height: 1.15; font-weight: 800; margin: 14px 0 10px; letter-spacing: -.02em; }
.ski-band p { color: rgba(255,255,255,.9); font-size: 19px; margin: 0; }
/* cửa hàng */
.ski-in .b9i-fh { color: var(--c2); }
.ski-in .b9-pc-t a { color: var(--c2); }
.ski-in .b9i-pc .b9-pc-img { --pc-ar: 4 / 3.3; --pc-pad: 0px; background: #f4f6fa; border-bottom: 1px solid var(--line); }
.ski-in .b9i-pc .b9-pc-img img { object-fit: cover; object-position: 50% 0; }
.ski-in .b9-pc-p { font-size: 15px; color: var(--mu); font-weight: 400; }
.ski-in .b9-pc-p::before { content: "Giá: "; }
.ski-in .b9-pc-ct { font-size: 15px; }
/* SP (mẫu giao diện) */
.ski-in .b9i-pd-main { aspect-ratio: 4 / 3.2; background: #f4f6fa; }
.ski-in .b9i-pd-main img { width: 100%; height: 100%; object-fit: contain; }
.ski-in .b9i-pd-k { background: none; color: var(--c1); padding: 0; font-size: 13px; }
.ski-in .b9i-pd-t { color: var(--c2); font-size: 34px; }
.ski-in .b9i-pd-price { font-size: 17px; color: var(--mu); font-weight: 500; }
.ski-in .b9i-pd-price .b9i-pd-ct { color: var(--c1); font-size: 24px; font-weight: 700; }
.ski-in .b9i-pd-price::before { content: "Giá thiết kế: "; }
.ski-in .b9i-desc-img { aspect-ratio: 4 / 3.2; background: #f4f6fa; }
.ski-in .b9i-desc-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
/* thẻ liên hệ */
.ski-cform h2 { font-size: 30px; color: var(--c2); }
.ski-ccol h2 { color: var(--c2); margin-bottom: 4px; }
.ski-ccol > p { margin: 0 0 18px; }
.ski-cc { display: flex; gap: 18px; align-items: center; background: #f1f5fd; border-radius: 8px; padding: 18px 20px; margin-bottom: 12px; }
.ski-cc i { width: 54px; height: 54px; border-radius: 8px; background: #dfe8fa; display: flex; align-items: center; justify-content: center; flex: none; }
.ski-cc i .b9-ic { width: 28px; height: 28px; color: var(--c1); }
.ski-cc small { display: block; color: var(--c2); font-size: 15px; font-weight: 700; }
.ski-cc a { color: var(--c1) !important; font-size: 21px; font-weight: 700; overflow-wrap: anywhere; }
.ski-cc span { color: var(--ink); font-size: 16.5px; }
.ski-cc .ski-sm { font-size: 14.5px; color: var(--mu); }
.ski-sec { font-size: 13.5px; display: flex; gap: 6px; align-items: center; margin: 10px 0 0; }
.ski-mapw { background: #f1f5fd; }
.ski-faqw .b9i-qa summary { color: var(--c2); }
.ski-faqw .b9i-faq h2 { color: var(--c2); }
.ski-form { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 40px; border: 1px solid var(--line); border-radius: var(--r); padding: 34px 36px; background: #fff; }
.ski-fl { display: flex; gap: 12px; align-items: center; color: var(--c1) !important; font-weight: 700; font-size: 20px; margin-top: 14px; }
.ski-fl .b9-ic { width: 26px; height: 26px; }
.ski-sub { width: 100%; min-height: 46px; }
.ski-formw { background: #f6f8fc; }
@media (min-width: 850px) and (max-width: 1199px) { .ski-hero h1 { font-size: 40px; } .ski-hero-t { padding-right: 70px; } }
@media (max-width: 849px) {
  .ski-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .ski-hero-img { order: -1; height: 240px; }
  .ski-hero-l { clip-path: none; margin: 0; }
  .ski-hero-t { padding: 24px 16px 30px; }
  .ski-hero h1, .ski-band h1 { font-size: 32px; }
  .ski-in .b9i-band-t { font-size: 32px; }
  .ski-h2 { font-size: 26px; }
  .ski-form { grid-template-columns: minmax(0, 1fr); padding: 22px 16px; gap: 20px; }
  .ski-cc a { font-size: 17px; }
}
.ski-in .b9i-pd-main img { object-fit: cover; object-position: 50% 0; }
/* ruler:manual 10-10 */
@media (min-width: 1200px) {
  .ski-hero-t { max-width: 740px; padding-right: 50px; }
  .ski-hero h1 { font-size: 52px; }
  .ski-in .b9i-pc .b9-pc-t { font-size: 19px; }
}
@media (max-width: 849px) { .ski-cc a[href^="mailto"] { font-size: 15.5px; } }