/* yensao3 — sửa lỗi demo 10-05 (kit14). Nạp sau cùng (astra/zz-fix1005.css). */
/* logo: dòng phụ ::after trong LUỒNG (lưới 2 hàng) thay vì absolute bottom:0 — trước bị header cắt/đè (text_overlap, LESSONS 311) */
#header #logo a { display: grid !important; grid-template-columns: 76px auto; grid-template-rows: auto auto; column-gap: 14px; row-gap: 7px; align-items: center; padding-bottom: 0 !important; line-height: 1 !important; }
#header #logo a::before { grid-row: 1 / span 2; grid-column: 1; align-self: center; }
#header #logo a::after { position: static !important; grid-column: 2; grid-row: 2; display: block; line-height: 1.1; text-align: center; white-space: nowrap; align-self: start; }
@media (max-width: 849px) {
  #header #logo a { grid-template-columns: 54px auto; column-gap: 10px; row-gap: 5px; font-size: 19px !important; }
  #header #logo a::before { width: 54px; height: 38px; }
  #header #logo a::after { font-size: 9px; letter-spacing: .08em; }
  /* nền thuỷ mặc 2400x600 phủ khối cao 1300-1600px trên mobile = phóng x2.3-2.7 -> đặt nguyên ảnh ở đáy khối, nền kem */
  .section-bg:has(img.bg[src*="sh-ink"]) { background-color: var(--ys-cream); }
  .section-bg img.bg[src*="sh-ink"] { object-fit: contain !important; object-position: 50% 100% !important; }
}
/* trang SP: mô tả ngắn lặp nguyên văn tab Mô tả -> ẩn (đã có danh sách thông số) */
.ysi-sum .ysi-short { display: none; }
.ysi-call { justify-content: center; }
.ysi-ask p a { font-weight: 600; }
/* thẻ SP: ảnh vuông nền kem — khung luôn vuông, không cắt */
.ysi-gmain { aspect-ratio: 1 / 1; background: #F7F3EE; } .ysi-gmain img { width: 100%; height: 100%; object-fit: contain !important; }
.ysi-gth a { background: #F7F3EE; } .ysi-gth img { object-fit: contain !important; }
.ys-cimg { background: #F7F3EE; }
/* hero màn rộng (>= 1700): ảnh tràn full-width làm bát yến giữa ảnh chạy vào dưới chữ (2560: chữ đè ảnh) -> ảnh neo phải, rộng 50%+760px, mép trái hoà nền kem */
@media (min-width: 1700px) {
  .ys-hero > .section-bg { background-color: #F3ECE1; }
  .ys-hero > .section-bg img.bg { left: auto !important; right: 0; width: calc(50% + 760px) !important; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%); mask-image: linear-gradient(90deg, transparent 0, #000 12%); }
}