.mt-4{
    padding: 0px !important;
    margin: 0px !important;
    max-width: 98% !important;
    width: 100% !important;
    font-size: 14px !important;
}

.dataTables_length{
    width: 200px !important;
}

.dataTables_length select{
    width: 80px !important;
}
.dataTables_filter{
    margin-bottom: 10px;
    
}
.dataTable thead th{
    border-top: 1px solid gray !important;
}


.hsoc-bulletin-container {
    max-width: 900px;
    margin: auto;
}

.hsoc-bulletin-card {
    background: #fff;
    border-radius: 10px;
    padding: 25px;
    margin-bottom: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.hsoc-title {
    color: #1e3a8a;
    font-weight: bold;
    margin-bottom: 10px;
}

.hsoc-meta {
    font-size: 14px;
    color: #555;
    margin-bottom: 20px;
}

.hsoc-content img {
    max-width: 100%;
    height: auto;
}

/* =========================
   DEFAULT LABEL
========================= */
.ql-snow .ql-picker.ql-font .ql-picker-label::before {
    content: 'Sans Serif';
}

/* =========================
   DROPDOWN ITEMS
========================= */
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="roboto"]::before { content: 'Roboto'; }
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="open-sans"]::before { content: 'Open Sans'; }
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="lato"]::before { content: 'Lato'; }
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="montserrat"]::before { content: 'Montserrat'; }
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="oswald"]::before { content: 'Oswald'; }
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="raleway"]::before { content: 'Raleway'; }
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="arial"]::before { content: 'Arial'; }
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="times"]::before { content: 'Times New Roman'; }
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="courier"]::before { content: 'Courier New'; }

/* CURSIVE */
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="pacifico"]::before { content: 'Pacifico'; }
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="dancing"]::before { content: 'Dancing Script'; }
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="great-vibes"]::before { content: 'Great Vibes'; }
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="satisfy"]::before { content: 'Satisfy'; }
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="allura"]::before { content: 'Allura'; }

/* =========================
   SELECTED LABEL (TOP)
========================= */
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="roboto"]::before { content: 'Roboto'; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="open-sans"]::before { content: 'Open Sans'; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="lato"]::before { content: 'Lato'; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="montserrat"]::before { content: 'Montserrat'; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="oswald"]::before { content: 'Oswald'; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="raleway"]::before { content: 'Raleway'; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="arial"]::before { content: 'Arial'; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="times"]::before { content: 'Times New Roman'; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="courier"]::before { content: 'Courier New'; }

/* CURSIVE SELECTED */
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="pacifico"]::before { content: 'Pacifico'; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="dancing"]::before { content: 'Dancing Script'; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="great-vibes"]::before { content: 'Great Vibes'; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="satisfy"]::before { content: 'Satisfy'; }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="allura"]::before { content: 'Allura'; }

/* =========================
   EDITOR FONT APPLICATION
========================= */
.ql-editor .ql-font-roboto { font-family: 'Roboto', sans-serif !important; }
.ql-editor .ql-font-open-sans { font-family: 'Open Sans', sans-serif !important; }
.ql-editor .ql-font-lato { font-family: 'Lato', sans-serif !important; }
.ql-editor .ql-font-montserrat { font-family: 'Montserrat', sans-serif !important; }
.ql-editor .ql-font-oswald { font-family: 'Oswald', sans-serif !important; }
.ql-editor .ql-font-raleway { font-family: 'Raleway', sans-serif !important; }

.ql-editor .ql-font-arial { font-family: Arial, sans-serif !important; }
.ql-editor .ql-font-times { font-family: "Times New Roman", serif !important; }
.ql-editor .ql-font-courier { font-family: "Courier New", monospace !important; }

/* CURSIVE */
.ql-editor .ql-font-pacifico { font-family: 'Pacifico', cursive !important; }
.ql-editor .ql-font-dancing { font-family: 'Dancing Script', cursive !important; }
.ql-editor .ql-font-great-vibes { font-family: 'Great Vibes', cursive !important; }
.ql-editor .ql-font-satisfy { font-family: 'Satisfy', cursive !important; }
.ql-editor .ql-font-allura { font-family: 'Allura', cursive !important; }

