@charset "UTF-8";
/* ==========  VARIABLES  ========== */
/* ==========  COMMON  ========== */
html {
  font-size: 1em;
  line-height: 1.5;
  width: 100%;
  height: 100%;
  -ms-touch-action: manipulation;
  touch-action: manipulation; }

body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  background: #000; }
  body.menu-toggled {
    overflow-y: hidden; }

* {
  box-sizing: border-box; }

main {
  display: block; }

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none; }

::selection {
  background: #b3d4fc;
  text-shadow: none; }

a:focus, button:focus {
  outline: none; }

audio, canvas, iframe, img, svg, video {
  vertical-align: middle; }

textarea {
  resize: vertical; }

img, iframe {
  max-width: 100%;
  max-height: 25%; }

h1, h2, h3, h4, h5, h6, p {
  margin: 0;
  padding: 0;
  font-weight: 400; }

ul {
  padding: 0;
  margin: 0;
  list-style-type: none !important; }

.text-color--success {
  color: #3c763d; }

.text-color--danger {
  color: #a94442; }

.clearfix::after {
  display: block;
  clear: both;
  content: ""; }

.ega-color--initial {
  color: initial !important; }

.ega-btn {
  display: inline-block;
  padding: 5px 20px;
  border-radius: 20px;
  border: 1px solid transparent;
  -webkit-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out; }

.ega-btn-color {
  color: #fff; }
  .ega-btn-color--outline {
    background-color: transparent; }
    .ega-btn-color--outline:hover {
      color: #fff; }

/* ==========  HELPERS  ========== */
.ega-hidden {
  display: none !important; }

.ega-inline-block {
  display: inline-block !important; }

.ega-block {
  display: block !important; }

@media (min-width: 576px) {
  .ega-hidden--sm {
    display: none !important; } }

@media (min-width: 768px) {
  .ega-hidden--md {
    display: none !important; } }

@media (min-width: 992px) {
  .ega-hidden--lg {
    display: none !important; } }

@media (min-width: 1200px) {
  .ega-hidden--xl {
    display: none !important; } }

@media (min-width: 576px) {
  .ega-inline-block--sm {
    display: inline-block !important; } }

@media (min-width: 768px) {
  .ega-inline-block--md {
    display: inline-block !important; } }

@media (min-width: 992px) {
  .ega-inline-block--lg {
    display: inline-block !important; } }

@media (min-width: 1200px) {
  .ega-inline-block--xl {
    display: inline-block !important; } }

@media (min-width: 576px) {
  .ega-block--sm {
    display: block !important; } }

@media (min-width: 768px) {
  .ega-block--md {
    display: block !important; } }

@media (min-width: 992px) {
  .ega-block--lg {
    display: block !important; } }

@media (min-width: 1200px) {
  .ega-block--xl {
    display: block !important; } }

@media (min-width: 576px) {
  .ega-flex--sm {
    display: flex !important; } }

@media (min-width: 768px) {
  .ega-flex--md {
    display: flex !important; } }

@media (min-width: 992px) {
  .ega-flex--lg {
    display: flex !important; } }

@media (min-width: 1200px) {
  .ega-flex--xl {
    display: flex !important; } }

/* ==========  TYPOGRAPHY  ========== */
html, body {
  font-family: "Montserrat", "Helvetica", "Arial", sans-serif; }

p {
  font-weight: 400;
  letter-spacing: 0;
  margin-bottom: 16px; }

a {
  text-decoration: none; }

/* ==========  GRID  ========== */
.ega-container {
  padding-left: 15px;
  padding-right: 15px;
  width: 100%;
  margin: 0 auto; }
  .ega-container--fluid {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto; }
  @media (min-width: 576px) {
    .ega-container {
      max-width: 540px; } }
  @media (min-width: 768px) {
    .ega-container {
      max-width: 720px; } }
  @media (min-width: 992px) {
    .ega-container {
      max-width: 960px; } }
  @media (min-width: 1200px) {
    .ega-container {
      max-width: 1140px; } }

.ega-row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px; }

.ega-col, [class*=ega-col-] {
  padding-left: 15px;
  padding-right: 15px; }

/** Break point **/
/** Collumn **/
.ega-col {
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%; }

.ega-col-1 {
  -ms-flex: 0 0 8.33333%;
  flex: 0 0 8.33333%;
  max-width: 8.33333%; }

.ega-col-2 {
  -ms-flex: 0 0 16.66667%;
  flex: 0 0 16.66667%;
  max-width: 16.66667%; }

.ega-col-3 {
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%; }

.ega-col-4 {
  -ms-flex: 0 0 33.33333%;
  flex: 0 0 33.33333%;
  max-width: 33.33333%; }

.ega-col-5 {
  -ms-flex: 0 0 41.66667%;
  flex: 0 0 41.66667%;
  max-width: 41.66667%; }

.ega-col-6 {
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%; }

.ega-col-7 {
  -ms-flex: 0 0 58.33333%;
  flex: 0 0 58.33333%;
  max-width: 58.33333%; }

.ega-col-8 {
  -ms-flex: 0 0 66.66667%;
  flex: 0 0 66.66667%;
  max-width: 66.66667%; }

.ega-col-9 {
  -ms-flex: 0 0 75%;
  flex: 0 0 75%;
  max-width: 75%; }

.ega-col-10 {
  -ms-flex: 0 0 83.33333%;
  flex: 0 0 83.33333%;
  max-width: 83.33333%; }

.ega-col-11 {
  -ms-flex: 0 0 91.66667%;
  flex: 0 0 91.66667%;
  max-width: 91.66667%; }

.ega-col-12 {
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%; }

.ega-col-20 {
  -ms-flex: 0 0 20%;
  flex: 0 0 20%;
  max-width: 20%; }

.ega-col-30 {
  -ms-flex: 0 0 30%;
  flex: 0 0 30%;
  max-width: 30%; }

.ega-col-40 {
  -ms-flex: 0 0 40%;
  flex: 0 0 40%;
  max-width: 40%; }

.ega-col-60 {
  -ms-flex: 0 0 60%;
  flex: 0 0 60%;
  max-width: 60%; }

.ega-col-70 {
  -ms-flex: 0 0 70%;
  flex: 0 0 70%;
  max-width: 70%; }

.ega-col-80 {
  -ms-flex: 0 0 80%;
  flex: 0 0 80%;
  max-width: 80%; }

.ega-col-90 {
  -ms-flex: 0 0 90%;
  flex: 0 0 90%;
  max-width: 90%; }

@media (min-width: 576px) {
  .ega-col-sm {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%; }
  .ega-col-sm-1 {
    -ms-flex: 0 0 8.33333%;
    flex: 0 0 8.33333%;
    max-width: 8.33333%; }
  .ega-order-sm-1 {
    -ms-flex-order: 1;
    order: 1; }
  .ega-col-sm-2 {
    -ms-flex: 0 0 16.66667%;
    flex: 0 0 16.66667%;
    max-width: 16.66667%; }
  .ega-order-sm-2 {
    -ms-flex-order: 2;
    order: 2; }
  .ega-col-sm-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%; }
  .ega-order-sm-3 {
    -ms-flex-order: 3;
    order: 3; }
  .ega-col-sm-4 {
    -ms-flex: 0 0 33.33333%;
    flex: 0 0 33.33333%;
    max-width: 33.33333%; }
  .ega-order-sm-4 {
    -ms-flex-order: 4;
    order: 4; }
  .ega-col-sm-5 {
    -ms-flex: 0 0 41.66667%;
    flex: 0 0 41.66667%;
    max-width: 41.66667%; }
  .ega-order-sm-5 {
    -ms-flex-order: 5;
    order: 5; }
  .ega-col-sm-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%; }
  .ega-order-sm-6 {
    -ms-flex-order: 6;
    order: 6; }
  .ega-col-sm-7 {
    -ms-flex: 0 0 58.33333%;
    flex: 0 0 58.33333%;
    max-width: 58.33333%; }
  .ega-order-sm-7 {
    -ms-flex-order: 7;
    order: 7; }
  .ega-col-sm-8 {
    -ms-flex: 0 0 66.66667%;
    flex: 0 0 66.66667%;
    max-width: 66.66667%; }
  .ega-order-sm-8 {
    -ms-flex-order: 8;
    order: 8; }
  .ega-col-sm-9 {
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%; }
  .ega-order-sm-9 {
    -ms-flex-order: 9;
    order: 9; }
  .ega-col-sm-10 {
    -ms-flex: 0 0 83.33333%;
    flex: 0 0 83.33333%;
    max-width: 83.33333%; }
  .ega-order-sm-10 {
    -ms-flex-order: 10;
    order: 10; }
  .ega-col-sm-11 {
    -ms-flex: 0 0 91.66667%;
    flex: 0 0 91.66667%;
    max-width: 91.66667%; }
  .ega-order-sm-11 {
    -ms-flex-order: 11;
    order: 11; }
  .ega-col-sm-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%; }
  .ega-order-sm-12 {
    -ms-flex-order: 12;
    order: 12; }
  .ega-col-ten {
    -ms-flex: 0 0 10%;
    flex: 0 0 10%;
    max-width: 10%; }
  .ega-col-sm-20 {
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%; }
  .ega-col-sm-30 {
    -ms-flex: 0 0 30%;
    flex: 0 0 30%;
    max-width: 30%; }
  .ega-col-sm-40 {
    -ms-flex: 0 0 40%;
    flex: 0 0 40%;
    max-width: 40%; }
  .ega-col-sm-60 {
    -ms-flex: 0 0 60%;
    flex: 0 0 60%;
    max-width: 60%; }
  .ega-col-sm-70 {
    -ms-flex: 0 0 70%;
    flex: 0 0 70%;
    max-width: 70%; }
  .ega-col-sm-80 {
    -ms-flex: 0 0 80%;
    flex: 0 0 80%;
    max-width: 80%; }
  .ega-col-sm-90 {
    -ms-flex: 0 0 90%;
    flex: 0 0 90%;
    max-width: 90%; } }

