/*
Theme Name:           Flatsome
Theme URI:            http://flatsome.uxthemes.com
Author:               UX-Themes
Author URI:           https://uxthemes.com
Description:          Multi-Purpose Responsive WooCommerce Theme
Version:              3.19.4
Requires at least:    6.4
Requires PHP:         7.4
WC requires at least: 8.3
Text Domain:          flatsome
License:              https://themeforest.net/licenses
License URI:          https://themeforest.net/licenses
*/


/***************
All custom CSS should be added to Flatsome > Advanced > Custom CSS,
or in the style.css of a Child Theme.
***************/
	body, html, 
h1, h2, h3, h4, h5, h6,
p, a, span, div,
button, input, textarea{
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.2;
	color: #000;
}

h2 span {
    font-size: 22px;
    font-weight: 600;
}
h3 span {
    font-size: 18px;
    font-weight: 600;
}
h4 span {
    font-size: 16px;
    font-weight: 600;
}

.entry-header h1 {
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    font-weight: 600;
    line-height: 1.6;
    font-size: 24px !important;
    color: #000;
}
.entry-content {
	padding-top: 0px!important;
	text-align: justify;
}

b, strong {
	font-weight: 600;
}


.lwptoc_item {
    line-height: 1.4!important;
}


/* ===== Thanh menu trên: nền đỏ, chữ in hoa, bold ===== */


/* selector menu chính - thử các selector thường dùng của Flatsome */
.header-main .nav > li > a,
.header-wrapper .nav > li > a,
.header-top .nav > li > a,
.site-header .nav > li > a {
  color: #fff !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  padding: 12px 14px !important;
  font-size: 17px !important;
	font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; !important
}

/* hover */
.header-main .nav > li > a:hover,
.header-wrapper .nav > li > a:hover,
.header-top .nav > li > a:hover,
.site-header .nav > li > a:hover {
  opacity: 0.95;
  text-decoration: underline;
}

/* ===== Thanh menu phụ (dòng dưới) màu xám đậm ===== */
/* Bạn có thể gán lớp cho menu phụ trong Flatsome; mình target .nav-dark hoặc fallback .secondary-nav */
.nav-dark,
.secondary-nav,
.header-bottom,
.header .header-nav-secondary {
  background: #333 !important;
}

/* menu items thanh phụ */
.nav-dark .nav > li > a,
.secondary-nav .nav > li > a,
.header-bottom .nav > li > a,
.header .header-nav-secondary .nav > li > a {
  color: #fff !important;
  background: #444;
  padding: 8px 12px !important;
  margin-right: 8px;
  border-radius: 3px;
  font-size: 13px;
  font-weight: 600;
  display: inline-block;
}

/* hover thanh phụ */
.nav-dark .nav > li > a:hover,
.secondary-nav .nav > li > a:hover,
.header-bottom .nav > li > a:hover,
.header .header-nav-secondary .nav > li > a:hover {
  background: #222;
}

/* ===== Icon Home vuông cho mục đầu tiên của menu phụ ===== */
.nav-dark .nav > li:first-child > a,
.secondary-nav .nav > li:first-child > a,
.header-bottom .nav > li:first-child > a {
  background: #666 !important;
  width: 157px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  font-size: 18px;
}

/* ===== Search: bo tròn, nền mờ trắng ===== */
.header-main .searchform,
.header-wrapper .searchform,
.site-header .searchform {
  background: rgba(255,255,255,0.2) !important;
  border-radius: 24px;
  padding: 4px 8px;
}

