:root {
  --white: #ffffff;
  --black: #000000;
  --text: #212529;
  --text-soft: #454545;
  --heading: #292929;
  --nav: #333333;
  --nav-dim: #666666;
  --line: #e6e6e6;
  --line-mid: #cccccc;
  --line-dark: #141414;
  --gray-bg: #f8f8f8;
  --hover-bg: #eeeeee;
  --sub-mobile-bg: #f2f2f2;
  --sel-text: #999999;
  --red: #d90615;
  --red-dark: #b50105;
  --news-hover: #c31828;
  --side-head: #d01129;
  --more-btn: #c50108;
  --btn-wine: #971029;
  --sub-text: #606060;
  --intro-sub: #323232;
  --tile-label: #161616;
  --page-soft: #f5f5f5;
  --card-dark: #000000;
  --card-soft: #efefef;
  --pc-head: #1b242b;
  --divider: #767676;
  --crumb: #96635a;
  --tab-text: #222222;
  --pd-nav: #123c6b;
  --btn-dark: #1c1c1c;
  --bar-bg: #eaeaea;
  --topbar-bg: #322f36;
  --topbar-text: #d6d6d6;
  --footer-bg: #252525;
  --footer-head: #ffffff;
  --footer-text: #c9c9c9;
  --footer-muted: #8f8f8f;
  --white-a70: rgba(255, 255, 255, .70);
  --white-a43: rgba(255, 255, 255, .43);
  --white-a20: rgba(255, 255, 255, .20);
  --red-a15: rgba(217, 6, 21, .15);
  --black-a09: rgba(0, 0, 0, .09);
  --black-a10: rgba(0, 0, 0, .10);
  --black-a30: rgba(0, 0, 0, .30);
  --black-a70: rgba(0, 0, 0, .70);
  --shadow-a06: rgba(0, 0, 0, .06);
  --shadow-a08: rgba(0, 0, 0, .08);
  --shadow-a15: rgba(0, 0, 0, .15);
  --wash-tile: rgba(255, 255, 255, .45);
}