@media (min-width: 768px) {
  .ega-col-md {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%; }
  .ega-col-md-1 {
    -ms-flex: 0 0 8.33333%;
    flex: 0 0 8.33333%;
    max-width: 8.33333%; }
  .ega-order-md-1 {
    -ms-flex-order: 1;
    order: 1; }
  .ega-col-md-2 {
    -ms-flex: 0 0 16.66667%;
    flex: 0 0 16.66667%;
    max-width: 16.66667%; }
  .ega-order-md-2 {
    -ms-flex-order: 2;
    order: 2; }
  .ega-col-md-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%; }
  .ega-order-md-3 {
    -ms-flex-order: 3;
    order: 3; }
  .ega-col-md-4 {
    -ms-flex: 0 0 33.33333%;
    flex: 0 0 33.33333%;
    max-width: 33.33333%; }
  .ega-order-md-4 {
    -ms-flex-order: 4;
    order: 4; }
  .ega-col-md-5 {
    -ms-flex: 0 0 41.66667%;
    flex: 0 0 41.66667%;
    max-width: 41.66667%; }
  .ega-order-md-5 {
    -ms-flex-order: 5;
    order: 5; }
  .ega-col-md-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%; }
  .ega-order-md-6 {
    -ms-flex-order: 6;
    order: 6; }
  .ega-col-md-7 {
    -ms-flex: 0 0 58.33333%;
    flex: 0 0 58.33333%;
    max-width: 58.33333%; }
  .ega-order-md-7 {
    -ms-flex-order: 7;
    order: 7; }
  .ega-col-md-8 {
    -ms-flex: 0 0 66.66667%;
    flex: 0 0 66.66667%;
    max-width: 66.66667%; }
  .ega-order-md-8 {
    -ms-flex-order: 8;
    order: 8; }
  .ega-col-md-9 {
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%; }
  .ega-order-md-9 {
    -ms-flex-order: 9;
    order: 9; }
  .ega-col-md-10 {
    -ms-flex: 0 0 83.33333%;
    flex: 0 0 83.33333%;
    max-width: 83.33333%; }
  .ega-order-md-10 {
    -ms-flex-order: 10;
    order: 10; }
  .ega-col-md-11 {
    -ms-flex: 0 0 91.66667%;
    flex: 0 0 91.66667%;
    max-width: 91.66667%; }
  .ega-order-md-11 {
    -ms-flex-order: 11;
    order: 11; }
  .ega-col-md-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%; }
  .ega-order-md-12 {
    -ms-flex-order: 12;
    order: 12; }
  .ega-col-ten {
    -ms-flex: 0 0 10%;
    flex: 0 0 10%;
    max-width: 10%; }
  .ega-col-md-20 {
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%; }
  .ega-col-md-30 {
    -ms-flex: 0 0 30%;
    flex: 0 0 30%;
    max-width: 30%; }
  .ega-col-md-40 {
    -ms-flex: 0 0 40%;
    flex: 0 0 40%;
    max-width: 40%; }
  .ega-col-md-60 {
    -ms-flex: 0 0 60%;
    flex: 0 0 60%;
    max-width: 60%; }
  .ega-col-md-70 {
    -ms-flex: 0 0 70%;
    flex: 0 0 70%;
    max-width: 70%; }
  .ega-col-md-80 {
    -ms-flex: 0 0 80%;
    flex: 0 0 80%;
    max-width: 80%; }
  .ega-col-md-90 {
    -ms-flex: 0 0 90%;
    flex: 0 0 90%;
    max-width: 90%; } }

