/* danh muc */

.danhmuc{
    max-width: var(--container);
    margin: var(--margin-auto);
    display: var(--display-flex);
    margin-top: 15px;
    gap: 20px;
}

.danhmuc__left{
    width: 25%;
}

.danhmuc__left-span{
    font-size: var(--font-size-22);
    font-weight: var(--font-weight-700);
    color: var(--color-01969A);
    text-transform: var(--text-tranform-uppercase);
    line-height: 30px;
    border-bottom: 3px solid var(--color-01969A);
}

.danhmuc__left-ul {
    list-style: none;
    margin-top: 10px;
}

.danhmuc__left-li{
    width: 100%;
    padding: 8px 0px;
    border-bottom: 1px solid var(--color-01969A);
}

.danhmuc__left-li:hover {
    transition: .5s;
    background-color: var(--background-color-23dee448) ;
}

.danhmuc__left-li-active{
    background-color: var(--background-color-23dee448) ;
}
.danhmuc__left-li > a{
    display: var(--display-block);
    width: var(--width-100);
    font-size: var(--font-size-16);
    color: var(--background-color-01969A);
    font-weight: var(--font-weight-700);
    text-transform: var(--text-tranform-capitalize);
    text-decoration: none;

}

.danhmuc__left-form{
    width: auto;
    padding: 10px;
    margin-top: 20px;
    border-radius: 8px;
    min-height: 200px;
    background-image: linear-gradient(to right, var(--background-color-067579), var(--background-color-00D8D8));
}

.danhmuc__left-title{
    font-weight: var(--font-weight-700);
    font-size: var(--font-size-18);
    text-align: var(--text-center);
    line-height: 32px;
    color: var(--color-white);
    text-transform: var(--text-tranform-uppercase);
}

.danhmuc__left-input{
    width: auto;
    margin-top: 10px;
}

.danhmuc__left-input> input {
    width: 90%;
    height: 30px;
    border-radius: 8px;
    font-size: 14px;
    padding: 5px 10px;
    font-weight: var(--font-weight-600);
    color: var(--color-999);
    border: 2px solid var(--color-01969A);
    font-style: italic;
}

.danhmuc__left-button{
    margin-top: 10px;
    width: 60%;
    border-radius: 8px;
    background-color: var(--background-color-white);
    color: var(--color-01969A);
    font-size: var(--font-size-18);
    font-weight: var(--font-weight-700);
    text-align: var(--text-center);
    text-transform: var(--text-tranform-uppercase);
    padding: 6px 10px;
    cursor: var(--cursor-pointer);
    border: none;
}

.danhmuc__left-button:hover{
    background-color: rgb(235, 32, 32);
    color: var(--color-white);
    transition: .5s;
}

.danhmuc__left-banner{
    margin-top: 10px;
}

.danhmuc__left-banner-img{
    border-radius: 10px;
    border: 1px solid var(--color-01969A);
}


.danhmuc__right{
    width: 75%;
}

.danhmuc__right-title{
    margin-top: 20px;
    color: var(--color-white);
    font-size: var(--font-size-22);
    font-weight: var(--font-weight-700);
    text-transform: var(--text-tranform-capitalize);
    background-color: var(--background-color-01969A);
    padding: 10px 15px;
}

.danhmuc__right-content{
    margin-top: 15px;
}

.danhmuc__right>hr {
    margin-top: 1rem;
    margin-bottom: 1rem;
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, .1)
}

/* chi tiết bĂ i viết */
.chinh-sua {
    background-color: #e1b564;
    color: var(--color-white);
    font-size: var(--font-size-18);
    font-weight: var(--font-weight-600);
    padding: 2px 10px;
    border-radius: 7px;
    margin-top: 15px;
    text-decoration: var(--text-decoration-none);
}
.chinh-sua:hover {
    background-color: #d79f39;
    transition: 1s;
}

.blurred {
    filter: blur(5px);
    transition: filter 0.5s;
}
.view {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #666;
    color: #fff;
    border: none;
    cursor: pointer;
    width: 600px;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.view_button {
    position: absolute;
    top: 63%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 10px 20px;
    background-color: #fff;
    color: #999;
    border: none;
    cursor: pointer;
    z-index: 1000;
    border-radius: 10px;
    border: none;
}
.hidden {
    display: none;
}
.image-container {
    position: relative;
    display: inline-block;
}
.hiden_img {
    position: relative;
}

.glow-on-hover {
    display: inline-block;
    width: 480px;
    height: 169px;
    border: none;
    outline: none;
    color: #fff;
    background: #111;
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 10px;
    margin: 10px;
}
.glow-on-hover:before {
    content: "";
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    position: absolute;
    top: -2px;
    left: -2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
    border-radius: 10px;
}
.glow-on-hover:active {
    color: #000;
}
.glow-on-hover:active:after {
    background: #fff0;
}
.glow-on-hover:hover:before {
    opacity: 1;
}
.glow-on-hover:after {
    z-index: -1;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: #111;
    left: 0;
    top: 0;
    border-radius: 10px;
}
@keyframes glowing {
    0% {
        background-position: 0 0;
    }
    50% {
        background-position: 400% 0;
    }
    100% {
        background-position: 0 0;
    }
}