@font-face {
    font-family: "Roboto";
    src: url("fonts/Roboto-400-latin.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Roboto";
    src: url("fonts/Roboto-400-vietnamese.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
    font-family: "Roboto";
    src: url("fonts/Roboto-500-latin.woff2") format("woff2");
    font-weight: 500;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Roboto";
    src: url("fonts/Roboto-500-vietnamese.woff2") format("woff2");
    font-weight: 500;
    font-display: swap;
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
    font-family: "Roboto";
    src: url("fonts/Roboto-600-latin.woff2") format("woff2");
    font-weight: 600;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Roboto";
    src: url("fonts/Roboto-600-vietnamese.woff2") format("woff2");
    font-weight: 600;
    font-display: swap;
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
    font-family: "Roboto";
    src: url("fonts/Roboto-700-latin.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Roboto";
    src: url("fonts/Roboto-700-vietnamese.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}


/* ============================================================
   txjp - style.css
   Layout: float / inline-block / table-cell / position (khong flexbox, khong grid)
   Mau: khai bao tap trung o :root, than CSS khong dung ma mau truc tiep
   ============================================================ */
/* 
:root {
  --white: #ffffff;
  --black: #000000;
  --text: #212529;
  --text-soft: #454545;
  --heading: #292929;
  --nav: #333333;
  --nav-dim: #666666;
  --line: #e6e6e6;
  --line-mid: #cccccc;
  --line-dark: #141414;
  --gray-bg: #f8f8f8;
  --hover-bg: #eeeeee;
  --sub-mobile-bg: #f2f2f2;
  --sel-text: #999999;

  --red: #d90615;
  --red-dark: #b50105;
  --news-hover: #c31828;
  --side-head: #d01129;
  --more-btn: #c50108;
  --btn-wine: #971029;

  --sub-text: #606060;
  --intro-sub: #323232;
  --tile-label: #161616;
  --page-soft: #f5f5f5;
  --card-dark: #000000;
  --card-soft: #efefef;
  --pc-head: #1b242b;
  --divider: #767676;
  --crumb: #96635a;
  --tab-text: #222222;
  --pd-nav: #123c6b;
  --btn-dark: #1c1c1c;
  --bar-bg: #eaeaea;
  --topbar-bg: #322f36;
  --topbar-text: #d6d6d6;
  --footer-bg: #252525;
  --footer-head: #ffffff;
  --footer-text: #c9c9c9;
  --footer-muted: #8f8f8f;

  --white-a70: rgba(255, 255, 255, .70);
  --white-a43: rgba(255, 255, 255, .43);
  --white-a20: rgba(255, 255, 255, .20);
  --red-a15: rgba(217, 6, 21, .15);
  --black-a09: rgba(0, 0, 0, .09);
  --black-a10: rgba(0, 0, 0, .10);
  --black-a30: rgba(0, 0, 0, .30);
  --black-a70: rgba(0, 0, 0, .70);
  --shadow-a06: rgba(0, 0, 0, .06);
  --shadow-a08: rgba(0, 0, 0, .08);
  --shadow-a15: rgba(0, 0, 0, .15);
  --wash-tile: rgba(255, 255, 255, .45);
} */

/* ============================================================ BASE */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body,
button,
input,
textarea,
select,
.btn,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  background: var(--white);
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  text-decoration: none;
  color: var(--red);
}

a:focus {
  outline: none !important;
}

img {
  max-width: 100%;
  border: 0;
  vertical-align: middle;
}

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

input:focus,
textarea:focus
{
  outline: none !important;
}

.adm-glyphicon span {
    background: url('./image/setting.png');
    background-size: cover;
    width: 12px;
    height: 12px;
    display: block;
    float: left;
}

/* .webi-sys-err {
  display: none !important; 
} */

h1,
h2,
h3,
h4,
p {
  margin: 0;
}

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

/* ============================================================ LAYOUT / GRID */

.wrap {
  max-width: 1430px;
  margin: 0 auto;
  /* padding: 0 15px; */
}

.wrap-wide {
  max-width: 1600px;
}

/* .wrap > .container-fluid {
  padding: 0;
} */

/* bien the gutter cua luoi Bootstrap: 0 / 7 / 20 px */
.g-0 {
  margin-left: 0;
  margin-right: 0;
}

.g-0 > [class*="col-"] {
  padding-left: 0;
  padding-right: 0;
}

.g-7 {
  margin-left: -3.5px;
  margin-right: -3.5px;
}

.g-7 > [class*="col-"] {
  padding-left: 3.5px;
  padding-right: 3.5px;
}

.g-20 {
  margin-left: -10px;
  margin-right: -10px;
}

.g-20 > [class*="col-"] {
  padding-left: 10px;
  padding-right: 10px;
}

/* ============================================================ SECTION HEAD */

.sec-head {
  position: relative;
  padding: 60px 0 0;
}

.home .news {
  padding-bottom: 60px;
}

.home .news .sec-head {
  padding-bottom: 50px;
}

.sec-title {
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  color: var(--red);
  margin-bottom: 25px;
}

.sec-sub {
  margin-top: 8px;
  font-size: 14px;
  color: var(--sub-text);
  line-height: 2;
}

.sec-hr {
  margin: 20px 0 16px;
  border-top: 3px solid var(--black);
}

.sec-head .btn-explore {
  position: absolute;
  right: 0;
  top: 65px;
}

.btn-explore {
  display: inline-block;
  width: 160px;
  height: 39px;
  padding: 8px 0;
  border: 0;
  border-top: 1px solid var(--black);
  border-bottom: 1px solid var(--black);
  color: var(--black);
  font-size: 14px;
  line-height: 21px;
  text-align: center;
  background: transparent;
  transition: color .3s ease, border-color .3s ease;
}

.btn-explore:hover {
  color: var(--red);
  border-top-color: var(--red);
  border-bottom-color: var(--red);
}

/* ============================================================ ICON (SVG sprite)
   Icon = <svg class="ico"><use href="#i-..."></use></svg>, symbol khai o .svg-use cuoi trang.
   Mau dieu khien qua thuoc tinh `color` (symbol dung currentColor). */

.svg-use.hide {
  display: none;
}

.ico {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: middle;
  fill: currentColor;
}

/* ============================================================ TOP BAR */

.topbar {
  background: var(--topbar-bg);
  color: var(--topbar-text);
  height: 33px;
  overflow: hidden;
  font-size: 13px;
}

.topbar .wrap {
  height: 33px;
}

.topbar-left {
  line-height: 33px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar-right {
  line-height: 33px;
  text-align: right;
}

.topbar-right span {
  display: inline-block;
  margin-left: 26px;
}

.topbar-right .ico {
  width: 13px;
  height: 13px;
  color: var(--white);
  margin-right: 7px;
  margin-top: -2px;
}

/* ============================================================ HEADER */

.header {
  height: 80px;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 60;
  transition: box-shadow .3s ease;
}

.header.is-stuck {
  box-shadow: 0 2px 10px var(--shadow-a08);
}

.header .wrap {
  height: 80px;
  position: relative;
}

.logo {
  float: left;
  height: 80px;
  line-height: 80px;
  display: flex;
  align-items: center;
}

.logo img {
  height: 60px;
  width: auto;
}

.nav-main {
  float: right;
}

.nav-main > li {
  display: inline-block;
  position: relative;
}

.nav-main > li > a {
  position: relative;
  display: block;
  height: 80px;
  line-height: 80px;
  padding: 0 18px;
  font-size: 16px;
  color: var(--nav);
  transition: color .3s ease;
}

.nav-main > li > a:hover {
  color: var(--red);
}

/* caret do o day muc nav, chi hien khi hover */
.nav-main > li > a:after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-bottom-color: var(--red);
  opacity: 0;
  transition: opacity .3s ease;
}

.nav-main > li > a:hover:after {
  opacity: 1;
}

/* -------- danh muc con (dropdown) --------
   desktop: bung ra khi hover muc cha, hop 260px can giua ngay duoi header */
.sub-menu {
  position: absolute;
  left: 50%;
  top: 100%;
  z-index: 99;
  width: 260px;
  padding: 15px 0;
  background: var(--white);
  border-radius: 0 0 5px 5px;
  box-shadow: 0 3px 8px var(--shadow-a06);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(10px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s ease;
}

.nav-main > li:hover .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.sub-menu a {
  display: block;
  padding: 0 20px;
  font-size: 15px;
  line-height: 35px;
  color: var(--nav-dim);
  text-align: center;
  transition: color .3s ease;
}

.sub-menu a:hover {
  color: var(--white);
  background-color: var(--red);
}

/* nut mo danh muc con: chi dung tren mobile */
.sub-toggle {
  display: none;
}

.header-tools {
  float: right;
  height: 80px;
  line-height: 80px;
  margin-left: 10px;
  display: flex;
  align-items: center;
}

.header-tools .btn-search {
  display: inline-block;
  width: 21px;
  color: var(--nav);
  cursor: pointer;
}

.header-tools .btn-search .ico {
  width: 21px;
  height: 21px;
}

.header-tools .btn-search:hover {
  color: var(--red);
}

.header-tools .lang {
  position: relative;
  height: 80px;
  line-height: 80px;
  margin-right: 20px;
}

.lang-cur {
  display: block;
  font-size: 16px;
  color: var(--nav);
  white-space: nowrap;
  cursor: pointer;
  transition: color .3s ease;
}

.lang-cur:hover,
.lang.is-open .lang-cur {
  color: var(--red);
}

.lang .flag {
  display: inline-block;
  width: 22px;
  height: 22px;
  margin-top: -2px;
  margin-right: 8px;
  vertical-align: middle;
}

.lang-cur .ico {
  width: 14px;
  height: 14px;
  margin-top: -2px;
  margin-left: 7px;
  transition: transform .3s ease;
}

.lang.is-open .lang-cur .ico {
  transform: rotate(180deg);
}

.lang-list {
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 99;
  width: 180px;
  padding: 8px 0;
  background: var(--white);
  border-radius: 0 0 5px 5px;
  box-shadow: 0 3px 8px var(--shadow-a06);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s ease;
}

.lang:hover .lang-list,
.lang.is-open .lang-list {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang-list > li + li {
  border-top: 1px solid var(--line);
}

.lang-list a {
  display: block;
  padding: 0 18px;
  font-size: 15px;
  line-height: 42px;
  color: var(--nav-dim);
  white-space: nowrap;
  transition: color .3s ease, background-color .3s ease;
}

.lang-list > li.on > a {
  color: var(--red);
}

body > .skiptranslate,
iframe.skiptranslate,
.VIpgJd-ZVi9od-aZ2wEe-wOHMyf,
#goog-gt-tt,
.goog-te-balloon-frame {
  display: none !important;
}

body {
  top: 0 !important;
}

.goog-text-highlight {
  background: none !important;
  box-shadow: none !important;
}

.lang-list a:hover,
.lang-list > li.on > a:hover {
  color: var(--white);
  background-color: var(--red);
}

/* hamburger: chi hien tren mobile */
.btn-menu {
  display: none;
  float: right;
  width: 40px;
  height: 80px;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.btn-menu span {
  display: block;
  width: 24px;
  height: 2px;
  margin: 5px auto;
  background: var(--nav);
}

/* ============================================================ BANNER */

.banner {
  position: relative;
  clear: both;
  height: 900px;
  overflow: hidden;
  background: var(--heading);
}

.banner .owl-carousel,
.banner .owl-stage-outer,
.banner .owl-item,
.banner .slide {
  height: 900px;
}

.banner .slide {
  position: relative;
  overflow: hidden;
}

/* ken-burns: nen zoom cham khi slide active */
.banner .b-bg {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
  transition: transform 6s ease;
}

.banner .owl-item.active .b-bg {
  transform: scale(1.12);
}

/* text banner: fadeInUp moi lan slide thanh active */
.banner .b-eyebrow,
.banner .b-title,
.banner .b-addr,
.banner .b-more {
  opacity: 0;
}

.banner .owl-item.active .b-eyebrow {
  animation: fadeInUp .8s .15s ease both;
}

.banner .owl-item.active .b-title {
  animation: fadeInUp .8s .32s ease both;
}

.banner .owl-item.active .b-addr {
  animation: fadeInUp .8s .5s ease both;
}

.banner .owl-item.active .b-more {
  animation: fadeInUp .8s .66s ease both;
}

.banner .slide-txt {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.banner .slide-txt .wrap {
  color: var(--white);
  /* max-width: 1600px; */
}

.banner .b-eyebrow {
  font-size: 24px;
  line-height: 1.6;
  color: var(--white);
}

.banner .b-title {
  margin-top: 10px;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.4;
  max-width: 720px;
}

.banner .b-line {
  width: 46px;
  height: 2px;
  margin: 30px 0 26px;
  background: var(--white);
}

.banner .b-addr {
  font-size: 16px;
  font-weight: 400;
  color: var(--white);
  line-height: 1.7;
}

.banner .owl-dots {
  display: none;
}

.banner .b-more {
  display: inline-block;
  width: 150px;
  height: 45px;
  margin-top: 40px;
  padding: 10px 15px;
  border: 1px solid var(--white);
  border-radius: 30px;
  color: var(--white);
  font-size: 14px;
  line-height: 23px;
  text-align: center;
  transition: background .3s ease, color .3s ease;
}

.banner .b-more:hover {
  background: var(--white);
  color: var(--heading);
}

/* scroll-down: chuot + chu */
.banner .b-scroll {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 30px;
  width: 90px;
  text-align: center;
  color: var(--white);
  z-index: 10;
}

.banner .b-scroll i {
  display: block;
  width: 20px;
  height: 30px;
  margin: 0 auto;
  border: 2px solid var(--white);
  border-radius: 12px;
  position: relative;
}

.banner .b-scroll i:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 5px;
  width: 4px;
  height: 8px;
  margin-left: -2px;
  background: var(--white);
  border-radius: 2px;
  animation: scrollmouse 1.6s ease infinite;
}

.banner .b-scroll span {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

@keyframes scrollmouse {
  0% {
    opacity: 0;
    transform: translate(-50%, -4px);
  }
  40% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, 8px);
  }
}

.banner .b-nav {
  position: absolute;
  right: 40px;
  bottom: 40px;
  z-index: 10;
}

.banner .b-nav button {
  width: 50px;
  height: 50px;
  margin-left: 16px;
  padding: 0;
  border: 1px solid var(--white);
  border-radius: 50%;
  background: transparent;
  color: var(--white);
  cursor: pointer;
  transition: background .3s ease, color .3s ease;
  vertical-align: middle;
}

.banner .b-nav button .ico {
  width: 16px;
  height: 16px;
}

.banner .b-nav button:hover {
  background: var(--white-a20);
  color: var(--red);
}

/* ============================================================ FIFTY YEARS / INTRO */

.intro {
  text-align: center;
  padding: 64px 0 40px;
}

.intro-title {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.33;
  color: var(--heading);
}

.intro-sub {
  margin-top: 15px;
  font-size: 16px;
  color: var(--intro-sub);
}

.intro-nav {
  margin-top: 46px;
}

.intro-nav .item {
  display: block;
  position: relative;
  overflow: hidden;
}

.intro-nav .pic {
  position: relative;
  padding-top: 131.2%;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  transition: transform .6s ease;
}

/* mang trang phu cheo: trai mo, phai ro */
.intro-nav .pic:after {
  content: "";
  position: absolute;
  opacity: 0;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(78deg, var(--white) 0%, var(--wash-tile) 100%);
  transition: opacity .45s ease;
}

.intro-nav .item:hover .pic:after {
  opacity: .35;
}

.intro-nav .item:hover .pic {
  transform: scale(1.06);
}

.intro-nav .cap {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 10px;
  text-align: left;
}

.intro-nav .lb {
  font-size: 22px;
  font-weight: 700;
  line-height: 22px;
  color: var(--tile-label);
  transition: color .3s ease;
}

.intro-nav .lb p {
  display: none;
  word-break: break-all;
  text-overflow: ellipsis;
  color: var(--black);
  line-height: 1.4;
  margin-bottom: 10px;
  font-size: 16px;
  margin-top: 10px;
  font-weight: 400;
  transition: all .2s linear;
}

.intro-nav .item:hover .lb p {
  display: block;
}

/* .intro-nav .item:hover .lb {
  color: var(--white);
} */

/* nut More do nho: an, hien khi hover the */
.intro-nav .more-btn {
  display: inline-block;
  width: 79px;
  height: 30px;
  margin-top: 14px;
  border-radius: 2px;
  background: var(--more-btn);
  color: var(--white);
  font-size: 12px;
  line-height: 30px;
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s ease, transform .35s ease;
}

.intro-nav .item:hover .more-btn {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================ PRODUCT CENTER */
/* 
.product {
  padding-bottom: 70px;
} */

.prod-grid {
  margin-top: 0;
}

.prod-grid > [class*="col-"] {
  margin-bottom: 7px;
}

.prod-tile {
  position: relative;
  display: block;
  overflow: hidden;
}

/* ty le anh 462x277 */
.prod-tile .thumb {
  position: relative;
  padding-top: 59.9567%;
  background-size: cover;
  background-position: center;
  transition: transform .6s ease;
}

.prod-tile:hover .thumb {
  transform: scale(1.06);
}

.prod-tile .thumb img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* mang toi phang phu toan the */
.prod-tile:after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  background: var(--black-a30);
}

.prod-tile .cap {
  position: absolute;
  z-index: 2;
  left: 22px;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--white);
}

.prod-tile .cap .t {
  font-size: 26px;
  font-weight: 700;
  line-height: 30px;
  margin-bottom: 10px;
}

.prod-tile .cap .cap-hr {
  height: 1px;
  margin: 16px 0;
  background: var(--white-a43);
}

.prod-tile .cap .more {
  display: block;
  font-size: 16px;
  line-height: 18px;
  color: var(--white);
  transition: transform .3s ease;
}

.prod-tile:hover .cap .more {
  transform: translateX(6px);
  color: var(--red);
}

/* ============================================================ SERVICE SUPPORT */

.service {
  background: var(--gray-bg);
  padding-bottom: 72px;
}

.service .sec-head {
  padding-bottom: 0;
}

.service .sec-head .hotline {
  margin-top: 8px;
  font-size: 15px;
  color: var(--nav-dim);
}

.service .sec-head .hotline b {
  color: var(--red);
  font-weight: 400;
}

.service .sec-head .btn-explore {
  position: absolute;
  right: 0;
  top: 60px;
}

.serv-grid {
  margin-top: 34px;
}

.serv-grid > [class*="col-"] {
  margin-bottom: 30px;
}

.serv-card {
  background: var(--white);
  border: 0;
  padding: 19px 0 30px;
  text-align: center;
  min-height: 398px;
  transition: transform .5s ease, box-shadow .5s ease;
}

.serv-card:hover {
  transform: translateY(-10px);
  box-shadow: 1px 1px 6px 1px var(--shadow-a08);
}

/* vong tron accent goc duoi-phai no ra lap day khi hover the */
.serv-card .ic {
  position: relative;
  width: 80px;
  height: 60px;
  margin: 15px auto 0;
  color: var(--heading);
}

.serv-card .ic:before {
  content: "";
  position: absolute;
  z-index: 0;
  right: 10px;
  bottom: 2px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--red-a15);
  transition: .5s ease;
}

.serv-card .ic .ico {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
  transition: color .4s ease;
}

.serv-card:hover .ic:before {
  right: 50%;
  bottom: 50%;
  width: 74px;
  height: 74px;
  transform: translate(50%, 50%);
  background: var(--red);
}

.serv-card:hover .ic .ico {
  color: var(--white);
}

.serv-card h4 {
  margin: 10px 0 25px;
  font-size: 20px;
  font-weight: 400;
  line-height: 23px;
  color: var(--footer-bg);
}

.serv-card .div {
  width: 38px;
  height: 1px;
  margin: 0 auto 20px;
  background: var(--divider);
}

.serv-card p {
  width: 68%;
  margin: 0 auto;
  font-size: 14px;
  color: var(--nav-dim);
  line-height: 1.85;
}

.serv-card p .red {
  color: var(--red);
}

/* ============================================================ NEWS & BLOG */

.news {
  /* padding-bottom: 80px; */
  background: url(image/css/45669525-51f2-423c-a401-d3451e76d3b6.jpg) center/cover no-repeat;
}

.news-grid {
  margin-top: 0;
}

.news-grid > [class*="col-"] {
  margin-bottom: 20px;
}

.news-big {
  display: block;
  background: var(--card-dark);
  color: var(--white);
  height: 460px;
  padding: 30px;
  position: relative;
  border-radius: 25px;
  overflow: hidden;
}

.news-big .thumb {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  background-position: center;
  opacity: .34;
  transition: transform .6s ease, opacity .3s ease;
}

.news-big:hover .thumb {
  transform: scale(1.06);
  opacity: .46;
}

.news-big .inner {
  position: relative;
}

.news-big .date {
  font-size: 14px;
  color: var(--white-a70);
}

.news-big h3 {
  margin-top: 12px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
}

.news-big p {
  margin-top: 16px;
  font-size: 14px;
  color: var(--white-a70);
  line-height: 1.8;
}

.news-big .more {
  position: absolute;
  left: 30px;
  bottom: 30px;
  display: inline-block;
  padding: 7px 15px;
  border: 1px solid var(--white);
  color: var(--white);
  font-size: 16px;
  line-height: 21px;
}

.news-big .more .ico {
  width: 16px;
  height: 16px;
  margin-left: 14px;
  vertical-align: -3px;
  transition: transform .3s ease;
}

.news-big:hover .more {
  background: var(--red);
  border-color: var(--red);
}

.news-big:hover .more .ico {
  transform: translateX(6px);
}

.news-mini {
  display: block;
  background: var(--card-soft);
  padding: 24px 30px;
  height: 220px;
  margin-bottom: 20px;
  overflow: hidden;
  transition: background .3s ease;
  border-radius: 25px;
}

.news-mini:last-child {
  margin-bottom: 0;
}

.news-mini .date {
  font-size: 14px;
  color: var(--nav-dim);
  transition: color .3s ease;
}

.news-mini h3 {
  margin-top: 10px;
  font-size: 20px;
  font-weight: 700;
  color: var(--black);
  line-height: 1.3;
  transition: color .3s ease;
}

.news-mini p {
  margin-top: 12px;
  font-size: 14px;
  color: var(--nav-dim);
  line-height: 1.9;
  transition: color .3s ease;
}

@media (min-width: 992px) {
  .news-mini h3,
  .news-mini p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
}

/* hover: ca the chuyen do, chu trang */
.news-mini:hover {
  background: var(--news-hover);
}

.news-mini:hover .date {
  color: var(--white-a70);
}

.news-mini:hover h3 {
  color: var(--white);
}

.news-mini:hover p {
  color: var(--white-a70);
}

/* ============================================================ FOOTER */

.footer {
  background: var(--footer-bg);
  color: var(--footer-text);
  border-top: 5px solid var(--red-dark);
  padding: 70px 0 50px;
}

.footer h4 {
  color: var(--footer-head);
  font-size: 22px;
  font-weight: 700;
  line-height: 22px;
  margin: 0 0 30px;
}

.foot-info li {
  position: relative;
  padding-left: 45px;
  margin-bottom: 18px;
  font-size: 16px;
  line-height: 1.6;
}

.foot-info li a {
  word-wrap: break-word;
}

.foot-info li .ico {
  position: absolute;
  left: 0;
  top: 2px;
  width: 31px;
  height: 31px;
  color: var(--footer-muted);
}

.foot-links li {
  border-bottom: 1px solid var(--line-dark);
}

.foot-links li a {
  display: block;
  padding: 11px 0;
  font-size: 14px;
  color: var(--footer-text);
}

.foot-links li a:hover {
  color: var(--red);
}

.msg-sub {
  font-size: 13px;
  color: var(--footer-muted);
  margin-bottom: 18px;
  line-height: 1.7;
}

.msg-field {
  width: 100%;
  margin-bottom: 14px;
  padding: 11px 14px;
  background: var(--white);
  border: 0;
  color: var(--nav);
  font-size: 13px;
}

.msg-field::placeholder {
  color: var(--nav-dim);
}

textarea.msg-field {
  height: 80px;
  resize: vertical;
}

.btn-submit {
  display: block;
  width: 200px;
  height: 48px;
  padding: 12px 8px;
  background: var(--red-dark);
  color: var(--white);
  border: 0;
  border-radius: 4px;
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  cursor: pointer;
  transition: background .3s ease;
}

.btn-submit:hover {
  background: var(--red);
}

/* ============================================================ COPYRIGHT */

.copyright {
  background: var(--red-dark);
  color: var(--white);
}

.copyright .wrap {
  min-height: 46px;
  padding-top: 13px;
  padding-bottom: 13px;
}

.copyright .cp-left {
  font-size: 13px;
}

.copyright .cp-right {
  font-size: 13px;
  text-align: right;
}

.copyright .cp-right a {
  margin-left: 22px;
  color: var(--white);
}

.copyright .cp-right a:hover {
  text-decoration: underline;
}

/* ============================================================ FLOATING SIDE */

.side-tools {
  position: fixed;
  right: 20px;
  bottom: 5%;
  /* transform: translateY(-50%); */
  z-index: 40;
  opacity: 0;
  visibility: hidden;
  transition: all .2s linear;
}

.side-tools.active {
  opacity: 1;
  visibility: visible;
}

.side-tools a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  margin-bottom: 5px;
  background: var(--white);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--shadow-a15);
  color: var(--text);
}
.side-tools a.iphone {
  background-color: #EA0000;
  color: var(--white);
}
.side-tools a.imail {
  background-color: #007F86;
  color: var(--white);
}
.side-tools a.izalo {
  background-color: #0A68FE;
  color: var(--white);
}
.side-tools a.iwhatsapp {
  background-color: #25D366;
  color: var(--white);
}
.side-tools a.iwechat {
  background-color: #09B83E;
  color: var(--white);
}
.side-tools a .ico {
  width: 25px;
  height: 25px;
}

.side-tools a:hover {
  background: var(--red);
  color: var(--white);
}

/* ============================================================ SEARCH
   Bam site mau: bam kinh lup -> dai trang tran ngang truot xuong ngay duoi header,
   phia sau la nen den mo phu toan man hinh. */

.search-pop {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
}

.search-pop.is-open {
  display: block;
}

.sp-panel {
  position: relative;
  z-index: 2;
  padding: 30px 0;
  background: var(--white);
}

/* nen mo bat dau ngay duoi header de thanh header van noi len tren */
.sp-bg {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 100%;
  min-height: 2000px;
  background: var(--black-a70);
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease, visibility .5s ease;
}

.search-pop.is-open .sp-bg {
  opacity: 1;
  visibility: visible;
}

/* thanh tim kiem: o nhap co gian + chon pham vi 120px + nut 100px, dung table-cell */
.sp-bar {
  display: table;
  width: 100%;
  height: 40px;
  border: 1px solid var(--line-mid);
  border-radius: 20px;
  background: var(--white);
}

.sp-cell {
  display: table-cell;
  height: 38px;
  vertical-align: middle;
}

.sp-cell-select {
  width: 120px;
}

.sp-cell-btn {
  width: 100px;
}

.sp-input {
  width: 100%;
  height: 38px;
  padding: 0 20px;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 14px;
  color: var(--nav);
}

.sp-input::placeholder {
  color: var(--sel-text);
}

.sp-select {
  position: relative;
  height: 38px;
  text-align: center;
  color: var(--sel-text);
  cursor: pointer;
}

.sp-current {
  display: block;
  height: 38px;
  font-size: 14px;
  line-height: 38px;
  overflow: hidden;
}

.sp-current .ico {
  width: 14px;
  height: 14px;
  margin-left: 4px;
  transition: transform .3s ease;
}

.sp-select.is-open .sp-current .ico {
  transform: rotate(180deg);
}

.sp-list {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 9;
  width: 100%;
  max-height: 162px;
  overflow: auto;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 0 0 4px 4px;
}

.sp-select.is-open .sp-list {
  display: block;
}

.sp-item {
  padding: 10px 8px;
  font-size: 13px;
  line-height: 20px;
  color: var(--nav-dim);
  cursor: pointer;
}

.sp-item:hover,
.sp-item.on {
  background: var(--hover-bg);
}

.sp-btn {
  display: block;
  height: 38px;
  border-radius: 0 20px 20px 0;
  background: var(--red);
  color: var(--white);
  font-size: 14px;
  line-height: 38px;
  text-align: center;
  overflow: hidden;
  transition: background .3s ease;
}

.sp-btn:hover {
  background: var(--red-dark);
  color: var(--white);
}

/* ============================================================ SCROLL REVEAL
   Reveal khi cuon, stagger qua data-saf-d */
/* 
[data-saf] {
  opacity: 0;
  will-change: transform, opacity;
}

[data-saf].is-in {
  animation: fadeInUp .8s ease both;
}

[data-saf][data-saf-d="1"].is-in {
  animation-delay: .12s;
}

[data-saf][data-saf-d="2"].is-in {
  animation-delay: .26s;
}

[data-saf][data-saf-d="3"].is-in {
  animation-delay: .40s;
}

[data-saf][data-saf-d="4"].is-in {
  animation-delay: .54s;
} */

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 54px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  /* [data-saf] {
    opacity: 1 !important;
  }

  [data-saf].is-in {
    animation: none !important;
  } */

  .banner .b-bg,
  .banner .owl-item.active .b-bg {
    transition: none;
    transform: none;
  }
}

/* ============================================================ RESPONSIVE (trang chu)
   Split mobile o 768px (khong dung 992px mac dinh cua Bootstrap 3) */

@media (max-width: 1600px) {
  .banner .b-title {
    font-size: 46px;
  }
}

@media (max-width: 1440px) {
  .sec-title,
  .intro-title {
    font-size: 36px;
  }

  .banner {
    height: 700px;
  }

  .banner .owl-carousel,
  .banner .owl-stage-outer,
  .banner .owl-item,
  .banner .slide {
    height: 700px;
  }
}

@media (max-width: 1200px) {
  .banner .b-title {
    font-size: 40px;
  }

  .prod-tile .cap {
    font-size: 22px;
    left: 20px;
  }

  .nav-main > li > a {
    padding: 0 12px;
    font-size: 15px;
  }
}

@media (max-width: 991px) {
  .footer .row > [class*="col-"] {
    margin-bottom: 36px;
  }

  .news-mini {
    height: auto;
  }
}

@media (max-width: 1023px) {
  .topbar {
    display: none;
  }

  /* header thap lai 64px tren mobile */
  .header,
  .header .wrap,
  .logo {
    height: 64px;
  }

  .header .wrap {
    padding: 0;
  }

  .logo {
    margin-left: 15px;
    line-height: 64px;
  }

  .nav-main > li > a:after {
    display: none;
  }

  .nav-main {
    display: none;
    position: absolute;
    left: 0;
    overflow-y: auto;
    max-height: 600px;
    right: 0;
    top: 64px;
    background: var(--white);
    border-top: 1px solid var(--line);
    box-shadow: 0 8px 16px var(--shadow-a08);
  }

  .nav-main.is-open {
    display: block;
  }

  .nav-main > li {
    display: block;
    border-bottom: 1px solid var(--line);
  }

  .nav-main > li > a {
    height: 52px;
    line-height: 52px;
  }

  .intro-nav .pic {
    padding-top: 80%;
  }

  /* danh muc con tren mobile: xo doc trong menu, mo bang nut caret ben phai */
  .sub-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 0;
    top: 0;
    width: 52px;
    height: 52px;
    line-height: 52px;
    text-align: center;
    color: var(--nav-dim);
    cursor: pointer;
  }

  .sub-toggle .ico {
    width: 16px;
    height: 16px;
    transition: transform .3s ease;
  }

  .nav-main > li.is-open .sub-toggle .ico {
    transform: rotate(180deg);
  }

  .sub-menu,
  .nav-main > li:hover .sub-menu {
    display: none;
    position: static;
    width: 100%;
    padding: 0 0 0 30px;
    background: var(--sub-mobile-bg);
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }

  .nav-main > li.is-open .sub-menu {
    display: block;
  }

  .sub-menu a {
    padding: 0;
    line-height: 44px;
    text-align: left;
  }

  /* search: dai bung ra thu gon lai cho vua man hinh */
  .sp-panel {
    padding: 16px 0;
  }

  .sp-cell-select {
    width: 96px;
  }

  .sp-cell-btn {
    width: 84px;
  }

  .sp-input {
    padding: 0 14px;
  }

  .logo img {
    height: 30px;
  }

  /* dinh vi absolute de menu/tools khong bi day xuong khi logo rong */
  .header-tools {
    position: absolute;
    right: 58px;
    top: 0;
    margin: 0;
    height: 64px;
    line-height: 64px;
  }

  .header-tools .lang {
    height: 64px;
    line-height: 64px;
    margin-right: 14px;
  }

  .lang-txt {
    display: none;
  }

  .lang-cur .flag {
    margin-right: 0;
  }

  .lang-cur .ico {
    margin-left: 4px;
  }

  .lang:hover .lang-list {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
  }

  .lang.is-open .lang-list {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .btn-menu {
    display: block;
    position: absolute;
    right: 12px;
    top: 0;
    height: 64px;
    float: none;
  }
}

@media (max-width: 768px) {
  .banner {
    height: 420px;
  }

  .banner .owl-carousel,
  .banner .owl-stage-outer,
  .banner .owl-item,
  .banner .slide {
    height: 420px;
  }

  .banner .slide-txt .wrap {
    padding: 0 15px;
  }

  .banner .b-title {
    font-size: 28px;
  }

  .banner .b-eyebrow,
  .banner .b-addr {
    font-size: 13px;
  }

  .sec-title,
  .intro-title {
    font-size: 28px;
  }

  .sec-head {
    padding: 40px 0 22px;
  }

  .sec-head .btn-explore,
  .product .sec-head .btn-explore,
  .service .sec-head .btn-explore {
    display: none;
  }

  .mslide {
    position: relative;
    margin-left: 0;
    margin-right: 0;
    padding-bottom: 40px;
  }

  .mslide .owl-item > [class*="col-"] {
    float: none;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 0;
  }

  .mslide .owl-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 24px;
    line-height: 24px;
    text-align: center;
  }

  .mslide .owl-dots .owl-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    padding: 0;
    margin: 0 5px;
    border: 0;
    border-radius: 50%;
    background: var(--line-mid);
    vertical-align: middle;
    transition: background .3s ease, width .3s ease;
  }

  .mslide .owl-dots .owl-dot.active {
    width: 22px;
    border-radius: 4px;
    background: var(--red);
  }


  .intro-nav .lb {
    font-size: 18px;
  }

  .prod-tile .thumb {
    padding-top: 56%;
  }

  .serv-card {
    min-height: 0;
  }

  .news-big {
    height: auto;
    padding-bottom: 96px;
  }

  .copyright .cp-left,
  .copyright .cp-right {
    float: none;
    display: block;
    text-align: center;
  }

  .copyright .cp-right {
    margin-top: 8px;
  }

  .copyright .cp-right a {
    margin: 0 9px;
  }

  .side-tools {
    display: none;
  }
}