@media (min-width: 992px) {
  .ega-col-lg {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%; }
  .ega-col-lg-1 {
    -ms-flex: 0 0 8.33333%;
    flex: 0 0 8.33333%;
    max-width: 8.33333%; }
  .ega-order-lg-1 {
    -ms-flex-order: 1;
    order: 1; }
  .ega-col-lg-2 {
    -ms-flex: 0 0 16.66667%;
    flex: 0 0 16.66667%;
    max-width: 16.66667%; }
  .ega-order-lg-2 {
    -ms-flex-order: 2;
    order: 2; }
  .ega-col-lg-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%; }
  .ega-order-lg-3 {
    -ms-flex-order: 3;
    order: 3; }
  .ega-col-lg-4 {
    -ms-flex: 0 0 33.33333%;
    flex: 0 0 33.33333%;
    max-width: 33.33333%; }
  .ega-order-lg-4 {
    -ms-flex-order: 4;
    order: 4; }
  .ega-col-lg-5 {
    -ms-flex: 0 0 41.66667%;
    flex: 0 0 41.66667%;
    max-width: 41.66667%; }
  .ega-order-lg-5 {
    -ms-flex-order: 5;
    order: 5; }
  .ega-col-lg-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%; }
  .ega-order-lg-6 {
    -ms-flex-order: 6;
    order: 6; }
  .ega-col-lg-7 {
    -ms-flex: 0 0 58.33333%;
    flex: 0 0 58.33333%;
    max-width: 58.33333%; }
  .ega-order-lg-7 {
    -ms-flex-order: 7;
    order: 7; }
  .ega-col-lg-8 {
    -ms-flex: 0 0 66.66667%;
    flex: 0 0 66.66667%;
    max-width: 66.66667%; }
  .ega-order-lg-8 {
    -ms-flex-order: 8;
    order: 8; }
  .ega-col-lg-9 {
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%; }
  .ega-order-lg-9 {
    -ms-flex-order: 9;
    order: 9; }
  .ega-col-lg-10 {
    -ms-flex: 0 0 83.33333%;
    flex: 0 0 83.33333%;
    max-width: 83.33333%; }
  .ega-order-lg-10 {
    -ms-flex-order: 10;
    order: 10; }
  .ega-col-lg-11 {
    -ms-flex: 0 0 91.66667%;
    flex: 0 0 91.66667%;
    max-width: 91.66667%; }
  .ega-order-lg-11 {
    -ms-flex-order: 11;
    order: 11; }
  .ega-col-lg-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%; }
  .ega-order-lg-12 {
    -ms-flex-order: 12;
    order: 12; }
  .ega-col-ten {
    -ms-flex: 0 0 10%;
    flex: 0 0 10%;
    max-width: 10%; }
  .ega-col-lg-20 {
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%; }
  .ega-col-lg-30 {
    -ms-flex: 0 0 30%;
    flex: 0 0 30%;
    max-width: 30%; }
  .ega-col-lg-40 {
    -ms-flex: 0 0 40%;
    flex: 0 0 40%;
    max-width: 40%; }
  .ega-col-lg-60 {
    -ms-flex: 0 0 60%;
    flex: 0 0 60%;
    max-width: 60%; }
  .ega-col-lg-70 {
    -ms-flex: 0 0 70%;
    flex: 0 0 70%;
    max-width: 70%; }
  .ega-col-lg-80 {
    -ms-flex: 0 0 80%;
    flex: 0 0 80%;
    max-width: 80%; }
  .ega-col-lg-90 {
    -ms-flex: 0 0 90%;
    flex: 0 0 90%;
    max-width: 90%; } }

@media (min-width: 1200px) {
  .ega-col-xl {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%; }
  .ega-col-xl-1 {
    -ms-flex: 0 0 8.33333%;
    flex: 0 0 8.33333%;
    max-width: 8.33333%; }
  .ega-order-xl-1 {
    -ms-flex-order: 1;
    order: 1; }
  .ega-col-xl-2 {
    -ms-flex: 0 0 16.66667%;
    flex: 0 0 16.66667%;
    max-width: 16.66667%; }
  .ega-order-xl-2 {
    -ms-flex-order: 2;
    order: 2; }
  .ega-col-xl-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%; }
  .ega-order-xl-3 {
    -ms-flex-order: 3;
    order: 3; }
  .ega-col-xl-4 {
    -ms-flex: 0 0 33.33333%;
    flex: 0 0 33.33333%;
    max-width: 33.33333%; }
  .ega-order-xl-4 {
    -ms-flex-order: 4;
    order: 4; }
  .ega-col-xl-5 {
    -ms-flex: 0 0 41.66667%;
    flex: 0 0 41.66667%;
    max-width: 41.66667%; }
  .ega-order-xl-5 {
    -ms-flex-order: 5;
    order: 5; }
  .ega-col-xl-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%; }
  .ega-order-xl-6 {
    -ms-flex-order: 6;
    order: 6; }
  .ega-col-xl-7 {
    -ms-flex: 0 0 58.33333%;
    flex: 0 0 58.33333%;
    max-width: 58.33333%; }
  .ega-order-xl-7 {
    -ms-flex-order: 7;
    order: 7; }
  .ega-col-xl-8 {
    -ms-flex: 0 0 66.66667%;
    flex: 0 0 66.66667%;
    max-width: 66.66667%; }
  .ega-order-xl-8 {
    -ms-flex-order: 8;
    order: 8; }
  .ega-col-xl-9 {
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%; }
  .ega-order-xl-9 {
    -ms-flex-order: 9;
    order: 9; }
  .ega-col-xl-10 {
    -ms-flex: 0 0 83.33333%;
    flex: 0 0 83.33333%;
    max-width: 83.33333%; }
  .ega-order-xl-10 {
    -ms-flex-order: 10;
    order: 10; }
  .ega-col-xl-11 {
    -ms-flex: 0 0 91.66667%;
    flex: 0 0 91.66667%;
    max-width: 91.66667%; }
  .ega-order-xl-11 {
    -ms-flex-order: 11;
    order: 11; }
  .ega-col-xl-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%; }
  .ega-order-xl-12 {
    -ms-flex-order: 12;
    order: 12; }
  .ega-col-ten {
    -ms-flex: 0 0 10%;
    flex: 0 0 10%;
    max-width: 10%; }
  .ega-col-xl-20 {
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%; }
  .ega-col-xl-30 {
    -ms-flex: 0 0 30%;
    flex: 0 0 30%;
    max-width: 30%; }
  .ega-col-xl-40 {
    -ms-flex: 0 0 40%;
    flex: 0 0 40%;
    max-width: 40%; }
  .ega-col-xl-60 {
    -ms-flex: 0 0 60%;
    flex: 0 0 60%;
    max-width: 60%; }
  .ega-col-xl-70 {
    -ms-flex: 0 0 70%;
    flex: 0 0 70%;
    max-width: 70%; }
  .ega-col-xl-80 {
    -ms-flex: 0 0 80%;
    flex: 0 0 80%;
    max-width: 80%; }
  .ega-col-xl-90 {
    -ms-flex: 0 0 90%;
    flex: 0 0 90%;
    max-width: 90%; } }

/* ==========  MIXINS  ========== */
/** END GLOBAL CSS **/
/** SALE PAGE **/
.button__action {
  display: inline-block;
  background: #eee;
  padding: 5px 20px;
  border-radius: 20px;
  color: initial;
  -webkit-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out; }
  @media (max-width: 767px) {
    .button__action {
      font-size: 12px; } }
  .button__action:hover {
    color: #fff; }

header {
  text-align: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  height: 50px;
  padding: 5px 0;
  transform: translate3d(0px, -50px, 0px);
  -webkit-transition: transform .3s;
  /* Safari */
  transition: transform .3s;
  background-color: rgba(22, 22, 22, 0.5); }
  header.fixed_header {
    transform: translate3d(0px, 0px, 0px); }
  header #back-to-home {
    position: absolute;
    top: 0;
    left: 0;
    color: #fff;
    font-size: 30px;
    height: 50px;
    line-height: 50px;
    width: 50px; }
  header #logo img {
    height: 40px; }

.home-banner {
  position: relative;
  width: 100%;
  min-height: 300px;
  /* THÊM KHỐI NÀY ĐỂ BẮT ẢNH NỀN PHẢI TRÀN 100% */
  /* Style cho cái tiêu đề đếm ngược */
  /* Style cho khối chứa đồng hồ */ }
  .home-banner img {
    width: 100%;
    height: auto;
    display: block; }
  @media (max-width: 767px) {
    .home-banner {
      min-height: 100px; } }
  .home-banner #countdown {
    position: absolute;
    bottom: 50px;
    left: 20%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    /* Thu nhỏ còn 28% kích thước gốc */
    transform: scale(0.5);
    -webkit-transform: scale(0.5);
    /* Điểm neo thu nhỏ là ở giữa đáy */
    transform-origin: bottom center;
    -webkit-transform-origin: bottom center;
    margin: 0;
    display: inline-block;
    width: auto;
    /* Cho phép khối này chứa cả Title và Clock */
    display: flex !important;
    flex-direction: column !important;
    /* Xếp dọc: Title trên, Clock dưới */
    align-items: center !important;
    z-index: 20; }
    @media (max-width: 1024px) {
      .home-banner #countdown {
        width: 620px; } }
    @media (max-width: 768px) {
      .home-banner #countdown {
        bottom: 80px; } }
  .home-banner #countdown-title {
    color: #fff !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    text-align: center !important;
    white-space: nowrap !important;
    /* Không cho xuống dòng */
    margin-bottom: 15px !important;
    /* Khoảng cách với đồng hồ */
    margin-top: 0 !important;
    /* Đổ bóng chữ để nổi trên nền banner */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8) !important;
    /* Size chữ gốc (sẽ tự nhỏ lại khi scale) */
    font-size: 28px !important;
    line-height: 1.2 !important; }
  .home-banner .countdown-clock {
    display: inline-block;
    width: auto; }
  .home-banner .next-section {
    position: absolute;
    font-size: 40px;
    color: #fff;
    bottom: 0;
    left: 50%;
    margin-left: -30px;
    font-size: 60px;
    text-shadow: #030303 0px 4px 4px;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-duration: 1.5s !important;
    animation-duration: 1.5s !important; }

