:root{
--primary-color:#e65894;

--secondary-color:#df208c;

--text-color:#333;
--light-text-color:#f0f0f0;
--bg-color:#f4f4f4;
--dark-bg-color:#1a1a1a;
--card-bg-color:#fff;
--border-color:#ddd;
--gray-text-color:#555;
--light-gray-bg:#e0e0e0
}

*{
margin:0;
padding:0;
box-sizing:border-box
}

body{
font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
line-height:1.6;
color:var(--text-color);
background:var(--bg-color);
display:flex;
flex-direction:column;
min-height:100vh
}

.container{
max-width:1300px;

margin:0 auto;
padding:0 20px;

width:100%
}

a{
text-decoration:none;
color:var(--primary-color);
transition:color .3s ease
}

a:hover{
color:#e65894;

text-decoration:underline
}

img{
max-width:100%;
height:auto;
display:block
}


.main-header{
background:var(--dark-bg-color);
color:var(--light-text-color);
padding:1rem 0;
box-shadow:0 2px 8px rgba(0,0,0,0.3)
}

.main-header .container{
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
gap:15px

}

.main-header .logo a{
color:var(--primary-color);
font-size:2rem;

font-weight:700;
text-decoration:none;
letter-spacing:-1px

}

.main-nav ul{
list-style:none;
display:flex;
flex-wrap:wrap

}

.main-nav ul li{
margin-left:25px
}

.main-nav ul li a{
color:var(--light-text-color);
font-weight:500;

padding:8px 0;
transition:color .3s ease,text-decoration .3s ease
}

.main-nav ul li a:hover{
color:var(--primary-color);
text-decoration:none
}

.search-bar{
display:flex;
align-items:center
}

.search-bar input[type="text"]{
padding:10px 15px;
border:1px solid #555;
border-radius:25px;

font-size:1rem;
background:#333;
color:var(--light-text-color);
outline:none;
width:220px;
transition:width .3s ease,border-color .3s ease
}

.search-bar input[type="text"]::placeholder{
color:#aaa
}

.search-bar input[type="text"]:focus{
width:240px;
border-color:var(--primary-color)
}

.search-bar button{
background:var(--primary-color);
color:var(--light-text-color);
border:none;
padding:10px 20px;
margin-left:10px;
border-radius:25px;
cursor:pointer;
font-size:1rem;
font-weight:700;
transition:background .3s ease
}

.search-bar button:hover{
background:#c15f08
}

.mobile-menu-toggle{
display:none;
background:none;
border:none;
cursor:pointer;
padding:10px;
z-index:1000;
position:relative

}

.mobile-menu-toggle span{
display:block;
width:25px;
height:3px;
background:var(--light-text-color);
margin:5px 0;
transition:.4s
}


.mobile-menu-toggle.active span:nth-child(1){
transform:rotate(-45deg) translate(-5px,6px)
}

.mobile-menu-toggle.active span:nth-child(2){
opacity:0
}

.mobile-menu-toggle.active span:nth-child(3){
transform:rotate(45deg) translate(-5px,-6px)
}


.main-content{
flex:1;
padding:3rem 0

}

.section-title{
font-size:2rem;

color:var(--text-color);
text-align:center;
margin-bottom:2rem;
position:relative;
padding-bottom:15px
}

.section-title::after{
content:'';
position:absolute;
bottom:0;
left:50%;
transform:translateX(-50%);
width:100px;

height:5px;

background:var(--primary-color);
border-radius:3px
}


.video-grid{
display:grid;

grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
gap:10px;

margin-top:2rem;
justify-content:center

}

.video-card{
background:var(--card-bg-color);
border-radius:10px;

overflow:hidden;
box-shadow:0 5px 20px rgba(0,0,0,0.15);

transition:transform .3s ease,box-shadow .3s ease;
display:flex;
flex-direction:column;
text-decoration:none;
color:var(--text-color)
}

.video-card:hover{
transform:translateY(-8px);

box-shadow:0 12px 25px rgba(0,0,0,0.2)

}

.video-thumbnail{
position:relative;
width:100%;

padding-bottom:56.25%;

background-color:#000;
overflow:hidden
}

.video-thumbnail img{
position:absolute;
top:0;
left:0;
width:100%;

height:100%;

object-fit:cover;
transition:transform .4s ease
}

