/* =========================================================
   N4V SAFE UI REDESIGN
   Chỉ CSS/HTML nhẹ, không thay đổi database/PHP logic.
   ========================================================= */

:root{
    --n4v-teal:#054e59;
    --n4v-teal2:#063f48;
    --n4v-coral:#ff735f;
    --n4v-cream:#fbf5ee;
    --n4v-ink:#17383f;
    --n4v-muted:#62777b;
    --n4v-border:#e7ecef;
}

body{
    background:var(--n4v-cream)!important;
    color:var(--n4v-ink)!important;
    font-family:Arial,Helvetica,sans-serif!important;
}

.container{
    max-width:1280px!important;
    width:calc(100% - 40px)!important;
}

.header-top{
    background:linear-gradient(90deg,var(--n4v-teal) 0%,var(--n4v-teal2) 100%)!important;
    padding:14px 0!important;
    position:sticky!important;
    top:0!important;
    z-index:1000!important;
    box-shadow:0 10px 30px rgba(4,31,36,.16)!important;
}

.header-top-inner{
    display:flex!important;
    align-items:center!important;
    gap:24px!important;
}

.header-top .logo{
    width:auto!important;
    float:none!important;
    flex:0 0 auto!important;
}

.header-top .logo img{
    height:64px!important;
    max-width:100%!important;
    display:block!important;
}

.header-nav-wrap{
    flex:1 1 auto!important;
    min-width:0!important;
}

.header-top .register{
    float:none!important;
    display:flex!important;
    gap:12px!important;
    align-items:center!important;
    margin:0 0 0 auto!important;
}

.header-top .register a{
    padding:12px 20px!important;
    border-radius:13px!important;
    border:1px solid rgba(255,202,158,.7)!important;
    font-size:14px!important;
    font-weight:800!important;
    color:#fff!important;
    background:transparent!important;
    text-transform:uppercase!important;
}

.header-top .register a.signup{
    background:var(--n4v-coral)!important;
    border-color:var(--n4v-coral)!important;
}

.header-top .register a.signup:before{
    content:"+";
    margin-right:8px;
    font-size:18px;
}

.header-bot,
.slider,
.bg-main,
.bg-mainin,
.border-head,
.butreg,
.menunew,
.signupmain{
    display:none!important;
}

.menutop{
    position:static!important;
}

.menu>ul.dropdown{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:12px!important;
    flex-wrap:wrap!important;
}

.menu>ul>li{
    float:none!important;
}

.menu ul li a{
    color:#fff!important;
    font-size:14px!important;
    font-weight:800!important;
    text-transform:none!important;
    border-radius:10px!important;
    padding:10px 12px!important;
    position:relative!important;
}

.menu ul li:hover>a{
    background:transparent!important;
}

.menu>ul>li:hover>a:after,
.menu>ul>li:first-child>a:after{
    content:"";
    position:absolute;
    left:12px;
    right:12px;
    bottom:2px;
    height:3px;
    background:var(--n4v-coral);
    border-radius:999px;
}

.menu ul ul{
    top:46px!important;
    background:#fff!important;
    border:1px solid #dfe8eb!important;
    border-radius:15px!important;
    box-shadow:0 20px 40px rgba(0,0,0,.14)!important;
}

.menu ul ul>li{
    border-bottom:1px solid #edf2f3!important;
}

.menu ul ul>li a{
    color:#204047!important;
    background:#fff!important;
    padding:12px 14px!important;
}

.menu ul ul li:hover>a{
    background:#f3f8f9!important;
    color:var(--n4v-teal)!important;
}