.flash-hover {
  position: relative;
  display: block;
  overflow: hidden; }
  .flash-hover:before {
    position: absolute;
    z-index: 1;
    top: 0;
    left: -10%;
    width: 120%;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    content: '';
    -webkit-transition: -webkit-transform .6s;
    transition: transform .8s;
    -webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 100%, 0);
    transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 135deg) translate3d(0, 100%, 0);
    opacity: 0;
    filter: alpha(opacity=0);
    visibility: hidden;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; }
  .flash-hover:hover:before {
    -webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -100%, 0);
    transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 135deg) translate3d(0, -100%, 0);
    opacity: 1;
    filter: alpha(opacity=100);
    visibility: initial; }

.block {
  /* =============================================
   HẾT KHỐI CODE THAY THẾ
============================================= */ }
  .block--partners {
    padding: 60px 15px; }
  @media (max-width: 767px) {
    .block .ega-row {
      margin-left: -10px;
      margin-right: -10px; }
      .block .ega-row [class*=ega-col] {
        padding-left: 10px;
        padding-right: 10px; } }
  .block__title {
    position: relative;
    font-size: 48px;
    margin-bottom: 30px;
    text-align: center;
    font-weight: 700; }
    .block__title img {
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate3d(-50%, -50%, 0);
      -ms-transform: translate3d(-50%, -50%, 0);
      -o-transform: translate3d(-50%, -50%, 0);
      transform: translate3d(-50%, -50%, 0);
      opacity: .5;
      max-width: 80px; }
      @media (max-width: 767px) {
        .block__title img {
          max-width: 40px; } }
    .block__title span {
      position: relative; }
    @media (max-width: 767px) {
      .block__title {
        font-size: 25px; } }
    .block--offers .block__title {
      color: #ffffff; }
  .block__viewall {
    text-align: center; }
    .block__viewall a {
      position: relative;
      display: inline-block;
      color: #F96BAC;
      padding-right: 25px; }
      .block__viewall a:before {
        position: absolute;
        top: 4px;
        right: 0;
        opacity: .5; }
  .block__content--order {
    -ms-flex-order: 1;
    order: 1; }
  .block--top {
    padding: 0 15px 30px 15px;
    /* Style cho thẻ <a> bọc ngoài */
    /* Style mới cho ảnh: bo góc, có transition */
    /* Style mới cho caption: Nằm bên dưới, không phải overlay */ }
    .block--top .ega-row {
      justify-content: center; }
    .block--top__item {
      position: relative;
      margin-top: 30px;
      display: block;
      overflow: hidden;
      text-decoration: none;
      /* Đảm bảo không có gạch chân link */
      /* Hiệu ứng hover mới: zoom ảnh */ }
      .block--top__item:hover .block--top__img img {
        opacity: 0.9;
        transform: scale(1.05); }
    .block--top__img {
      overflow: hidden;
      border-radius: 8px;
      /* Thêm bo góc cho đẹp */ }
      .block--top__img img {
        transition: opacity 0.3s ease, transform 0.3s ease;
        width: 100%;
        /* Đảm bảo ảnh 100% */ }
    .block--top__caption {
      position: static;
      /* TẮT 'position: absolute' */
      padding: 15px 0 0 0;
      /* Chỉ cách lề trên */
      width: 100%;
      text-align: center;
      background: none;
      /* TẮT nền đen */
      /* Lấy màu tiêu đề chung */
      /* Ẩn nút 'XEM NGAY' */ }
      .block--top__caption h3 {
        /* Style tiêu đề mới */
        margin-bottom: 0;
        /* Bỏ margin 20px cũ */
        font-size: 18px;
        font-weight: 600;
        color: inherit;
        /* Lấy màu từ cha (đã set ở trên) */ }
      .block--top__caption .button__action {
        display: none; }
  .block--offers {
    background: #000000;
    position: relative; }

.offer__item {
  display: block;
  padding-left: 15px;
  padding-right: 15px; }

.offer__slider {
  padding-top: 70px; }

.partner__slider {
  padding-top: 70px; }

.partner__item {
  padding-left: 15px;
  padding-right: 15px; }

.partner__img img {
  box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.175); }

.product {
  position: relative;
  display: block;
  background: #ffffff;
  margin-bottom: 30px;
  text-align: center;
  border: 1px solid transparent; }
  @media (max-width: 767px) {
    .product {
      margin-bottom: 20px; } }
  .product__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: initial;
    margin-bottom: 10px; }
    @media (max-width: 767px) {
      .product__title {
        font-size: 12px; } }
  .product__info {
    padding: 15px; }
    @media (max-width: 767px) {
      .product__info {
        padding: 5px; } }
  .product__price {
    margin-bottom: 10px; }
    @media (max-width: 767px) {
      .product__price {
        font-size: 12px; } }
    .product__price ins {
      color: #ed0c0c;
      text-decoration: none; }
    .product__price del {
      color: #999; }
  .product__sale {
    position: absolute;
    width: 80px;
    text-align: center;
    top: 0;
    right: 0;
    padding: 5px;
    background: #ed0c0c;
    color: #fff; }
    @media (max-width: 767px) {
      .product__sale {
        width: 42px;
        font-size: 12px; }
        .product__sale .triangle {
          display: none; } }
    .product__sale .triangle {
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
      height: 60px;
      overflow: hidden; }
      .product__sale .triangle--left {
        z-index: 1; }
        .product__sale .triangle--left:before {
          top: 0;
          left: 10px;
          border-left: 80px solid rgba(0, 0, 0, 0.2);
          border-bottom: 30px solid transparent; }
        .product__sale .triangle--left:after {
          left: 0;
          border-left: 80px solid #ed0c0c;
          border-bottom: 20px solid transparent; }
      .product__sale .triangle--right:before {
        top: 10px;
        left: 0;
        border-right: 80px solid rgba(0, 0, 0, 0.2);
        border-bottom: 20px solid transparent; }
      .product__sale .triangle--right:after {
        left: 0;
        border-right: 80px solid #ed0c0c;
        border-bottom: 20px solid transparent; }
      .product__sale .triangle:before, .product__sale .triangle:after {
        position: absolute;
        width: 0;
        height: 0;
        content: "";
        top: 0; }
  .product__label {
    position: absolute;
    width: 50px;
    text-align: center;
    top: 0;
    right: 0;
    padding: 5px;
    background: #ed0c0c;
    color: #fff; }
    @media (max-width: 767px) {
      .product__label {
        width: 42px;
        font-size: 12px; } }
    .product__label--soldout {
      width: auto;
      top: 0;
      left: 0;
      right: auto; }

/* ===============================================
   FIX MÀU FOOTER COPYRIGHT (ĐỒNG BỘ MÀU)
=============================================== */
footer {
  /* 1. Đảm bảo màu chữ chính là màu trắng (hoặc màu bạn chọn trong setting) */
  color: #F96BAC !important;
  white-space: nowrap !important;
  /* 2. Quan trọng: Ép đường link (thẻ a) phải theo màu của cha nó */
  /* 3. Căn giữa và padding cho đẹp */
  text-align: center;
  font-size: 10px; }
  footer a {
    color: inherit !important;
    /* inherit = thừa hưởng màu của footer */
    text-decoration: none !important;
    /* Bỏ gạch chân nếu có */
    opacity: 0.8;
    /* Làm mờ nhẹ xíu cho tinh tế */ }
    footer a:hover {
      opacity: 1;
      /* Rê chuột vào thì sáng lên */
      color: !important;
      /* (Tùy chọn) Hover đổi màu chủ đạo */ }

/*** Owl-nav ***/
.owl-nav {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center; }
  .owl-nav [class*=owl-] {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    background: #fff;
    border-radius: 50%;
    margin: 0 5px;
    font-size: 30px;
    -webkit-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out; }
    .owl-nav [class*=owl-]:hover {
      color: #fff; }

/*** Keyframe ***/
@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0); }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0); }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none; } }

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown; }