.header-main .searchform input,
.header-wrapper .searchform input,
.site-header .searchform input {
  color: #fff !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.header-main .searchform input::placeholder,
.header-wrapper .searchform input::placeholder,
.site-header .searchform input::placeholder {
  color: rgba(255,255,255,0.95) !important;
}

/* ===== Responsive: ẩn menu lớn trên nhỏ màn hình (Flatsome có mobile menu riêng) ===== */
@media (max-width: 980px) {
  .header-main .nav,
  .header-wrapper .nav {
    display: none !important;
  }

  /* thanh phụ cuộn ngang */
  .nav-dark .nav,
  .secondary-nav .nav {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
}

/* Xóa nền đỏ full width */
.header-main {
  background: transparent !important;
}

/* Tạo nền đỏ chỉ cho khu vực container của menu */
.header-main .header-inner {
  background: #e96b67 !important;  /* màu đỏ của bạn */
  border-radius: 4px;              /* tuỳ chọn, bo nhẹ giống mẫu */
  padding-top: 6px;
  padding-bottom: 6px;
}

/* Gỡ padding mặc định để không bị lệch */
.header-inner.container.logo-left {
  padding-left: 20px;
  padding-right: 20px;
}
/* 1. Xóa nền full-width của thanh wide-nav */
#wide-nav {
  background: transparent !important;
}

/* 2. Tạo nền xám chỉ trong phạm vi container */
#wide-nav .flex-row.container {
  background: #333 !important;              /* màu xám đậm */
  padding: 8px 20px !important;             /* khoảng cách bên trong */
  border-radius: 4px;                       /* bo nhẹ viền */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 3. Menu item giống style menu phụ ở trên */
#wide-nav .header-bottom-nav.nav > li > a {
  color: #fff !important;
  background: #444;
  padding: 8px 12px;
  margin-right: 0px!important;
  border-radius: 3px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  display: inline-block;
}

/* 4. Hover */
#wide-nav .header-bottom-nav.nav > li > a:hover {
  background: #222;
}

/* 5. Ô đầu tiên dạng ô vuông (optional) */
#wide-nav .header-bottom-nav.nav > li:first-child > a {
  background: #666 !important;
  width: 144px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  font-size: 16px;
}

/* ===== Thanh tiêu đề kiểu Gamek ===== */
.tg-section-title {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 15px 0;
}

.tg-title-label {
    background: #d6282f;        /* màu đỏ */
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    padding: 8px 18px;
    font-size: 18px;
    display: inline-block;
}

/* Thanh xám kéo dài */
.tg-section-title::after {
    content: "";
    flex-grow: 1;
    height: 37px;                /* chiều cao thanh xám */
    background: #d9d9d9;         /* màu xám giống hình bạn gửi */
    margin-left: 0px;
    border-radius: 2px;
}

/* ------------------------------- tin moi  nhat -------------------------------------- */

/* --- Force media-left / content-right layout for Flatsome post grid --- */

/* Make each box a horizontal flex row */
.row.large-columns-1.medium-columns-1.small-columns-1 .post-item .col-inner .box {
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: stretch;
  border: 1px solid rgba(0,0,0,0.07);
  background: #fff;
  transition: transform .22s ease, box-shadow .22s ease;
}

/* Hover lift */
.row.large-columns-1.medium-columns-1.small-columns-1 .post-item .col-inner .box:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.08);
}

/* Left thumbnail area: use a fixed percent width */
.row.large-columns-1.medium-columns-1.small-columns-1 .post-item .box-image {
  flex: 0 0 40%;          /* thumbnail chiếm 38-42% — chỉnh nếu muốn */
  max-width: 40%;
  display: block;
}

/* Ensure image fills box and keeps ratio (cover) */
.row.large-columns-1.medium-columns-1.small-columns-1 .post-item .box-image .image-cover {
  width: 100%;
  height: 100%;
  padding-top: 0 !important;  /* remove square padding so we can control height by img */
  position: relative;
}
.row.large-columns-1.medium-columns-1.small-columns-1 .post-item .box-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  aspect-ratio: 16/9; /* giữ tỷ lệ ngang rộng */
  border-radius: 2px;
}

/* Right content area */
.row.large-columns-1.medium-columns-1.small-columns-1 .post-item .box-text {
  flex: 1 1 60%;
  padding: 6px 0 6px 0 !important;
  display: flex;
  flex-direction: column;
}

/* Title */
.row.large-columns-1.medium-columns-1.small-columns-1 .post-item .post-title {
  font-size: 20px;
  line-height: 1.18;
  font-weight: 700;
  margin: 0 0 8px;
}
.row.large-columns-1.medium-columns-1.small-columns-1 .post-item .post-title a {
  color: #111 !important;
  text-decoration: none;
}
.row.large-columns-1.medium-columns-1.small-columns-1 .post-item .post-title a:hover {
  color: #d6282f !important;
}