.video-card:hover .video-thumbnail img{
transform:scale(1.1)

}

.video-views{
position:absolute;
bottom:8px;
right:8px;
background:rgba(0,0,0,0.75);

color:var(--light-text-color);
padding:5px 10px;
border-radius:5px;
font-size:.85rem;
font-weight:700
}

.video-title{
font-size:.8rem;

margin:10px 15px 3px;

color:var(--text-color);
display:-webkit-box;
-webkit-line-clamp:2;

-webkit-box-orient:vertical;
overflow:hidden;
text-overflow:ellipsis;
min-height:2.8em;

font-weight:600;
line-height:1.2

}


.main-footer{
background:var(--dark-bg-color);
color:var(--light-text-color);
text-align:center;
padding:2rem 0;

margin-top:3rem;

box-shadow:0 -2px 8px rgba(0,0,0,0.3)
}

.main-footer p{
margin-bottom:.7rem;
font-size:.95rem
}

.main-footer a{
color:var(--primary-color);
margin:0 8px;
transition:color .3s ease
}

.main-footer a:hover{
color:var(--secondary-color);
text-decoration:underline
}


.error-message{
background-color:#f8d7da;
color:#721c24;
border:1px solid #f5c6cb;
padding:20px;
border-radius:8px;
text-align:center;
margin:30px auto;
max-width:700px;
font-size:1.1rem;
line-height:1.8
}

.text-center{
text-align:center
}

.back-home-btn{
display:inline-block;
background:var(--primary-color);
color:#fff;
padding:12px 25px;
border-radius:25px;
margin-top:20px;
font-size:1.1rem;
font-weight:700;
transition:background .3s ease,transform .3s ease
}

.back-home-btn:hover{
background:#c10811;
transform:translateY(-2px);
text-decoration:none
}


.video-play-page{
display:flex;
flex-direction:column;

gap:40px;

padding-top:30px
}

.main-video-player{
width:100%;

background:#000;
border-radius:12px;

overflow:hidden;
box-shadow:0 8px 30px rgba(0,0,0,0.3)

}

.video-embed-container{
position:relative;
width:100%;
padding-bottom:56.25%;

height:0;
overflow:hidden;
background-color:#000
}

.video-embed-container iframe,.video-embed-container video{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
border:none;
background-color:#000
}

.video-details{
width:100%;

background:var(--card-bg-color);
padding:30px;

border-radius:12px;
box-shadow:0 5px 20px rgba(0,0,0,0.15)
}

.video-details-title{
font-size:1.8rem;

margin-top:0;
margin-bottom:20px;
color:var(--text-color);
line-height:1.3;
font-weight:700
}

.video-meta{
font-size:1rem;
color:#777;
margin-bottom:25px;
display:flex;
flex-wrap:wrap;
gap:20px;

align-items:center
}

.video-meta span i{
margin-right:8px;
color:var(--primary-color);
font-size:1.1rem
}

.video-meta .category a{
color:var(--primary-color);
font-weight:700
}

.video-meta .category .badge{
background:var(--primary-color);
color:#fff;
padding:4px 10px;
border-radius:5px;
font-size:.85rem;
font-weight:700;
vertical-align:middle
}

.video-description-full{
font-size:1rem;

line-height:1.8;
margin-bottom:30px;
color:#444
}

.video-keywords{
margin-bottom:30px
}

.video-keywords strong{
margin-right:12px;
color:var(--text-color);
font-size:1.05rem
}

.keyword-tag{
display:inline-block;
background:var(--light-gray-bg);

color:#555;
padding:8px 15px;
border-radius:25px;

font-size:.95rem;
margin:5px 8px 5px 0;
transition:background .3s ease,color .3s ease;
white-space:nowrap

}

.keyword-tag:hover{
background:var(--primary-color);
color:#fff;
text-decoration:none
}


.social-share{
margin-top:35px;
padding-top:25px;
border-top:1px solid var(--border-color)
}

.social-share h3{
font-size:1.1rem;
margin-bottom:20px;
color:var(--text-color);
font-weight:600
}