/* Get the bourbon mixin from http://bourbon.io */
/* Reset */
.flip-clock-wrapper * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden; }

.flip-clock-wrapper a {
  cursor: pointer;
  text-decoration: none;
  color: #ccc; }

.flip-clock-wrapper a:hover {
  color: #fff; }

.flip-clock-wrapper ul {
  list-style: none; }

.flip-clock-wrapper.clearfix:before,
.flip-clock-wrapper.clearfix:after {
  content: " ";
  display: table; }

.flip-clock-wrapper.clearfix:after {
  clear: both; }

.flip-clock-wrapper.clearfix {
  *zoom: 1; }

/* Main */
.flip-clock-wrapper {
  font: normal 11px "Helvetica Neue", Helvetica, sans-serif;
  -webkit-user-select: none; }

.flip-clock-meridium {
  background: none !important;
  box-shadow: 0 0 0 !important;
  font-size: 36px !important; }

.flip-clock-meridium a {
  color: #313333; }

.flip-clock-wrapper {
  text-align: center;
  position: relative;
  width: 100%;
  margin: 1em; }

.flip-clock-wrapper:before,
.flip-clock-wrapper:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */ }

.flip-clock-wrapper:after {
  clear: both; }

/* Skeleton */
.flip-clock-wrapper ul {
  position: relative;
  float: left;
  margin: 5px;
  width: 60px;
  height: 90px;
  font-size: 80px;
  font-weight: bold;
  line-height: 87px;
  border-radius: 6px;
  background: #000; }

.flip-clock-wrapper ul li {
  z-index: 1;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  line-height: 87px;
  text-decoration: none !important; }

.flip-clock-wrapper ul li:first-child {
  z-index: 2; }

.flip-clock-wrapper ul li a {
  display: block;
  height: 100%;
  -webkit-perspective: 200px;
  -moz-perspective: 200px;
  perspective: 200px;
  margin: 0 !important;
  overflow: visible !important;
  cursor: default !important; }

.flip-clock-wrapper ul li a div {
  z-index: 1;
  position: absolute;
  left: 0;
  width: 100%;
  height: 50%;
  font-size: 80px;
  overflow: hidden;
  outline: 1px solid transparent; }

.flip-clock-wrapper ul li a div .shadow {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2; }

.flip-clock-wrapper ul li a div.up {
  -webkit-transform-origin: 50% 100%;
  -moz-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  -o-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  top: 0; }

.flip-clock-wrapper ul li a div.up:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 5;
  width: 100%;
  height: 3px;
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.4); }

.flip-clock-wrapper ul li a div.down {
  -webkit-transform-origin: 50% 0;
  -moz-transform-origin: 50% 0;
  -ms-transform-origin: 50% 0;
  -o-transform-origin: 50% 0;
  transform-origin: 50% 0;
  bottom: 0;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px; }

.flip-clock-wrapper ul li a div div.inn {
  position: absolute;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 200%;
  text-shadow: 0 1px 2px #000;
  text-align: center;
  background-color: #000000;
  border-radius: 6px;
  font-size: 70px; }

.flip-clock-wrapper ul li a div.up div.inn {
  top: 0; }

.flip-clock-wrapper ul li a div.down div.inn {
  bottom: 0; }

/* PLAY */
.flip-clock-wrapper ul.play li.flip-clock-before {
  z-index: 3; }

.flip-clock-wrapper .flip {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.7); }

.flip-clock-wrapper ul.play li.flip-clock-active {
  -webkit-animation: asd 0.5s 0.5s linear both;
  -moz-animation: asd 0.5s 0.5s linear both;
  animation: asd 0.5s 0.5s linear both;
  z-index: 5; }

.flip-clock-divider {
  float: left;
  display: inline-block;
  position: relative;
  width: 20px;
  height: 100px; }

.flip-clock-divider:first-child {
  width: 0; }

.flip-clock-dot {
  display: block;
  background: #000000;
  width: 10px;
  height: 10px;
  position: absolute;
  border-radius: 50%;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  left: 5px; }

.flip-clock-divider .flip-clock-label {
  position: absolute;
  top: -0.8em;
  right: -86px;
  color: #fff;
  text-shadow: none; }

.flip-clock-divider.minutes .flip-clock-label {
  right: -88px; }

.flip-clock-divider.seconds .flip-clock-label {
  right: -91px; }

.flip-clock-dot.top {
  top: 30px; }

.flip-clock-dot.bottom {
  bottom: 30px; }

@-webkit-keyframes asd {
  0% {
    z-index: 2; }
  20% {
    z-index: 4; }
  100% {
    z-index: 4; } }

@-moz-keyframes asd {
  0% {
    z-index: 2; }
  20% {
    z-index: 4; }
  100% {
    z-index: 4; } }

@-o-keyframes asd {
  0% {
    z-index: 2; }
  20% {
    z-index: 4; }
  100% {
    z-index: 4; } }

@keyframes asd {
  0% {
    z-index: 2; }
  20% {
    z-index: 4; }
  100% {
    z-index: 4; } }

.flip-clock-wrapper ul.play li.flip-clock-active .down {
  z-index: 2;
  -webkit-animation: turn 0.5s 0.5s linear both;
  -moz-animation: turn 0.5s 0.5s linear both;
  animation: turn 0.5s 0.5s linear both; }

@-webkit-keyframes turn {
  0% {
    -webkit-transform: rotateX(90deg); }
  100% {
    -webkit-transform: rotateX(0deg); } }

@-moz-keyframes turn {
  0% {
    -moz-transform: rotateX(90deg); }
  100% {
    -moz-transform: rotateX(0deg); } }

@-o-keyframes turn {
  0% {
    -o-transform: rotateX(90deg); }
  100% {
    -o-transform: rotateX(0deg); } }

@keyframes turn {
  0% {
    transform: rotateX(90deg); }
  100% {
    transform: rotateX(0deg); } }

.flip-clock-wrapper ul.play li.flip-clock-before .up {
  z-index: 2;
  -webkit-animation: turn2 0.5s linear both;
  -moz-animation: turn2 0.5s linear both;
  animation: turn2 0.5s linear both; }

@-webkit-keyframes turn2 {
  0% {
    -webkit-transform: rotateX(0deg); }
  100% {
    -webkit-transform: rotateX(-90deg); } }

@-moz-keyframes turn2 {
  0% {
    -moz-transform: rotateX(0deg); }
  100% {
    -moz-transform: rotateX(-90deg); } }