@media (max-width: 575px) {
  .banner .b-title {
    font-size: 24px;
  }
}

/* ============================================================ SUBPAGES: INNER BANNER */

.inner-banner {
  position: relative;
  height: 372px;
  background: var(--card-dark) center/cover no-repeat;
  color: var(--white);
  overflow: hidden;
}

.inner-banner .wrap {
  position: relative;
  height: 100%;
}

.inner-banner .ib-txt {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid var(--white);
  padding: 16px 34px;
  text-align: center;
  white-space: nowrap;
}

.inner-banner .ib-en {
  font-size: 22px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin: 0;
}

/* ============================================================ SUB BAR (tabs + breadcrumb) */

.subbar {
  border-bottom: 1px solid var(--line);
  background: var(--white);
}

.subbar .wrap {
  max-width: 1600px;
  height: 55px;
}

.subtabs {
  float: left;
}

.subtabs a {
  display: inline-block;
  position: relative;
  line-height: 55px;
  padding-right: 31px;
  margin-right: 31px;
  color: var(--tab-text);
  font-size: 15px;
}

.subtabs a:after {
  content: "";
  position: absolute;
  right: 0;
  top: 18px;
  height: 19px;
  border-right: 1px solid var(--line);
}

.subtabs a:hover {
  color: var(--red);
}