/* Hero theo mẫu, dùng lại nội dung đang có */
.n4v-hero{
    margin:26px 0 18px!important;
    padding:34px!important;
    border-radius:28px!important;
    border:1px solid #eadbd0!important;
    background:
        radial-gradient(circle at 84% 18%,rgba(255,216,203,.95),rgba(255,216,203,0) 23%),
        linear-gradient(135deg,#fffaf5 0%,#fff2e9 55%,#fdf7ef 100%)!important;
    box-shadow:0 22px 55px rgba(133,90,60,.08)!important;
    overflow:hidden!important;
    display:block!important;
    position:relative!important;
}

.n4v-hero:after{
    content:"";
    position:absolute;
    right:18px;
    top:14px;
    width:310px;
    height:210px;
    border-radius:28px;
    background:
        radial-gradient(circle at 62% 30%,rgba(255,255,255,.9),rgba(255,255,255,0) 42%),
        radial-gradient(circle at 55% 55%,rgba(255,126,101,.22),rgba(255,126,101,0) 54%);
    pointer-events:none;
}

.n4v-hero-copy{
    max-width:760px!important;
    position:relative!important;
    z-index:2!important;
}

.n4v-eyebrow{
    display:none!important;
}

.n4v-hero h2,
.n4v-hero h1{
    margin:0!important;
    max-width:760px!important;
    color:var(--n4v-ink)!important;
    font-family:Georgia,serif!important;
    font-size:44px!important;
    line-height:1.15!important;
    font-weight:800!important;
}

.n4v-hero h2:after{
    content:"Dành cho người Việt tại Hoa Kỳ";
    display:block;
    margin-top:8px;
    color:var(--n4v-coral);
    font-family:cursive;
    font-size:28px;
    font-weight:500;
    line-height:1.1;
}

.n4v-hero p{
    margin:16px 0 0!important;
    max-width:700px!important;
    color:#5a7075!important;
    font-size:16px!important;
    line-height:1.75!important;
}

.n4v-hero-search{
    position:relative!important;
    z-index:3!important;
    margin-top:24px!important;
    padding:14px!important;
    border-radius:22px!important;
    background:#fff!important;
    border:1px solid #ecd8ca!important;
    box-shadow:0 14px 30px rgba(31,44,46,.08)!important;
}

/* Search: ẩn quốc gia vì site chỉ phục vụ Mỹ */
.formsearch{
    display:grid!important;
    grid-template-columns:1.6fr 1.2fr 1.2fr auto!important;
    gap:12px!important;
    align-items:center!important;
    position:static!important;
}

.formsearch select[name="cboQuocgia"]{
    display:none!important;
}

.formsearch select,
.formsearch input[type="text"]{
    float:none!important;
    width:100%!important;
    height:52px!important;
    border-radius:14px!important;
    border:1px solid #d8e3e5!important;
    padding:0 16px!important;
    font-size:14px!important;
    background:#fff!important;
    color:#234248!important;
    margin:0!important;
}

.formsearch input[type="submit"]{
    position:static!important;
    width:138px!important;
    height:52px!important;
    margin:0!important;
    border-radius:14px!important;
    background:var(--n4v-coral)!important;
    color:#fff!important;
    text-indent:0!important;
    font-size:15px!important;
    font-weight:800!important;
    box-shadow:none!important;
    text-transform:uppercase!important;
}

/* Main */
.contentmain{
    border:0!important;
    background:transparent!important;
    padding:0!important;
    margin-top:20px!important;
}

.home-one-column .col-left{
    width:100%!important;
    float:none!important;
}

.home-one-column .col-right{
    display:none!important;
}

.n4v-home-intro{
    display:none!important;
}

.n4v-home-cats{
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:16px!important;
    margin:0 0 18px!important;
}

.n4v-home-cat-card{
    display:flex!important;
    align-items:center!important;
    gap:14px!important;
    background:#fff!important;
    border:1px solid var(--n4v-border)!important;
    border-radius:18px!important;
    padding:18px 16px!important;
    box-shadow:0 10px 28px rgba(11,46,52,.05)!important;
    color:var(--n4v-ink)!important;
}

.n4v-home-cat-card:hover{
    transform:translateY(-2px)!important;
    box-shadow:0 14px 34px rgba(11,46,52,.09)!important;
}

.n4v-home-cat-icon{
    width:56px!important;
    height:56px!important;
    border-radius:16px!important;
    background:#fff5ef!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    font-size:30px!important;
    flex:0 0 auto!important;
}

.n4v-home-cat-meta{
    display:flex!important;
    flex-direction:column!important;
    gap:4px!important;
    min-width:0!important;
}

.n4v-home-cat-meta strong{
    font-size:15px!important;
    line-height:1.25!important;
    color:var(--n4v-ink)!important;
}

.n4v-home-cat-meta small{
    font-size:13px!important;
    color:#6b8185!important;
}

.n4v-home-cat-arrow{
    margin-left:auto!important;
    color:var(--n4v-coral)!important;
    font-size:28px!important;
    line-height:1!important;
}

.n4v-home-listbox{
    background:#fff!important;
    border:1px solid var(--n4v-border)!important;
    border-radius:24px!important;
    padding:14px 18px 6px!important;
    box-shadow:0 18px 40px rgba(10,36,39,.05)!important;
}

.n4v-home-listbox-head{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:16px!important;
    padding:4px 8px 14px!important;
}

.n4v-home-listbox-head h2{
    font-size:28px!important;
    line-height:1.2!important;
    color:var(--n4v-ink)!important;
    margin:0!important;
    font-family:Arial,Helvetica,sans-serif!important;
    font-weight:800!important;
}

.n4v-home-listbox-head a{
    color:var(--n4v-coral)!important;
    font-weight:800!important;
}

.tutorial_list{
    display:flex!important;
    flex-direction:column!important;
    gap:0!important;
}

.boxproduct{
    padding:0!important;
    background:transparent!important;
    border-radius:0!important;
    overflow:visible!important;
}

.boxproduct:hover{
    box-shadow:none!important;
    background:transparent!important;
}

.n4v-post-card{
    display:grid!important;
    grid-template-columns:208px minmax(0,1fr) 140px!important;
    gap:18px!important;
    align-items:center!important;
    padding:12px 14px!important;
    border-top:1px solid #eef2f3!important;
    background:#fff!important;
    overflow:visible!important;
}

.boxproduct:first-child .n4v-post-card{
    border-top:0!important;
}

.n4v-post-thumb{
    display:block!important;
    border-radius:14px!important;
    overflow:hidden!important;
    background:linear-gradient(135deg,#eef3f4,#f9fafb)!important;
    height:118px!important;
    min-height:0!important;
}

.n4v-post-thumb img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
}

.n4v-post-top{
    display:flex!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    gap:10px!important;
    margin-bottom:6px!important;
}

.n4v-post-badge{
    display:inline-flex!important;
    align-items:center!important;
    padding:6px 12px!important;
    border-radius:999px!important;
    background:var(--n4v-teal)!important;
    color:#fff!important;
    font-size:12px!important;
    font-weight:800!important;
    text-transform:uppercase!important;
    letter-spacing:.03em!important;
}

.n4v-post-status{
    font-size:12px!important;
    color:#7c8d90!important;
    font-weight:700!important;
}

.n4v-post-body h3{
    margin:0 0 6px!important;
    font-size:18px!important;
    line-height:1.32!important;
    font-family:Arial,Helvetica,sans-serif!important;
    font-weight:800!important;
}

.n4v-post-body h3 a{
    color:var(--n4v-ink)!important;
}

.n4v-post-body h3 a:hover{
    color:var(--n4v-coral)!important;
}

.n4v-post-location{
    font-size:14px!important;
    color:var(--n4v-coral)!important;
    font-weight:700!important;
    margin-bottom:6px!important;
}

.n4v-post-desc{
    margin:0!important;
    color:#53696d!important;
    line-height:1.55!important;
    font-size:14px!important;
}

.n4v-post-side{
    justify-self:end!important;
    text-align:right!important;
    display:flex!important;
    flex-direction:column!important;
    gap:10px!important;
    align-items:flex-end!important;
}

.n4v-post-price{
    font-size:18px!important;
    font-weight:800!important;
    color:var(--n4v-coral)!important;
}

.n4v-post-time{
    font-size:13px!important;
    color:#74878b!important;
}

.n4v-post-actions{
    display:flex!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    gap:10px!important;
    margin-top:10px!important;
    overflow:visible!important;
}

.n4v-post-link,
.n4v-quick-details>summary{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    height:40px!important;
    padding:0 16px!important;
    border-radius:12px!important;
    font-size:14px!important;
    font-weight:800!important;
    line-height:1!important;
    cursor:pointer!important;
}

.n4v-post-link{
    background:var(--n4v-teal)!important;
    color:#fff!important;
}

.n4v-quick-details{
    display:inline-block!important;
}

.n4v-quick-details>summary{
    list-style:none!important;
    background:#fff2ec!important;
    color:#d95e48!important;
    border:1px solid #ffd5ca!important;
}

.n4v-quick-details>summary::-webkit-details-marker{
    display:none!important;
}

.n4v-quick-details[open]{
    display:block!important;
    flex:0 0 100%!important;
    width:100%!important;
    order:20!important;
}

.n4v-quick-details[open]>summary{
    display:none!important;
}

.n4v-quick-panel-inner{
    margin-top:4px!important;
    background:#fcfdfd!important;
    border:1px solid #dfe8eb!important;
    border-radius:18px!important;
    padding:18px!important;
    box-shadow:none!important;
    color:#324d53!important;
    font-size:14px!important;
    line-height:1.72!important;
}

.n4v-quick-head{
    font-size:15px!important;
    font-weight:800!important;
    color:var(--n4v-teal)!important;
    text-transform:uppercase!important;
    letter-spacing:.03em!important;
    margin:0 0 10px!important;
}

.n4v-quick-panel-inner p{
    margin:0 0 12px!important;
}

.n4v-quick-phone{
    display:inline-flex!important;
    align-items:center!important;
    gap:8px!important;
    padding:10px 14px!important;
    border:1px solid #d7e6e8!important;
    border-radius:999px!important;
    background:#f3faf9!important;
    color:#28494f!important;
    font-size:14px!important;
    font-weight:700!important;
}

.show_more_main{
    padding:16px 0 8px!important;
    text-align:center!important;
}

.show_more_main .show_more{
    display:inline-block!important;
    padding:13px 22px!important;
    border-radius:14px!important;
    background:var(--n4v-coral)!important;
    color:#fff!important;
    font-weight:800!important;
    cursor:pointer!important;
}

/* Footer */
.n4v-footer{
    margin-top:34px!important;
    background:linear-gradient(180deg,var(--n4v-teal) 0%,var(--n4v-teal2) 100%)!important;
    padding:34px 0 14px!important;
    color:#eaf4f4!important;
    position:relative!important;
    overflow:hidden!important;
}

.n4v-footer-grid{
    display:grid!important;
    grid-template-columns:1.3fr .8fr .8fr .9fr!important;
    gap:28px!important;
}

.n4v-footer-logo img{
    height:58px!important;
    width:auto!important;
    display:block!important;
    margin-bottom:12px!important;
}

.n4v-footer-brand p{
    max-width:420px!important;
    line-height:1.7!important;
    color:#d0e1e2!important;
}

.n4v-footer-links h4{
    margin:0 0 12px!important;
    font-size:18px!important;
    color:#fff!important;
}

.n4v-footer-links a,
.n4v-footer-links span{
    display:block!important;
    color:#d0e1e2!important;
    margin:0 0 10px!important;
    line-height:1.6!important;
}

.n4v-footer-bottom{
    margin-top:24px!important;
    padding-top:16px!important;
    border-top:1px solid rgba(255,255,255,.12)!important;
    text-align:center!important;
    color:#d7e7e8!important;
    font-size:13px!important;
}

/* Responsive */
@media (max-width:1180px){
    .container{width:calc(100% - 28px)!important;}
    .formsearch{grid-template-columns:1fr 1fr 1fr!important;}
    .formsearch input[type="submit"]{width:100%!important;}
    .n4v-home-cats{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
    .n4v-post-card{grid-template-columns:180px minmax(0,1fr) 120px!important;}
}

@media (max-width:920px){
    .header-top-inner{flex-wrap:wrap!important;}
    .header-nav-wrap{order:3!important;flex:0 0 100%!important;}
    .n4v-home-cats{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
    .n4v-post-card{grid-template-columns:150px minmax(0,1fr)!important;}
    .n4v-post-side{grid-column:2/3!important;justify-self:start!important;text-align:left!important;align-items:flex-start!important;flex-direction:row!important;gap:16px!important;}
    .n4v-footer-grid{grid-template-columns:1fr 1fr!important;}
}

@media (max-width:768px){
    .header-top{position:static!important;}
    .header-top .register{display:none!important;}
    .menutop{display:none!important;}
    .container{width:calc(100% - 18px)!important;}
    .n4v-hero{margin-top:18px!important;border-radius:22px!important;padding:24px 18px!important;}
    .n4v-hero:after{display:none!important;}
    .n4v-hero h2{font-size:32px!important;}
    .n4v-hero h2:after{font-size:23px!important;}
    .n4v-hero-search{margin-top:18px!important;padding:12px!important;}
    .formsearch{grid-template-columns:1fr!important;gap:10px!important;}
    .n4v-home-cats{grid-template-columns:1fr!important;gap:12px!important;}
    .n4v-home-listbox{padding:12px 12px 4px!important;border-radius:20px!important;}
    .n4v-home-listbox-head{flex-direction:column!important;align-items:flex-start!important;}
    .n4v-home-listbox-head h2{font-size:23px!important;}
    .n4v-post-card{grid-template-columns:118px minmax(0,1fr)!important;gap:12px!important;padding:12px 10px!important;}
    .n4v-post-thumb{height:96px!important;}
    .n4v-post-body h3{font-size:16px!important;}
    .n4v-post-desc{font-size:13px!important;}
    .n4v-post-actions{flex-direction:column!important;align-items:flex-start!important;}
    .n4v-quick-details[open]{width:100%!important;}
    .n4v-quick-panel-inner{margin-left:calc(-118px - 12px)!important;width:calc(100% + 118px + 12px)!important;}
    .n4v-post-side{grid-column:1/-1!important;justify-content:space-between!important;justify-self:stretch!important;display:flex!important;flex-direction:row!important;width:100%!important;padding-top:4px!important;border-top:1px dashed #edf1f2!important;}
    .n4v-footer-grid{grid-template-columns:1fr!important;}
}

@media (max-width:430px){
    .n4v-post-card{grid-template-columns:1fr!important;}
    .n4v-post-thumb{height:165px!important;}
    .n4v-quick-panel-inner{margin-left:0!important;width:100%!important;}
    .n4v-post-side{grid-column:auto!important;}
}

/* =========================================================
   N4V LISTING DISPLAY FINAL HOTFIX
   Desktop: thể hiện item giống marketplace.
   Mobile: quay về kiểu gọn trước đó, 2 nút ngang, ẩn hiệu lực/state/city.
   CSS-only, không sửa PHP.
   ========================================================= */

/* ---------- DESKTOP LISTING: giống mẫu marketplace ---------- */

.n4v-home-listbox{
    border-radius: 22px !important;
    overflow: hidden !important;
    padding: 0 !important;
    background: #fff !important;
    border: 1px solid #e7ecef !important;
    box-shadow: 0 18px 40px rgba(10,36,39,.05) !important;
}

.n4v-home-listbox-head{
    padding: 18px 22px 14px !important;
    border-bottom: 1px solid #edf1f2 !important;
    background: #fff !important;
}

.tutorial_list{
    gap: 0 !important;
}

.boxproduct{
    overflow: visible !important;
    background: #fff !important;
}

.n4v-post-card{
    display: grid !important;
    grid-template-columns: 210px minmax(0,1fr) 190px !important;
    gap: 18px !important;
    align-items: center !important;
    padding: 14px 18px !important;
    min-height: 132px !important;
    border-top: 1px solid #edf1f2 !important;
    background: #fff !important;
    border-radius: 0 !important;
    overflow: visible !important;
}

.boxproduct:first-child .n4v-post-card{
    border-top: 0 !important;
}

.n4v-post-card:hover{
    background: #fffdfb !important;
}

.n4v-post-thumb{
    width: 100% !important;
    height: 104px !important;
    min-height: 0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: #f4f7f7 !important;
}

.n4v-post-thumb img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

.n4v-post-body{
    min-width: 0 !important;
    align-self: center !important;
}

.n4v-post-top{
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 0 0 6px !important;
}

.n4v-post-badge{
    height: 27px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    background: #054e59 !important;
    color: #fff !important;
    font-size: 11.5px !important;
    line-height: 27px !important;
    font-weight: 800 !important;
    letter-spacing: .03em !important;
    text-transform: uppercase !important;
}

.n4v-post-status{
    color: #7c8b8f !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

.n4v-post-body h3{
    float: none !important;
    margin: 0 0 5px !important;
    padding: 0 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 18px !important;
    line-height: 1.28 !important;
    font-weight: 800 !important;
    color: #17383f !important;
    max-width: 100% !important;
}

.n4v-post-body h3 a{
    color: #17383f !important;
}

.n4v-post-location{
    margin: 0 0 6px !important;
    color: #ff735f !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
}

.n4v-post-desc{
    margin: 0 !important;
    max-width: 760px !important;
    color: #52696d !important;
    font-size: 13.5px !important;
    line-height: 1.48 !important;
}

/* Desktop: chỉ giữ nút nhỏ, không chiếm nhiều chiều cao */
.n4v-post-actions{
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 8px !important;
}

.n4v-post-link,
.n4v-quick-details > summary{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 34px !important;
    min-width: 104px !important;
    padding: 0 14px !important;
    border-radius: 10px !important;
    font-size: 12.5px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
}

.n4v-post-link{
    background: #054e59 !important;
    color: #fff !important;
}

.n4v-quick-details > summary{
    background: #fff2ec !important;
    border: 1px solid #ffd5ca !important;
    color: #d95e48 !important;
    list-style: none !important;
}

.n4v-quick-details > summary::-webkit-details-marker{
    display: none !important;
}

/* Right block: giống khu vực giá/thời gian trong mẫu, nhưng dùng hiệu lực/state/city */
.n4v-post-side{
    align-self: center !important;
    justify-self: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 6px 0 18px !important;
    border-left: 1px solid #edf1f2 !important;
    background: transparent !important;
}

.n4v-side-card{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Nếu HTML cũ vẫn dùng n4v-side-item thì vẫn được */
.n4v-side-expire,
.n4v-side-place,
.n4v-side-item{
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    min-width: 0 !important;
}

.n4v-side-expire span,
.n4v-side-place span,
.n4v-side-item span{
    display: block !important;
    margin: 0 0 2px !important;
    color: #849397 !important;
    font-size: 10px !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .045em !important;
    text-align: right !important;
    white-space: nowrap !important;
}

.n4v-side-expire strong,
.n4v-side-place strong,
.n4v-side-item strong{
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: #17383f !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
    text-align: right !important;
}

.n4v-side-expire strong,
.n4v-side-expire.n4v-side-item strong{
    color: #ff735f !important;
    font-size: 14px !important;
}

/* Quick preview: mở trong card, không đè */
.n4v-quick-details[open]{
    display: block !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    order: 99 !important;
}

.n4v-quick-details[open] > summary{
    display: none !important;
}

.n4v-quick-panel-inner{
    position: static !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 6px 0 0 !important;
    padding: 13px 15px !important;
    border: 1px solid #dfe8eb !important;
    border-radius: 14px !important;
    background: #fcfdfd !important;
    color: #324d53 !important;
    font-size: 13.5px !important;
    line-height: 1.65 !important;
    box-shadow: none !important;
}

.n4v-quick-head{
    margin: 0 0 7px !important;
    color: #054e59 !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
}

.n4v-quick-phone{
    display: inline-flex !important;
    margin-top: 4px !important;
    padding: 8px 12px !important;
    border-radius: 999px !important;
    border: 1px solid #d7e6e8 !important;
    background: #f3faf9 !important;
    color: #28494f !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

/* ---------- TABLET ---------- */
@media (max-width: 920px){
    .n4v-post-card{
        grid-template-columns: 150px minmax(0,1fr) 150px !important;
        gap: 12px !important;
        padding: 12px 12px !important;
    }

    .n4v-post-thumb{
        height: 94px !important;
    }

    .n4v-post-side{
        padding-left: 10px !important;
    }
}

/* ---------- MOBILE: quay về kiểu gọn, không hiện hiệu lực/state/city ---------- */
@media (max-width: 768px){
    .n4v-home-listbox{
        border-radius: 18px !important;
        padding: 0 !important;
    }

    .n4v-home-listbox-head{
        padding: 14px 14px 10px !important;
    }

    .n4v-post-card{
        display: grid !important;
        grid-template-columns: 112px minmax(0,1fr) !important;
        gap: 11px !important;
        align-items: start !important;
        padding: 12px 10px !important;
        min-height: 0 !important;
    }

    .n4v-post-thumb{
        height: 92px !important;
        border-radius: 12px !important;
    }

    .n4v-post-top{
        margin-bottom: 5px !important;
        gap: 6px !important;
    }

    .n4v-post-badge{
        height: 25px !important;
        padding: 0 10px !important;
        font-size: 10.8px !important;
        line-height: 25px !important;
    }

    .n4v-post-status{
        font-size: 11px !important;
    }

    .n4v-post-body h3{
        font-size: 16px !important;
        line-height: 1.28 !important;
        margin-bottom: 5px !important;
    }

    .n4v-post-location{
        font-size: 13px !important;
        margin-bottom: 5px !important;
    }

    .n4v-post-desc{
        font-size: 13px !important;
        line-height: 1.45 !important;
    }

    /* Mobile không cần hiển thị thông tin hiệu lực/tiểu bang/thành phố */
    .n4v-post-side{
        display: none !important;
    }

    /* Hai nút bắt buộc cùng một hàng, không chồng */
    .n4v-post-actions{
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        width: 100% !important;
        margin-top: 9px !important;
        overflow: visible !important;
    }

    .n4v-quick-details{
        display: block !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    .n4v-post-link,
    .n4v-quick-details > summary{
        width: 100% !important;
        min-width: 0 !important;
        height: 38px !important;
        padding: 0 6px !important;
        border-radius: 10px !important;
        font-size: 13px !important;
        text-align: center !important;
    }

    .n4v-quick-details[open]{
        grid-column: 1 / -1 !important;
        width: 100% !important;
        order: 3 !important;
    }

    .n4v-quick-details[open] > summary{
        display: none !important;
    }

    .n4v-quick-panel-inner{
        margin-left: calc(-112px - 11px) !important;
        width: calc(100% + 112px + 11px) !important;
        max-width: none !important;
        padding: 13px 14px !important;
        font-size: 13.5px !important;
        line-height: 1.62 !important;
    }
}

@media (max-width: 430px){
    .n4v-post-card{
        grid-template-columns: 104px minmax(0,1fr) !important;
        gap: 10px !important;
        padding: 11px 9px !important;
    }

    .n4v-post-thumb{
        height: 88px !important;
    }

    .n4v-quick-panel-inner{
        margin-left: calc(-104px - 10px) !important;
        width: calc(100% + 104px + 10px) !important;
    }
}

/* =========================================================
   N4V FONT OVERRIDE
   Font theo trang mẫu: Segoe UI / Arial / Tahoma / sans-serif.
   Mục tiêu: chữ tiếng Việt gọn, rõ, không bị cảm giác serif/cứng.
   ========================================================= */

html,
body,
button,
input,
select,
textarea,
table,
td,
th,
div,
span,
p,
a,
li,
label,
summary,
details,
article,
section,
header,
footer,
nav,
aside,
main,
.n4v-home-shell,
.n4v-home-shell *,
.n4v-home-listbox,
.n4v-home-listbox *,
.n4v-post-card,
.n4v-post-card *,
.n4v-hero,
.n4v-hero *,
.header-top,
.header-top *,
.menu,
.menu *,
.n4v-footer,
.n4v-footer *,
.contentmain,
.contentmain *{
    font-family:"Segoe UI", Arial, Tahoma, Helvetica, sans-serif !important;
    text-rendering:auto !important;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    font-synthesis-weight:none;
}

/* Bỏ font serif/cursive cũ ở hero và tiêu đề để đồng bộ với trang mẫu */
.n4v-hero h1,
.n4v-hero h2,
.n4v-home-listbox-head h2,
.n4v-post-body h3,
.n4v-post-body h3 a,
.contentmain h1,
.contentmain h2,
.contentmain h3,
.n4v-script{
    font-family:"Segoe UI", Arial, Tahoma, Helvetica, sans-serif !important;
    letter-spacing:0 !important;
}

/* Cân lại độ đậm để không bị dày, vỡ dấu tiếng Việt trên Chrome/Windows */
.n4v-hero h1,
.n4v-hero h2,
.n4v-home-listbox-head h2,
.n4v-post-body h3,
.n4v-post-body h3 a{
    font-weight:700 !important;
}

.n4v-post-desc,
.n4v-post-location,
.n4v-post-status,
.n4v-side-card,
.n4v-side-card *,
.n4v-quick-panel-inner,
.n4v-quick-panel-inner *{
    font-weight:400;
}

.n4v-post-badge,
.n4v-post-link,
.n4v-quick-details > summary,
.header-top .register a,
.menu ul li a,
.n4v-side-card span,
.n4v-side-card strong{
    font-weight:700 !important;
}

/* N4V FEATURED / EXPIRED / BADGE CLEANUP - KEEP */
.n4v-post-badge{
    display:none!important;
}

/* =========================================================
   N4V DETAIL PAGE PRO UI
   Trang chi tiết tin: card rõ ràng, dễ đọc, hài hòa desktop/mobile.
   ========================================================= */

.breadandfilter{
    max-width:1280px !important;
    width:calc(100% - 40px) !important;
    margin:26px auto 14px !important;
    padding:13px 18px !important;
    border-radius:14px !important;
    background:#054e59 !important;
    color:#fff !important;
    border:0 !important;
    box-shadow:0 12px 28px rgba(5,78,89,.12) !important;
    font-family:"Segoe UI",Arial,Tahoma,Helvetica,sans-serif !important;
    font-size:14px !important;
    font-weight:700 !important;
}

.breadandfilter a,
.breadandfilter span{
    color:#fff !important;
}

.n4v-detail-page{
    max-width:1280px !important;
    width:calc(100% - 40px) !important;
    margin:0 auto 28px !important;
    font-family:"Segoe UI",Arial,Tahoma,Helvetica,sans-serif !important;
    color:#17383f !important;
}

.n4v-detail-card{
    background:#fff !important;
    border:1px solid #e7ecef !important;
    border-radius:24px !important;
    overflow:hidden !important;
    box-shadow:0 18px 44px rgba(10,36,39,.06) !important;
}

.n4v-detail-header{
    padding:24px 28px 20px !important;
    background:
        radial-gradient(circle at 92% 8%,rgba(255,115,95,.14),rgba(255,115,95,0) 30%),
        linear-gradient(135deg,#fffaf6 0%,#ffffff 62%,#f7fbfb 100%) !important;
    border-bottom:1px solid #edf1f2 !important;
}

.n4v-detail-kicker{
    display:inline-flex !important;
    align-items:center !important;
    min-height:28px !important;
    padding:0 12px !important;
    border-radius:999px !important;
    background:#fff2ec !important;
    border:1px solid #ffd5ca !important;
    color:#d95e48 !important;
    font-size:12px !important;
    font-weight:800 !important;
    text-transform:uppercase !important;
    letter-spacing:.04em !important;
    margin-bottom:12px !important;
}

.n4v-detail-page h1.ten,
.n4v-news-detail-page h1.ten,
.listinfo.n4v-detail-page h1.ten,
.newsinfo.n4v-detail-page h1.ten{
    display:block !important;
    text-indent:0 !important;
    height:auto !important;
    margin:0 0 16px !important;
    padding:0 !important;
    color:#17383f !important;
    font-family:"Segoe UI",Arial,Tahoma,Helvetica,sans-serif !important;
    font-size:32px !important;
    line-height:1.28 !important;
    font-weight:700 !important;
    letter-spacing:0 !important;
}

.n4v-detail-meta{
    display:grid !important;
    grid-template-columns:1fr 1.5fr 1fr !important;
    gap:12px !important;
    margin-top:8px !important;
}

.n4v-detail-meta-item{
    min-width:0 !important;
    padding:12px 14px !important;
    border:1px solid #e6eef0 !important;
    border-radius:14px !important;
    background:#fff !important;
}

.n4v-detail-meta-item span{
    display:block !important;
    margin-bottom:5px !important;
    color:#7c8b8f !important;
    font-size:11px !important;
    line-height:1.15 !important;
    font-weight:800 !important;
    text-transform:uppercase !important;
    letter-spacing:.045em !important;
}

.n4v-detail-meta-item strong{
    display:block !important;
    color:#17383f !important;
    font-size:15px !important;
    line-height:1.35 !important;
    font-weight:700 !important;
    overflow-wrap:anywhere !important;
}

.n4v-detail-phone strong{
    color:#ff735f !important;
}

.n4v-detail-content{
    padding:24px 28px 26px !important;
    background:#fff !important;
}

.n4v-detail-content .divdetail,
.n4v-detail-card .divdetail{
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    color:#263f45 !important;
    font-family:"Segoe UI",Arial,Tahoma,Helvetica,sans-serif !important;
    font-size:17px !important;
    line-height:1.78 !important;
    letter-spacing:0 !important;
    word-spacing:0 !important;
}

.n4v-detail-content .divdetail h1,
.n4v-detail-content .divdetail h2,
.n4v-detail-content .divdetail h3,
.n4v-detail-content .divdetail b,
.n4v-detail-content .divdetail strong{
    color:#123f46 !important;
    font-weight:700 !important;
}

.n4v-detail-content .divdetail h2,
.n4v-detail-content .divdetail h3{
    margin:16px 0 8px !important;
    font-size:22px !important;
    line-height:1.35 !important;
}

.n4v-detail-content .divdetail p{
    margin:0 0 12px !important;
}

.n4v-detail-content .divdetail a{
    color:#054e59 !important;
    font-weight:700 !important;
}

.n4v-detail-gallery-wrap{
    padding:0 28px 28px !important;
}

.n4v-detail-gallery{
    margin:0 !important;
    padding:18px !important;
    border:1px solid #e6eef0 !important;
    background:#fbfdfd !important;
    border-radius:18px !important;
}

.n4v-detail-gallery h2{
    text-indent:0 !important;
    height:auto !important;
    margin:0 0 14px !important;
    color:#17383f !important;
    font-family:"Segoe UI",Arial,Tahoma,Helvetica,sans-serif !important;
    font-size:22px !important;
    line-height:1.35 !important;
    font-weight:700 !important;
}

.n4v-detail-gallery .n4v-main-photo{
    display:block !important;
    text-align:center !important;
    border-radius:16px !important;
    overflow:hidden !important;
    background:#fff !important;
}

.n4v-detail-gallery .n4v-main-photo img,
.n4v-detail-gallery img{
    max-width:100% !important;
    height:auto !important;
    border-radius:14px !important;
}

.n4v-detail-thumbs{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:10px !important;
    margin-top:12px !important;
}

.n4v-detail-thumbs a{
    display:inline-block !important;
    padding:4px !important;
    border:1px solid #dfe8eb !important;
    background:#fff !important;
    border-radius:10px !important;
}

.n4v-detail-thumbs img{
    width:88px !important;
    height:64px !important;
    object-fit:cover !important;
    display:block !important;
    border-radius:8px !important;
}

.n4v-detail-related{
    margin:24px 0 0 !important;
}

.n4v-detail-related-title,
.tit-chitiet{
    margin:0 0 14px !important;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
}

.n4v-detail-related-title h2,
.tit-chitiet h2{
    margin:0 !important;
    padding:0 !important;
    color:#17383f !important;
    font-family:"Segoe UI",Arial,Tahoma,Helvetica,sans-serif !important;
    font-size:24px !important;
    line-height:1.3 !important;
    font-weight:700 !important;
}

.n4v-detail-related-list{
    background:#fff !important;
    border:1px solid #e7ecef !important;
    border-radius:22px !important;
    overflow:hidden !important;
    box-shadow:0 18px 44px rgba(10,36,39,.04) !important;
}

/* Old selectors fallback */
.listinfo:not(.n4v-detail-page),
.newsinfo:not(.n4v-detail-page){
    max-width:1280px !important;
    width:calc(100% - 40px) !important;
    margin:0 auto 28px !important;
    background:#fff !important;
    border:1px solid #e7ecef !important;
    border-radius:22px !important;
    padding:24px 28px !important;
    box-shadow:0 18px 44px rgba(10,36,39,.06) !important;
}

.datechitiet{
    font-family:"Segoe UI",Arial,Tahoma,Helvetica,sans-serif !important;
    color:#53696d !important;
    font-size:14px !important;
    line-height:1.5 !important;
}

.datechitiet span{
    color:#17383f !important;
    font-weight:700 !important;
}

/* Mobile detail */
@media (max-width:768px){
    .breadandfilter{
        width:calc(100% - 18px) !important;
        margin:16px auto 10px !important;
        padding:11px 13px !important;
        border-radius:12px !important;
        font-size:13px !important;
    }

    .n4v-detail-page,
    .listinfo:not(.n4v-detail-page),
    .newsinfo:not(.n4v-detail-page){
        width:calc(100% - 18px) !important;
        margin-bottom:20px !important;
    }

    .n4v-detail-card{
        border-radius:18px !important;
    }

    .n4v-detail-header{
        padding:18px 16px 16px !important;
    }

    .n4v-detail-kicker{
        min-height:26px !important;
        padding:0 10px !important;
        font-size:11px !important;
        margin-bottom:10px !important;
    }

    .n4v-detail-page h1.ten,
    .n4v-news-detail-page h1.ten,
    .listinfo.n4v-detail-page h1.ten,
    .newsinfo.n4v-detail-page h1.ten{
        font-size:24px !important;
        line-height:1.3 !important;
        margin-bottom:13px !important;
    }

    .n4v-detail-meta{
        grid-template-columns:1fr !important;
        gap:8px !important;
    }

    .n4v-detail-meta-item{
        padding:10px 12px !important;
        border-radius:12px !important;
    }

    .n4v-detail-meta-item strong{
        font-size:14px !important;
    }

    .n4v-detail-content{
        padding:18px 16px 20px !important;
    }

    .n4v-detail-content .divdetail,
    .n4v-detail-card .divdetail{
        font-size:16px !important;
        line-height:1.72 !important;
    }

    .n4v-detail-content .divdetail h2,
    .n4v-detail-content .divdetail h3{
        font-size:20px !important;
    }

    .n4v-detail-gallery-wrap{
        padding:0 16px 20px !important;
    }

    .n4v-detail-gallery{
        padding:12px !important;
        border-radius:15px !important;
    }

    .n4v-detail-gallery h2{
        font-size:20px !important;
    }

    .n4v-detail-thumbs img{
        width:72px !important;
        height:54px !important;
    }

    .n4v-detail-related-title h2,
    .tit-chitiet h2{
        font-size:21px !important;
    }

    .listinfo:not(.n4v-detail-page),
    .newsinfo:not(.n4v-detail-page){
        padding:18px 16px !important;
        border-radius:18px !important;
    }
}

/* =========================================================
   N4V QUICK PREVIEW RESTORE - KEEP DETAIL UI
   Khôi phục xem nhanh full-width trên desktop, không làm mất CSS trang chi tiết.
   ========================================================= */

.boxproduct,
.tutorial_list,
.n4v-home-listbox,
.n4v-post-card,
.n4v-post-body,
.n4v-post-actions{
    overflow: visible !important;
}

@media (min-width: 769px){
    .n4v-post-card{
        --n4v-thumb-col: 190px;
        --n4v-side-col: 190px;
        --n4v-grid-gap: 18px;
        position: relative !important;
        overflow: visible !important;
    }

    .n4v-post-card:has(.n4v-quick-details[open]){
        align-items: start !important;
    }

    .n4v-quick-details[open]{
        display: block !important;
        flex: 0 0 100% !important;
        width: 100% !important;
        order: 99 !important;
    }

    .n4v-quick-details[open] > summary{
        display: none !important;
    }

    .n4v-quick-panel-inner{
        box-sizing: border-box !important;
        position: static !important;
        display: block !important;
        margin-top: 12px !important;
        margin-left: calc(-1 * (var(--n4v-thumb-col) + var(--n4v-grid-gap))) !important;
        width: calc(100% + var(--n4v-thumb-col) + var(--n4v-side-col) + (var(--n4v-grid-gap) * 2)) !important;
        max-width: none !important;
        padding: 20px 24px !important;
        border: 1px solid #d9e8ea !important;
        border-radius: 18px !important;
        background: #ffffff !important;
        color: #263f45 !important;
        font-size: 16px !important;
        line-height: 1.75 !important;
        box-shadow: 0 16px 36px rgba(10,36,39,.08) !important;
    }

    .n4v-quick-head{
        margin: 0 0 10px !important;
        color: #054e59 !important;
        font-size: 15px !important;
        line-height: 1.3 !important;
        font-weight: 800 !important;
        text-transform: uppercase !important;
        letter-spacing: .04em !important;
    }

    .n4v-quick-panel-inner p{
        margin: 0 0 14px !important;
        color: #263f45 !important;
        font-size: 16px !important;
        line-height: 1.75 !important;
    }

    .n4v-quick-phone{
        margin-top: 6px !important;
        padding: 10px 14px !important;
        border-radius: 999px !important;
        border: 1px solid #d7e6e8 !important;
        background: #f3faf9 !important;
        color: #28494f !important;
        font-size: 15px !important;
        font-weight: 700 !important;
    }
}

@media (min-width: 769px) and (max-width: 920px){
    .n4v-post-card{
        --n4v-thumb-col: 150px;
        --n4v-side-col: 150px;
        --n4v-grid-gap: 12px;
    }
}

@media (max-width: 768px){
    .n4v-post-actions{
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .n4v-quick-details{
        min-width: 0 !important;
        width: 100% !important;
    }

    .n4v-post-link,
    .n4v-quick-details > summary{
        width: 100% !important;
        min-width: 0 !important;
        height: 38px !important;
        padding: 0 8px !important;
        font-size: 13px !important;
    }

    .n4v-quick-details[open]{
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }

    .n4v-quick-details[open] > summary{
        display: none !important;
    }

    .n4v-quick-panel-inner{
        font-size: 14px !important;
        line-height: 1.65 !important;
    }

    .n4v-quick-panel-inner p{
        font-size: 14px !important;
        line-height: 1.65 !important;
    }
}

/* =========================================================
   N4V QUICK PREVIEW OVERLAP FIX
   Khi Xem nhanh mở: ẩn right info của đúng item đang mở,
   để box xem nhanh không bị Hiệu lực/Tiểu bang/Thành phố đè lên.
   CSS-only, giữ nguyên detail page.
   ========================================================= */

@media (min-width: 769px){
    .n4v-post-card:has(.n4v-quick-details[open]){
        grid-template-columns: var(--n4v-thumb-col,190px) minmax(0,1fr) 0px !important;
        align-items: start !important;
    }

    .n4v-post-card:has(.n4v-quick-details[open]) .n4v-post-side{
        display: none !important;
    }

    .n4v-post-card:has(.n4v-quick-details[open]) .n4v-post-body{
        overflow: visible !important;
    }

    .n4v-post-card:has(.n4v-quick-details[open]) .n4v-quick-details[open]{
        display: block !important;
        flex: 0 0 100% !important;
        width: 100% !important;
        order: 99 !important;
    }

    .n4v-post-card:has(.n4v-quick-details[open]) .n4v-quick-details[open] > summary{
        display: none !important;
    }

    .n4v-post-card:has(.n4v-quick-details[open]) .n4v-quick-panel-inner{
        box-sizing: border-box !important;
        position: static !important;
        display: block !important;
        margin-top: 12px !important;
        margin-left: calc(-1 * (var(--n4v-thumb-col,190px) + var(--n4v-grid-gap,18px))) !important;
        width: calc(100% + var(--n4v-thumb-col,190px) + var(--n4v-grid-gap,18px)) !important;
        max-width: none !important;
        padding: 20px 24px !important;
        border: 1px solid #d9e8ea !important;
        border-radius: 18px !important;
        background: #fff !important;
        color: #263f45 !important;
        font-size: 16px !important;
        line-height: 1.75 !important;
        box-shadow: 0 16px 36px rgba(10,36,39,.08) !important;
        z-index: 5 !important;
    }

    .n4v-post-card:has(.n4v-quick-details[open]) .n4v-quick-panel-inner p{
        font-size: 16px !important;
        line-height: 1.75 !important;
    }
}

/* =========================================================
   N4V QUICK PREVIEW STRUCTURED CONTENT
   Chia nội dung xem nhanh thành nhóm rõ ràng: thông tin nhanh + điểm chính.
   ========================================================= */

.n4v-quick-grid{
    display:grid !important;
    grid-template-columns: 280px minmax(0,1fr) !important;
    gap:18px !important;
    align-items:start !important;
}

.n4v-quick-info{
    display:grid !important;
    gap:9px !important;
}

.n4v-quick-row{
    padding:11px 13px !important;
    border:1px solid #e1ecee !important;
    border-radius:14px !important;
    background:#f7fbfb !important;
}

.n4v-quick-row span{
    display:block !important;
    margin-bottom:5px !important;
    color:#7c8b8f !important;
    font-size:11px !important;
    line-height:1.15 !important;
    font-weight:800 !important;
    text-transform:uppercase !important;
    letter-spacing:.045em !important;
}

.n4v-quick-row strong{
    display:block !important;
    color:#17383f !important;
    font-size:15px !important;
    line-height:1.35 !important;
    font-weight:700 !important;
    overflow-wrap:anywhere !important;
}

.n4v-quick-subhead{
    margin:0 0 9px !important;
    color:#054e59 !important;
    font-size:14px !important;
    line-height:1.25 !important;
    font-weight:800 !important;
    text-transform:uppercase !important;
    letter-spacing:.04em !important;
}

.n4v-quick-summary{
    min-width:0 !important;
}

.n4v-quick-summary ul{
    margin:0 !important;
    padding:0 !important;
    list-style:none !important;
    display:grid !important;
    gap:8px !important;
}

.n4v-quick-summary li{
    position:relative !important;
    margin:0 !important;
    padding:0 0 0 20px !important;
    color:#263f45 !important;
    font-size:16px !important;
    line-height:1.65 !important;
}

.n4v-quick-summary li:before{
    content:"" !important;
    position:absolute !important;
    left:0 !important;
    top:.72em !important;
    width:7px !important;
    height:7px !important;
    border-radius:50% !important;
    background:#ff735f !important;
}

.n4v-quick-summary p{
    margin:0 !important;
    color:#263f45 !important;
    font-size:16px !important;
    line-height:1.65 !important;
}

/* bỏ kiểu phone pill cũ nếu còn sót */
.n4v-quick-phone{
    display:none !important;
}

@media (max-width:768px){
    .n4v-quick-grid{
        grid-template-columns:1fr !important;
        gap:12px !important;
    }

    .n4v-quick-row{
        padding:10px 12px !important;
        border-radius:12px !important;
    }

    .n4v-quick-row strong{
        font-size:14px !important;
    }

    .n4v-quick-summary li,
    .n4v-quick-summary p{
        font-size:14px !important;
        line-height:1.6 !important;
    }
}

/* =========================================================
   N4V QUICK PREVIEW LABEL + READABILITY FIX
   Đổi "Điểm chính cần xem" thành "Nội dung xem nhanh" và làm nội dung dễ quét hơn.
   ========================================================= */

.n4v-quick-head{
    color:#7c8b8f !important;
    font-size:12px !important;
    letter-spacing:.05em !important;
}

.n4v-quick-subhead{
    color:#054e59 !important;
    font-size:15px !important;
    font-weight:800 !important;
    text-transform:uppercase !important;
    letter-spacing:.04em !important;
}

.n4v-quick-summary li{
    padding-left:22px !important;
    margin-bottom:2px !important;
}

.n4v-quick-summary li:before{
    top:.68em !important;
}

.n4v-quick-row strong{
    white-space:normal !important;
}

@media (min-width:769px){
    .n4v-quick-grid{
        grid-template-columns:300px minmax(0,1fr) !important;
    }
}

/* =========================================================
   N4V MOBILE LISTING CARD SEPARATION FIX
   Mobile: tách rõ từng thẻ tin, không còn cảm giác dính chùm.
   CSS-only, giữ nguyên detail page + quick preview.
   ========================================================= */

@media (max-width: 768px){
    body.page-listing,
    body.darkBg{
        background:#f5f1eb !important;
    }

    .contentmain,
    .home-one-column,
    .n4v-page-one-column{
        background:transparent !important;
        border:0 !important;
        padding-left:0 !important;
        padding-right:0 !important;
        box-shadow:none !important;
    }

    .n4v-content-container,
    .contentmain > .container,
    .col-left > .container{
        width:100% !important;
        max-width:100% !important;
        padding-left:8px !important;
        padding-right:8px !important;
    }

    .n4v-category-listbox,
    .n4v-home-listbox{
        background:transparent !important;
        border:0 !important;
        border-radius:0 !important;
        box-shadow:none !important;
        padding:0 !important;
        overflow:visible !important;
    }

    .n4v-home-listbox-head{
        margin:0 0 10px !important;
        padding:0 2px !important;
        border:0 !important;
        background:transparent !important;
    }

    .n4v-home-listbox-head h2{
        font-size:22px !important;
        line-height:1.25 !important;
        color:#17383f !important;
        font-weight:800 !important;
    }

    .tutorial_list,
    .rowsp.tutorial_list{
        display:flex !important;
        flex-direction:column !important;
        gap:12px !important;
        margin:0 !important;
        overflow:visible !important;
    }

    .boxproduct{
        display:block !important;
        width:100% !important;
        margin:0 !important;
        padding:0 !important;
        background:transparent !important;
        border:0 !important;
        box-shadow:none !important;
        overflow:visible !important;
    }

    .n4v-post-card{
        display:grid !important;
        grid-template-columns:112px minmax(0,1fr) !important;
        gap:11px !important;
        align-items:start !important;
        width:100% !important;
        min-height:0 !important;
        margin:0 !important;
        padding:12px !important;
        background:#fff !important;
        border:1px solid #e5ecee !important;
        border-radius:18px !important;
        box-shadow:0 10px 24px rgba(10,36,39,.055) !important;
        overflow:visible !important;
    }

    .n4v-post-card:hover{
        background:#fff !important;
    }

    .n4v-post-thumb{
        width:112px !important;
        height:92px !important;
        min-height:0 !important;
        border-radius:13px !important;
        background:#f4f7f7 !important;
        overflow:hidden !important;
        align-self:start !important;
    }

    .n4v-post-thumb img{
        width:100% !important;
        height:100% !important;
        display:block !important;
        object-fit:cover !important;
    }

    .n4v-post-body{
        min-width:0 !important;
        padding:0 !important;
    }

    .n4v-post-top{
        display:block !important;
        margin:0 0 5px !important;
        line-height:1.2 !important;
    }

    .n4v-post-status{
        display:block !important;
        margin:0 0 5px !important;
        color:#7b8b8f !important;
        font-size:11.5px !important;
        line-height:1.25 !important;
        font-weight:700 !important;
    }

    .n4v-post-body h3{
        margin:0 0 6px !important;
        padding:0 !important;
        font-size:16.5px !important;
        line-height:1.28 !important;
        font-weight:800 !important;
        color:#17383f !important;
        display:-webkit-box !important;
        -webkit-line-clamp:2 !important;
        -webkit-box-orient:vertical !important;
        overflow:hidden !important;
    }

    .n4v-post-body h3 a{
        color:#17383f !important;
    }

    .n4v-post-location{
        margin:0 0 6px !important;
        color:#ff735f !important;
        font-size:13.5px !important;
        line-height:1.25 !important;
        font-weight:800 !important;
    }

    .n4v-post-desc{
        margin:0 !important;
        color:#52696d !important;
        font-size:13.2px !important;
        line-height:1.45 !important;
        display:-webkit-box !important;
        -webkit-line-clamp:2 !important;
        -webkit-box-orient:vertical !important;
        overflow:hidden !important;
    }

    .n4v-post-side{
        display:none !important;
    }

    .n4v-post-actions{
        grid-column:1 / -1 !important;
        display:grid !important;
        grid-template-columns:1fr 1fr !important;
        gap:8px !important;
        width:100% !important;
        margin-top:10px !important;
        padding-top:10px !important;
        border-top:1px solid #edf2f3 !important;
        overflow:visible !important;
    }

    .n4v-quick-details{
        display:block !important;
        width:100% !important;
        min-width:0 !important;
    }

    .n4v-post-link,
    .n4v-quick-details > summary{
        width:100% !important;
        min-width:0 !important;
        height:39px !important;
        padding:0 8px !important;
        border-radius:12px !important;
        font-size:13px !important;
        line-height:1 !important;
        font-weight:800 !important;
        text-align:center !important;
    }

    .n4v-quick-details[open]{
        grid-column:1 / -1 !important;
        width:100% !important;
        order:3 !important;
    }

    .n4v-quick-details[open] > summary{
        display:none !important;
    }

    .n4v-quick-panel-inner{
        width:100% !important;
        max-width:100% !important;
        margin:10px 0 0 !important;
        padding:13px !important;
        border-radius:16px !important;
        border:1px solid #dfe8eb !important;
        background:#fcfdfd !important;
        box-shadow:none !important;
        font-size:14px !important;
        line-height:1.62 !important;
    }

    .n4v-quick-grid{
        grid-template-columns:1fr !important;
        gap:12px !important;
    }

    .n4v-quick-info{
        gap:8px !important;
    }

    .n4v-quick-row{
        padding:10px 11px !important;
        border-radius:13px !important;
    }

    .n4v-quick-summary li,
    .n4v-quick-summary p{
        font-size:14px !important;
        line-height:1.6 !important;
    }

    .show_more_main{
        padding:14px 0 6px !important;
        text-align:center !important;
    }
}

@media (max-width:430px){
    .n4v-content-container,
    .contentmain > .container,
    .col-left > .container{
        padding-left:7px !important;
        padding-right:7px !important;
    }

    .tutorial_list,
    .rowsp.tutorial_list{
        gap:11px !important;
    }

    .n4v-post-card{
        grid-template-columns:104px minmax(0,1fr) !important;
        gap:10px !important;
        padding:11px !important;
        border-radius:17px !important;
    }

    .n4v-post-thumb{
        width:104px !important;
        height:86px !important;
    }

    .n4v-post-body h3{
        font-size:16px !important;
    }

    .n4v-post-desc{
        font-size:13px !important;
    }
}

/* =========================================================
   N4V MOBILE QUICK PREVIEW HEAD CLEANUP
   Mobile: ẩn "Tóm tắt tin đăng", chỉ giữ "Nội dung xem nhanh".
   CSS-only, không ảnh hưởng desktop.
   ========================================================= */

@media (max-width:768px){
    .n4v-quick-panel-inner > .n4v-quick-head{
        display:none !important;
    }

    .n4v-quick-panel-inner{
        padding-top:14px !important;
    }

    .n4v-quick-subhead{
        margin-top:0 !important;
        margin-bottom:10px !important;
    }
}

/* =========================================================
   N4V MOBILE QUICK PREVIEW CLEAN FIX
   Mobile: bỏ toàn bộ khối thông tin phụ trong xem nhanh,
   chỉ giữ nội dung chính; box full ngang, không lệch phải.
   CSS-only.
   ========================================================= */

@media (max-width:768px){
    /* Box xem nhanh phải nằm trọn trong card, không bị kéo/ép về bên phải */
    .n4v-quick-details[open]{
        grid-column:1 / -1 !important;
        width:100% !important;
        min-width:0 !important;
        display:block !important;
        order:3 !important;
    }

    .n4v-quick-details[open] > summary{
        display:none !important;
    }

    .n4v-quick-panel-inner{
        box-sizing:border-box !important;
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        margin:10px 0 0 0 !important;
        margin-left:0 !important;
        margin-right:0 !important;
        padding:14px !important;
        position:static !important;
        display:block !important;
        border-radius:16px !important;
        overflow:hidden !important;
    }

    /* Ẩn hẳn heading phụ "Tóm tắt tin đăng" trên mobile */
    .n4v-quick-panel-inner > .n4v-quick-head{
        display:none !important;
    }

    /* Ẩn nguyên khối thông tin phụ: Khu vực / Liên lạc / Địa chỉ */
    .n4v-quick-info,
    .n4v-quick-grid > .n4v-quick-info{
        display:none !important;
    }

    /* Chỉ giữ nội dung chính */
    .n4v-quick-grid{
        display:block !important;
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        grid-template-columns:1fr !important;
        gap:0 !important;
    }

    .n4v-quick-summary{
        display:block !important;
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
    }

    .n4v-quick-subhead{
        display:block !important;
        margin:0 0 10px 0 !important;
        color:#054e59 !important;
        font-size:15px !important;
        line-height:1.25 !important;
        font-weight:800 !important;
        text-transform:uppercase !important;
        letter-spacing:.04em !important;
    }

    .n4v-quick-summary ul{
        display:grid !important;
        gap:8px !important;
        margin:0 !important;
        padding:0 !important;
        list-style:none !important;
        width:100% !important;
    }

    .n4v-quick-summary li{
        box-sizing:border-box !important;
        width:100% !important;
        max-width:100% !important;
        margin:0 !important;
        padding-left:20px !important;
        color:#263f45 !important;
        font-size:14px !important;
        line-height:1.6 !important;
        overflow-wrap:anywhere !important;
        word-break:normal !important;
    }

    .n4v-quick-summary p{
        margin:0 !important;
        color:#263f45 !important;
        font-size:14px !important;
        line-height:1.6 !important;
        overflow-wrap:anywhere !important;
    }
}

@media (max-width:430px){
    .n4v-quick-panel-inner{
        width:100% !important;
        max-width:100% !important;
        margin-left:0 !important;
        margin-right:0 !important;
    }
}

/* =========================================================
   N4V MOBILE QUICK PREVIEW FULL CARD WIDTH FIX
   Mobile: box xem nhanh tràn đủ từ mép trái tới mép phải card.
   Giữ việc ẩn Khu vực/Liên lạc/Địa chỉ trong box xem nhanh.
   CSS-only.
   ========================================================= */

@media (max-width:768px){
    /*
      .n4v-quick-panel-inner nằm trong cột nội dung bên phải.
      Muốn full card thì phải kéo ngược sang trái bằng chiều rộng thumbnail + gap.
    */
    .n4v-post-card{
        --n4v-mobile-thumb:112px;
        --n4v-mobile-gap:11px;
        overflow:visible !important;
    }

    .n4v-post-body,
    .n4v-post-actions,
    .n4v-quick-details{
        overflow:visible !important;
    }

    .n4v-quick-details[open]{
        display:block !important;
        width:100% !important;
        min-width:0 !important;
        grid-column:1 / -1 !important;
        order:3 !important;
        overflow:visible !important;
    }

    .n4v-quick-details[open] > summary{
        display:none !important;
    }

    .n4v-quick-panel-inner{
        box-sizing:border-box !important;
        position:static !important;
        display:block !important;
        min-width:0 !important;
        max-width:none !important;

        /* Đây là phần quan trọng: bung full card */
        margin-top:10px !important;
        margin-left:calc(-1 * (var(--n4v-mobile-thumb) + var(--n4v-mobile-gap))) !important;
        margin-right:0 !important;
        width:calc(100% + var(--n4v-mobile-thumb) + var(--n4v-mobile-gap)) !important;

        padding:14px !important;
        border-radius:16px !important;
        border:1px solid #dfe8eb !important;
        background:#fcfdfd !important;
        box-shadow:none !important;
        overflow:hidden !important;
    }

    /* Vẫn ẩn nguyên khối thông tin phụ trên mobile */
    .n4v-quick-panel-inner > .n4v-quick-head,
    .n4v-quick-info,
    .n4v-quick-grid > .n4v-quick-info{
        display:none !important;
    }

    .n4v-quick-grid{
        display:block !important;
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
    }

    .n4v-quick-summary{
        display:block !important;
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
    }

    .n4v-quick-subhead{
        display:block !important;
        margin:0 0 10px 0 !important;
    }

    .n4v-quick-summary ul,
    .n4v-quick-summary li,
    .n4v-quick-summary p{
        max-width:100% !important;
        overflow-wrap:anywhere !important;
    }
}

@media (max-width:430px){
    .n4v-post-card{
        --n4v-mobile-thumb:104px;
        --n4v-mobile-gap:10px;
    }

    .n4v-quick-panel-inner{
        margin-left:calc(-1 * (var(--n4v-mobile-thumb) + var(--n4v-mobile-gap))) !important;
        width:calc(100% + var(--n4v-mobile-thumb) + var(--n4v-mobile-gap)) !important;
    }
}