@-o-keyframes turn2 {
  0% {
    -o-transform: rotateX(0deg); }
  100% {
    -o-transform: rotateX(-90deg); } }

@keyframes turn2 {
  0% {
    transform: rotateX(0deg); }
  100% {
    transform: rotateX(-90deg); } }

.flip-clock-wrapper ul li.flip-clock-active {
  z-index: 3; }

/* SHADOW */
.flip-clock-wrapper ul.play li.flip-clock-before .up .shadow {
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(100%, black));
  background: linear, top, rgba(0, 0, 0, 0.1) 0%, black 100%;
  background: -o-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
  background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
  background: linear, to bottom, rgba(0, 0, 0, 0.1) 0%, black 100%;
  -webkit-animation: show 0.5s linear both;
  -moz-animation: show 0.5s linear both;
  animation: show 0.5s linear both; }

.flip-clock-wrapper ul.play li.flip-clock-active .up .shadow {
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(100%, black));
  background: linear, top, rgba(0, 0, 0, 0.1) 0%, black 100%;
  background: -o-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
  background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
  background: linear, to bottom, rgba(0, 0, 0, 0.1) 0%, black 100%;
  -webkit-animation: hide 0.5s 0.3s linear both;
  -moz-animation: hide 0.5s 0.3s linear both;
  animation: hide 0.5s 0.3s linear both; }

/*DOWN*/
.flip-clock-wrapper ul.play li.flip-clock-before .down .shadow {
  background: -moz-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, black), color-stop(100%, rgba(0, 0, 0, 0.1)));
  background: linear, top, black 0%, rgba(0, 0, 0, 0.1) 100%;
  background: -o-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
  background: -ms-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
  background: linear, to bottom, black 0%, rgba(0, 0, 0, 0.1) 100%;
  -webkit-animation: show 0.5s linear both;
  -moz-animation: show 0.5s linear both;
  animation: show 0.5s linear both; }

.flip-clock-wrapper ul.play li.flip-clock-active .down .shadow {
  background: -moz-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, black), color-stop(100%, rgba(0, 0, 0, 0.1)));
  background: linear, top, black 0%, rgba(0, 0, 0, 0.1) 100%;
  background: -o-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
  background: -ms-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
  background: linear, to bottom, black 0%, rgba(0, 0, 0, 0.1) 100%;
  -webkit-animation: hide 0.5s 0.3s linear both;
  -moz-animation: hide 0.5s 0.3s linear both;
  animation: hide 0.5s 0.2s linear both; }

