/*
Theme Name: Apini   
Description: Đây là bản thiết kế cho destop của Apini từ theme flatsome
Author: UX Themes
Template: flatsome
Version: 3.1
*/



/* ======================================================================= */


/*
======================
  FONT TOÀN SITE (NÊN ĐỂ DƯỚI CÙNG)
======================
*/
body {
    font-family: 'utm_avo', Arial, sans-serif;
}
@font-face {
    font-family: 'utm_avo';
    src: url('fonts/UTM Avo.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
h1, h2, h3, h4, h5, h6,
.heading-font, .alt-font {
    font-family: 'utm_avo', Arial, sans-serif !important;
    color: #222;
}
a { color: #E53935; }
a:hover { color: #1976D2; }
/*
======================
  zoom to ép logo hình vuông
======================
*/
@media (max-width: 1024px) {
main#main, #main, .main-content, .site-content, .page-wrapper {
padding-top: 0px !important; /* ví dụ menu cao 160px */
}

        #apiniHeaderMenu,
        .custom-header-apini,
        #custom-header-apini,
        .custom-header-apini-menu-top {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        }
        .ngang-logo {
        display: none !important;
        }
        #miniHeaderMenu.mini-header-apini-inner {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;    /* Quan trọng: flex-start */
        max-width: 580px;
        width: 100vw;
        height: 80px !important;
        min-height: 80px !important;
        max-height: 80px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        box-sizing: border-box;
        background: rgba(255,255,255,0.9);
        border-radius: 10px;
        overflow: visible;
        /* Không có padding-left, padding-right ở đây */
        }
        .mini-header-apini-logo {
        width: 80px !important;
        height: 80px !important;
        min-width: 82px !important;
        min-height: 80px !important;
        max-width: 82px !important;
        max-height: 80px !important;
        flex: 0 0 80px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box;
        background: none !important;
        }
        .mini-header-apini-logo img.vuong-logo {
        width: 100% !important;
        height: 100% !important;                /* Ưu tiên 100% nếu muốn logo full chiều cao khối */
        min-width: 86px !important;
        min-height: 72px !important;
        max-width: 86px !important;
        max-height: 72px !important;
        object-fit: contain !important;
        border-radius: 12px !important;
        display: block !important;
        margin-right: 0 !important;
        margin-top: 2.5px !important;
        padding: 0 !important;
        padding-bottom: 2.5px !important;
        background: none !important;
        }
        .mini-header-apini-row.row-1 {
        display: block;
        width: 100%;
        font-size: 20px;
        line-height: 80px;
        color: #1976D2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 0;
        margin: 0;
        }
        #miniHeaderMenu .mini-header-apini-menu-block {
        height: 70px;
        min-width: 0;
        width: auto !important;  /* =giảm width về 600 nên để auto=== */
        border-left: 4px solid #00ff99cc;
        padding-left: -5px !important;   /* không có khoảng hở */
        margin-left: -5px !important;    /* không margin */
        padding-right: -5px !important;
        margin-right: 0 !important;
        display: flex;
        align-items: center;
        flex: 1 1 0;
        }
        
        #miniHeaderMenu .mini-header-apini-row.row-1,
        #miniHeaderMenu .mini-header-apini-row.row-1 span {
        margin-left: 0 !important;
        padding-left: 0 !important;
        padding-left: 100%; /* Đẩy text ra ngoài phải trước khi scroll */
        transition: color 0.18s;
        }
        .mini-header-apini-menu-block .mini-header-apini-row.row-1 span {
        display: inline-block;
        min-width: 100%;
        animation: scroll-left 15s linear infinite;
        /* tốc độ :15s */
        }
}







/* ===== APINI Posts Slider ===== */
.apini-ps-wrap{
  position:relative; padding:14px; border:2px solid var(--apini-neon,#39ff14);
  border-radius:16px; background:rgba(0,0,0,.35); backdrop-filter:saturate(120%) blur(1px);
}
.apini-ps-card{ position:relative; display:block; border-radius:14px; overflow:hidden;
  aspect-ratio:1/1; background:#0b0f14;
}
.apini-ps-bg{ position:absolute; inset:0; background-size:cover; background-position:center;
  transform:scale(1); transition:transform .35s ease, filter .35s ease; filter:brightness(.95);
}
.apini-ps-card:hover .apini-ps-bg{ transform:scale(1.04); filter:brightness(1); }

.apini-ps-date{
  position:absolute; top:10px; left:10px; background:var(--apini-date-bg,#ff7a00);
  color:#fff; font-weight:700; padding:6px 10px; border-radius:8px; font-size:12px;
  box-shadow:0 4px 12px rgba(0,0,0,.35); z-index:2;
}
.apini-ps-info{
  position:absolute; left:0; right:0; bottom:0; padding:12px; color:#fff;
  background:linear-gradient(180deg, rgba(0,0,0,0) 20%, rgba(0,0,0,.78) 85%);
}
.apini-ps-title{ margin:0 0 4px; font-size:16px; line-height:1.25;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.apini-ps-excerpt{ margin:0; font-size:13px; line-height:1.4; opacity:.9;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* Mũi tên dạ quang */
.apini-ps-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:10;
  width:42px; height:42px; border-radius:999px; background:transparent; cursor:pointer;
  border:2px solid var(--apini-neon,#39ff14);
  box-shadow:0 0 12px var(--apini-neon,#39ff14), inset 0 0 8px rgba(57,255,20,.35);
}
.apini-ps-prev{ left:-4px; }
.apini-ps-next{ right:-4px; }
.apini-ps-nav::before{
  content:''; display:block; width:12px; height:12px; position:absolute; top:50%; left:50%;
  border-top:3px solid var(--apini-neon,#39ff14); border-right:3px solid var(--apini-neon,#39ff14);
  transform:translate(-50%,-50%) rotate(45deg);
}
.apini-ps-prev::before{ transform:translate(-50%,-50%) rotate(225deg); }
@media (max-width:1024px){ .apini-ps-prev{left:2px} .apini-ps-next{right:2px} }


/* Khôi phục bullet/number trong nội dung Flatsome */
.entry-content :where(ul){ list-style: disc !important; }
.entry-content :where(ol){ list-style: decimal !important; }
.entry-content :where(ul,ol){ margin: 0 0 1em 1.25em !important; padding-left: 0 !important; }
.entry-content li{ display:list-item !important; margin:.35em 0; }

/* Các khối UX Builder thường dùng */
.ux-text :where(ul,ol),
.text-box-content :where(ul,ol),
.box-text :where(ul,ol),
.col-inner :where(ul,ol){ list-style: revert !important; margin-left:1.25em !important; }

/* Màu marker theo theme */
html.apini-dark .entry-content li::marker{ color:#fff; }
html:not(.apini-dark) .entry-content li::marker{ color:#111; }
/* Khôi phục bullet ngay cả khi xem trong UX Builder preview */
.ux-text :where(ul){ list-style: disc !important; }
.ux-text :where(ol){ list-style: decimal !important; }
.ux-text :where(ul,ol){ margin-left: 1.25em !important; padding-left: 0 !important; }
.ux-text li{ display:list-item !important; }