/* Excerpt (nếu có) */
.row.large-columns-1.medium-columns-1.small-columns-1 .post-item .entry-content,
.row.large-columns-1.medium-columns-1.small-columns-1 .post-item .box-text .excerpt,
.row.large-columns-1.medium-columns-1.small-columns-1 .post-item .box-text .post-excerpt {
  color: #666;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 10px;
}

/* thin divider under title like sample */
.row.large-columns-1.medium-columns-1.small-columns-1 .post-item .is-divider {
  width: 52px;
  height: 2px;
  background: #e8e8e8;
  margin-top: 8px;
}

/* Meta (author/date) styled: author red */
.row.large-columns-1.medium-columns-1.small-columns-1 .post-item .post-meta,
.row.large-columns-1.medium-columns-1.small-columns-1 .post-item .meta {
  margin-top: auto;
  font-size: 13px;
  color: #555;
}
.row.large-columns-1.medium-columns-1.small-columns-1 .post-item .post-meta .author {
  color: #d81b3a;
  font-weight: 700;
  margin-right: 8px;
}

/* Small screens: stack vertically (image on top) */
@media (max-width: 900px) {
  .row.large-columns-1.medium-columns-1.small-columns-1 .post-item .col-inner .box {
    flex-direction: column;
  }
  .row.large-columns-1.medium-columns-1.small-columns-1 .post-item .box-image {
    flex-basis: auto;
    max-width: 100%;
  }
  .row.large-columns-1.medium-columns-1.small-columns-1 .post-item .box-image img {
    aspect-ratio: 16/9;
    height: auto;
  }
}
p.cat-label.is-xxsmall.op-7.uppercase {
    background-color: #d6282f;
    color: #f3f3f3;
    font-size: 13px;
    padding: 2px 5px;
    display: inline-block;
    max-width: 355px;
    text-overflow: ellipsis;
    overflow: hidden;
}



/* Ép description nằm gọn trong container chính */
.category-description.content-block,
.forced-cat-desc,
.tg-post-cat-description,
.my-post-cat-description,
.my-term-extra-content {
  display: block !important;
  float: none !important;
  clear: both !important;
  width: 100% !important;
  max-width: 1100px !important;    /* chỉnh theo chiều rộng layout của bạn */
  margin: 0 auto 28px !important;  /* căn giữa và cách dưới */
  padding: 0 18px !important;      /* chỉnh lề bên trong cho đẹp */
  box-sizing: border-box !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  color: #333 !important;
  background: transparent !important;
  word-break: break-word !important;
}

/* Nếu mô tả chứa heading, p, ul... */
.category-description.content-block h1,
.category-description.content-block h2,
.category-description.content-block h3,
.forced-cat-desc h1,
.forced-cat-desc h2,
.forced-cat-desc h3 {
  margin: 0.8em 0 0.4em !important;
  line-height: 1.2 !important;
  color: #222 !important;
}

/* Tránh ảnh/iframe tràn ra ngoài */
.category-description.content-block img,
.forced-cat-desc img { max-width:100%; height:auto; display:block; }

/* Mobile: giảm padding */
@media (max-width: 768px){
  .category-description.content-block,
  .forced-cat-desc {
    padding: 0 12px !important;
    font-size: 15px !important;
  }
}

/* Nếu theme cố gắng ẩn mô tả, ép hiển thị */
.term-description,
.category .term-description {
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
}


/* ----- CHỐT: Giữ mô tả gọn, không tràn qua sidebar & nút Xem thêm ở giữa ----- */

/* Wrapper chung (nếu bạn dùng class khác -> thêm selector tương ứng) */
.tg-cat-desc-wrap,
.category-description.content-block,
.forced-cat-desc,
.tg-post-cat-description,
.my-post-cat-description,
.my-term-extra-content {
  box-sizing: border-box !important;
  float: none !important;
  clear: both !important;
  display: block !important;
  width: 100% !important;
   /* <<--- chỉnh giá trị này nếu muốn rộng/hẹp hơn (ví dụ 760px) */
  margin: 0 auto 22px !important; /* căn giữa trong container, cách dưới 22px */
  padding: 0 16px !important;     /* lề trong ngang */
  color: #333 !important;
	    text-align: justify;
  line-height: 1.7 !important;
  background: transparent !important;
  word-break: break-word !important;
}