.crumb {
  float: right;
  line-height: 55px;
  font-size: 14px;
  color: var(--crumb);
}

.crumb .ico {
  width: 14px;
  height: 14px;
  margin-right: 8px;
  margin-top: -3px;
}

.crumb a {
  color: var(--crumb);
}

.crumb a:hover {
  color: var(--red);
}

.crumb .sep {
  margin: 0 8px;
  color: var(--line);
}

.crumb .cur {
  color: var(--red);
}

/* trang khong co tab (product-list): breadcrumb nam ben trai */
.subbar.crumb-left .crumb {
  float: left;
}

/* trang chi tiet tin: dai breadcrumb mong, khong co banner */
.subbar.crumb-slim .wrap {
  height: 38px;
}

.subbar.crumb-slim .crumb {
  line-height: 38px;
  font-size: 13px;
}

/* ============================================================ SUBPAGES: KHUNG NOI DUNG */

.front.page {
  padding: 0 !important; 
}

.page {
  padding: 56px 0 70px;
  background: var(--white);
}

.page > .wrap {
  max-width: 1600px;
}

.page-title {
  position: relative;
  padding-bottom: 16px;
  font-size: 36px;
  font-weight: 400;
  color: var(--red);
  margin-bottom: 26px;
}

.page-title .en {
  color: var(--heading);
}