.share-btn{
display:inline-flex;
align-items:center;
padding:12px 20px;
margin-right:15px;

margin-bottom:15px;
border-radius:8px;

color:#fff;
font-weight:700;
font-size:1rem;
transition:opacity .3s ease,transform .3s ease
}

.share-btn i{
margin-right:10px;
font-size:1.2rem
}

.share-btn.facebook{
background:#3b5998
}

.share-btn.twitter{
background:#00acee
}

.share-btn.email{
background:#bb001b
}

.share-btn:hover{
opacity:.9;
transform:translateY(-2px);

text-decoration:none
}


.related-videos-section{
width:100%;
margin-top:50px

}

.related-videos-section .section-title{
margin-bottom:30px

}


.admin-page{
background:var(--bg-color);
padding:30px 0
}

.admin-panel{
background:var(--card-bg-color);
padding:30px;
border-radius:12px;
box-shadow:0 5px 20px rgba(0,0,0,0.1);
max-width:800px;
margin:0 auto
}

.admin-panel .panel-title{
font-size:1.8rem;
color:var(--primary-color);
margin-bottom:25px;
text-align:center;
border-bottom:2px solid var(--border-color);
padding-bottom:15px
}

.add-video-form .form-group,.add-category-form .form-group{

margin-bottom:20px
}

.add-video-form label,.add-category-form label{

display:block;
margin-bottom:8px;
font-weight:700;
color:var(--text-color);
font-size:1.05rem
}

.add-video-form label .required,.add-category-form label .required{

color:var(--primary-color);
font-size:1.1em;
margin-left:5px
}

.add-video-form input[type="text"],.add-video-form textarea,.add-video-form select,.add-category-form input[type="text"]{

width:100%;
padding:12px 15px;
border:1px solid var(--border-color);
border-radius:8px;
font-size:1rem;
color:var(--text-color);
background-color:#fcfcfc;
transition:border-color .3s ease,box-shadow .3s ease
}

.add-video-form input[type="text"]:focus,.add-video-form textarea:focus,.add-video-form select:focus,.add-category-form input[type="text"]:focus{

border-color:var(--primary-color);
box-shadow:0 0 0 3px rgba(var(--primary-color),0.2);
outline:none
}

.add-video-form textarea{
resize:vertical;

min-height:100px
}

.add-video-form .submit-btn,.add-category-form .submit-btn{

display:block;
width:100%;
padding:15px 25px;
background:var(--primary-color);
color:#fff;
border:none;
border-radius:8px;
font-size:1.2rem;
font-weight:700;
cursor:pointer;
transition:background .3s ease,transform .3s ease;
margin-top:30px
}

.add-video-form .submit-btn:hover,.add-category-form .submit-btn:hover{

background:#c10811;
transform:translateY(-2px)
}

.status-message{
padding:15px;
border-radius:8px;
margin-bottom:20px;
font-size:1rem;
text-align:center;
font-weight:700
}

.status-message.success{
background-color:#d4edda;
color:#155724;
border:1px solid #c3e6cb
}

.status-message.error{
background-color:#f8d7da;
color:#721c24;
border:1px solid #f5c6cb
}


.admin-table{
width:100%;
border-collapse:collapse;
margin-top:25px;
background:#fff;
border-radius:8px;
overflow:hidden;

box-shadow:0 2px 10px rgba(0,0,0,0.08)
}

.admin-table th,.admin-table td{
padding:15px;
text-align:left;
border-bottom:1px solid var(--border-color)
}

.admin-table th{
background-color:var(--primary-color);
color:#fff;
font-weight:700;
text-transform:uppercase;
font-size:.9rem
}

.admin-table tr:nth-child(even){
background-color:#f9f9f9
}

.admin-table tr:hover{
background-color:#f1f1f1
}

.admin-table .actions{
white-space:nowrap

}

.admin-table .actions .btn{
display:inline-block;
padding:8px 12px;
border-radius:5px;
font-size:.9rem;
text-align:center;
text-decoration:none;
margin-right:8px;
transition:background .3s ease,color .3s ease
}

.admin-table .actions .btn-edit{
background-color:#28a745;

color:#fff
}

.admin-table .actions .btn-edit:hover{
background-color:#218838;
text-decoration:none
}

.admin-table .actions .btn-delete{
background-color:#dc3545;

color:#fff
}

