/* --- Container [USED: 41] ------------------------------------------------- */
.container {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 768px)  { .container { width: 750px; } }
@media (min-width: 992px)  { .container { width: 970px; } }
@media (min-width: 1200px) { .container { width: 1170px; } }

/* --- Row [USED: 32] + clearfix [USED: 28] -------------------------------- */
.row {
  margin-left: -15px;
  margin-right: -15px;
}
.row::before, .row::after,
.clearfix::before, .clearfix::after,
.container::before, .container::after {
  content: " ";
  display: table;
}
.row::after,
.clearfix::after,
.container::after {
  clear: both;
}

/* --- Column base (padding/position) -------------------------------------
   Liệt kê tường minh đúng như Bootstrap 3 (KHÔNG dùng [class*="col-"]): markup
   có các class khác chứa chuỗi "col-" nhưng KHÔNG phải grid — cart-col-1,
   cart-col-2, col-right, col-title, col-12, col-xl-6 (cú pháp BS4, BS3 không
   định nghĩa). Selector wildcard sẽ áp nhầm padding/position lên chúng → đổi
   layout. Danh sách tường minh tránh đúng lỗi đó. */
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6,
.col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12,
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6,
.col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12,
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
.col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12,
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6,
.col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}

/* --- col-xs-* (mọi breakpoint, float trái) ------------------------------- */
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6,
.col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
  float: left;
}
.col-xs-12 { width: 100%; }
.col-xs-11 { width: 91.66666667%; }
.col-xs-10 { width: 83.33333333%; }
.col-xs-9  { width: 75%; }            /* [USED: 2] */
.col-xs-8  { width: 66.66666667%; }
.col-xs-7  { width: 58.33333333%; }
.col-xs-6  { width: 50%; }
.col-xs-5  { width: 41.66666667%; }
.col-xs-4  { width: 33.33333333%; }
.col-xs-3  { width: 25%; }            /* [USED: 2] */
.col-xs-2  { width: 16.66666667%; }
.col-xs-1  { width: 8.33333333%; }
/* col-xs-12 [USED: 22] */

/* --- col-sm-* (≥768) ----------------------------------------------------- */
@media (min-width: 768px) {
  .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6,
  .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
    float: left;
  }
  .col-sm-12 { width: 100%; }         /* [USED: 9] */
  .col-sm-11 { width: 91.66666667%; }
  .col-sm-10 { width: 83.33333333%; }
  .col-sm-9  { width: 75%; }
  .col-sm-8  { width: 66.66666667%; } /* [USED: 1] */
  .col-sm-7  { width: 58.33333333%; }
  .col-sm-6  { width: 50%; }          /* [USED: 4] */
  .col-sm-5  { width: 41.66666667%; }
  .col-sm-4  { width: 33.33333333%; } /* [USED: 1] */
  .col-sm-3  { width: 25%; }
  .col-sm-2  { width: 16.66666667%; }
  .col-sm-1  { width: 8.33333333%; }
}

/* --- col-md-* (≥992) + offset ------------------------------------------- */
@media (min-width: 992px) {
  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
  .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    float: left;
  }
  .col-md-12 { width: 100%; }         /* [USED: 8] */
  .col-md-11 { width: 91.66666667%; }
  .col-md-10 { width: 83.33333333%; } /* [USED: 3] */
  .col-md-9  { width: 75%; }
  .col-md-8  { width: 66.66666667%; } /* [USED: 1] */
  .col-md-7  { width: 58.33333333%; }
  .col-md-6  { width: 50%; }          /* [USED: 2] */
  .col-md-5  { width: 41.66666667%; }
  .col-md-4  { width: 33.33333333%; } /* [USED: 1] */
  .col-md-3  { width: 25%; }
  .col-md-2  { width: 16.66666667%; }
  .col-md-1  { width: 8.33333333%; }
  .col-md-offset-1 { margin-left: 8.33333333%; } /* [USED: 3] */
}

/* --- col-lg-* (≥1200) ---------------------------------------------------- */
@media (min-width: 1200px) {
  .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6,
  .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
    float: left;
  }
  .col-lg-12 { width: 100%; }         /* [USED: 18] */
  .col-lg-11 { width: 91.66666667%; }
  .col-lg-10 { width: 83.33333333%; }
  .col-lg-9  { width: 75%; }
  .col-lg-8  { width: 66.66666667%; }
  .col-lg-7  { width: 58.33333333%; }
  .col-lg-6  { width: 50%; }          /* [USED: 2] */
  .col-lg-5  { width: 41.66666667%; }
  .col-lg-4  { width: 33.33333333%; }
  .col-lg-3  { width: 25%; }
  .col-lg-2  { width: 16.66666667%; }
  .col-lg-1  { width: 8.33333333%; }
}

/* --- Responsive hidden helpers (khớp Bootstrap 3, giữ !important) --------- */
@media (max-width: 767px) {
  .hidden-xs { display: none !important; }          /* [USED: 3] */
}
@media (min-width: 768px) and (max-width: 991px) {
  .hidden-sm { display: none !important; }          /* [USED: 4] */
}
@media (min-width: 992px) and (max-width: 1199px) {
  .hidden-md { display: none !important; }          /* [USED: 6] */
}
@media (min-width: 1200px) {
  .hidden-lg { display: none !important; }          /* [USED: 4] */
}

/* --- Utilities dùng trong markup ---------------------------------------- */
/* .hidden [USED: 32] — toggle display của site (JS/Liquid). Bắt buộc !important
   để thắng display của component (vd .box-variant.clearfix{display:table}). */
.hidden { display: none !important; }

.text-left   { text-align: left; }    /* [USED: 2] */
.text-right  { text-align: right; }   /* [USED: 2] */
.text-center { text-align: center; }  /* [USED: 8] */

.pull-left  { float: left !important; }  /* [USED: 1] */
.pull-right { float: right !important; } /* [USED: 1] */

.center-block {                        /* [USED: 9] */
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.img-responsive {                      /* [USED: 10] */
  display: block;
  max-width: 100%;
  height: auto;
}

.sr-only {                             /* [USED: 3] */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}