.page-title:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 54px;
  border-bottom: 2px solid var(--red);
}

.page-soft {
  background: var(--page-soft);
}

/* .page-soft > .wrap {
  padding: 0 30px;
} */

/* ============================================================ ABOUT */

.orglist li {
  margin-bottom: 30px;
}

.orglist .vi {
  display: block;
  font-size: 24px;
  line-height: 1.45;
  color: var(--red);
}

.orglist .en {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  letter-spacing: .02em;
  color: var(--nav-dim);
}

/* so lieu noi bat: cot doc, icon ben trai */
.stats-v {
  margin-top: 56px;
}

.stats-v li {
  position: relative;
  padding: 26px 0 26px 78px;
  border-top: 1px solid var(--line);
}

.stats-v li:first-child {
  border-top: 0;
}

.stats-v .sv-ic {
  position: absolute;
  left: 6px;
  top: 50%;
  margin-top: -19px;
  color: var(--nav-dim);
}

.stats-v .sv-ic .ico {
  width: 38px;
  height: 38px;
}

.stats-v .sv-num {
  font-size: 38px;
  font-weight: 400;
  line-height: 1;
  color: var(--nav-dim);
}

.stats-v .sv-unit {
  margin-left: 8px;
  font-size: 15px;
  color: var(--text-soft);
}

.stats-v .sv-lb {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  color: var(--nav-dim);
}

/* ============================================================ SIDEBAR DANH MUC */

/* cot trai 300px / cot phai 1240px trong khung 1600 (da tinh padding 15px cua Bootstrap) */
@media (min-width: 992px) {
  .side.col-md-3 {
    width: 20.625%;
  }

  .content.col-md-9 {
    width: 79.375%;
  }
}

.side-box {
  border: 0;
}

.side-head {
  background: var(--side-head);
  color: var(--white);
  /* height: 54px; */
  padding: 12px 15px;
  border-radius: 10px 10px 0 0;
}

.side-head .en {
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
}

.side-head .sh-caret {
  display: none;
}

.side-list {
  padding: 0 12px;
}

.side-list li {
  border-bottom: 1px solid var(--line);
}

.side-list a {
  display: block;
  padding: 15px 10px 15px 20px;
  color: var(--pc-head);
  font-size: 16px;
  position: relative;
  transition: color .25s, padding .25s;
}

.side-list a:before {
  content: "\203A";
  position: absolute;
  left: 2px;
  color: var(--red);
}

.side-list a:hover,
.side-list a.on {
  color: var(--red);
  padding-left: 26px;
}

/* ============================================================ PRODUCT LIST */

.content-head {
  margin-bottom: 30px;
}

.ch-title {
  position: relative;
  padding-left: 14px;
  margin-bottom: 22px;
  font-size: 20px;
  color: var(--side-head);
  line-height: 1.2;
}

.ch-title:before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  border-left: 4px solid var(--red);
}

.ch-search {
  position: relative;
  max-width: 702px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 20px;
}