.admin-table .actions .btn-delete:hover{
background-color:#c82333;
text-decoration:none
}

.admin-action-link{
text-align:center;
margin-top:30px
}

.btn-primary-outline{
background:transparent;
border:2px solid var(--primary-color);
color:var(--primary-color);
padding:10px 20px;
border-radius:8px;
font-weight:700;
transition:all .3s ease;
display:inline-block

}

.btn-primary-outline:hover{
background:var(--primary-color);
color:#fff;
text-decoration:none
}

.btn-secondary-outline{
background:transparent;
border:2px solid var(--gray-text-color);
color:var(--gray-text-color);
padding:10px 20px;
border-radius:8px;
font-weight:700;
transition:all .3s ease;
display:inline-block

}

.btn-secondary-outline:hover{
background:var(--gray-text-color);
color:#fff;
text-decoration:none
}


.admin-login-page{
display:flex;
justify-content:center;
align-items:center;
min-height:calc(100vh - 200px);

padding:50px 20px;
background:linear-gradient(to right,#ece9e6,#fff)

}

.admin-login-page .admin-panel{
max-width:450px;
padding:40px;
background:var(--card-bg-color);
border-radius:12px;
box-shadow:0 10px 30px rgba(0,0,0,0.1);
text-align:center
}

.admin-login-page .panel-title{
font-size:2rem;
color:var(--primary-color);
margin-bottom:30px;
text-align:center;
position:relative;
padding-bottom:15px
}

.admin-login-page .panel-title::after{
content:'';
position:absolute;
bottom:0;
left:50%;
transform:translateX(-50%);
width:80px;
height:4px;
background:var(--primary-color);
border-radius:2px
}

.login-form .form-group{
margin-bottom:25px;
text-align:left
}

.login-form label{
display:block;
margin-bottom:10px;
font-weight:700;
color:var(--text-color);
font-size:1.1rem
}

.login-form input[type="text"],.login-form input[type="password"]{
width:100%;
padding:12px 18px;
border:1px solid var(--border-color);
border-radius:8px;
font-size:1.05rem;
color:var(--text-color);
background-color:#fcfcfc;
transition:border-color .3s ease,box-shadow .3s ease
}

.login-form input[type="text"]:focus,.login-form input[type="password"]:focus{
border-color:var(--primary-color);
box-shadow:0 0 0 4px rgba(var(--primary-color),0.2);
outline:none
}

.login-form .submit-btn{
display:block;
width:100%;
padding:15px 25px;
background:var(--primary-color);
color:#fff;
border:none;
border-radius:8px;
font-size:1.2rem;
font-weight:700;
cursor:pointer;
transition:background .3s ease,transform .3s ease;
margin-top:25px
}

.login-form .submit-btn:hover{
background:#c10811;
transform:translateY(-2px)
}


.static-page-content{
background:var(--card-bg-color);
padding:30px;
border-radius:12px;
box-shadow:0 5px 20px rgba(0,0,0,0.1);
max-width:900px;
margin:30px auto;
line-height:1.7;
font-size:1.05rem;
color:#444
}

.static-page-content h1.section-title{
margin-top:0;
margin-bottom:30px;
font-size:2.2rem;
color:var(--primary-color);
text-align:left
}


.static-page-content h1.section-title::after{
left:0;
transform:translateX(0)
}

.static-page-content h2{
font-size:1.6rem;
margin-top:30px;
margin-bottom:15px;
color:var(--text-color);
border-bottom:1px solid var(--border-color);
padding-bottom:10px
}

.static-page-content p,.static-page-content ul{
margin-bottom:15px
}

.static-page-content ul{
list-style-type:disc;
margin-left:25px;
padding-left:0
}

.static-page-content ul li{
margin-bottom:8px
}

.static-page-content a{
color:var(--primary-color);
text-decoration:underline
}

.static-page-content a:hover{
color:#c10811
}


.static-page-content .text-center{
margin-top:25px
}


.filter-sort-section{
background:var(--card-bg-color);
padding:20px;
border-radius:12px;
box-shadow:0 5px 20px rgba(0,0,0,0.1);
margin-bottom:30px;

max-width:900px;

margin-left:auto;
margin-right:auto
}

.filter-sort-form{
display:flex;

flex-wrap:wrap;

gap:25px;

align-items:center;

justify-content:center

}

.filter-sort-form .form-group{
display:flex;

align-items:center;

margin-bottom:0

}

.filter-sort-form .form-group label{
font-weight:700;
color:var(--text-color);
margin-right:10px;

white-space:nowrap

}

.filter-sort-form select{
padding:8px 12px;
border:1px solid var(--border-color);
border-radius:5px;
font-size:.8rem;
background-color:#fcfcfc;
cursor:pointer;
outline:none;
transition:border-color .3s ease;
min-width:120px

}

.filter-sort-form select:focus{
border-color:var(--primary-color)
}


@media (max-width: 768px){
.filter-sort-form{
flex-direction:column;

align-items:stretch

}

.filter-sort-form .form-group{
width:100%;
text-align:center;

justify-content:center

}

.filter-sort-form select{
width:100%;
max-width:300px;

margin:0 auto;

display:block;

margin-top:5px

}

.filter-sort-form .form-group label{
margin-right:0;

margin-bottom:5px

}
}



.pagination{
display:flex;
justify-content:center;
align-items:center;
margin-top:40px;
margin-bottom:20px;
flex-wrap:wrap;
gap:8px
}

.pagination-link{
display:inline-flex;
justify-content:center;
align-items:center;
padding:10px 15px;
border:1px solid var(--border-color);
border-radius:5px;
color:var(--primary-color);
text-decoration:none;
font-weight:700;
min-width:40px;
transition:background-color .3s ease,color .3s ease,border-color .3s ease
}

.pagination-link:hover:not(.active):not(.disabled){
background-color:var(--primary-color);
color:#fff;
border-color:var(--primary-color);
text-decoration:none
}

.pagination-link.active{
background-color:var(--primary-color);
color:#fff;
border-color:var(--primary-color);
cursor:default
}

.pagination-link.disabled{
color:#ccc;
border-color:#eee;
cursor:not-allowed;
background-color:#f9f9f9
}

.pagination-dots{
padding:10px 5px;
color:#777
}


@media (max-width: 992px){

.search-bar{
width:100%;
order:2;
display:flex;

justify-content:center;

flex-wrap:nowrap;

padding:0 10px


}

.search-bar input[type="text"]{
flex-grow:1;

width:auto;

max-width:250px;

margin-right:5px;

padding:8px 12px;

font-size:.9rem

}

.search-bar input[type="text"]:focus{
max-width:280px

}

.search-bar button{
flex-shrink:0;

padding:8px 15px;

font-size:.9rem

}
}

@media (max-width: 768px){

.search-bar{
padding:0 5px

}

.search-bar input[type="text"]{
max-width:180px

}
}

@media (max-width: 576px){


.main-header .container{
flex-direction:row;

justify-content:space-between;

align-items:center;
padding:0 10px

}

.main-header .logo{
flex-shrink:0;

margin-right:10px;

order:1
}

.main-header .logo a{
font-size:1.6rem

}

.search-bar{
width:auto;

flex-grow:1;

order:2;

justify-content:flex-end;

padding:0;

margin-top:0

}

.search-bar input[type="text"]{
max-width:130px;

padding:6px 8px;

font-size:.8rem

}

.search-bar button{
padding:6px 10px;

font-size:.8rem

}


.mobile-menu-toggle{
top:auto;

right:auto;

position:static;

margin-left:10px;

order:3

}


.main-nav{
width:100%;
order:4


}


.section-title{
font-size:1.8rem

}
}


.video-play-page{
gap:30px
}

.main-video-player,.video-details{
flex:none;

width:100%;

min-width:unset

}

.video-details-title{
font-size:2rem
}
}

