/* Trang chủ web shop (giống trang chủ web cũ choxiufilm.com). */

/* Banner */
.tc-banner{background:var(--xanh-nhat-2);padding:10px 0 0}
.tc-banner-luoi{display:grid;grid-template-columns:550fr 295fr;gap:30px;align-items:start}
.tc-bn-chinh img{width:100%;height:auto;aspect-ratio:759/423;object-fit:cover;border-radius:4px}
.tc-bn-phu{display:grid;gap:8px}
.tc-bn-phu img{width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;border-radius:6px}

/* Vòng nhóm hàng */
.tc-nhom{background:var(--xanh-nhat-2);padding:16px 0 22px}
.tc-nhom-dau{display:flex;justify-content:flex-end;margin-bottom:14px}
.tc-nhom-ds{gap:22px}
.tc-nhom-muc{flex:0 0 134px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.tc-nhom-anh{width:134px;height:134px;border-radius:50%;overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.03)}
.tc-nhom-anh img{width:100%;height:100%;object-fit:cover}
.tc-nhom-anh .anh-trong{border-radius:50%;background:#E3E6EA}
.tc-nhom-ten{font-size:14px;color:var(--chu);white-space:nowrap}
.tc-nhom-muc:hover .tc-nhom-ten{color:var(--chinh)}

/* Hàng trượt ngang dùng chung */
.truot-boc{position:relative}
.truot{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.truot::-webkit-scrollbar{display:none}
.truot>*{scroll-snap-align:start}
.truot-nut{position:absolute;top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:50%;border:1px solid var(--ke);background:#fff;color:var(--chu);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 8px rgba(17,19,21,.12);z-index:2}
.truot-nut.sau{right:-6px}
.truot-nut.lui{left:-6px}
.tc-nhom .truot-nut{top:67px}

/* Sản phẩm mới nhất */
.tc-moi-khoi{margin-top:14px;margin-bottom:6px}
.tc-moi{background:var(--xanh-nhat);border-radius:var(--r);padding:14px 14px 14px}
.tc-moi-dau{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;padding-right:18px}
.tc-moi-nhan{border-radius:var(--r-nut)}
.tc-moi-ds{gap:10px}
.tc-moi-ds>.sp-the{flex:0 0 calc((100% - 40px) / 5);border-radius:var(--r-nut)}
.tc-moi-ds>.sp-the .sp-anh{border:1px solid var(--ke);border-radius:4px}

/* Thẻ giữ chỗ khi đang tải */
.sp-the.giu .sp-anh{background:var(--xam);border:0}
.giu-dong{height:12px;border-radius:4px;background:var(--xam);margin-top:12px}
.giu-dong.ngan{width:50%}
.sp-the.giu{animation:giu 1.2s ease-in-out infinite alternate}
@keyframes giu{to{opacity:.55}}

/* Danh sách theo nhóm */
.tieude-khoi .nhan-khoi a{color:#fff}
.tc-xem-them{display:flex;justify-content:center;margin-top:12px}
.tc-xem-them .nut{min-width:212px;font-weight:500;gap:14px}
.tc-loi{text-align:center;color:var(--chu-3);padding:24px 16px}
.tc-loi a{color:var(--chinh);text-decoration:underline}

/* Khối giới thiệu */
.tc-gt{background:var(--xanh-nhat-3);padding:34px 0 20px}
.tc-gt-tieude{font:600 28px/1.25 var(--f-tieude);color:var(--chu-dam);text-align:center}
.tc-gt-mo{margin:8px 0 22px;text-align:center;color:var(--chu-2)}
.tc-gt-luoi{display:grid;grid-template-columns:1fr 300px 1fr;gap:16px;align-items:center}
.tc-gt-anh img{width:100%;height:auto;border-radius:var(--r)}
.tc-gt-cot{display:grid;gap:20px}
.tc-gt-cot.phai{align-self:start;margin-top:22px}
.tc-gt-o{position:relative;background:var(--xam);border-radius:var(--r);padding:16px 14px 18px}
.tc-gt-o h3{font:600 15px/1.3 var(--f);color:var(--chinh);margin:0 0 6px}
.tc-gt-o p{margin:0;color:var(--chu-3);font-size:13px;line-height:1.55}
.tc-gt-ic{position:absolute;top:50%;width:44px;height:44px;margin-top:-22px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px #fff}
.trai .tc-gt-o{padding-right:40px}
.trai .tc-gt-ic{right:-30px}
.phai .tc-gt-o{padding-left:40px}
.phai .tc-gt-ic{left:-30px}

@media (max-width:1023px){
  .tc-moi-ds>.sp-the{flex-basis:calc((100% - 30px) / 4)}
  .tc-gt-luoi{grid-template-columns:1fr 240px 1fr}
}
@media (max-width:767px){
  .tc-banner{padding-top:10px}
  .tc-banner-luoi{grid-template-columns:1fr;gap:8px}
  .tc-bn-phu{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:8px;margin:0 -16px;padding:0 16px;scrollbar-width:none}
  .tc-bn-phu::-webkit-scrollbar{display:none}
  .tc-bn-phu>*{flex:0 0 82%;scroll-snap-align:center}
  .tc-nhom{padding:10px 0 18px}
  .tc-nhom-ds{gap:14px}
  .tc-nhom-muc{flex-basis:96px}
  .tc-nhom-anh{width:84px;height:84px}
  .tc-nhom-ten{font-size:13px;max-width:96px;overflow:hidden;text-overflow:ellipsis}
  .tc-nhom .truot-nut{top:42px}
  .truot-nut.sau{right:-4px}
  .truot-nut.lui{left:-4px}
  .tc-moi-khoi{padding:0}
  .tc-moi{border-radius:0;padding:12px 12px 14px}
  .tc-moi-dau{padding-right:0}
  .tc-moi-ds>.sp-the{flex-basis:calc((100% - 10px) / 2.15)}
  .tc-gt-tieude{font-size:24px}
  .tc-gt-luoi{grid-template-columns:1fr;gap:14px}
  .tc-gt-anh{order:-1;max-width:200px;margin:0 auto}
  .tc-gt-cot.phai{margin-top:0}
  .tc-gt-cot{gap:14px}
  .trai .tc-gt-o,.phai .tc-gt-o{padding:14px 14px 14px 68px}
  .trai .tc-gt-ic,.phai .tc-gt-ic{left:12px;right:auto}
}