.ch-input {
  width: 100%;
  height: 36px;
  padding: 0 110px 0 20px;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 14px;
  color: var(--nav);
}

.ch-input::placeholder {
  color: var(--nav-dim);
}

.ch-btn {
  position: absolute;
  right: -1px;
  top: -1px;
  width: 100px;
  height: 38px;
  border: 0;
  border-radius: 0 20px 20px 0;
  background: var(--red);
  color: var(--white);
  font-size: 14px;
  cursor: pointer;
  transition: background .3s ease;
}

.ch-btn:hover {
  background: var(--red-dark);
}

.plist > [class*="col-"] {
  margin-bottom: 44px;
}

.pcard {
  display: block;
  background: transparent;
}

.pcard .thumb {
  position: relative;
  padding-top: 70%;
  background: var(--card-soft) center/cover no-repeat;
  overflow: hidden;
}

.pcard .thumb:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: var(--black-a10);
  opacity: 0;
  transition: opacity .35s;
}

.pcard:hover .thumb:after {
  opacity: 1;
}

.pcard .pc-body {
  padding: 20px 20px 0;
}

.pcard .pc-title {
  position: relative;
  padding-right: 40px;
  font-size: 17px;
  font-weight: 400;
  color: var(--heading);
  margin-bottom: 14px;
  transition: color .25s;
}

.pcard .pc-title .ico {
  position: absolute;
  right: 0;
  top: 3px;
  width: 18px;
  height: 18px;
  color: var(--nav);
  transition: transform .3s ease, color .25s;
}

.pcard:hover .pc-title {
  color: var(--red);
}

.pcard:hover .pc-title .ico {
  color: var(--red);
  transform: translateX(5px);
}

.pcard .pc-desc {
  font-size: 14px;
  color: var(--nav-dim);
  line-height: 1.75;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================================ PHAN TRANG */

.pager {
  text-align: center;
  margin-top: 26px;
}

.pager a,
.pager strong {
  display: inline-block !important;
  min-width: 44px;
  height: 44px;
  line-height: 42px;
  padding: 0 8px !important;
  margin: 0 5px;
  border: 1px solid var(--line) !important;
  border-radius: 4px !important;
  color: var(--nav);
  font-size: 15px;
  background: var(--white) !important;
}

.pager a:hover {
  border-color: var(--red) !important;
  color: var(--red) !important;
}

.pager li.active a {
  background: var(--red) !important;
  border-color: var(--red) !important;
  color: var(--white) !important;
  font-weight: 400;
}

.pager .nav-a {
  background: var(--gray-bg);
  border-color: var(--line);
  color: var(--nav-dim);
}

.pager a.nav-a:hover {
  border-color: var(--red);
  color: var(--red);
}

/* ============================================================ RICHTEXT */

.richtext {
  font-size: 15px;
  line-height: 1.95;
  color: var(--text-soft);
}

.richtext p {
  margin-bottom: 18px;
}

.richtext h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--heading);
  margin: 30px 0 14px;
}

.richtext strong {
  color: var(--heading);
}

/* ============================================================ PRODUCT DETAIL */

/* breadcrumb nam trong cot noi dung (trang chi tiet khong co thanh subbar) */
.crumb-inline {
  float: none;
  line-height: 1.4;
  margin-bottom: 26px;
}

.pd-top {
  margin-bottom: 50px;
}

.pd-media .big {
  position: relative;
  padding-top: 70%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: var(--card-soft);
}

.pd-thumbs {
  position: relative;
  margin-top: 16px;
  padding: 0 40px;
  text-align: center;
}

.pd-thumbs .pt {
  display: inline-block;
  width: 66px;
  height: 52px;
  margin: 0 4px;
  border: 1px solid var(--line);
  background: var(--card-soft) center/cover no-repeat;
  cursor: pointer;
}

.pd-thumbs .pt.on {
  border-color: var(--red);
}

.pd-thumbs .pt-prev,
.pd-thumbs .pt-next {
  position: absolute;
  top: 14px;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--nav-dim);
  cursor: pointer;
}

.pd-thumbs .pt-prev {
  left: 0;
}

.pd-thumbs .pt-next {
  right: 0;
}

.pd-thumbs .pt-prev:hover,
.pd-thumbs .pt-next:hover {
  color: var(--red);
}

.pd-info h1 {
  position: relative;
  padding-left: 16px;
  font-size: 26px;
  font-weight: 400;
  color: var(--heading);
  line-height: 1.3;
  margin-bottom: 22px;
}

.pd-info h1:before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  bottom: 3px;
  border-left: 4px solid var(--red);
}

.pd-info .lead {
  font-size: 15px;
  color: var(--nav-dim);
  line-height: 1.8;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 22px;
}

.pd-meta {
  margin-bottom: 34px;
}

.pd-meta .row-m {
  font-size: 15px;
  color: var(--text);
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.pd-meta .row-m:last-child {
  border-bottom: 0;
}

.pd-meta .row-m b {
  font-weight: 400;
}

/* nut vien tron: inline-flex chi dung cho nut co icon + chu */
.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 250px;
  height: 52px;
  margin: 0 33px 14px 0;
  border-radius: 27px;
  color: var(--white);
  font-size: 18px;
  transition: opacity .3s ease;
}

.btn-pill .ico {
  width: 19px;
  height: 19px;
  margin-right: 12px;
}

.btn-pill.dark {
  background: var(--btn-dark);
}

.btn-pill.red {
  background: var(--btn-wine);
}

.btn-pill:hover {
  color: var(--white);
  opacity: .86;
}

.sec-bar {
  position: relative;
  margin: 0 0 26px;
  padding: 15px 26px;
  background: var(--bar-bg);
  font-size: 20px;
  line-height: 30px;
  color: var(--heading);
}

.sec-bar:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-left: 4px solid var(--red);
}

.param-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.param-table th,
.param-table td {
  border: 1px solid var(--line);
  padding: 11px 14px;
  text-align: center;
}

.param-table th {
  background: var(--gray-bg);
  color: var(--heading);
  font-weight: 600;
}

/* form tu van cuoi trang chi tiet */
.ask-block {
  margin-top: 52px;
}

.ask-sub {
  font-size: 15px;
  color: var(--nav-dim);
  margin-bottom: 22px;
}

.ask-field {
  display: block;
  width: 100%;
  margin-bottom: 16px;
  padding: 16px 20px;
  border: 0;
  background: var(--gray-bg);
  font-size: 15px;
  color: var(--nav);
}

.ask-field::placeholder {
  color: var(--nav-dim);
}

textarea.ask-field {
  height: 120px;
  resize: vertical;
}

.ask-act {
  text-align: center;
  margin-top: 24px;
}

.ask-act .btn-submit {
  display: inline-block;
}

.pd-nav {
  margin-top: 34px;
  background: var(--pd-nav);
}

.pd-nav a {
  display: block;
  padding: 20px 26px;
  color: var(--footer-text);
  font-size: 14px;
  transition: color .25s, background .25s;
}

.pd-nav a:hover {
  color: var(--white);
  background: var(--red);
}

.pd-nav .pn-next {
  text-align: right;
}

.pd-nav .lbl {
  color: var(--footer-muted);
}

.pd-nav .pn-prev .lbl {
  margin-right: 12px;
}

.pd-nav .pn-next .lbl {
  margin-left: 12px;
}

.pd-nav a:hover .lbl {
  color: var(--white);
}

.rel-block {
  margin-top: 52px;
}

.rel-prod > [class*="col-"] {
  margin-bottom: 30px;
}

.rel-prod .pcard .thumb {
  border: 1px solid var(--line);
}

.rel-prod .pcard .pc-body {
  padding: 16px 10px 0;
}

.rel-prod .pcard .pc-title {
  margin-bottom: 0;
  padding-right: 0;
  text-align: center;
  font-size: 15px;
}

/* ============================================================ NEWS LIST */

.nlist {
  padding: 0 30px;
}

.nlist li {
  margin-bottom: 30px;
}

.nart {
  display: block;
  padding: 0;
  height: 280px;
  background: var(--gray-bg);
  position: relative;
  overflow: hidden;
  transition: box-shadow .3s ease, transform .3s ease;
}

.nart:hover {
  box-shadow: 1px 1px 12px 1px var(--black-a09);
  transform: translateY(-2px);
}

/* 3 phan cua 1 tin: col-sm-3 / col-sm-7 / col-sm-2, chinh lai be ngang */
@media (min-width: 768px) {
  .nart .n-pic.col-sm-3 {
    width: 28%;
  }

  .nart .n-body.col-sm-7 {
    width: 54%;
  }

  .nart .n-date.col-sm-2 {
    width: 18%;
  }
}