/* =========================
   PREVIEW SUPPORT
========================= */
#previewContent .ql-font-pacifico { font-family: 'Pacifico', cursive; }
#previewContent .ql-font-dancing { font-family: 'Dancing Script', cursive; }
#previewContent .ql-font-great-vibes { font-family: 'Great Vibes', cursive; }
#previewContent .ql-font-satisfy { font-family: 'Satisfy', cursive; }
#previewContent .ql-font-allura { font-family: 'Allura', cursive; }
#previewContent .ql-size-24px { font-size: 24px; }
#previewContent .ql-size-36px { font-size: 36px; }

/* HEADER SIZE */
.ql-editor h1 {
    font-size: 28px;
}

/* FONT SIZES */
.ql-size-10px { font-size: 10px; }
.ql-size-12px { font-size: 12px; }
.ql-size-14px { font-size: 14px; }
.ql-size-16px { font-size: 16px; }
.ql-size-18px { font-size: 18px; }
.ql-size-20px { font-size: 20px; }
.ql-size-24px { font-size: 24px; }
.ql-size-28px { font-size: 28px; }
.ql-size-32px { font-size: 32px; }
.ql-size-36px { font-size: 36px; }
.ql-size-48px { font-size: 48px; }
.ql-size-55px { font-size: 55px; }
.ql-size-60px { font-size: 60px; }
.ql-size-68px { font-size: 68px; }

.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="10px"]::before { content: '10px'; }
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before { content: '12px'; }
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before { content: '14px'; }
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before { content: '16px'; }
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before { content: '18px'; }
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before { content: '20px'; }
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24px"]::before { content: '24px'; }
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="28px"]::before { content: '28px'; }
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32px"]::before { content: '32px'; }
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="36px"]::before { content: '36px'; }
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="48px"]::before { content: '48px'; }
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="55px"]::before { content: '55px'; }
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="60px"]::before { content: '60px'; }
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="68px"]::before { content: '68px'; }


/* =========================
   ALIGNMENT FIX (CRITICAL)
========================= */

#previewContent .ql-align-center {
    text-align: center;
}

#previewContent .ql-align-right {
    text-align: right;
}

#previewContent .ql-align-justify {
    text-align: justify;
}

/* OPTIONAL: LEFT (default) */
#previewContent .ql-align-left {
    text-align: left;
}
/* ALIGNMENT FIX */
.hsoc-content .ql-align-center { text-align: center; }
.hsoc-content .ql-align-right { text-align: right; }
.hsoc-content .ql-align-justify { text-align: justify; }

/* FONT SIZE */
.hsoc-content .ql-size-24px { font-size: 24px; }
.hsoc-content .ql-size-32px { font-size: 32px; }

/* OPTIONAL FONT SUPPORT */
.hsoc-content .ql-font-pacifico { font-family: 'Pacifico', cursive; }
.hsoc-content .ql-font-dancing { font-family: 'Dancing Script', cursive; }


/* =========================
   FRONT-END
========================= */

.bulletin-wrapper {
    max-width: 700px;
    margin: auto;
    padding: 20px;
}

.bulletin-card {
    background: #fff;
    border-radius: 16px;
    padding: 18px;
    margin-bottom: 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    transition: 0.3s ease;
    animation: fadeUp 0.5s ease;
}

.bulletin-card:hover {/* STATUS */
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.12);
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.bulletin-header {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: #555;
}

.bulletin-title {
    font-size: 20px;
    margin-top: 10px;
    font-weight: bold;
}

.bulletin-status {
    margin-top: 10px;
    font-size: 30px;
    padding: 6px 10px;
    border-radius: 20px;
    display: inline-block;
    background: #eef2ff;
    color: #4338ca;
    text-align: center;
}

.bulletin-actions {
    margin-top: 15px;
}

.bulletin-actions button {
    border-radius: 25px;
    padding: 6px 15px;
}

#responseModal .modal-content {
    border-radius: 16px;
}

#responseModal p {
    font-size: 15px;
    color: #444;
}


