/* Box goi y PDP (common/ymal-box). Theo chuan gia cua site (printblur-card.css: ten 14/20 #222 2 dong, gia #c52c29 500,
   gia gach #6b6b6b) + rating gon "4.6 ★ (122)" #525252 cua box Best Selling /explore. Nhan % OFF o goc anh, cung tong do voi gia;
   rating nam CUNG hang gia (khong ton them 1 hang). */
.ymal-wrap{margin:24px 0}
.ymal-section{margin-bottom:28px}
.ymal-title{font-size:22px;font-weight:600;line-height:1.3;margin:0 0 14px;color:#0a0a0a}
/* so cot theo be rong THAT cua khung (cot trai PDP hep tren may tinh bang), the >= 176px de hang gia khong bi cat */
.ymal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:20px 16px}
.ymal-item{display:flex;flex-direction:column;min-width:0;container-type:inline-size}
.ymal-link{display:block;color:#222;text-decoration:none}
.ymal-img{position:relative;display:block;aspect-ratio:1/1;background:#f5f5f5;border-radius:8px;overflow:hidden}
.ymal-img img{display:block;width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply}
.ymal-name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-overflow:ellipsis;word-break:break-word;
  margin:6px 0 2px;font-family:Roboto,Arial,sans-serif;font-size:14px;line-height:20px;font-weight:400;letter-spacing:.01em;color:#222;
  min-height:40px;max-height:40px}
.ymal-off{position:absolute;top:8px;right:8px;font-size:12px;font-weight:600;line-height:16px;color:#fff;background:#c52c29;border-radius:4px;padding:2px 6px;white-space:nowrap}
.ymal-price{margin-top:auto;display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;padding-top:2px;height:24px;box-sizing:content-box}
.ymal-price-now{flex:0 0 auto;font-size:16px;line-height:22px;font-weight:500;color:#c52c29}
/* gia gach trong khung cao 1 dong co flex-wrap: thieu cho -> roi xuong dong 2 (bi an), khong hien nua chu */
.ymal-old-wrap{flex:1 1 0;min-width:0;display:flex;flex-wrap:wrap;align-items:center;height:22px;overflow:hidden}
.ymal-old-gap{width:0;height:22px}
.ymal-price-old{font-size:13px;line-height:22px;color:#6b6b6b;text-decoration:line-through}
.ymal-rating{flex:0 0 auto;margin-left:auto;display:inline-flex;align-items:center;gap:3px;font-size:13px;line-height:18px;color:#525252}
.ymal-rating-value{font-weight:500}
.ymal-star{flex:0 0 13px}
.ymal-hub-list{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.ymal-hub-list li a{display:inline-block;padding:6px 12px;border:1px solid #ddd;border-radius:16px;font-size:14px;color:#333;text-decoration:none}
.ymal-link:focus-visible,.ymal-hub-list li a:focus-visible{outline:2px solid #a7165c;outline-offset:2px;border-radius:8px}
@media (min-width:1181px) and (hover:hover){
  .ymal-link:hover .ymal-name{color:#a7165c;text-decoration:underline}
  .ymal-link:hover .ymal-img img{transform:scale(1.03)}
  .ymal-img img{transition:transform .2s ease}
  .ymal-hub-list li a:hover{border-color:#a7165c;color:#a7165c}
}
/* may tinh bang / PC nho: cot trai PDP chi ~350-570px -> the toi thieu 160px de iPad mini van 2 cot (176px chi ra 1 cot 354px) */
@media (min-width:641px) and (max-width:1180px){
  .ymal-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
}
/* dien thoai: vuot ngang (2,2 the moi man hinh) thay vi 6 hang doc; moi link van nam san trong HTML */
@media (max-width:640px){
  .ymal-title{font-size:18px;margin-bottom:10px}
  .ymal-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:44%;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px}
  .ymal-grid::-webkit-scrollbar{display:none}
  .ymal-item{scroll-snap-align:start}
  .ymal-name{font-size:13px;line-height:18px;min-height:36px;max-height:36px}
  .ymal-price{gap:4px}
  .ymal-price-now{font-size:15px}
  .ymal-price-old{font-size:12px}
  .ymal-rating{font-size:12px;gap:2px}
  .ymal-off{top:6px;right:6px;font-size:11px;line-height:14px;padding:2px 5px}
}
/* dat cuoi file de thang co chu cua @media dien thoai o tren */
/* the hep (dien thoai nho): chu nho lai 1px de gia + rating luon vua; gia gach tu an khi khong du cho (nhan % OFF o goc anh van con) */
@container (max-width:150px){.ymal-price{gap:3px}.ymal-price-now{font-size:14px}.ymal-rating{font-size:11px;gap:2px}}