/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/
/* ===== Banner + breadcrumb ===== */
.dgc-banner{position:relative;background:#000 center/cover no-repeat;padding:90px 0 0;text-align:center;color:#fff;min-height: 210px;}

.dgc-banner.no-img:before{display:none}
.dgc-banner .dgc-inner{position:relative;z-index:1}
.dgc-banner h1,.dgc-banner p.dgc-title{color:#fff;margin:0 0 28px;font-size:44px;font-weight:700;text-transform:uppercase;line-height:1.3;letter-spacing:.2px}
.dgc-crumb{bottom: -20px;display:block;width:100%;background:#fff;border:1px solid #d9d9d9;border-radius:30px;padding:9px 22px;text-align:left;font-size:.9rem;color:#8a8a8a;line-height:1.5;position:relative;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.dgc-crumb p{margin:0}
.dgc-crumb a{color:#8a8a8a}
.dgc-crumb a:hover{color:var(--primary-color)}
.dgc-crumb .separator{margin:0 6px;color:#bbb}
.dgc-crumb .last{color:var(--primary-color)}

.dgc-wrap{padding:45px 0 50px}
.dgc-wrap .col{padding-bottom:0}

/* ===== Tab danh mục cấp 1 ===== */
.dgc-tabs{display:flex;border:1px solid #e0e0e0;border-radius:25px;margin:0 0 22px;list-style:none;background:#fff;overflow: auto;}
.dgc-tabs li{margin:0;flex:1 1 0;text-align:center; margin-left:-20px !important;border-right: 1px solid #ccc;border-radius: 25px;}
.dgc-tabs a{display:block;padding:9px 40px 9px 40px;border-radius:30px;font-size:16px;font-weight:700;color:Black;white-space:nowrap;transition:.2s;    line-height: 1.94;}
.dgc-tabs a:hover{background:var(--primary-color);color:white;z-index: 2;box-shadow: 0px 5px 20px 0px #ddd;position: relative;}
.dgc-tabs li.is-active a{background:var(--primary-color);color:#fff;position: relative;z-index: 1;border-radius: 30px;}
.dgc-tabs li:first-child{
    margin-left: 0 !important;
}
.dgc-tabs li:last-child{
    border-right: 0;
    flex: 1 1 0 !important;
    max-width: unset !important;
}

/* ===== Bố cục (lưới Flatsome: col large-3 = 25% / col large-9 = 75%) ===== */
.dgc-layout{align-items:flex-start}
.dgc-layout.side-right{flex-direction:row-reverse}

/* ===== Sidebar cấp 2 ===== */
.dgc-side ul{list-style:none;margin:0;border:1px solid #e3e3e3;background:#fff}
.dgc-side li{margin:0 !important;border-bottom:1px solid #e3e3e3}
.dgc-side li:last-child{border-bottom:0}
.dgc-side a{display:block;padding:12px 16px;font-size:.95rem;color:#555;line-height:1.4}
.dgc-side a:hover{color:var(--primary-color)}
.dgc-side li.is-active a{color:var(--primary-color);font-weight:700;background:#f4f4f4}

/* ===== Card sản phẩm: lẻ = chữ trái/ảnh phải, chẵn = chữ phải/ảnh trái ===== */
.dgc-item{background:#fff;border:1px solid #e6e6e6;box-shadow:0 1px 5px rgba(0,0,0,.06);padding:30px 34px;margin-bottom:22px}
.dgc-item > .row{margin:0;align-items:center}
.dgc-item:nth-child(even) > .row{flex-direction:row-reverse}
.dgc-item .col{padding:0}
.dgc-item .txt .col-inner{padding-right:30px}
.dgc-item:nth-child(even) .txt .col-inner{padding-right:0;padding-left:30px}
.dgc-item .img{text-align:center}
.dgc-item .img img{max-width:100%;height:auto;max-height:280px;width:auto;display:inline-block}
.dgc-item h2{font-size:1.25rem;font-weight:700;margin:0 0 14px;color:#222;line-height:1.4}
.dgc-item h2 a{color:inherit}
.dgc-item h2 a:hover{color:var(--primary-color)}
.dgc-item .sum{font-size:.95rem;color:#555;line-height:1.7;margin-bottom:16px}
.dgc-item .sum p{margin:0 0 8px}
.dgc-item .sum ul{margin:0 0 8px 14px}
.dgc-item .sum li{margin-bottom:2px}
.dgc-btn{display:inline-block;background:var(--primary-color);color:#fff;font-size:.85rem;font-weight:700;padding:9px 24px;border-radius:20px;line-height:1.4;margin:0}
.dgc-btn:hover{color:#fff;opacity:.85}

/* ===== Phân trang ===== */
.dgc-pager{display:flex;gap:7px;justify-content:flex-end;margin-top:6px}
.dgc-pager a,.dgc-pager span{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid #d9d9d9;border-radius:50%;font-size:.9rem;color:#444;background:#fff;line-height:1}
.dgc-pager .current{background:var(--primary-color);border-color:var(--primary-color);color:#fff}
.dgc-pager a:hover{border-color:var(--primary-color);color:var(--primary-color)}

/* ===== Tablet trở xuống ===== */
@media (max-width:849px){
  .dgc-banner h1,.dgc-banner p.dgc-title{font-size:1.6rem}
  .dgc-tabs{border:0;padding:0;justify-content:flex-start;background:none}
  .dgc-tabs li{display:none;flex:0 0 auto}
  .dgc-tabs li.is-active{display:block}
  .dgc-tabs li.is-active a{padding:8px 20px}
  .dgc-layout.side-right{flex-direction:row}
  .dgc-side{margin-bottom:20px}
  .dgc-item,.dgc-item:nth-child(even){padding:20px}
  .dgc-item > .row,.dgc-item:nth-child(even) > .row{flex-direction:column-reverse}
  .dgc-item .txt .col-inner,.dgc-item:nth-child(even) .txt .col-inner{padding:18px 0 0}
  .dgc-item h2{font-size:.95rem}
  .dgc-item .sum{font-size:.95rem}
  .dgc-btn{font-size:.9rem}
}




/* =====================================================
   CHI TIẾT SẢN PHẨM (single-product.php) - class dgp-*
   Banner/breadcrumb dùng lại .dgc-banner / .dgc-crumb
   ===================================================== */
html{scroll-behavior:smooth}
.dgp-wrap{padding:100px 0 50px}
.dgp-wrap .col{padding-bottom:0}
.dgp-sec{scroll-margin-top:90px}

/* Ảnh + thông tin */
.dgp-top{margin-bottom:40px}
.dgp-thumb .col-inner{text-align:center}
.dgp-thumb img{max-width:100%;height:auto;max-height:420px;width:auto}
.dgp-title{font-size:1.75rem;font-weight:500;color:#333;margin:0 0 18px;line-height:1.3}
.dgp-sum{font-size:16px;color:#555;line-height:1.7}
.dgp-sum p{margin:0 0 10px}

/* Thanh tab: dùng chung .dgc-tabs với trang danh mục; .dgc-tabs-all = hiện đủ tab (không ẩn trên tablet) */
.dgc-tabs-all .dgp-tab-cat{text-align:right}
.dgc-tabs-all{margin-bottom:30px}

/* Nội dung "Tính năng" */
.dgp-content{font-size:16px;color:#444;line-height:1.7;margin-bottom:30px}
.dgp-content p{margin:0 0 8px;font-size: 16px;}
.dgp-content img{max-width:100%;height:auto}

/* Tiêu đề dạng pill */
.dgp-pill{display:inline-block;text-align:center;border:1px solid #d9d9d9;border-radius:25px;    padding: 12px 79px;font-weight:700;font-size:16px;color:#333;background:#fff;margin-bottom:22px;line-height:1.5}

/* Bảng thông số */
.dgp-specs{width:100%;table-layout:fixed;border-collapse:collapse;border:1px solid #ddd;margin:0 0 40px;font-size:16px;color:#444}
.dgp-specs th,.dgp-specs td{padding:10px 14px;vertical-align:top;text-align:left;border:0;line-height:1.6;font-size: 16px;}
.dgp-specs th{width:40%;font-weight:400;border-right:1px solid #ddd;text-transform:none;font-size:inherit;color:#444}
.dgp-specs tr:nth-child(even){background:#f3f2f2}
.dgp-specs td p{margin:0 0 10px}
.dgp-specs td p:last-child{margin-bottom:0}

/* Video */
.dgp-video{max-width:100%;margin-bottom:40px}
.dgp-video iframe,.dgp-video video{max-width:100%;width:100%;aspect-ratio:16/9;height:auto;border:0}

/* Tải về */
.dgp-dls{list-style:none;margin:0 0 40px;padding:0}
.dgp-dls li{margin:0;display:flex;align-items:center;gap:10px;border:1px solid #ddd;padding:9px 14px;max-width:50%;margin:0 0 8px;font-size:16px}
.dgp-dls .dgp-ico{color:var(--primary-color);flex:0 0 18px}
.dgp-dls a{color:var(--primary-color)}
.dgp-dls a:hover{opacity:.8}

/* Sản phẩm liên quan */
.dgp-related{margin-top:20px}
.dgp-rel-title{font-size:1.5rem;font-weight:400;text-transform:uppercase;color:#444;margin:0 0 22px}
.dgp-rel-item a{display:block;text-align:center;color:#444}
.dgp-rel-img{display:flex;align-items:center;justify-content:center;border:1px solid #ddd;background:#fff;aspect-ratio:1/0.8;padding:10px;overflow:hidden;margin-bottom:12px}
.dgp-rel-img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.dgp-rel-name{display:block;font-size:.85rem;line-height:1.4}
.dgp-rel-item a:hover .dgp-rel-name{color:var(--primary-color)}

.single-product .dgc-tabs li{
    max-width: 20%;
}


@media (max-width:849px){
  .dgp-wrap{padding:50px 0 40px}
  .dgp-title{font-size:1.4rem}
  .dgc-tabs.dgc-tabs-all{overflow-x:auto;justify-content:flex-start;border:1px solid #e0e0e0;background:#fff;-webkit-overflow-scrolling:touch}
  .dgc-tabs.dgc-tabs-all li{display:block;flex:0 0 auto;margin-left:0}
  .dgc-tabs.dgc-tabs-all a{padding:9px 22px}
  .dgp-specs th{width:42%}
  .dgp-dls li{max-width:100%}
}

/* ===== Sticky thanh tab ở trang chi tiết ===== */
:root{--dgp-sticky-top:70px}            /* = chiều cao header sticky của Flatsome, chỉnh nếu lệch */
body.admin-bar{--dgp-sticky-top:102px}  /* khi đang đăng nhập admin (70 + 32px thanh admin) */

.dgp-tabs-row{
  position:sticky;
  top:var(--dgp-sticky-top);
  z-index:20;
  background:#fff;
  padding:10px 0;
  margin-bottom:20px;
}
.dgp-tabs-row .dgc-tabs-all{margin-bottom:0}

/* Khi bấm tab, phần nội dung không bị thanh tab + header che mất */
.dgp-sec{scroll-margin-top:150px}

@media (max-width:849px){
  :root{--dgp-sticky-top:55px}
  body.admin-bar{--dgp-sticky-top:101px}
  .dgp-sec{scroll-margin-top:120px}
}


@media only screen and (max-width: 48em) {
    /*************** ADD MOBILE ONLY CSS HERE  ***************/
.single-product .dgp-tabs-row,.single-product  .dgc-banner{
    display: none;
}

}



/* =====================================================
   TRANG DANH SÁCH DỊCH VỤ (archive-service.php) - class dgs-*
   Dán vào CUỐI style.css. Banner/breadcrumb/phân trang dùng lại dgc-*
   ===================================================== */
.dgs-wrap{padding:70px 0 50px}
.dgs-wrap .col{padding-bottom:0}
 
/* Banner 2 */
.dgs-banner2{margin-bottom:40px}
.dgs-banner2 img{display:block;width:100%;height:auto}
.dgs-banner2-wrap{position:relative}
.dgs-banner2-text{right:30px !important;position:absolute;inset:0;display:flex;align-items:center;justify-content:right;color:#fff;font-size:40px;font-weight:700;text-transform:uppercase;line-height:1.2;text-shadow:0 2px 8px rgba(0,0,0,.45);pointer-events:none}
 
/* Lưới masonry (Flatsome packery) */
.dgs-grid .col{padding-bottom:20px}
.dgs-card{background:#fff;border:1px solid #ddd;min-height: 100%;}
.dgs-img{display:block;overflow:hidden;line-height:0}
.dgs-img img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .4s}
.dgs-card:hover .dgs-img img{transform:scale(1.04)}
.dgs-body{padding:26px 24px 28px;text-align:center}
.dgs-title{font-size:1.1rem;font-weight:500;color:#333;margin:0 0 16px;line-height:1.35}
.dgs-title a{color:inherit}
.dgs-title a:hover{color:var(--primary-color)}
.dgs-sum{text-align:left;font-size:.85rem;color:#666;line-height:1.6;margin-bottom:20px}
.dgs-sum p{margin:0 0 4px}
.dgs-btn{display:inline-block;border:1px solid #ccc;border-radius:25px;padding:8px 40px;font-size:.95rem;color:var(--primary-color);background:#fff;line-height:1.5;margin:0;transition:.2s}
.dgs-btn:hover{background:var(--primary-color);border-color:var(--primary-color);color:#fff}
 
@media (max-width:849px){
  .dgs-wrap{padding:50px 0 40px}
  .dgs-banner2{margin-bottom:25px}
  .dgs-banner2-text{font-size:1.8rem}
}
 

.single.single-service .page-wrapper{
    padding-top: 50px;
}.single.single-service h1{
    font-size: 30px;
}

/* Dịch vụ liên quan: 3 cột, mô tả giới hạn 3 dòng */
.dgsv-related{margin-top:30px}
.dgsv-rel-title{font-size:1.5rem;font-weight:400;text-transform:uppercase;color:#444;margin:0 0 22px}
.dgsv-rel-grid .col{padding-bottom:20px}
.dgsv-rel-card{background:#fff;border:1px solid #ddd;height:100%}
.dgsv-rel-img{display:block;overflow:hidden;line-height:0}
.dgsv-rel-img img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .4s}
.dgsv-rel-card:hover .dgsv-rel-img img{transform:scale(1.04)}
.dgsv-rel-body{padding:20px 22px 24px}
.dgsv-rel-name{font-size:1.1rem;font-weight:500;color:#333;margin:0 0 10px;line-height:1.35}
.dgsv-rel-name a{color:inherit;font-size: 20px;}
.dgsv-rel-name a:hover{color:var(--primary-color)}
.dgsv-rel-sum{margin:0;font-size:.9rem;color:#666;line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}


/* =====================================================
   TRANG DANH SÁCH GIẢI PHÁP (archive-solution.php) - class dgsl-*
   Dán vào CUỐI style.css. Cần có sẵn CSS banner 2 (.dgs-banner2*) trong style-dich-vu.css
   ===================================================== */
.dgsl-wrap{padding:70px 0 50px}
.dgsl-wrap .col{padding-bottom:0}

/* Lưới 3 cột, các card cao bằng nhau */
.dgsl-grid{margin-top:10px}
.dgsl-grid .col{display:flex;padding-bottom:20px}

.dgsl-card{
  position:relative;
  overflow:hidden;
  flex:1;
  width:100%;
  background:#fff;
  border:1px solid #e0e0e0;
  padding:35px 26px 100px;   /* chừa chỗ cho nút Xem thêm */
  text-align:center;
}

/* Lớp nền đỏ gradient đen: nằm dưới card, hover thì trượt từ dưới lên, bỏ hover thì trượt xuống */
.dgsl-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,var(--primary-color) 0%,#000 100%);
  transform:translateY(100%);
  transition:transform .5s ease;
  z-index:0;
}
.dgsl-card:hover::before{transform:translateY(0)}

.dgsl-content{position:relative;z-index:1}

/* Vòng tròn icon: đứng yên, không di chuyển khung khi hover */
.dgsl-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:96px;
  height:96px;
  margin:0 auto 26px;
  border:2px solid var(--primary-color);
  border-radius:50%;
  background:#fff;
  overflow:hidden;
  padding:5px;
  position:relative;
  z-index:2;
}

/* Hiệu ứng trượt cho ảnh bên trong icon */
.dgsl-icon img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  transform:translateY(0); /* Vị trí ban đầu */
  transition:transform .6s ease;
}

/* Khi hover card: ảnh trượt từ dưới lên về vị trí ban đầu */
.dgsl-card:hover .dgsl-icon img{
  transform:translateY(0);
  animation: dgslIconSlideUp .6s ease;
}

@keyframes dgslIconSlideUp {
  0% { transform: translateY(120%); }
  100% { transform: translateY(0); }
}

/* Khi bỏ hover (trạng thái bình thường trở lại): ảnh trượt từ trên xuống biến mất/về vị trí cũ */
/* Bạn có thể đổi hướng trượt khi bỏ hover bằng cách thay đổi giá trị translateY bên dưới nếu muốn */

.dgsl-title{font-size:1.15rem;font-weight:700;color:#222;margin:0 0 16px;line-height:1.4;transition:color .35s}
.dgsl-title a{color:inherit}
.dgsl-sum{
  margin:0;
  font-size:.88rem;
  color:#666;
  line-height:1.7;
  transition:color .35s;
  display:-webkit-box;
  -webkit-line-clamp:7;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Nút Xem thêm: ẩn, hover mới hiện ở dưới cùng */
.dgsl-btn{
  position:absolute;
  left:50%;
  bottom:28px;
  z-index:2;
  transform:translate(-50%,12px);
  opacity:0;
  background:var(--primary-color);
  color:#fff;
  font-size:.95rem;
  font-weight:700;
  padding:11px 52px;
  border-radius:30px;
  line-height:1.3;
  white-space:nowrap;
  margin:0;
  transition:opacity .35s ease .1s,transform .35s ease .1s;
}
.dgsl-btn:hover{color:#fff;opacity:.9}
.dgsl-card:hover .dgsl-btn{opacity:1;transform:translate(-50%,0)}

/* Chữ chuyển trắng khi hover */
.dgsl-card:hover .dgsl-title,
.dgsl-card:hover .dgsl-sum{color:#fff}

/* Màn hình cảm ứng (không có hover): luôn hiện nút */
@media (hover:none){
  .dgsl-btn{opacity:1;transform:translate(-50%,0)}
}

@media (max-width:849px){
  .dgsl-wrap{padding:50px 0 40px}
  .dgsl-card{padding:30px 20px 95px}
}


.absolute-footer{
    display: none;
}
.footer-wrapper .sec-footer{
    background-image: linear-gradient(179deg, #9f0000, #500000);
    padding: 70px 0 20px !important;
    color: #fff;
    margin-top: 70px;
}
.text-footer1{
    padding-right: 90px;
}
.footer-wrapper .sec-footer h2{
font-size: 26px;
    font-weight: 500;
    line-height: 1.31;
    text-align: left;
    color: #ffffff;
    text-transform: uppercase;
    margin-top: 15px;
    margin-bottom: 23px;
}

.text-footer1 p {
        margin: 0 0 10px !important;
}
.text-footer2 p i{
    font-size: 10px;

}
 .padding-bottom0 > .col{
    padding-bottom: 0 !important;
 }
 .row2-footer p, .row2-footer a{
    margin-bottom: 0;
 }
  .row2-footer{
        display: flex;
    align-items: center;
    margin-top: 60px;
    position: relative;
  }  .row2-footer::before {
    content: "";
    width: 100vw;
    position: absolute;
    height: 1px;
    margin-left: -50vw;
    left: 50%;
    top: -17px;
    background: rgba(255, 255, 255, 0.42);}


    /* =====================================================
   CONTACT FORM 7 - FORM LIÊN HỆ
   ===================================================== */

.cf7-form-custom {
    width: 100%;
}

/* Row */
.cf7-form-custom .cf7-row {
    width: 100%;
    margin-bottom: 20px;
}

/* 2 cột */
.cf7-form-custom .cf7-row-2 {
    display: flex;
    gap: 30px;
}

.cf7-form-custom .cf7-row-2 .cf7-col {
    width: 50%;
}

/* Input + Select + Textarea */
.cf7-form-custom .cf7-input,
.cf7-form-custom .cf7-select,
.cf7-form-custom .cf7-textarea {
    width: 100%;
    margin: 0;
    border: 1px solid #d0d0d0;
    background: #fff;
    color: #555;
    font-size: 14px;
    font-weight: 400;
    box-shadow: none;
    outline: none;
    transition: all 0.25s ease;
}

/* Input */
.cf7-form-custom .cf7-input {
    height: 45px;
    padding: 0 20px;
    border-radius: 25px;
}

/* Select */
.cf7-form-custom .cf7-select {
    height: 45px;
    padding: 0 45px 0 20px;
    border-radius: 25px;
    appearance: none;
    -webkit-appearance: none;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%233b82d0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    background-size: 14px;
    cursor: pointer;
}

/* Textarea */
.cf7-form-custom .cf7-textarea {
    min-height: 145px;
    padding: 15px 20px;
    border-radius: 22px;
    resize: vertical;
}

/* Placeholder */
.cf7-form-custom .cf7-input::placeholder,
.cf7-form-custom .cf7-textarea::placeholder {
    color: #999;
    opacity: 1;
}

/* Focus */
.cf7-form-custom .cf7-input:focus,
.cf7-form-custom .cf7-select:focus,
.cf7-form-custom .cf7-textarea:focus {
    border-color: #2196f3;
    box-shadow: 0 0 5px rgba(33, 150, 243, 0.35);
}

/* Submit */
.cf7-form-custom .cf7-submit {
    margin-top: 4px;
}

.cf7-form-custom .cf7-button {
    width: 169px;
    height: 48px;
    margin: 0;
    padding: 0 30px;
    border: none;
    border-radius: 25px;
    background: #d90000;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    line-height: 48px;
    text-align: center;
    text-transform: none;
    box-shadow: none;
    cursor: pointer;
    transition: all 0.25s ease;
}

.cf7-form-custom .cf7-button:hover {
    background: #b80000;
    color: #fff;
    transform: translateY(-1px);
}

/* CF7 validation */
.cf7-form-custom .wpcf7-not-valid {
    border-color: #e53935 !important;
}

.cf7-form-custom .wpcf7-not-valid-tip {
    display: none;
}

/* Loading */
.cf7-form-custom .wpcf7-spinner {
    margin: 0 0 0 10px;
}

/* =====================================================
   MOBILE
   ===================================================== */
.text-lh h1{
    font-size: 30px;
    font-weight: 500;
}
@media (max-width: 600px) {
.text-lh h1{
    font-size: 25px;
}
    .cf7-form-custom .cf7-row-2 {
        display: block;
    }

    .cf7-form-custom .cf7-row-2 .cf7-col {
        width: 100%;
        margin-bottom: 20px;
    }

    .cf7-form-custom .cf7-row-2 .cf7-col:last-child {
        margin-bottom: 0;
    }

    .cf7-form-custom .cf7-input,
    .cf7-form-custom .cf7-select {
        height: 45px;
    }

    .cf7-form-custom .cf7-textarea {
        min-height: 140px;
    }

    .cf7-form-custom .cf7-button {
        width: 169px;
    }
}

.slide-trangchu .dot{
        width: 21px;
    height: 21px;
    border: 1px solid #f4f4f4;
    background: #fff !important;
    opacity: 1;
}

.slide-trangchu .dot.is-selected{
        background: #c00000 !important;
    border-color: #c00000;
}
.slide-trangchu  .flickity-prev-next-button{
 opacity: 1 !important;
}
.slide-trangchu  .flickity-button-icon path{
    fill: var(--primary-color) !important;
}
.slide-trangchu  .flickity-button-icon{
        min-width: 46px;
    height: 46px;
    display: flex !important;
    align-items: center;
    justify-content: center;

    transform: translateY(-50%);
    font-size: 25px !important;
    background-color: #fff;
        opacity: 0.67;
        padding: 12px;
}


/* =====================================================
   TRANG HỖ TRỢ (template-support.php) - class dgsp-*
   Dán vào CUỐI style.css. Tab dùng chung .dgc-tabs, banner dùng dgc-banner
   ===================================================== */
.dgsp-wrap{padding:70px 0 50px}
.dgsp-wrap .col{padding-bottom:0}

/* Tab trên cùng: tab đầu/giữa vừa chữ, tab cuối (Hỗ trợ) giãn hết và canh phải */
.dgsp-tabs{margin-bottom:40px}
.dgsp-tabs li{flex:0 0 auto}
.dgsp-tabs li:last-child{text-align:right}
.dgsp-tabs li:last-child a{padding-right:40px}
.dgsp-tabs li.is-active{position:relative;z-index:2}
.dgsp-tabs li.is-active a{box-shadow:0 6px 14px rgba(0,0,0,.25)}

/* ---- Menu bên trái: danh sách phẳng (Chính sách, Tải xuống) ---- */
.dgsp-side ul{list-style:none;margin:0;padding:0}
.dgsp-list li{margin:0 0 6px}
.dgsp-list li{margin-left: 0 !important;}
.dgsp-list a{display:block;padding:10px 15px;font-size:16px;color:#222;border-radius:30px;line-height:1.5;transition:.2s}
.dgsp-list a:hover{color:var(--primary-color)}
.dgsp-list li.is-active a{background:var(--primary-color);color:#fff;font-weight:700}

/* ---- Menu bên trái: sổ xuống (FAQ) ---- */
.dgsp-acc{background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.dgsp-group{margin:0;border-top:1px solid #e3e3e3;margin-left: 0 !important;}
.dgsp-group:first-child{border-top:0}
.dgsp-head{display:flex;align-items:center;padding:12px 15px;font-size:16px;color:#222;line-height:1.5}
.dgsp-group.has-sub .dgsp-head{cursor:pointer}
.dgsp-head-text{color:inherit}
a.dgsp-head-text:hover{color:var(--primary-color)}
.dgsp-caret{display:inline-block;margin-left:8px;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid currentColor;transition:transform .2s}
.dgsp-group.is-open .dgsp-caret{transform:rotate(180deg)}
.dgsp-group.is-active > .dgsp-head{background:var(--primary-color);color:#fff}
.dgsp-group.is-active > .dgsp-head a{color:#fff}
.dgsp-sub{display:none;padding:10px 0 24px}
.dgsp-group.is-open .dgsp-sub{display:block}
.dgsp-sub li{margin:0}
.dgsp-sub a{display:block;padding:7px 0px;font-size:14px;color:#222;line-height:1.5}
.dgsp-sub a:hover{color:var(--primary-color)}
.dgsp-sub li.is-active a{color:var(--primary-color)}

/* ---- Nội dung ---- */
.dgsp-title{font-size:2rem;font-weight:400;text-transform:uppercase;color:#222;margin:0 0 30px;line-height:1.3}
.dgsp-content{font-size:16px;color:#444;line-height:1.75}
.dgsp-content p{margin:0 0 12px;font-size:16px}
.dgsp-content img{max-width:100%;height:auto}
.dgsp-content h2,.dgsp-content h3{color:#222;margin:22px 0 10px}
.dgsp-content table{width:100%;border-collapse:collapse}
.dgsp-content table td,.dgsp-content table th{border:1px solid #ddd;padding:8px 12px}

/* Khung viền (Chính sách, Tải xuống) */
.dgsp-box{border:1px solid #e6e6e6;background:#fff;padding:0 39px 60px  25px}
.dgsp-box .dgsp-title{text-align:center;font-size:1.6rem;font-weight:500;margin-bottom:35px;margin-top: 15px;}

@media (max-width:849px){
  .dgsp-wrap{padding:50px 0 40px}
  .dgsp-tabs li:last-child{flex:0 0 auto !important;text-align:center}
  .dgsp-tabs li:last-child a{padding-right:22px}
  .dgsp-side{margin-bottom:25px}
  .dgsp-title{font-size:1.5rem}
  .dgsp-box{padding:25px 20px}
  .slide-trangchu .dot{
    width: 13px;
    height: 13px;
  }
}


/* =====================================================
   MENU HEADER: viền tròn + mũi tên đỏ + dropdown giống mẫu
   ===================================================== */
@media (min-width:850px){

  /* 1) Link cấp 1: bỏ mũi tên nhỏ, hover / đang xem thì có viền tròn */
  .header-nav-main > li > a.nav-top-link{
    border:1px solid transparent;
    border-radius:30px;
    padding:9px 24px;
    transition:border-color .2s, color .2s;
            font-size: 16px;
        font-weight: 400;
        color: black;
  }
  .header-nav-main > li > a.nav-top-link .icon-angle-down{display:none}
  .header-nav-main > li > a.nav-top-link::after{display:none}


  /* 2) Mũi tên đỏ nhọn lên, nằm giữa mục menu, chỉ hiện khi hover */
  .header-nav-main li.has-dropdown::before{display:none !important}
  .header-nav-main li.has-dropdown::after{
    content:"";
    display:none;
    position:absolute;
    left:50%;
    bottom:0;
    margin-left:-8px;
    width:0;
    height:0;
    border-left:8px solid transparent;
    border-right:8px solid transparent;
    border-bottom:9px solid var(--primary-color);
    z-index:1002;
  }
  .header-nav-main li.has-dropdown:hover::after{display:block}

  /* 3) Khung dropdown: nền trắng, không viền, đổ bóng nhẹ */
  .header-nav-main .nav-dropdown{
    border:0;
    border-radius:0;
    background:#fff;
    box-shadow:0 6px 18px rgba(0,0,0,.12);
    padding:0px;
    display: flex;
        flex-direction: column;
        border-top: 2px solid var(--primary-color);
  }
  .header-nav-main .nav-dropdown li{border:0}

  /* 4) Các mục trong dropdown */
  .header-nav-main .nav-dropdown > li > a,
  .header-nav-main .nav-dropdown .nav-column li > a{
    display:block;
    padding:9px 16px;
    font-size:16px;
    font-weight:400;
    line-height:1.4;
    text-transform:none;
    color:#222;
    border:0 !important;
    background:none;
  }
  .header-nav-main .nav-dropdown > li > a:hover,
  .header-nav-main .nav-dropdown .nav-column li > a:hover{
    color:var(--primary-color);
    background:none;
  }

  /* 5) Mục cha có menu con (PM Quản lý tài liệu số): chữ đỏ, đậm */
  .header-nav-main .nav-dropdown > li.nav-dropdown-col > a{
    color:var(--primary-color);
    font-weight:700;
  }

  /* 6) Menu con (Nainuwa, DSpace): thụt vào */
  .header-nav-main .nav-dropdown .nav-column{padding:0}
  .header-nav-main .nav-dropdown .nav-column li > a{padding-left:32px}
}



/* =====================================================
   ELEMENT DANH MỤC SẢN PHẨM (DG) - class dgpc-*
   Dán vào CUỐI style.css
   ===================================================== */
.dgpc .row{margin:0;width: 100% !important;    max-width: unset !important;}
.dgpc .col{padding:0;margin-bottom:0}

.dgpc-item{
  display:block;
  background:#fff;
  border:1px solid #ddd;
  margin-left:-1px;          /* các ô dính nhau, viền không bị dày đôi */
  color:#111;
  overflow:hidden;
  transition:color .2s;
}

/* Vùng ảnh */
.dgpc-img{
  display:flex;
  align-items:center;
  justify-content:center;
  aspect-ratio:1/.73;
  padding:22px;
  background:#fff;
}
.dgpc-img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}

/* Tên danh mục */
.dgpc-name{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:10px 14px;
  border-top:1px solid #ddd;
  font-size:16px;
  font-weight:500;
  line-height:1.3;
  text-align:center;
  color:#111;
  transition:background .25s,color .25s;
}

/* Hover + danh mục đang xem: nền đỏ chữ trắng */
.dgpc-item:hover .dgpc-name,
.dgpc-item.is-active .dgpc-name{
  background:var(--primary-color);
  border-top-color:var(--primary-color);
  color:#fff;
}

/* Mũi tên slide */
.dgpc .flickity-prev-next-button{background:rgba(255,255,255,.9)}

@media (max-width:849px){
    .dgc-crumb{
        bottom: -40px;
    }
  .dgpc-img{padding:14px}
  .dgpc-name{font-size:14px;min-height:46px}
}

.title-trangchu h2{
    font-size: 30px;
    font-weight: 500;
    text-align: left;
    color: #0d0d0d;
    text-transform: uppercase;
    margin-bottom: 40px;
    position: relative;
}
.title-trangchu h2::after{
    content: '';
    width: 70px;
    height: 5px;
    background: #c00000;
    display: block;
    position: absolute;
    left: 0;
    margin-top: 15px;
}
.title-trangchu1 h2{
    text-align: center !important;
}
.title-trangchu1 h2:after{
    left: 50%;
    transform: translateX(-50%);
    width: 95px;
}



/* =========================================================
   BLOG CARD HOVER
   ========================================================= */

/* Card */
.baiviet-trangchu .box-blog-post {
    position: relative;
    overflow: hidden;
}


/* =========================================================
   ẨN DIVIDER VĨNH VIỄN
   ========================================================= */

.baiviet-trangchu .box-blog-post .is-divider {
    display: none !important;
}


/* =========================================================
   LỚP NỀN HOVER
   Từ giữa phóng ra + xoay -180deg -> 0deg
   ========================================================= */

.baiviet-trangchu .box-blog-post .box-image {
    position: relative;
    overflow: hidden;
}

.baiviet-trangchu .box-blog-post .box-image::after {
    content: "";

    position: absolute;
    z-index: 3;

    left: 50%;
    top: 50%;

    width: 0;
    height: 0;

    background: rgba(0, 0, 0, 0.2);

    transform: translate(-50%, -50%) rotate(180deg);
    transform-origin: center center;

    pointer-events: none;

    transition:
        width 0.7s cubic-bezier(.22,.61,.36,1),
        height 0.7s cubic-bezier(.22,.61,.36,1),
        transform 0.7s cubic-bezier(.22,.61,.36,1);
}


/* Hover */
.baiviet-trangchu .box-blog-post:hover .box-image::after {
    width: 150%;
    height: 150%;

    transform: translate(-50%, -50%) rotate(0deg);
}


/* =========================================================
   BOX TEXT
   Mặc định nằm phía dưới
   ========================================================= */

.baiviet-trangchu .box-blog-post .box-text {
    position: absolute !important;

    left: 0;
    right: 0;
    bottom: 0;

    width: 100%;
    z-index: 5;

    padding: 25px 20px;

    transition:
        top 0.6s ease,
        bottom 0.6s ease,
        padding 0.6s ease;
}


/* =========================================================
   KHI HOVER
   Đưa toàn bộ nội dung lên phía trên ảnh
   ========================================================= */

.baiviet-trangchu .box-blog-post:hover .box-text {
    top: 0;
    bottom: auto;

    height: 100%;

    display: flex;
    align-items: flex-end;
    justify-content: flex-start;

    padding: 35px 20px;
}


/* Nội dung bên trong */
.baiviet-trangchu .box-blog-post .box-text-inner {
    position: relative;
    z-index: 6;

    width: 100%;
}


/* =========================================================
   TIÊU ĐỀ
   ========================================================= */

.baiviet-trangchu .box-blog-post .post-title {
    position: relative;
    z-index: 6;

    margin: 0;

    transform: translateY(0);

    transition:
        transform 0.55s cubic-bezier(.22,.61,.36,1),
        margin 0.55s ease;
}


/* =========================================================
   EXCERPT
   MẶC ĐỊNH ẨN
   ========================================================= */

.baiviet-trangchu .box-blog-post .from_the_blog_excerpt {
    display: block;

    opacity: 0;

    max-height: 0;

    overflow: hidden;

    margin: 0;

    transform: translateX(-100px);

    transition:
        opacity 0.45s ease,
        transform 0.6s cubic-bezier(.22,.61,.36,1),
        max-height 0.6s ease,
        margin-top 0.6s ease;
}


/* =========================================================
   HOVER EXCERPT
   Trượt từ trái vào
   ========================================================= */

.baiviet-trangchu .box-blog-post:hover .from_the_blog_excerpt {
    opacity: 1;

    max-height: 200px;

    margin-top: 18px;

    transform: translateX(0);
}


/* =========================================================
   TIÊU ĐỀ + MÔ TẢ NẰM TRÊN ẢNH
   ========================================================= */

 .baiviet-trangchu .box-blog-post:hover .post-title,
.baiviet-trangchu .box-blog-post:hover .from_the_blog_excerpt {
    text-align: left;
}


/* =========================================================
   ĐẢM BẢO TEXT NẰM TRÊN LỚP NỀN
   ========================================================= */

.baiviet-trangchu .box-blog-post .box-text,
.baiviet-trangchu .box-blog-post .box-text-inner,
.baiviet-trangchu .box-blog-post .post-title,
.baiviet-trangchu .box-blog-post .from_the_blog_excerpt {
    z-index: 5;
}
.header-top {
    min-height: 10px !important;
}

/* =========================================================
   GIỮ ẢNH NGUYÊN VỊ TRÍ
   KHÔNG ZOOM ẢNH
   ========================================================= */

.baiviet-trangchu .box-blog-post:hover .box-image img {
    transform: none !important;
}
/* =========================
   TOP BAR - 2 NỬA
========================= */

#top-bar .flex-row {
    width: 100%;
    max-width: 100%;
    display: flex;
    padding: 0;
}
.html.custom{
    width: 100%;
}
/* Ẩn các vùng trống của Flatsome */
#top-bar .flex-left,
#top-bar .flex-right {
    width: 50%;
    flex: 0 0 50%;
    max-width: 50%;
    padding: 0;
}

/* RED */
#top-bar .red {
    width: 100%;
    height: 10px;
    box-sizing: border-box;

    background: var(--primary-color);
    
    border-top: 10px solid var(--primary-color);

    margin: 0;
}

/* BLACK */
#top-bar .black {
    width: 100%;
    height: 10px;
    box-sizing: border-box;

    background: transparent;
    border-left: 10px solid var(--primary-color);
    border-bottom: 10px solid #000;

    margin: 0;
    position: relative;
    z-index: 1;
}

.category .page-title{
        padding: 50px 0 25px 0;
        font-size: 30px;
    font-weight: 400;
    text-align: left;
    color: #0d0d0d;
    text-transform: uppercase;
    position: relative;
}

/* =========================================================
   DANH SÁCH BÀI VIẾT - 3 CỘT
========================================================= */

#post-list .dg-post-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
}


/* =========================================================
   BOX
========================================================= */

#post-list .dg-post-card {
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;

    border: 1px solid #d4d4d4;
    background: #fff;

    overflow: hidden;

    box-sizing: border-box;

    display: flex;
    flex-direction: column;

    height: 100%;
}


/* =========================================================
   ẢNH
========================================================= */

#post-list .dg-post-card-image {
    width: 100%;
    height: 234px;

    flex: 0 0 234px;

    overflow: hidden;

    background: #f5f5f5;
}

#post-list .dg-post-card-image a {
    display: block;

    width: 100%;
    height: 100%;
}

#post-list .dg-post-card-image img {
    display: block;

    width: 100%;
    height: 100%;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: cover;
    object-position: center;
}


/* Không có ảnh */

#post-list .dg-post-no-image {
    width: 100%;
    height: 100%;

    background: #f5f5f5;
}


/* =========================================================
   NỘI DUNG
========================================================= */

#post-list .dg-post-card-body {
    min-height: 214px;

    padding: 35px 20px 18px;

    box-sizing: border-box;

    display: flex;
    flex-direction: column;
}


/* =========================================================
   TIÊU ĐỀ
========================================================= */

#post-list .dg-post-card-title {
    margin: 0 0 17px !important;
    padding: 0 !important;

    font-family: inherit;

    font-size: 18px !important;
    line-height: 1.45 !important;

    font-weight: 500 !important;

    letter-spacing: 0 !important;

    text-transform: none !important;
}

#post-list .dg-post-card-title a {
    color: #111 !important;

    text-decoration: none !important;
       display: -webkit-box;

    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

    overflow: hidden;
}

#post-list .dg-post-card-title a:hover {
    color: var(--primary-color) !important;
}
.blog-archive{
    padding-top: 0;
}

/* =========================================================
   MÔ TẢ
========================================================= */

#post-list .dg-post-card-excerpt {
    margin: 0 !important;
    padding: 0 !important;

    color: #666;

    font-size: 14px;
    line-height: 1.55;

    font-weight: 400;

    display: -webkit-box;

    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;

    overflow: hidden;
}


/* =========================================================
   NGÀY + XEM CHI TIẾT
========================================================= */

#post-list .dg-post-card-meta {
    margin-top: auto;

    padding-top: 20px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;
}


/* Ngày */

#post-list .dg-post-date {
    display: flex;

    align-items: center;

    gap: 9px;

    color: var(--primary-color);

    font-size: 13px;

    line-height: 1;

    white-space: nowrap;
}

#post-list .dg-post-date i {
    color: var(--primary-color);

    font-size: 14px;

    line-height: 1;
}


/* Xem chi tiết */

#post-list .dg-post-detail {
    color: var(--primary-color) !important;

    font-size: 13px;

    line-height: 1;

    text-decoration: none !important;

    white-space: nowrap;
    padding: 6.5px 25px;
    border-radius: 20px;
}

#post-list .dg-post-detail:hover {
    color: white !important;
    background: var(--primary-color);
}


/* =========================================================
   PHÂN TRANG
========================================================= */

#post-list .pagination {
    margin-top: 30px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 849px) {

    #post-list .dg-post-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

    #post-list .dg-post-card-image {
        height: 210px;
        flex-basis: 210px;
    }

    #post-list .dg-post-card-body {
        min-height: 205px;

        padding: 28px 18px 17px;
    }

    #post-list .dg-post-card-title {
        font-size: 17px !important;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 549px) {

    #post-list .dg-post-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    #post-list .dg-post-card-image {
        height: auto;

        aspect-ratio: 16 / 10;

        flex-basis: auto;
    }

    #post-list .dg-post-card-body {
        min-height: 190px;

        padding: 24px 16px 16px;
    }

    #post-list .dg-post-card-title {
        font-size: 17px !important;
    }

    #post-list .dg-post-card-excerpt {
        font-size: 13px;
    }

    #post-list .dg-post-date,
    #post-list .dg-post-detail {
        font-size: 12px;
    }

}