@-webkit-keyframes show {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@-moz-keyframes show {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@-o-keyframes show {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes show {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@-webkit-keyframes hide {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@-moz-keyframes hide {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@-o-keyframes hide {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@keyframes hide {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

/*** Countdown on mobile ***/
/* ===============================================
   FIX ĐỒNG HỒ MOBILE (VERSION SIÊU NHỎ)
   Mục tiêu: Ép không cho vỡ dòng và thu nhỏ còn 28%
=============================================== */
/* ==========================================================================
   RESPONSIVE - CHIA TỶ LỆ SCALE CHO TỪNG MÀN HÌNH
========================================================================== */
/* --- Màn hình Siêu To (Desktop > 1600px) --- */
@media (min-width: 1600px) {
  /* Container chứa đồng hồ */
  .home-banner #countdown {
    /* Căn vị trí */
    position: absolute !important;
    bottom: 70px !important;
    /* Sát đáy banner */
    left: 43% !important;
    /* Mẹo quan trọng: Set chiều rộng cực lớn (600px) để các con số
       có đủ chỗ nằm ngang, không bị rớt dòng đè lên nhau.
       Sau đó dùng transform để thu nhỏ cả khối lại.
    */
    margin-left: -300px !important;
    /* Căn giữa (một nửa của 600px) */
    /* Thu nhỏ còn 28% kích thước gốc */
    transform: scale(0.8);
    -webkit-transform: scale(0.7);
    /* Điểm neo thu nhỏ là ở giữa đáy */
    transform-origin: bottom center;
    -webkit-transform-origin: bottom center;
    /* Đảm bảo hiển thị flex để căn giữa nội dung bên trong */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 10; }
  /* Can thiệp vào bản thân cái đồng hồ */
  .flip-clock-wrapper {
    margin: 0 auto !important;
    width: auto !important;
    padding: 0 !important; }
  /* Ẩn bớt các label (Ngày/Giờ/Phút) nếu nó làm rối mắt (Optional) */
  .flip-clock-label {
    display: none !important; } }

/* --- Màn hình Laptop chuẩn (1200px -> 1599px) --- */
@media (min-width: 1200px) and (max-width: 1599px) {
  /* Container chứa đồng hồ */
  .home-banner #countdown {
    /* Căn vị trí */
    position: absolute !important;
    bottom: 70px !important;
    /* Sát đáy banner */
    left: 43% !important;
    /* Mẹo quan trọng: Set chiều rộng cực lớn (600px) để các con số
       có đủ chỗ nằm ngang, không bị rớt dòng đè lên nhau.
       Sau đó dùng transform để thu nhỏ cả khối lại.
    */
    margin-left: -300px !important;
    /* Căn giữa (một nửa của 600px) */
    /* Thu nhỏ còn 28% kích thước gốc */
    transform: scale(0.5);
    -webkit-transform: scale(0.5);
    /* Điểm neo thu nhỏ là ở giữa đáy */
    transform-origin: bottom center;
    -webkit-transform-origin: bottom center;
    /* Đảm bảo hiển thị flex để căn giữa nội dung bên trong */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 10; }
  /* Can thiệp vào bản thân cái đồng hồ */
  .flip-clock-wrapper {
    margin: 0 auto !important;
    width: auto !important;
    padding: 0 !important; }
  /* Ẩn bớt các label (Ngày/Giờ/Phút) nếu nó làm rối mắt (Optional) */
  .flip-clock-label {
    display: none !important; } }

@media (max-width: 767px) {
  /* Container chứa đồng hồ */
  .home-banner #countdown {
    /* Căn vị trí */
    position: absolute !important;
    bottom: 10px !important;
    /* Sát đáy banner */
    left: 43% !important;
    /* Mẹo quan trọng: Set chiều rộng cực lớn (600px) để các con số
       có đủ chỗ nằm ngang, không bị rớt dòng đè lên nhau.
       Sau đó dùng transform để thu nhỏ cả khối lại.
    */
    margin-left: -300px !important;
    /* Căn giữa (một nửa của 600px) */
    /* Thu nhỏ còn 28% kích thước gốc */
    transform: scale(0.28);
    -webkit-transform: scale(0.2);
    /* Điểm neo thu nhỏ là ở giữa đáy */
    transform-origin: bottom center;
    -webkit-transform-origin: bottom center;
    /* Đảm bảo hiển thị flex để căn giữa nội dung bên trong */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 10; }
  /* Can thiệp vào bản thân cái đồng hồ */
  .flip-clock-wrapper {
    margin: 0 auto !important;
    width: auto !important;
    padding: 0 !important; }
  /* Ẩn bớt các label (Ngày/Giờ/Phút) nếu nó làm rối mắt (Optional) */
  .flip-clock-label {
    display: none !important; } }

@media (min-width: 768px) and (max-width: 1199px) {
  /* Container chứa đồng hồ */
  .home-banner #countdown {
    /* Căn vị trí */
    position: absolute !important;
    bottom: 70px !important;
    /* Sát đáy banner */
    left: 43% !important;
    /* Mẹo quan trọng: Set chiều rộng cực lớn (600px) để các con số
       có đủ chỗ nằm ngang, không bị rớt dòng đè lên nhau.
       Sau đó dùng transform để thu nhỏ cả khối lại.
    */
    margin-left: -300px !important;
    /* Căn giữa (một nửa của 600px) */
    /* Thu nhỏ còn 28% kích thước gốc */
    transform: scale(0.5);
    -webkit-transform: scale(0.5);
    /* Điểm neo thu nhỏ là ở giữa đáy */
    transform-origin: bottom center;
    -webkit-transform-origin: bottom center;
    /* Đảm bảo hiển thị flex để căn giữa nội dung bên trong */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 10; }
  /* Can thiệp vào bản thân cái đồng hồ */
  .flip-clock-wrapper {
    margin: 0 auto !important;
    width: auto !important;
    padding: 0 !important; }
  /* Ẩn bớt các label (Ngày/Giờ/Phút) nếu nó làm rối mắt (Optional) */
  .flip-clock-label {
    display: none !important; } }

/*** ega-modal ***/
.ega-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -9999;
  opacity: 0;
  -webkit-transition: opacity .15s linear;
  transition: opacity .15s linear; }
  .ega-modal.show {
    opacity: 1;
    z-index: 9999999; }
  .ega-modal__content {
    background-color: #fff;
    position: relative;
    width: auto;
    max-width: 500px;
    margin: 1.75rem auto;
    border-radius: .2rem;
    padding: 1rem;
    z-index: 1; }
    @media (max-width: 767px) {
      .ega-modal__content {
        padding: 0; } }
  .ega-modal__close {
    align-items: center;
    text-decoration: none;
    position: absolute;
    width: 30px;
    height: 30px;
    right: -12px;
    top: -12px;
    text-align: center;
    line-height: 25px;
    background-color: #444;
    color: #fff;
    font-size: 1.2rem;
    border-radius: 50%;
    border: 2px solid #fff;
    cursor: pointer; }
  .ega-modal__body {
    display: grid;
    grid-template-columns: 150px 1fr;
    grid-gap: 10px;
    align-items: center;
    text-align: right;
    padding: 20px 10px; }
    @media (max-width: 767px) {
      .ega-modal__body {
        font-size: 14px; } }

.toast .ega-modal__content {
  min-width: 300px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transition: all .4s ease-out;
  -webkit-transition: all .4s ease-out;
  -moz-transition: all .4s ease-out;
  -ms-transition: all .4s ease-out;
  -o-transition: all .4s ease-out; }

.toast.right .ega-modal__content {
  right: 10px;
  left: auto; }

.toast.top .ega-modal__content {
  top: 10px;
  transform: translateY(0);
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0); }

.toast.bottom .ega-modal__content {
  bottom: 10px;
  top: auto;
  transform: translateY(0);
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0); }

.ega-modal.toast.right .ega-modal__close {
  left: auto;
  right: -9px;
  top: -12px; }

.ega-modal.toast.right .ega-modal__content {
  transform: translateX(200px);
  top: 20px; }

.ega-modal.show.toast .ega-modal__content {
  transform: translateX(0px);
  box-shadow: 0px 7px 36px rgba(16, 42, 67, 0.15);
  border-radius: 6px;
  min-width: 300px; }

/* ===============================================
   CSS CHO BANNER NGANG (TOP BANNER) MỚI
=============================================== */
.block__top-banner {
  /* THÊM 3 DÒNG NÀY ĐỂ BÓP BANNER LẠI */
  max-width: 100%;
  /* Giới hạn chiều rộng tối đa */
  max-height: 10%;
  margin-left: auto;
  /* Căn giữa */
  margin-right: auto;
  /* Căn giữa */
  /* Code cũ vẫn giữ nguyên */
  margin-top: 30px;
  margin-bottom: 30px;
  line-height: 0;
  border-radius: 8px;
  overflow: hidden; }
  .block__top-banner img {
    width: 100%;
    height: 10%;
    display: block; }

/* ===============================================
   FIX LỆCH BANNER (TRÁI/PHẢI) VÀ SẢN PHẨM
   Mục tiêu: Luôn căn giữa banner dọc và lưới sản phẩm
   Dùng selector mạnh để "thắng" CSS của theme
=============================================== */
/* Target cái .ega-row là con trực tiếp của .block__content
  bên trong bất kỳ khối .block--deals- nào
*/
div[class*="block--deals-"] > .block__content > .ega-row {
  /* Đây là lệnh căn giữa theo chiều dọc. 
    Thêm !important để đảm bảo nó "thắng"
    CSS của theme chính (theme.css)
  */
  align-items: bottom !important;
  height: 100% !important; }

/* ===============================================
   CSS VOUCHER STYLE VÉ (TICKET STYLE)
   Giống hình: Nền kem, lõm 2 bên, mã đỏ nổi bật
=============================================== */
/* 1. Nền của cả khối (nếu muốn màu đỏ như hình thì sửa f5f5f5 thành mã màu đỏ) */
.bf-voucher-block {
  padding: 40px 0;
  background-color: #000;
  /* Bạn có thể đổi thành #990000 cho giống hình nền */
  /* --- STYLE CHO TỪNG VÉ --- */ }
  .bf-voucher-block .bf-voucher-container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 15px; }
  .bf-voucher-block .bf-voucher-title {
    font-size: 28px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 30px;
    color: #EF3FA4;
    text-transform: uppercase; }
  .bf-voucher-block .bf-voucher-item {
    position: relative;
    width: 100%;
    min-height: 140px;
    /* Chiều cao tối thiểu */
    margin-bottom: 20px;
    /* Tạo màu nền kem (#fffdf2) và hiệu ứng lõm 2 bên bằng radial-gradient */
    background: radial-gradient(circle at left, transparent 10px, #fffdf2 10px) top left/51% 100% no-repeat, radial-gradient(circle at right, transparent 10px, #fffdf2 10px) top right/51% 100% no-repeat;
    /* Đổ bóng nhẹ cho nổi */
    filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.1));
    /* Căn chỉnh nội dung */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px;
    text-align: center;
    /* --- TẠO VIỀN ĐỨT NÉT BÊN TRONG --- */
    /* --- DÒNG CHỮ "NHẬP MÃ" (TỰ ĐỘNG THÊM) --- */
    /* --- PHẦN MÃ CODE (KHỐI MÀU ĐỎ) --- */
    /* --- PHẦN MÔ TẢ (DÒNG DƯỚI CÙNG) --- */ }
    .bf-voucher-block .bf-voucher-item:after {
      content: "";
      position: absolute;
      top: 5px;
      bottom: 5px;
      left: 5px;
      right: 5px;
      border: 1px dashed #F23D87;
      /* Màu viền nâu nhạt */
      border-radius: 8px;
      pointer-events: none;
      /* Để vẫn click được nội dung bên dưới */
      /* Mask để viền cũng bị lõm theo (CSS nâng cao) */
      -webkit-mask: radial-gradient(circle at left, transparent 10px, black 11px) top left/51% 100% no-repeat, radial-gradient(circle at right, transparent 10px, black 11px) top right/51% 100% no-repeat; }
    .bf-voucher-block .bf-voucher-item:before {
      content: "NHẬP MÃ";
      /* Tự thêm chữ này vào */
      font-size: 14px;
      font-weight: 600;
      text-transform: uppercase;
      color: #333;
      margin-bottom: 8px;
      z-index: 2; }
    .bf-voucher-block .bf-voucher-item__code {
      position: relative;
      z-index: 2;
      /* Để nổi lên trên viền */
      background: linear-gradient(180deg, #e53935 0%, #c62828 100%);
      /* Gradient đỏ */
      color: #fff;
      font-size: 22px;
      font-weight: 800;
      text-transform: uppercase;
      padding: 8px 25px;
      border-radius: 6px;
      box-shadow: 0 2px 5px rgba(198, 40, 40, 0.4);
      /* Bóng đỏ */
      cursor: pointer;
      margin-bottom: 8px;
      transition: transform 0.2s;
      /* Ẩn icon copy mặc định cho giống hình (chỉ hiện khi hover nếu muốn) */ }
      .bf-voucher-block .bf-voucher-item__code .fa-clipboard {
        display: none; }
      .bf-voucher-block .bf-voucher-item__code:active {
        transform: scale(0.95);
        /* Hiệu ứng nhấn nút */ }
    .bf-voucher-block .bf-voucher-item__desc {
      position: relative;
      z-index: 2;
      font-size: 14px;
      font-weight: 700;
      color: #333;
      margin: 0; }

/* ===============================================
   CSS CHO KHỐI DANH SÁCH CỬA HÀNG
=============================================== */
.storeslist {
  padding: 0 0 30px; }

.address-map h3 {
  font-size: 16px;
  color: #333;
  background: url(//theme.hstatic.net/1000184601/1000453365/14/store-img.png?v=360) center left no-repeat;
  padding: 8px 0 8px 45px;
  background-size: contain; }

.address-map .change-quan, .address-map .change-tinh {
  width: 100%;
  border: 1px solid #d7d7d7;
  color: #333;
  text-indent: 5px;
  font-size: 14px;
  margin-top: 10px; }

.address-map .address-cont {
  height: 370px;
  overflow-y: auto;
  margin-top: 15px;
  border-top: 1px solid #f5f5f5; }

.address-map .address-cont .address-detail ul li {
  padding-left: 14px;
  border: 1px solid #f5f5f5;
  border-top: 0;
  background: #fff; }

.address-map .address-cont .address-detail ul li a {
  background-color: #fff;
  color: #444;
  display: block;
  font-size: 14px;
  line-height: 18px;
  width: 100%;
  padding: 8px 0;
  box-sizing: border-box; }

.address-map .address-cont .address-detail ul li a:before {
  content: "";
  width: 7px;
  height: 7px;
  display: inline-block;
  background: #eb0088;
  margin-right: 10px;
  border-radius: 50%; }

/* ===============================================
   SỬA LẠI CSS CHO MAP (FIX MOBILE RESPONSIVE)
=============================================== */
/* Đảm bảo div bọc ngoài 100% */
.img-map, #map-store {
  width: 100%; }

/* Dùng !important để đè width="640" và height="550" */
.img-map iframe, #map-store iframe {
  width: 100% !important;
  /* TRÊN MOBILE (Mặc định):
    Set chiều cao nhỏ lại (ví dụ 450px) 
    để không chiếm diện tích
  */
  height: 450px !important; }

/* TRÊN DESKTOP (từ 768px trở lên):
  Cho nó "vuông" hơn (cao 700px) như bạn muốn
*/
@media (min-width: 768px) {
  .img-map iframe, #map-store iframe {
    height: 700px !important; } }

/* ===============================================
   CSS CHO TEXT CUSTOM (SẠCH)
=============================================== */
.bf-stores-custom-text {
  /* Chỉ cần căn giữa và lề */
  text-align: center;
  padding: 0 15px;
  font-size: 16px;
  line-height: 1.5;
  /* Bất cứ thẻ nào bên trong (H2, p) đều ăn màu của cha */ }
  .bf-stores-custom-text h1, .bf-stores-custom-text h2, .bf-stores-custom-text h3, .bf-stores-custom-text p, .bf-stores-custom-text div, .bf-stores-custom-text span {
    color: inherit !important; }

/* ===============================================
   FIX CĂN GIỮA VOUCHER (KHI ÍT HƠN 4 CÁI)
=============================================== */
.bf-voucher-container .ega-row {
  /* Kích hoạt chế độ Flexbox */
  display: flex !important;
  /* Lệnh căn giữa thần thánh: 
     Nó sẽ dồn các cột vào giữa màn hình
  */
  justify-content: center !important;
  /* Đảm bảo vẫn rớt dòng nếu nhiều voucher */
  flex-wrap: wrap !important; }

/* ===============================================
   FIX MOBILE VOUCHER: 2 CỘT - HIỂN THỊ ĐỦ CHỮ
   Mục tiêu: Giữ 2 cột ngang, nhưng ép chữ nhỏ và cho phép 
   xuống dòng để không bị mất nội dung quan trọng.
=============================================== */
@media (max-width: 767px) {
  /* 1. CẤU HÌNH GRID 2 CỘT (HÀNG NGANG) */
  .bf-voucher-container .ega-row {
    display: flex !important;
    flex-wrap: wrap !important;
    /* Cho phép rớt dòng để tạo lưới */
    justify-content: center !important;
    padding-bottom: 0 !important;
    margin-left: -5px !important;
    /* Fix lề grid */
    margin-right: -5px !important; }
  /* Mỗi cột chiếm 50% chiều rộng */
  .bf-voucher-container .ega-col-6 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    padding-left: 5px !important;
    /* Giảm khoảng cách giữa 2 cột cho khít */
    padding-right: 5px !important;
    margin-bottom: 10px !important; }
  /* 2. TINH CHỈNH CÁI VÉ CHO GỌN */
  .bf-voucher-item {
    height: 100% !important;
    /* Để 2 vé cạnh nhau cao bằng nhau */
    min-height: 110px !important;
    /* Giảm chiều cao tối thiểu */
    padding: 10px 5px !important;
    /* Giảm padding trong để dành đất cho chữ */ }
  /* Chữ "NHẬP MÃ" nhỏ lại */
  .bf-voucher-item:before {
    font-size: 11px !important;
    margin-bottom: 4px !important; }
  /* Cái nút mã Code nhỏ lại xíu */
  .bf-voucher-item__code {
    font-size: 16px !important;
    padding: 5px 15px !important; }
  /* 3. QUAN TRỌNG: XỬ LÝ DÒNG MÔ TẢ */
  .bf-voucher-item__desc {
    /* Cho phép xuống dòng để hiển thị hết chữ */
    white-space: normal !important;
    /* Giới hạn tối đa 2 dòng (để không bị dài quá) */
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    /* Giảm font size để nhét vừa nhiều chữ hơn */
    font-size: 11px !important;
    line-height: 1.3 !important;
    /* Dãn dòng nhẹ cho dễ đọc */
    height: 2.6em;
    /* Cố định chiều cao khoảng 2 dòng cho đều */ } }

/* ===============================================
   CSS BACK TO TOP
=============================================== */
.back-to-top {
  position: fixed;
  /* Thường người ta để bên phải (right), 
     nhưng code bạn để left thì mình giữ left nhé */
  right: 15px;
  bottom: 60px;
  z-index: 9999;
  /* Tăng z-index cao lên để đè mọi thứ */
  transition: all 0.3s;
  opacity: 0;
  visibility: hidden; }
  .back-to-top.show {
    opacity: 1;
    visibility: visible; }
  .back-to-top a {
    width: 40px;
    display: block;
    height: 40px;
    background: #E8E8E8 !important;
    /* [FIX LỖI] Đổi màu icon thành màu tối để nhìn thấy được */
    color: #333 !important;
    text-align: center;
    line-height: 40px;
    font-size: 20px;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    /* Thêm bóng cho đẹp */
    transition: all 0.3s ease;
    /* Căn giữa icon */
    display: flex;
    align-items: center;
    justify-content: center; }
    .back-to-top a:hover {
      background: !important;
      /* Hover đổi nền thành màu chủ đạo */
      color: #fff !important;
      /* Icon thành màu trắng */
      transform: scale(1.1); }