@charset "utf-8";.boxinfo{padding:15px;border-radius:4px;margin:20px 0;background:#ecfcff;border:2px dashed #008da6;list-style-type:disclosure-closed}
.clbanthongso h2 {margin: 0!important;}
.container {border: none;}
.event-sale { margin-bottom: 10px; box-shadow: 1px 5px 10px #c7c7c7; }
.event-sale img{border-radius:5px}
.box-urlsub { display: block; width: 100%; justify-content: left; padding: 5px 5px 7px 5px; padding-left: 10px; background: #e9fffe; margin-bottom: 20px; }
.box-urlsub ul { display: inline-flex ; }
.box-urlsub > span { padding: 2px 5px; }
.box-urlsub li span { padding: 4px 5px 0px 7px; color: #000; }
.box-urlsub li {clear: both;display: contents;float: left;}
.box-urlsub li a { color: #001c5c; font-weight: 600; }
.box-urlsub > a { color: #1e1e1edc; font-weight: 500; }
.box-urlsub > a:hover { color: #0058ffdc; font-weight: 600; transition: unset; }
.box-urlsub a,.box-urlsub span{font-size:14px}
.box-flex-column{width:100%;display:flex;flex-direction:column}
.box-flex-row{display:flex;flex-wrap:wrap;justify-content:space-between}
.box-flex{display:flex;flex-wrap:wrap}
.col20{width:18.5%}
.col25{width:24%}
.col30{width:28.5%}
.col35{width:32%}
.col40{width:38.5%}
.col50{width:48.5%}
.col60{width:58.5%}
.col70{width:68.5%}
.col80{width:78.5%}
.col90{width:88.5%}
.col100{width:100%}
.tab-content, .tab-content-1 {display: none;}
.giamgiasp {
    background: #b20a00;
    padding: 1px 5px;
    margin: 0px 0px;
    height: fit-content;
    color: #ffffff;
    border: 2px solid red;
}
.product-tab .tab-container{padding-left:5px;z-index:1}

.title-tab-container {position: relative;padding-left: 15px!important;}
.title-tab-container:before {content: "";position: absolute;background: linear-gradient(-24deg, #42ffe5, #ff5947, #ff0092);width: 8px;left: 0;top: 0;height: 100%;border-radius: 3px;}
.title-tab-container span { font-size: 16px; color: #000000; display: block; font-weight: 600; text-transform: uppercase; }


.box-sphead24h{background:linear-gradient(90deg,#cafaff,#b0f4ff);padding:20px 15px;margin-bottom: 20px; border:3px solid #fff;border-radius:10px;box-shadow:3px 8px 15px #c3c3c3}
.sphead24h-info { width: 68%; padding: 12px 0 0 15px; }
.title-sphead24h{font-size:24px;text-transform:uppercase;color:#212121;font-weight:600}
.sphead24h-img{width:32%;background:#dcf9ff;border-radius:15px;border-left:2px solid #ff6a00;border-top:2px solid #ff6a00;border-right:2px solid #ffbc00;border-bottom:2px solid #ffbc00;padding:5px;display:flex;align-items:center}
.sphead24h-img img{box-shadow:-3px 6px 16px #a9a9a9;border:5px solid #fff;border-radius:10px}
.boxgia-sphead24h{display:flex;flex-wrap:wrap;justify-content:start;margin:8px 0; position: relative;}
.product-desc.text-sphead{background:#fff;margin:12px -5px;padding:10px;border-radius:5px;    font-size: 14px; box-shadow:0 0 3px #aaa}
.spct-head{background:linear-gradient(180deg,#fefff3,#fefff3,#fefff3,#f2ffff,#f1fffd);padding:10px}
.product-image{background:#fff}
.spct-headright{margin-top:10px}
.giagoc-1{margin:5px 10px;display:block;text-decoration:line-through;color:#247b8f;font-style:normal}
.giaban-1{background:blue;padding:5px 8px;font-size:16px;font-weight:600;color:#ffff;border-radius:3px}
.giaban-1 span{color:#f9ff00}
.info-orther p{margin-bottom:6px}
.boidam-yellow{background:#ffc100;color:#000;padding:3px 5px;border-radius:2px;text-transform:capitalize}
.product-tab .active, .product-tab-1 .active {display: block!important;}
.nav-tab-1 .active { background: #ffe000; font-weight: 600; }
.nav-tab-1 button { text-align: left; padding: 5px 3px; text-transform: uppercase; font-size: 13px; }
.nav-tab-1 button:not(.nav-tab-1 button:last-child) { border-bottom: 1px solid #efde9f; }
.nav-tab-1 { display: flex; flex-wrap: wrap; background: linear-gradient(90deg, #fffcdf, #fffdda); padding: 5px;margin-bottom: 10px; box-shadow: 0px 2px 4px #d4d4d4; border-left: 5px solid #ffdf70; border-radius: 5px; }
.nav-tab-1 button:first-child {width: 100%;font-size: 16px;text-align: center;}
.nav-tab-1 button:not(.nav-tab-1 button:first-child) { width: 50%; border-bottom: none; text-align: center; margin-top: 6px; }
.nav-tab-1 button:nth-child(2) {border-right: 1px solid #faa100;}

.nav-tab { display: flex; background: #fff6c8; }
.nav-tab button { text-transform: uppercase; padding: 10px; font-size: 14px; color: #000f33; }
.nav-tab button:not(.nav-tab button:last-child) { border-right: 1px solid #ffd200; }
.nav-tab .active {background: #ffe000;}
#btn-toggle-dm{display:none}
.box-danhmuc { display: block; background: #fff; margin: 0px 0 10px 0px; padding: 5px; border-radius: 10px; border: 1px dashed #ffb500; }
.title-danhmuc { background: linear-gradient(90deg, #ffd400, #ffee00); padding: 5px; border-radius: 5px 5px 0 0; color: #000; text-align: center; text-transform: uppercase; font-weight: 600; font-size: 15px; }
.list-danhmuc { padding: 3px; padding-top: 0; height: 800px; overflow-y: scroll; }
.list-danhmuc li:not(.list-danhmuc li:last-child) { margin: 8px 0; border-bottom: 1px dotted #aaa; padding-bottom: 6px; }
.list-danhmuc a {font-size: 13px;}
.list-danhmuc li:hover a{color:#be0000;margin-left:10px;transition:.3s all ease;font-weight:600}
.btn-toggle-dm{display:none}
.line-bottom{display:block;width:30%;margin:0 0 10px;border-color:#0043ff;border-style:double;border-width:thin}
.bodyleft{width:865px;float:left;height:fit-content}
.bodyright{width:300px;float:left;height:fit-content}
.bodyleft img{max-width:100%}
.bodyright img{max-width:100%}
.box-sp70{padding-left:15px}
.pos-fixed{position:fixed!important}
.box-sp100{display:block;position:relative;margin:8px 0;padding:10px;border:1px dashed #00adff;border-radius:10px}
.live-view-sp100{position:absolute;top:0;right:0}
.l-product-box {background: #ffe000;padding: 10px;}
.box-sp100-tab{background:#fff;padding:5px;border-radius:10px;width:24%;margin:5px 0}
.box-sp100-tab:hover{transform:scale(1.015);transition:.5s all ease;box-shadow:0 0 15px #b29400}
.sp100-tab-img img{border:1px solid #ffbc00;border-radius:13px}
.sp100-tab-img img:hover{transform:none}
.title-sp100-tab { font-size: 13px; text-transform: capitalize; font-weight: 600; margin: 8px 0 5px; min-height: 35px; border-bottom: 1px dashed #0032bf; }
.title-sp100-tab a{color:#272727}
.title-sp100-tab a:hover, .title-sp100 a:hover { color: #0055da; }
.giakm-sp100,.giakm-sp100-tab{font-size:15px;color:#c90000;font-weight:800}
.giatt-sp100, .giatt-sp100-tab { font-style: oblique; font-size: 13px; text-decoration: line-through; color: #525252; }
.title-list-sp100 { font-size: 26px; text-transform: uppercase; font-weight: 600; border-left: 10px solid #0072ff; padding-left: 8px; padding-top: 4px; margin: 35px 0; color: #000000; clear: both; }
.title-list-sp100 a { color: #363636; }
.title-sp100 { font-size: 13px; font-weight: 600; text-transform: capitalize; margin: 10px 0 5px; min-height: 30px; }
.title-sp100 a{color:#00316d}
.title-sp100 a:hover{color:#e10000}
.box-sp100 img, .box-sp100-tab img {width: 100%;}
.title-tin100{font-size:15px;font-weight:600;border-bottom:2px solid #005aff;padding-bottom:5px}
.list-danhmuc ul { padding: 10px; padding-top: 0; list-style-type: disclosure-closed; color: #ff3c00; margin-left: 10px; }

.baireview table {width: 100%!important;}

.box-tronbo .title-tronbo span { font-size: 22px; position: relative; padding-left: 15px; color: #00432f; }
.box-tronbo .title-tronbo span:before { content: ""; background: linear-gradient(45deg, #00a3ff, #beff00); width: 8px; height: 90%; position: absolute; top: 0; left: 0; }
.chitiet-tronbo li { font-size: 14px; font-weight: 600; color: #242424; background: #ffd200; width: fit-content; margin-bottom: 8px; padding: 3px 8px; border-radius: 15px 0px; }
.giakm-tronbo span { background: linear-gradient(45deg, #ff006f, #ff0000); color: #ffffff; padding: 3px 10px; font-size: 24px; border-radius: 5px; }
.info-other-tronbo {color: #0011db;font-weight: 500;}
@media (min-width:992px) and (max-width: 1199px){
.title-sphead24h{font-size:20px}
.box-tronbo .title-tronbo span{font-size: 20px;}
.title-tab-container span{font-size:18px;}
.product-desc.text-sphead {font-size: 13px;}
.box-urlsub a, .box-urlsub span { font-size: 13px; }
}
@media(max-width: 1199px){
    .nav-tab-1 button {font-size: 12px;}
}

@media (max-width: 991px){.title-danhmuc{font-size:12px}
.list-danhmuc li{font-size:12px}
.list-danhmuc ul { padding: 3px;}
.nav-tab-1 li{width:100%;margin-bottom:10px}
.sticky30{position:unset;margin-top:20px}
.box-sp70{padding-left:0}
.title-list-sp100{font-size:20px}
.box-flex-row{justify-content:space-around}
.title-sp100-tab{min-height:45px}
.title-sp100{font-weight:600;margin:7px 0 5px}
.title-sp100,.title-sp100-tab,.giatt-sp100,.giatt-sp100-tab, .nav-tab button{font-size:13px}
.nav-tab-1{flex-direction:row;justify-content:space-between}
.title-sphead24h, .title-tab-container span{font-size:16px}
.product-desc.text-sphead, .box-urlsub a, .box-urlsub span, .list-danhmuc a {font-size: 12px;}

}
@media (min-width:768px) and (max-width: 991px){
.box-tronbo .title-tronbo span{font-size: 18px;}
}
@media (max-width:767px){
    
.box-danhmuc{display:none}
.box-danhmuc-fixed{position:fixed;z-index:9;top:45px;left:inherit}
.btn-danhmuc { left: inherit; top: 50px; z-index: 99; background: #e5e5e5; padding: 3px 12px; margin: 4px 9px; color: #282828; border-radius: 5px; border: 1px solid #b0b0b0; }
.box-danhmuc-fixed{width:80%}
.box-spct {padding: 0 5px !important;}
.box-sphead24h{margin-top:-10px}
.title-sphead24h{font-size:15px;text-align:center}
.boxgia-sphead24h{flex-direction:column; margin-bottom: 0px}
.sphead24h-img{width:100%;height: 460px; margin:5px 0 15px;justify-content:center}
.sphead24h-img img{border-radius:10px;width:100%;padding:0;display:block}
.sphead24h-info{width:100%;padding:0}
#columns{padding:0 0 30px}
.title-list-sp100{font-size:20px}
.box-list-sp-tab{padding:10px}
.box-sp100-tab{width:48%;margin:0 0 10px}
.title-sp100, .title-sp100-tab, .giatt-sp100, .giatt-sp100-tab, .nav-tab button {font-size: 12px;}
.title-sp100-tab{min-height:40px}
.giakm-sp100,.giakm-sp100-tab{font-size:17px}
.col20,.col30,.col40,.col50,.col60,.col70,.col80,.col90{width:100%}
.col25{width:48.5%}
.title-sp100{font-size:15px}
.giamgiasp {width: fit-content;position: absolute;right: 38px;bottom: 4px;z-index: 9999;font-size: 12px;margin-top: 3px;border-radius: 5px;}
.box-urlsub a,.box-urlsub span{font-size:12px}
.box-urlsub li:last-child { font-family: 'Font Awesome 5 Free';}
.box-urlsub li:last-child a:after { content: "\f0da"; color: #000; padding-left: 5px; }
.box-urlsub {margin-top: 10px;}
.box-urlsub > span { display: none; }

.l-product-box {padding: 0;}

.title-tab-container{padding:0;margin:10px 0}
.title-tab-container span{font-size:16px}
.box-sp100 img,.box-sp100-tab img{display:block;margin:auto}
.event-sale{display:none}
.title-danhmuc { font-size: 13px; padding: 8px; }
.box-tronbo .title-tronbo span{font-size: 16px;}
.chitiet-tronbo li {font: 13px;}
.giakm-tronbo span {font-size: 18px;}
}
@media (max-width:610px){.sphead24h-img{height: 400px;}}
@media (max-width:500px){.sphead24h-img{height: 330px;}}

@media (max-width:480px){.box-danhmuc-relativ{width:100%}
.box-danhmuc-fixed{width:80%}
.nav-tab-1 a{font-size:11px}
.nav-tab-1 li a{color:#333332;font-weight:500;padding-left:6px;font-size:12px}
.box-list-sp-tab{padding:10px 5px}
.title-sp100-tab{min-height:35px;margin:12px 0 5px}
.giakm-sp100,.giakm-sp100-tab{font-size:14px}
.title-sp100,.title-sp100-tab,.giatt-sp100,.giatt-sp100-tab{font-size:12px}
.title-list-sp100{font-size:15px;margin:11px 0;border-left:6px solid #0072ff}
.col30{width:100%}
.title-sphead24h{display:block}
.nav-tab button {padding: 5px;}
.box-urlsub ul { display: contents; }
}
@media (max-width:450px){.sphead24h-img{height: 300px;}}
@media (max-width:400px){.sphead24h-img{height: 250px;}}
@media (max-width:350px){.sphead24h-img{height: 200px;}}
@media (max-width:300px){.sphead24h-img{height: 150px;}}



/* ========BỘ CAMERA========= */



:root {
  --cam-bg: #ffffff;
  --cam-border: #e8e8ee;
  --cam-muted: #58627a;
  --cam-title: #0b3d91;
  --cam-shadow: 0 8px 24px rgba(13, 38, 76, 0.12);
  --radius: 14px;
}
.highlight {
  background: linear-gradient(135deg, #0b3d91, #1d5ed7);
  text-align: center;
  color: #fff;
}
.giabanspct strong {
    color: #000000;
    background: yellow;
    padding: 5px 25px;
    border-radius: 25px;
}
.giabanspct {
    font-size: 30px !important;
}
.box-bocamera .title-price {
    text-align: center !important;
    font-size: 30px !important;
    display: block;
    border-bottom: 1px dashed;
    width: fit-content;
    margin: auto;
    margin-bottom: 10px;
}
.btn-lienhespct {
    color: #0030a0;
    background: azure;
    padding: 5px 10px;
    border-radius: 3px;
}
/* Container của section */
#combo.box-bocamera,
.box-bocamera {
  padding: 30px 20px;
  max-width: 1180px;
  margin: 0 auto;
}

/* Tiêu đề */
#combo.box-bocamera > h2, .box-bocamera > h2 {
    margin: 0;
    font-size: 22px;
    margin-bottom: 20px;
    line-height: 1.25;
    color: #000000;
    text-align: center;
    letter-spacing: .2px;
}

/* Lưới sản phẩm (mobile: 1 cột) */
.bocamera {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 20px;
}

/* Card từng thành phần trong combo */
.bocamera-info {
  background: var(--cam-bg);
  border: 1px solid var(--cam-border);
  border-radius: var(--radius);
  padding: 16px;
  text-align: center;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  will-change: transform, box-shadow;
}

/* Ảnh sản phẩm */
.bocamera-info img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 4/3;           /* giữ tỉ lệ đẹp khi thiếu ảnh */
  object-fit: cover;
  border-radius: calc(var(--radius) - 6px);
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  margin-bottom: 12px;
}

/* Tiêu đề card */
.bocamera-info h3 {
  font-size: 18px;
  text-align: center!important;
  margin: 6px 0 6px;
  font-weight: 700;
  color: #1c2430;
}

/* Mô tả card */
.bocamera-info p {
  font-size: 14px;
  color: var(--cam-muted);
  margin: 0;
}

/* Hover/focus cho desktop, vẫn mượt trên mobile */
.bocamera-info:hover,
.bocamera-info:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--cam-shadow);
  border-color: #cfd7e6;
}

/* =======================
   Breakpoints
=======================*/

/* ≥ 576px: mobile lớn */
@media (min-width: 576px) {

  .bocamera { gap: 18px; }
}

/* ≥ 768px: tablet dọc → 2 cột */
@media (min-width: 768px) {
  #combo.box-bocamera > h2,
  .box-bocamera > h2 { font-size: 24px; }

  .bocamera {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: 24px;
  }

  .bocamera-info { padding: 15px; }
  .bocamera-info h3 { font-size: 19px; }
  .bocamera-info p { font-size: 15px; }
}

/* ≥ 1024px: desktop vừa → 3 cột */
@media (min-width: 1024px) {
  .bocamera {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
  }

  .bocamera-info { padding: 20px; }
  .bocamera-info h3 { font-size: 20px; }
  .bocamera-info p { font-size: 15px; }
}

/* ≥ 1280px: desktop rộng, tăng nhịp điệu & bóng */
@media (min-width: 1280px) {
  .bocamera { gap: 24px; }
  .bocamera-info { box-shadow: 0 6px 18px rgba(13,38,76,.06); }
}

/* Thiết bị nhỏ đặc biệt ≤ 360px */
@media (max-width: 360px) {
  #combo.box-bocamera > h2,
  .box-bocamera > h2 { font-size: 20px; }

  .bocamera-info h3 { font-size: 16.5px; }
  .bocamera-info p { font-size: 13.5px; }
}

@media (max-width: 767px) {
    .bocamera {gap: 0;}
    .giabanspct, .box-bocamera .title-price {
    font-size: 20px !important;
}
#combo.box-bocamera > h2, .box-bocamera > h2 {
    font-size: 18px;
}
}