/* Nếu theme dùng container lớn, đảm bảo mô tả nằm cùng cột với nội dung bài */
.page-wrapper.container .tg-cat-desc-wrap,
.container .tg-cat-desc-wrap { 
  max-width: 820px; /* giữ cùng kích thước */ 
}

/* Nếu muốn mô tả canh trái bên trong cột (không căn giữa toàn trang) thay:
   margin: 0 0 22px; và thêm padding-left tùy ý.
*/

/* Đảm bảo các thẻ con không tràn */
.tg-cat-desc-wrap img,
.tg-cat-desc-wrap iframe,
.tg-cat-desc-wrap table {
  max-width: 100% !important;
  height: auto !important;
  display: block;
}

/* Căn giữa nút Xem thêm / Rút gọn */
.tg-cat-desc-wrap .tg-cat-toggle,
.tg-cat-toggle {
  display: block !important;
  margin: 16px auto 0 !important;  /* căn giữa và cách trên 16px */
  text-align: center;
  background: #e14b4b !important;
  color: #fff !important;
  padding: 10px 18px !important;
  border-radius: 4px !important;
  border: none !important;
  cursor: pointer !important;
  font-weight: 700 !important;
}

/* Nếu bạn muốn nút nhỏ hơn trên mobile */
@media (max-width: 768px) {
  .tg-cat-desc-wrap { padding: 0 12px !important; max-width: 100% !important; }
  .tg-cat-toggle { padding: 8px 14px !important; font-size: 15px !important; }
}

/* Bảo đảm mô tả hiển thị (trường hợp theme cố ẩn) */
.term-description,
.category .term-description {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ------ KHUNG ĐẸP + BO GÓC + ĐỔ BÓNG CHO MÔ TẢ CATEGORY ------ */
.tg-cat-desc-wrap {
  background: #fff;                 /* nền trắng sạch */
  border: 1px solid #e6e6e6;        /* viền nhạt */
  border-radius: 12px;              /* bo góc mềm */
  padding: 10px 20px !important;    /* lề trong rộng */
  margin: 32px auto 32px !important;   /* cách dưới */
  
  box-shadow: 0 4px 14px rgba(0,0,0,0.08); /* đổ bóng nhẹ */
  box-sizing: border-box;
  transition: box-shadow .25s ease;
}



/* Nội dung bên trong */
.tg-cat-desc,
.category-description.content-block {
  font-size: 16px !important;
  line-height: 1.75 !important;
  color: #333 !important;
  width: 100% !important;
  float: none !important;
  clear: both !important;
}

/* Căn giữa nút XEM THÊM / RÚT GỌN */
.tg-cat-desc-wrap .tg-cat-toggle,
.tg-cat-toggle {
  display: block !important;
  width: 160px;
 
 
  color: #fff !important;
   border-radius: 8px !important;
  border: none !important;
  cursor: pointer !important;
  font-weight: 600 !important;
 
}

/* hiệu ứng khi hover nút */
.tg-cat-toggle:hover {
  opacity: .85;
  transform: translateY(-2px);
}

/* Đảm bảo ảnh/iframe không tràn */
.tg-cat-desc-wrap img,
.tg-cat-desc-wrap iframe {
  max-width: 100%;
  height: auto;
  border-radius: 8px;     /* ảnh cũng bo góc luôn */
  margin: 8px 0;
}

/* Mobile thân thiện */
@media (max-width: 768px) {
  .tg-cat-desc-wrap {
    padding: 20px !important;
    max-width: 100% !important;
    margin: 0 10px 28px !important;
  }
  .tg-cat-toggle {
    width: auto;
    padding: 8px 16px !important;
    font-size: 15px !important;
  }
}

#comments, 
.comments-area,
.comment-respond,
#reply-title,
.comment-reply-title,
.comments-title {
    display: none !important;
}