@media (max-width: 768px){
.container{
padding:0 15px
}

.section-title{
font-size:2rem
}

.video-grid{

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:15px
}

.video-details-title{
font-size:1.8rem
}

.video-meta{
flex-direction:column;
align-items:flex-start;
gap:10px
}

.share-btn{
display:flex;

margin-right:0;
width:100%;
justify-content:center
}


.admin-table,.admin-table thead,.admin-table tbody,.admin-table th,.admin-table td,.admin-table tr{
display:block
}

.admin-table thead tr{
position:absolute;
top:-9999px;
left:-9999px
}

.admin-table tr{
border:1px solid var(--border-color);
margin-bottom:10px;
border-radius:8px
}

.admin-table td{
border:none;
border-bottom:1px solid #eee;
position:relative;
padding-left:50%;
text-align:right
}

.admin-table td:before{
position:absolute;
top:0;
left:6px;
width:45%;
padding-right:10px;
white-space:nowrap;
text-align:left;
font-weight:700;
color:var(--text-color)
}

.admin-table td:nth-of-type(1):before{
content:"ID:"
}

.admin-table td:nth-of-type(2):before{
content:"Tiêu đề:"
}

.admin-table td:nth-of-type(3):before{
content:"Loại:"
}

.admin-table td:nth-of-type(4):before{
content:"Danh mục:"
}

.admin-table td:nth-of-type(5):before{
content:"Ngày đăng:"
}

.admin-table td:nth-of-type(6):before{
content:"Hành động:"
}
}

