:root{

    --primary:#0056b3;
    --primary2:#3b82f6;
    --accent:#00c6ff;

    --dark:#1e293b;
    --text:#334155;
    --muted:#64748b;

    --white:#fff;

    --bg:#f8fafc;

    --radius:24px;

}

/*=========================================
BODY
=========================================*/

body{

    font-family:'Sarabun',sans-serif;

    background:
    radial-gradient(circle at top left,#dbeafe 0%,transparent 30%),

    radial-gradient(circle at top right,#cffafe 0%,transparent 25%),

    linear-gradient(
    135deg,
    #f8fafc,
    #ffffff);

    color:var(--text);

    overflow-x:hidden;

}

/*=========================================
CONTAINER
=========================================*/

.container{

    position:relative;

}

/*=========================================
NEWS CONTAINER
=========================================*/

.news-container{

    position:relative;

    max-width:950px;

    margin:auto;

    padding:55px;

    border-radius:32px;

    background:
    rgba(255,255,255,.75);

    backdrop-filter:blur(25px);

    border:

    1px solid rgba(255,255,255,.5);

    overflow:hidden;

    box-shadow:

    0 30px 80px rgba(0,0,0,.08),

    0 10px 30px rgba(0,86,179,.08);

}

/* Aurora */

.news-container::before{

    content:"";

    position:absolute;

    width:350px;
    height:350px;

    border-radius:50%;

    top:-150px;
    left:-100px;

    background:

    linear-gradient(
    135deg,
    #60a5fa55,
    #22d3ee55);

    filter:blur(80px);

    animation:aurora1 10s infinite alternate;

}

.news-container::after{

    content:"";

    position:absolute;

    width:280px;
    height:280px;

    right:-100px;
    bottom:-100px;

    border-radius:50%;

    background:

    linear-gradient(
    135deg,
    #3b82f655,
    #8b5cf655);

    filter:blur(80px);

    animation:aurora2 12s infinite alternate;

}

@keyframes aurora1{

    from{

        transform:translate(0,0);

    }

    to{

        transform:translate(60px,40px);

    }

}

@keyframes aurora2{

    from{

        transform:translate(0,0);

    }

    to{

        transform:translate(-50px,-30px);

    }

}

.news-container>*{

    position:relative;

    z-index:2;

}

/*=========================================
CATEGORY
=========================================*/

.badge.bg-primary-soft{

    background:

    linear-gradient(
    135deg,
    #0056b320,
    #00c6ff20)!important;

    color:var(--primary)!important;

    border:

    1px solid rgba(0,86,179,.15);

    padding:10px 20px!important;

    font-size:.9rem;

    font-weight:700;

    transition:.4s;

}

.badge.bg-primary-soft:hover{

    transform:translateY(-3px);

    box-shadow:

    0 10px 20px rgba(0,86,179,.15);

}

/*=========================================
TITLE
=========================================*/

.news-title{

    position:relative;

    font-size:3rem;

    font-weight:800;

    color:var(--dark);

    line-height:1.3;

    margin-bottom:25px;

}

.news-title::after{

    content:"";

    display:block;

    width:100px;

    height:5px;

    margin-top:18px;

    border-radius:50px;

    background:

    linear-gradient(
    90deg,
    #0056b3,
    #00c6ff);

}

/*=========================================
META
=========================================*/

.news-meta{

    position:relative;

    padding:25px;

    margin-bottom:40px;

    border:none;

    border-radius:22px;

    background:

    rgba(248,250,252,.9);

    backdrop-filter:blur(15px);

    box-shadow:

    inset 0 1px 0 rgba(255,255,255,.6),

    0 8px 20px rgba(0,0,0,.04);

}

.news-meta span{

    display:flex;

    align-items:center;

    gap:8px;

    font-weight:600;

}

.news-meta i{

    font-size:1.1rem;

}

/*=============================
ULTRA PREMIUM SHARE
=============================*/

.share-wrapper{

    position:relative;

    margin-top:15px;

}

.share-title{

    font-size:.95rem;

    font-weight:700;

    color:#64748b;

    margin-bottom:12px;

}

.share-buttons{

    display:flex;

    gap:15px;

    flex-wrap:wrap;

}

.btn-share{

    position:relative;

    width:64px;

    height:64px;

    border:none;

    border-radius:22px;

    overflow:hidden;

    background:

    rgba(255,255,255,.85);

    backdrop-filter:blur(20px);

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    transition:.45s;

    box-shadow:

    0 15px 35px rgba(0,0,0,.08);

}

/* Animated Border */

.btn-share::before{

    content:"";

    position:absolute;

    inset:-2px;

    background:

    linear-gradient(

    135deg,

    #0056b3,

    #00c6ff,

    #7c3aed,

    #0056b3

    );

    background-size:300%;

    opacity:0;

    transition:.4s;

    animation:shareMove 6s linear infinite;

}

.btn-share::after{

    content:"";

    position:absolute;

    inset:2px;

    border-radius:20px;

    background:#fff;

}

.btn-share i{

    position:relative;

    z-index:2;

    font-size:1.5rem;

    transition:.35s;

}

/* Hover */

.btn-share:hover{

    transform:

    translateY(-8px)

    scale(1.08);

}

.btn-share:hover::before{

    opacity:1;

}

.btn-share:hover i{

    transform:

    scale(1.25)

    rotate(-10deg);

}

/* Shine */

.btn-share span{

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

    background:

    linear-gradient(

    90deg,

    transparent,

    rgba(255,255,255,.5),

    transparent

    );

    transition:.8s;

    z-index:3;

}

.btn-share:hover span{

    left:150%;

}

/* Colors */

.facebook i{

    color:#1877f2;

}

.line i{

    color:#06c755;

}

.copy i{

    color:#0056b3;

}

/* Tooltip */

.btn-share small{

    position:absolute;

    bottom:-35px;

    left:50%;

    transform:translateX(-50%);

    background:#1e293b;

    color:#fff;

    padding:5px 10px;

    border-radius:20px;

    font-size:.75rem;

    opacity:0;

    transition:.3s;

    white-space:nowrap;

}

.btn-share:hover small{

    opacity:1;

}

/* Animation */

@keyframes shareMove{

    from{

        background-position:0;

    }

    to{

        background-position:300%;

    }

}

@media(max-width:768px){

    .share-buttons{

        justify-content:center;

    }

}
/*=========================================
CONTENT
=========================================*/

.content-body{

    position:relative;

    font-size:1.18rem;

    line-height:2.1;

    color:#374151;

    margin-bottom:50px;

}

.content-body p{

    margin-bottom:22px;

}

.content-body img{

    max-width:100%;

    border-radius:18px;

    margin:20px 0;

    transition:.4s;

}

.content-body img:hover{

    transform:scale(1.02);

    box-shadow:

    0 20px 40px rgba(0,0,0,.15);

}

/*=========================================
LINK
=========================================*/

.content-body a{

    color:var(--primary);

    text-decoration:none;

    font-weight:700;

    position:relative;

}

.content-body a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-2px;

    width:0;

    height:2px;

    background:#00c6ff;

    transition:.3s;

}

.content-body a:hover::after{

    width:100%;

}

/*=========================================
RESPONSIVE
=========================================*/

@media(max-width:991px){

    .news-container{

        padding:35px;

    }

    .news-title{

        font-size:2.3rem;

    }

}

@media(max-width:768px){

    .news-container{

        padding:25px;

        border-radius:20px;

    }

    .news-title{

        font-size:1.9rem;

    }

    .news-meta{

        padding:18px;

    }

    .content-body{

        font-size:1.05rem;

        line-height:1.9;

    }

}

 /*==================================
PREMIUM ATTACHMENT CENTER
==================================*/

.attachment-section{

    position:relative;

}

.attachment-section h4{

    font-weight:800;

    color:#1e293b;

    margin-bottom:30px;

}

/*=========================
CARD
=========================*/

.attachment-card{

    position:relative;

    overflow:hidden;

    border:none;

    border-radius:24px;

    background:

    rgba(255,255,255,.9);

    backdrop-filter:blur(20px);

    padding:20px;

    transition:.45s;

    box-shadow:

    0 10px 30px rgba(0,0,0,.05),

    inset 0 1px 0 rgba(255,255,255,.7);

}

/* Gradient Border */

.attachment-card::before{

    content:"";

    position:absolute;

    inset:-2px;

    background:

    linear-gradient(
    135deg,
    #3b82f6,
    #06b6d4,
    #8b5cf6,
    #3b82f6);

    background-size:300% 300%;

    animation:fileBorder 7s linear infinite;

    opacity:0;

    transition:.4s;

}

.attachment-card::after{

    content:"";

    position:absolute;

    inset:2px;

    background:#fff;

    border-radius:22px;

}

.attachment-card>*{

    position:relative;

    z-index:2;

}

.attachment-card:hover{

    transform:

    translateY(-8px);

}

.attachment-card:hover::before{

    opacity:1;

}

@keyframes fileBorder{

    0%{

        background-position:0 50%;

    }

    100%{

        background-position:300% 50%;

    }

}

/*=========================
ICON
=========================*/

.file-icon-box{

    width:75px;

    height:75px;

    border-radius:20px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:

    linear-gradient(
    135deg,
    #eff6ff,
    #dbeafe);

    transition:.4s;

}

.file-icon-box i{

    font-size:2rem;

}

.attachment-card:hover .file-icon-box{

    transform:

    rotate(-8deg)

    scale(1.1);

}

/*=========================
FILE NAME
=========================*/

.attachment-card h6{

    font-weight:800;

    color:#1e293b;

}

.attachment-card small{

    color:#64748b;

    letter-spacing:1px;

}

/*=========================
BUTTON
=========================*/

.actions{

    display:flex;

    gap:10px;

}

.actions .btn{

    border:none;

    border-radius:50px;

    padding:10px 18px;

    font-weight:700;

    transition:.35s;

}

.actions .btn-light{

    background:#f8fafc;

    color:#334155;

}

.actions .btn-light:hover{

    transform:translateY(-3px);

    background:#fff;

    box-shadow:

    0 10px 20px rgba(0,0,0,.08);

}

.actions .btn-primary{

    background:

    linear-gradient(
    135deg,
    #0056b3,
    #00c6ff);

}

.actions .btn-primary:hover{

    transform:translateY(-3px);

    box-shadow:

    0 15px 30px rgba(0,86,179,.3);

}

/*=========================
PDF PREVIEW
=========================*/

.attachment-preview{

    margin-top:20px;

    border-radius:24px;

    overflow:hidden;

    background:#fff;

    box-shadow:

    0 20px 40px rgba(0,0,0,.06);

    transition:.4s;

}

.attachment-preview:hover{

    transform:translateY(-5px);

}

/*=========================
EXCEL VIEWER
=========================*/

.excel-viewer-wrapper{

    margin-top:20px;

    overflow:hidden;

    border:none;

    border-radius:24px;

    background:#fff;

    box-shadow:

    0 20px 40px rgba(0,0,0,.06);

}

/*=========================
TOOLBAR
=========================*/

.excel-toolbar{

    padding:18px;

    background:

    linear-gradient(
    135deg,
    #f8fafc,
    #ffffff);

    border-bottom:

    1px solid #e2e8f0;

}

.excel-toolbar select{

    border:none;

    border-radius:50px;

    padding:10px 20px;

    box-shadow:

    inset 0 1px 3px rgba(0,0,0,.05);

}

.excel-toolbar .btn{

    border:none;

    width:42px;

    height:42px;

    border-radius:50%;

    background:#fff;

    transition:.3s;

    box-shadow:

    0 5px 15px rgba(0,0,0,.05);

}

.excel-toolbar .btn:hover{

    transform:translateY(-3px);

    background:#0056b3;

    color:#fff;

}

/*=========================
TABLE
=========================*/

.excel-table-container{

    background:#fff;

}

.excel-table-container table{

    width:100%;

    border-collapse:collapse;

    font-size:14px;

}

.excel-table-container th{

    background:

    linear-gradient(
    135deg,
    #0056b3,
    #3b82f6)!important;

    color:#fff!important;

    padding:12px;

    position:sticky;

    top:0;

}

.excel-table-container td{

    padding:10px;

    border:1px solid #edf2f7;

}

.excel-table-container tr:nth-child(even){

    background:#f8fafc;

}

.excel-table-container tr:hover{

    background:#dbeafe55;

}

/*=========================
EMBED PDF
=========================*/

embed{

    border:none;

    border-radius:20px;

    background:#fff;

}

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

@media(max-width:768px){

    .attachment-card{

        padding:15px;

    }

    .file-icon-box{

        width:60px;

        height:60px;

    }

    .file-icon-box i{

        font-size:1.6rem;

    }

    .actions{

        margin-top:15px;

        width:100%;

    }

    .actions .btn{

        flex:1;

    }

}
 /*=================================================
PREMIUM RELATED NEWS SECTION 2026
=================================================*/

.related-news-section{

    position:relative;

    max-width:1200px;

    margin:auto;

    margin-top:80px;

    padding:70px 50px;

    overflow:hidden;

    border-radius:40px;

    background:

    linear-gradient(
    135deg,
    rgba(255,255,255,.92),
    rgba(248,250,252,.95)
    );

    backdrop-filter:blur(30px);

    border:

    1px solid rgba(255,255,255,.5);

    box-shadow:

    0 30px 80px rgba(0,0,0,.06),

    0 15px 40px rgba(0,86,179,.08);

}

/*=========================================
Aurora Background
=========================================*/

.related-news-section::before{

    content:"";

    position:absolute;

    width:350px;

    height:350px;

    border-radius:50%;

    top:-180px;

    left:-100px;

    background:

    linear-gradient(
    135deg,
    #60a5fa55,
    #22d3ee55
    );

    filter:blur(90px);

    animation:relatedAurora1 10s infinite alternate;

}

.related-news-section::after{

    content:"";

    position:absolute;

    width:300px;

    height:300px;

    border-radius:50%;

    right:-100px;

    bottom:-150px;

    background:

    linear-gradient(
    135deg,
    #3b82f655,
    #8b5cf655
    );

    filter:blur(90px);

    animation:relatedAurora2 12s infinite alternate;

}

@keyframes relatedAurora1{

    from{

        transform:translate(0,0);

    }

    to{

        transform:translate(70px,50px);

    }

}

@keyframes relatedAurora2{

    from{

        transform:translate(0,0);

    }

    to{

        transform:translate(-60px,-40px);

    }

}

/*=========================================
Content Layer
=========================================*/

.related-header,
.related-news-section .row{

    position:relative;

    z-index:2;

}

/*=========================================
Header
=========================================*/

.related-header{

    margin-bottom:45px;

}

/*=========================================
Subtitle Badge
=========================================*/

.related-subtitle{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:10px 22px;

    border-radius:50px;

    background:

    linear-gradient(
    135deg,
    #0056b3,
    #00c6ff
    );

    color:#fff;

    font-size:.9rem;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

    margin-bottom:18px;

    box-shadow:

    0 15px 30px rgba(0,86,179,.25);

    transition:.35s;

}

.related-subtitle:hover{

    transform:

    translateY(-3px);

}

/*=========================================
Title
=========================================*/

.related-news-title{

    position:relative;

    display:inline-block;

    margin:0;

    margin-bottom:20px;

    font-size:2.6rem;

    font-weight:800;

    color:#1e293b;

    line-height:1.3;

}

.related-news-title::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-12px;

    width:120px;

    height:6px;

    border-radius:50px;

    background:

    linear-gradient(
    90deg,
    #0056b3,
    #00c6ff
    );

}

/*=========================================
Description
=========================================*/

.related-header p{

    margin:0;

    margin-top:20px;

    max-width:650px;

    color:#64748b;

    font-size:1.08rem;

    line-height:1.9;

}

/*=========================================
Light Decoration
=========================================*/

.related-header::before{

    content:"";

    position:absolute;

    right:0;

    top:0;

    width:140px;

    height:140px;

    border-radius:50%;

    background:

    radial-gradient(
    circle,
    rgba(0,198,255,.12),
    transparent
    );

}

/*=========================================
Mobile
=========================================*/

@media(max-width:991px){

    .related-news-section{

        padding:45px 30px;

    }

    .related-news-title{

        font-size:2rem;

    }

}

@media(max-width:768px){

    .related-news-section{

        padding:30px 20px;

        border-radius:25px;

    }

    .related-news-title{

        font-size:1.7rem;

    }

    .related-header p{

        font-size:1rem;

    }

}
/*=================================================
RELATED CARD PREMIUM 2026
=================================================*/

.related-card{

    position:relative;

    height:100%;

    border-radius:30px;

    overflow:hidden;

    cursor:pointer;

    transition:.55s cubic-bezier(.22,1,.36,1);

    background:#fff;

    transform-style:preserve-3d;

    box-shadow:

    0 15px 40px rgba(0,0,0,.08),

    0 5px 15px rgba(0,86,179,.05);

}

/*==========================
Animated Border
==========================*/

.related-card::before{

    content:"";

    position:absolute;

    inset:-2px;

    border-radius:32px;

    background:

    linear-gradient(
    135deg,
    #0056b3,
    #00c6ff,
    #6f42c1,
    #0056b3);

    background-size:300% 300%;

    animation:cardGradient 7s linear infinite;

    opacity:0;

    transition:.4s;

}

.related-card::after{

    content:"";

    position:absolute;

    inset:2px;

    border-radius:28px;

    background:#fff;

    z-index:1;

}

.related-card>*{

    position:relative;

    z-index:2;

}

@keyframes cardGradient{

    from{

        background-position:0 50%;

    }

    to{

        background-position:300% 50%;

    }

}

/*==========================
Hover
==========================*/

.related-card:hover{

    transform:

    translateY(-14px)

    rotateX(3deg)

    rotateY(-3deg);

    box-shadow:

    0 35px 70px rgba(0,86,179,.18),

    0 20px 45px rgba(0,0,0,.12);

}

.related-card:hover::before{

    opacity:1;

}

/*==========================
Floating
==========================*/

.related-card{

    animation:cardFloat 6s ease-in-out infinite;

}

.row>.col-lg-4:nth-child(2) .related-card{

    animation-delay:1s;

}

.row>.col-lg-4:nth-child(3) .related-card{

    animation-delay:2s;

}

@keyframes cardFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-5px);

    }

}

/*=================================================
THUMB
=================================================*/

.related-thumb{

    position:relative;

    overflow:hidden;

    height:260px;

    border-radius:28px;

}

/*==========================
Image
==========================*/

.related-thumb img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:

    transform .8s,

    filter .6s;

}

.related-card:hover img{

    transform:

    scale(1.15)

    rotate(2deg);

    filter:

    brightness(1.05)

    contrast(1.05);

}

/*==========================
Shine
==========================*/

.related-thumb::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

    background:

    linear-gradient(

    90deg,

    transparent,

    rgba(255,255,255,.35),

    transparent

    );

    z-index:5;

    transition:.9s;

}

.related-card:hover .related-thumb::before{

    left:150%;

}

/*==========================
Overlay
==========================*/

.related-thumb::after{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

    180deg,

    transparent,

    rgba(0,0,0,.2),

    rgba(0,0,0,.92)

    );

    transition:.45s;

}

.related-card:hover .related-thumb::after{

    background:

    linear-gradient(

    180deg,

    rgba(0,123,255,.08),

    rgba(0,0,0,.45),

    rgba(0,0,0,.96)

    );

}

/*==========================
Glow
==========================*/

.related-thumb span{

    position:absolute;

}

.related-card:hover{

    filter:

    drop-shadow(

    0 20px 30px

    rgba(0,123,255,.12)

    );

}

/*=================================================
IMAGE LINK
=================================================*/

.related-thumb a{

    display:block;

    width:100%;

    height:100%;

}

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

@media(max-width:992px){

    .related-thumb{

        height:230px;

    }

}

@media(max-width:768px){

    .related-thumb{

        height:210px;

    }

    .related-card:hover{

        transform:

        translateY(-8px);

    }

}
/*=================================================
RELATED CONTENT PREMIUM
=================================================*/

.related-content{

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    padding:28px;

    z-index:20;

    color:#fff;

    transition:.45s;

}

.related-card:hover .related-content{

    transform:translateY(-8px);

}

/*=========================================
CATEGORY
=========================================*/

.related-category{

    position:absolute;

    top:18px;

    left:18px;

    z-index:30;

    padding:9px 18px;

    border-radius:50px;

    background:

    linear-gradient(
    135deg,
    #0056b3,
    #00c6ff
    );

    color:#fff;

    font-size:.78rem;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

    box-shadow:

    0 15px 30px rgba(0,86,179,.35);

    backdrop-filter:blur(10px);

    transition:.35s;

}

.related-card:hover .related-category{

    transform:

    translateY(-3px)

    scale(1.05);

}

/*=========================================
DATE
=========================================*/

.related-date{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:8px 15px;

    margin-bottom:16px;

    border-radius:50px;

    background:

    rgba(255,255,255,.16);

    backdrop-filter:blur(15px);

    font-size:.9rem;

    font-weight:600;

    color:#fff;

    transition:.35s;

}

.related-card:hover .related-date{

    background:

    rgba(255,255,255,.24);

}

/*=========================================
TITLE
=========================================*/

.related-title{

    margin:0;

    line-height:1.6;

    font-size:1.15rem;

    font-weight:800;

    transition:.35s;

}

.related-title a{

    color:#fff;

    text-decoration:none;

}

.related-card:hover .related-title{

    transform:translateY(-4px);

}

/*=========================================
LINK EFFECT
=========================================*/

.related-title a{

    background-image:

    linear-gradient(
    #fff,
    #fff);

    background-repeat:no-repeat;

    background-size:0 2px;

    background-position:0 100%;

    transition:.4s;

}

.related-card:hover .related-title a{

    background-size:100% 2px;

}

/*=========================================
ARROW
=========================================*/

.related-arrow{

    position:absolute;

    right:20px;

    bottom:20px;

    width:52px;

    height:52px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:

    rgba(255,255,255,.16);

    backdrop-filter:blur(20px);

    color:#fff;

    z-index:30;

    opacity:0;

    transform:

    translateY(12px)

    rotate(0deg);

    transition:.45s;

}

.related-card:hover .related-arrow{

    opacity:1;

    transform:

    translateY(0)

    rotate(45deg);

    background:#fff;

    color:#0056b3;

    box-shadow:

    0 15px 30px rgba(255,255,255,.25);

}

/*=========================================
READ MORE GLOW
=========================================*/

.related-arrow::before{

    content:"";

    position:absolute;

    inset:-5px;

    border-radius:50%;

    border:

    2px solid rgba(255,255,255,.25);

    opacity:0;

    transition:.4s;

}

.related-card:hover .related-arrow::before{

    opacity:1;

    transform:scale(1.2);

}

/*=========================================
LINE CLAMP
=========================================*/

.line-clamp-2{

    display:-webkit-box;

    -webkit-line-clamp:2;

    -webkit-box-orient:vertical;

    overflow:hidden;

}

/*=========================================
SMALL EFFECT
=========================================*/

.related-card:hover{

    z-index:5;

}

/*=========================================
GRID
=========================================*/

.related-news-section .row{

    row-gap:30px;

}

/*=========================================
RESPONSIVE
=========================================*/

@media(max-width:768px){

    .related-content{

        padding:22px;

    }

    .related-title{

        font-size:1rem;

    }

    .related-category{

        font-size:.72rem;

        padding:7px 14px;

    }

    .related-arrow{

        width:46px;

        height:46px;

    }

}
   

    /* Excel Table Customization */
    .excel-table-container table { font-size: 14px; }
    .excel-table-container th { background: #0056b3 !important; color: white !important; font-weight: normal; }
    /*==================================
ATTACHMENT MOBILE FIX
==================================*/

@media (max-width:768px){

    .attachment-card{

        display:block !important;

        padding:18px;

    }

    .attachment-card>.d-flex{

        flex-direction:column;

        align-items:flex-start !important;

    }

    .attachment-card .actions{

        width:100%;

        margin-top:15px;

        display:flex;

        gap:10px;

    }

    .attachment-card .actions .btn{

        flex:1;

        text-align:center;

        padding:12px;

    }

    .file-icon-box{

        margin-right:15px;

    }

}
.attachment-top{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

}

@media(max-width:768px){

    .attachment-top{

        flex-direction:column;

        align-items:flex-start;

    }

    .actions{

        width:100%;

    }

}