/*--CARD--*/
    :root{
        --blue:#0A2E73;
        --navy:#061C45;
        --gold:#D4AF37;
        --gray:#6B7280;
        --light:#F8F9FB;
    }
    
    /* SECTION */
    .hsoc-grid{
        display:grid;
        grid-template-columns:repeat(3,1fr);
        gap:35px;
    }
    
    /* CARD */
    .hsoc-card{
        background:#fff;
        border-radius:24px;
        overflow:hidden;
        box-shadow:
        0 12px 35px rgba(0,0,0,.08);
        transition:.35s ease;
        border:1px solid rgba(212,175,55,.35);
    }
    
    .hsoc-card:hover{
        transform:translateY(-8px);
        box-shadow:
        0 25px 60px rgba(0,0,0,.16);
    }
    
    /* IMAGE */
    .hsoc-image-wrap{
        position:relative;
        height:250px;
        overflow:hidden;
    }
    
    .hsoc-image-wrap img{
        width:100%;
        height:100%;
        object-fit:cover;
        transition:.5s ease;
    }
    
    .hsoc-card:hover img{
        transform:scale(1.05);
    }
    
    /* STATUS */
    .hsoc-status{
        position:absolute;
        top:18px;
        right:18px;
        z-index:2;
        padding:8px 18px;
        border-radius:40px;
        font-size:11px;
        font-weight:700;
        letter-spacing:1px;
    }
    
    .occupied{
        background:var(--blue);
        color:#fff;
    }
    
    .sale{
        background:var(--gold);
        color:#000;
    }
    
    .lease{
        background:#fff;
        color:var(--blue);
    }
    
    /* CONTENT */
    .hsoc-content{
        padding:30px;
        position:relative;
    }
    
    /* UNIT BOX */
    .hsoc-unit-box{
        width:60px;
        height:60px;
        background:var(--blue);
        color:#fff;
        display:flex;
        align-items:center;
        justify-content:center;
        font-size:30px;
        font-weight:700;
        border-radius:14px;
        margin-top:-60px;
        position:relative;
        z-index:3;
        border:4px solid #fff;
        box-shadow:0 10px 20px rgba(0,0,0,.1);
    }
    
    /* LABEL */
    .hsoc-unit-label{
        color:var(--gold);
        font-size:12px;
        letter-spacing:2px;
        margin-top:20px;
        font-weight:700;
    }
    
    /* TITLE */
    .hsoc-unit-title{
        font-size:34px;
        color:var(--blue);
        margin:5px 0 30px;
        font-weight:700;
    }
    
    /* INFO */
    .hsoc-info{
        display:flex;
        flex-direction:column;
        gap:18px;
    }
    
    .hsoc-row{
        border-bottom:1px solid #EEF1F4;
        padding-bottom:14px;
    }
    
    .hsoc-row span{
        display:block;
        font-size:12px;
        color:#8B93A1;
        margin-bottom:5px;
        text-transform:uppercase;
        letter-spacing:1px;
    }
    
    .hsoc-row strong{
        font-size:16px;
        color:#111827;
        line-height:1.5;
    }
    
    /* BUTTON */
    .hsoc-btn{
        margin-top:30px;
        height:58px;
        background:
        linear-gradient(135deg,
        var(--blue),
        var(--navy));
        color:#fff !important;
        border-radius:14px;
        display:flex;
        align-items:center;
        justify-content:center;
        text-decoration:none;
        font-weight:700;
        letter-spacing:1px;
        transition:.3s ease;
    }
    
    .hsoc-btn:hover{
        transform:translateY(-2px);
        box-shadow:
        0 12px 30px rgba(10,46,115,.25);
    }
    
    /* AVAILABLE */
    .hsoc-available{
        color:#6B7280;
        line-height:1.8;
        margin-bottom:25px;
    }
    
    /* FILTER */
    .hsoc-filter-bar{
        display:flex;
        gap:20px;
        margin-bottom:40px;
    }
    
    .hsoc-filter-bar input,
    .hsoc-filter-bar select{
        height:58px;
        border-radius:14px;
        border:1px solid #D7DCE3;
        background:#fff;
        padding:0 20px;
        font-size:15px;
    }
    
    /* MOBILE */
    @media(max-width:1024px){
    
        .hsoc-grid{
            grid-template-columns:repeat(2,1fr);
        }
    
    }
    
    @media(max-width:768px){
    
        .hsoc-grid{
            grid-template-columns:1fr;
        }
    
        .hsoc-filter-bar{
            flex-direction:column;
        }
    
    }