@media (max-width: 576px){
.video-grid{


grid-template-columns:repeat(auto-fit,minmax(45%,1fr));
gap:10px;

padding:0 5px

}

.video-card{
max-width:unset;

margin:0

}

.video-title{
font-size:.8rem;

margin:2px;

min-height:2.6em

}


.main-header .container{
padding:0 10px

}

.main-content{
padding:1.5rem 0

}

.filter-sort-section{
padding:15px

}
}

.video-category,.video-description{
margin:0 15px 15px
}

.main-video-player,.video-details{
border-radius:8px
}

.video-details{
padding:20px
}

.video-details-title{
font-size:1.5rem
}

.share-btn{
padding:10px 15px;
font-size:.9rem
}
}


.category-list-section{
padding:30px 0
}

.category-list-section .section-title{

text-align:center;
margin-bottom:2rem;
position:relative;
padding-bottom:15px
}

.category-list-section .section-title::after{
content:'';
position:absolute;
bottom:0;
left:50%;
transform:translateX(-50%);
width:100px;
height:5px;
background:var(--primary-color);
border-radius:3px
}

.category-list{
list-style:none;
display:grid;

grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:25px;

margin-top:30px;
justify-content:center

}

.category-list li{
background:var(--card-bg-color);
border-radius:12px;

box-shadow:0 5px 20px rgba(0,0,0,0.15);

transition:transform .3s ease,box-shadow .3s ease;
overflow:hidden;

display:flex;

flex-direction:column;
justify-content:center;

align-items:center;

text-align:center;
min-height:150px;

padding:20px

}

.category-list li:hover{
transform:translateY(-8px);

box-shadow:0 12px 25px rgba(0,0,0,0.2)

}

.category-item{
display:block;

width:100%;
height:100%;
text-decoration:none;
color:var(--text-color);

font-size:1.6rem;

font-weight:700;
line-height:1.3;

display:flex;
justify-content:center;
align-items:center
}

.category-item:hover{
background-color:var(--primary-color);

color:#fff;

text-decoration:none
}




@media (max-width: 992px){
.category-list{
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:20px
}

.category-list li{
min-height:130px;
padding:15px
}

.category-item{
font-size:1.4rem
}
}

@media (max-width: 768px){
.category-list{
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:15px
}

.category-list li{
min-height:120px
}

.category-item{
font-size:1.3rem
}
}

@media (max-width: 576px){
.category-list{
grid-template-columns:1fr;

gap:10px;
padding:0 10px

}

.category-list li{
min-height:100px;
border-radius:8px;
padding:15px
}

.category-item{
font-size:1.2rem
}
}


.footer-keywords{
margin-top:25px;
padding-top:20px;
border-top:1px solid rgba(255,255,255,0.1)

}

.footer-keywords h3{
font-size:1.1rem;
color:var(--text-color);
margin-bottom:15px;
font-weight:600
}

.footer-keywords .keyword-tag{

background:#333;

color:#bbb;

border:1px solid #555;
margin:4px 6px 4px 0;

padding:6px 12px;
font-size:.85rem;
border-radius:20px;
transition:background .3s ease,color .3s ease,border-color .3s ease
}

.footer-keywords .keyword-tag:hover{
background:var(--primary-color);
color:#fff;
border-color:var(--primary-color);
text-decoration:none
}