.nart .n-pic {
  height: 280px;
  padding: 0;
  overflow: hidden;
}

.nart .n-pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}

.nart:hover .n-pic img {
  transform: scale(1.06);
}

.nart .n-date {
  text-align: right;
  padding: 105px 55px 0 0;
}

.nart .n-date .d {
  font-size: 56px;
  font-weight: 700;
  color: var(--nav-dim);
  line-height: 1;
  transition: color .25s;
}

.nart .n-date .ym {
  font-size: 14px;
  color: var(--nav-dim);
  margin-top: 12px;
}

.nart .n-body {
  padding: 105px 24px 0 76px;
}

.nart .n-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--nav);
  margin-bottom: 14px;
  transition: color .25s;
}

.nart .n-desc {
  font-size: 14px;
  color: var(--nav-dim);
  line-height: 1.8;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nart:hover .n-title {
  color: var(--red);
}

/* ============================================================ NEWS DETAIL */

.art-head {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
  text-align: center;
}

.art-head h1 {
  font-size: 24px;
  font-weight: 700;
  color: var(--heading);
  line-height: 1.5;
  margin-bottom: 0;
}

.art-head .meta {
  font-size: 13px;
  color: var(--nav-dim);
}

.art-main .meta {
  text-align: center;
  margin-bottom: 22px;
}

.art-lead {
  background: var(--card-soft);
  padding: 18px 22px;
  font-size: 14px;
  line-height: 1.9;
  color: var(--text-soft);
  margin-bottom: 26px;
}

.art-toc {
  border: 1px solid var(--line);
  border-left: 3px solid var(--red);
  background: var(--gray-bg);
  margin-bottom: 26px;
}

.art-toc[hidden] {
  display: none;
}

.toc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 18px;
  background: none;
  border: 0;
  outline: none;
  font-size: 16px;
  font-weight: 700;
  color: var(--heading);
  text-align: left;
  cursor: pointer;
}

.toc-head .ico {
  font-size: 12px;
  color: var(--red);
  transform: rotate(180deg);
  transition: transform .3s ease;
}

.art-toc.is-close .toc-head .ico {
  transform: none;
}

.toc-list {
  list-style: none;
  margin: 0;
  padding: 0 18px 14px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.art-toc.is-close .toc-list {
  display: none;
}

.toc-list li {
  margin: 0;
}

.toc-list li.lv-1 {
  padding-left: 20px;
}

.toc-list li.lv-2 {
  padding-left: 40px;
}

.toc-list a {
  display: block;
  padding: 5px 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-soft);
  outline: none;
  transition: color .3s ease;
}

.toc-list a:hover,
.toc-list a:focus {
  color: var(--red);
  text-decoration: none;
}

.toc-no {
  color: var(--red);
  font-weight: 600;
}

@media (max-width: 768px) {
  .art-toc {
    margin-bottom: 20px;
  }

  .toc-head {
    padding: 10px 12px;
    font-size: 15px;
  }

  .toc-list {
    padding: 8px 12px 12px;
  }

  .toc-list li.lv-1 {
    padding-left: 14px;
  }

  .toc-list li.lv-2 {
    padding-left: 28px;
  }
}
/*
.art-body p {
  text-indent: 2em;
} */

.art-side {
  border: 1px solid var(--line);
  background: var(--white);
  padding: 22px 20px;
}

.asd-head {
  font-size: 18px;
  font-weight: 700;
  color: var(--red);
  padding-left: 14px;
  border-left: 4px solid var(--red);
  margin-bottom: 22px;
  line-height: 1.2;
}

.nrel li {
  margin-bottom: 24px;
}

.nrel a {
  display: block;
}

.nrel .nr-pic {
  position: relative;
  padding-top: 62%;
  overflow: hidden;
  margin-bottom: 12px;
}

.nrel .nr-pic img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}

.nrel a:hover .nr-pic img {
  transform: scale(1.06);
}

.nrel .nr-t {
  font-size: 15px;
  font-weight: 600;
  color: var(--heading);
  line-height: 1.5;
  margin-bottom: 8px;
  transition: color .25s;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nrel a:hover .nr-t {
  color: var(--red);
}

.nrel .nr-d {
  font-size: 13px;
  color: var(--nav-dim);
}

.toiuu .owl-carousel {
    display: block;
}

.toiuu .owl-carousel .slide {
    display: none;
}

.toiuu .owl-carousel .slide:first-child {
    display: block !important;
}

/* ============================================================ RESPONSIVE (trang con) */

@media (max-width: 991px) {
  .inner-banner {
    height: 240px;
  }

  .inner-banner .ib-txt {
    left: 5%;
    right: 5%;
    transform: translateY(-50%);
    white-space: normal;
  }

  .inner-banner .ib-en {
    font-size: 34px;
  }

  .side {
    margin-bottom: 30px;
  }

  .pd-info {
    margin-top: 26px;
  }

  .art-side {
    margin-top: 40px;
  }
}

@media (max-width: 768px) {
  /* subbar mobile: hang tab (cuon ngang) o tren, breadcrumb canh giua o duoi */
  .subbar .wrap {
    height: auto;
    padding: 0 3%;
  }

  .subtabs {
    float: none;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .subtabs a {
    line-height: 62px;
    font-size: 14px;
    padding: 0 20px;
    margin-right: 0;
  }

  .subtabs a:after {
    top: 22px;
  }

  .crumb {
    float: none;
    line-height: 23px;
    padding: 10px;
    text-align: center;
    margin-bottom: 0;
  }

  .ch-title {
    margin-top: 20px;
  }

  .inner-banner .ib-en {
    font-size: 26px;
  }

  .pd-nav .pn-prev,
  .pd-nav .pn-next {
    float: none;
  }
}

/* mobile: khung noi dung trang con lui vao 3%, bo margin am cua .row de khong tran ngang */
@media (max-width: 767px) {
  .page > .wrap {
    padding: 0;
  }

  .page > .wrap > .container-fluid > .row {
    margin-left: 0;
    margin-right: 0;
  }
}

/* news list mobile: anh full be ngang o tren, duoi la tieu de/mo ta + ngay ben phai */
@media (max-width: 767px) {
  .nlist {
    padding: 0;
  }

  .nlist li {
    margin-bottom: 50px;
  }

  .nart {
    height: auto;
    margin-left: 0;
    margin-right: 0;
  }

  .nart .n-pic {
    width: 100%;
    height: 0;
    padding-bottom: 65%;
    position: relative;
  }

  .nart .n-pic img {
    position: absolute;
    left: 0;
    top: 0;
  }

  .nart .n-body {
    float: left;
    width: 72%;
    padding: 20px 0 20px 10px;
  }

  .nart .n-title {
    font-size: 16px;
    line-height: 1.2;
    padding: 10px 0;
    margin-bottom: 0;
  }

  .nart .n-desc {
    line-height: 1.6;
  }

  .nart .n-date {
    float: right;
    width: auto;
    text-align: center;
    padding: 20px 10px 20px 0;
  }

  .nart .n-date .d {
    font-size: 40px;
    font-weight: 400;
    line-height: 1.5;
  }

  .nart .n-date .ym {
    margin-top: 0;
    line-height: 1.5;
  }
}

/* product list mobile: danh muc san pham gap lai thanh nut do, bam de xo xuong */
@media (max-width: 991px) {
  .side-head {
    position: relative;
    border-radius: 10px;
    text-align: center;
    cursor: pointer;
  }

  .side-box.is-open .side-head {
    border-radius: 10px 10px 0 0;
  }

  .side-head .sh-caret {
    display: block;
    position: absolute;
    right: 15px;
    top: 19px;
    width: 16px;
    height: 16px;
    transition: transform .25s;
  }

  .side-box.is-open .side-head .sh-caret {
    transform: rotate(180deg);
  }

  .side-list {
    display: none;
    padding: 0;
    border: 1px solid var(--line);
    border-top: 0;
  }

  .side-box.is-open .side-list {
    display: block;
  }

  .side-list a {
    padding: 14px 10px 14px 22px;
    font-size: 15px;
  }

  .side-list a:before {
    left: 10px;
  }

  .side-list a:hover,
  .side-list a.on {
    padding-left: 26px;
  }

}

@media (max-width: 767px) {
  .side,
  .content {
    padding-left: 0;
    padding-right: 0;
  }

  .content .row {
    margin-left: 0;
    margin-right: 0;
  }

  .content .row > [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
  }

  .richtext table,
  .param-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .btn-pill {
    width: auto;
    height: auto;
    padding: 10px 14px;
    margin: 0 10px 10px 0;
    border-radius: 15px;
    font-size: 14px;
  }

  .btn-pill .ico {
    width: 13px;
    height: 13px;
    margin-right: 6px;
  }

  .pd-nav {
    background: transparent;
  }

  .pd-nav .pn-next {
    text-align: left;
  }

  .pd-nav .pn-next .lbl {
    float: left;
    margin-left: 0;
    margin-right: 12px;
  }

  .pd-nav a {
    padding: 10px 0;
    color: var(--heading);
  }

  .pd-nav a:hover {
    background: transparent;
    color: var(--red);
  }

  .pd-nav .lbl {
    color: var(--crumb);
  }

  .pd-nav a:hover .lbl {
    color: var(--crumb);
  }
}

/* news detail mobile */
@media (max-width: 767px) {
  .subbar.crumb-slim .wrap {
    height: auto;
  }

  .subbar.crumb-slim .crumb,
  .subbar.crumb-left .crumb {
    float: none;
    font-size: 14px;
    line-height: 23px;
  }

  .art-main {
    padding-left: 0;
    padding-right: 0;
  }

  .art-head {
    padding-bottom: 20px;
    margin-bottom: 20px;
  }

  .art-head h1 {
    font-size: 20px;
    line-height: 1.4;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--line);
  }

  .art-main .meta {
    margin-bottom: 0;
    font-size: 14px;
    margin-top: 20px;
  }

  .art-lead {
    padding: 12px 10px;
    line-height: 1.7;
    margin-bottom: 20px;
  }

  .art-body {
    line-height: 1.9;
  }

  .art-side {
    padding: 20px 15px;
  }

  .asd-head {
    font-size: 20px;
    padding-left: 0;
    border-left: 0;
    margin-bottom: 16px;
  }

  .nrel .nr-pic {
    padding-top: 100%;
  }

  .page {
    padding-top: 20px;
  }
  
  .side {
    margin-bottom: 10px;
  }
}

/* ===== BO SUNG KHI GHEP VAO CMS ===== */
.sp-bar,
.ch-search {
  margin: 0;
}

.sp-btn {
  width: 100%;
  border: 0;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
}

.crumb ol[itemtype] {
  display: inline;
  margin: 0;
  padding: 0;
  list-style: none;
}

.crumb ol[itemtype] > li {
  display: inline;
}

.crumb ol[itemtype] > li + li:before {
  content: "/";
  margin: 0 8px;
  color: var(--line);
}

.crumb ol[itemtype] > li:last-child {
  color: var(--red);
}

.nav-main > li.is-active > a {
  color: var(--red);
}

.nav-main > li.is-active > a:after {
  opacity: 1;
}

.pager .dots {
  border-color: transparent;
  background: none;
  cursor: default;
}

.foot-info-page li {
  color: var(--text);
}

.foot-info-page li a {
  color: var(--text);
}

.foot-info-page li a:hover {
  color: var(--red);
}

.map-box {
  position: relative;
  height: 0;
  padding-bottom: 57%;
  overflow: hidden;
}

.map-box iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.wrap-img {
  display: block;
  overflow: hidden;
}

.img-100 {
  position: relative;
  height: 0;
  display: block;
  overflow: hidden;
}

.img-100 > img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pd-media .big > img {
  object-fit: contain;
}

.news-big .thumb > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.richtext {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.richtext > *:last-child {
  margin-bottom: 0;
}

.richtext h2,
.richtext h4,
.richtext h5,
.richtext h6 {
  color: var(--heading);
  font-weight: 700;
  line-height: 1.35;
  margin: 30px 0 14px;
}

.richtext h2 { font-size: 24px; }
.richtext h4 { font-size: 18px; }
.richtext h5 { font-size: 16px; }
.richtext h6 { font-size: 15px; }

.richtext b {
  color: var(--heading);
  font-weight: 700;
}

.richtext em,
.richtext i {
  font-style: italic;
}

.richtext u {
  text-decoration: underline;
}

.richtext s,
.richtext strike,
.richtext del {
  text-decoration: line-through;
}

.richtext mark {
  background: var(--red-a15);
  color: var(--heading);
  padding: 0 3px;
}

.richtext sub,
.richtext sup {
  font-size: 75%;
  line-height: 0;
}

.richtext small {
  font-size: 85%;
  color: var(--crumb);
}

.richtext a {
  color: var(--red);
  text-decoration: underline;
}

.richtext a:hover,
.richtext a:focus {
  color: var(--red-dark);
  text-decoration: none;
}

.richtext ul,
.richtext ol {
  margin: 0 0 18px;
  padding-left: 26px;
}

.richtext ul { list-style: disc; }
.richtext ol { list-style: decimal; }
.richtext ul ul { list-style: circle; }
.richtext ol ol { list-style: lower-alpha; }

.richtext li {
  list-style: inherit;
  margin: 0 0 6px;
}

.richtext li > ul,
.richtext li > ol {
  margin: 6px 0 0;
}

.richtext blockquote {
  margin: 22px 0;
  padding: 14px 20px;
  border-left: 4px solid var(--red);
  background: var(--page-soft);
  color: var(--text-soft);
  font-style: italic;
}

.richtext blockquote p:last-child {
  margin-bottom: 0;
}

.richtext hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 28px 0;
}

.richtext img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 18px auto;
}

.richtext img.image-style-align-left,
.richtext img[style*="float:left"],
.richtext img[style*="float: left"] {
  float: left;
  margin: 6px 20px 12px 0;
  max-width: 50%;
}

.richtext img.image-style-align-right,
.richtext img[style*="float:right"],
.richtext img[style*="float: right"] {
  float: right;
  margin: 6px 0 12px 20px;
  max-width: 50%;
}

.richtext figure {
  margin: 18px 0;
  max-width: 100%;
}

.richtext figure img {
  margin: 0 auto;
}

.richtext figure.image {
  display: table;
  margin: 18px auto;
}

.richtext figure.image-style-align-left {
  float: left;
  margin: 6px 20px 12px 0;
}

.richtext figure.image-style-align-right {
  float: right;
  margin: 6px 0 12px 20px;
}

.richtext figcaption {
  display: block;
  margin-top: 8px;
  padding: 6px 4px;
  font-size: 13px;
  font-style: italic;
  color: var(--crumb);
  text-align: center;
}

.richtext iframe {
  display: block;
  max-width: 100%;
  margin: 18px auto;
  border: 0;
}

.richtext figure.media,
.richtext .media {
  position: relative;
  width: 100%;
  height: 0;
  margin: 18px 0;
  padding-top: 56.25%;
}

.richtext figure.media iframe,
.richtext .media iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}

.richtext .table-responsive {
  overflow-x: auto;
  margin: 18px 0;
}

.richtext table {
  width: 100%;
  margin: 18px 0;
  border-collapse: collapse;
  font-size: 13px;
}

.richtext table td,
.richtext table th {
  border: 1px solid var(--line);
  padding: 11px 14px;
  text-align: center;
  vertical-align: top;
}

.richtext table th {
  background: var(--gray-bg);
  color: var(--heading);
  font-weight: 600;
}

.richtext table caption {
  caption-side: bottom;
  padding: 8px 0;
  font-size: 13px;
  font-style: italic;
  color: var(--crumb);
}

.richtext code {
  font-family: "Consolas", "Courier New", monospace;
  font-size: .9em;
  background: var(--gray-bg);
  color: var(--red-dark);
  padding: 2px 6px;
}

.richtext pre {
  margin: 18px 0;
  padding: 14px 16px;
  background: var(--card-dark);
  color: var(--white);
  overflow-x: auto;
  font-family: "Consolas", "Courier New", monospace;
  font-size: 13px;
  line-height: 1.5;
}

.richtext pre code {
  background: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
}

.richtext .text-left,
.richtext [style*="text-align:left"],
.richtext [style*="text-align: left"] { text-align: left; }

.richtext .text-center,
.richtext [style*="text-align:center"],
.richtext [style*="text-align: center"] { text-align: center; }

.richtext .text-right,
.richtext [style*="text-align:right"],
.richtext [style*="text-align: right"] { text-align: right; }

.richtext [style*="text-align:justify"],
.richtext [style*="text-align: justify"] { text-align: justify; }

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

@media (max-width: 767px) {
  .richtext img.image-style-align-left,
  .richtext img.image-style-align-right,
  .richtext img[style*="float"],
  .richtext figure.image-style-align-left,
  .richtext figure.image-style-align-right {
    float: none;
    max-width: 100%;
    margin: 18px auto;
  }

  .richtext h2 { font-size: 21px; }
  .richtext h3 { font-size: 18px; }
  .richtext h4 { font-size: 16px; }
}

@media (max-width: 1580px) {
  .wrap {
    max-width: 1200px;
  }
}