@font-face {
    font-family: "UVF-Assassin";
    src: url("/wp-content/themes/sealight/fonts/UVF-Assassin.ttf") format("truetype");
    font-weight: 400;
}


:root {
    --btn-bg: #9EC9C0;
    --btn-hover-bg: #4A8C85;
}

.text-highlight {
    color: #4A8C85;
}

.btn-animation {
    position: relative;
}

.btn-animation:before {
    position: absolute;
    content: "";
    width: 55px;
    height: 44px;
    border-radius: 10000px;
    background-color: var(--btn-bg);
    left: 0;
    top: 0;
    transition: all 0.3s ease;
}

.btn-animation:hover:before {
    width: 100%;
    background-color: var(--btn-hover-bg);
}

.btn-animation>a {
    position: relative;
    z-index: 2;
}

.btn-animation.secondary {
    --btn-bg: #FDF3E9;
    --btn-hover-bg: #4A8C85;
}

.btn-animation.tertiary {
    --btn-bg: #E9A668;
    --btn-hover-bg: #FFF;
}

.uk-dotnav>.uk-active>* {
    width: 10px;
    height: 10px;
}

.uk-dotnav {
    margin-left: 0;
    padding: 3px 0;
    display: flex;
    align-items: center;
}

.uk-button-secondary {
    border-radius: 1000px;
    line-height: 47px;
    font-size: 18px;
    padding: 0 32px;
}

*+p,
*+ul,
*+ol,
*+dl,
*+pre,
*+address,
*+fieldset {
    margin-top: 16px;
}

address,
dl,
fieldset,
ol,
p,
pre,
ul {
    margin: 0 0 16px 0;
}

.uk-offcanvas-close.uk-close svg {
    color: #212121;
}


.tm-header-placeholder {
    height: 0px !important;
}

.uk-icon:not(.uk-preserve) [fill*="#"]:not(.uk-preserve) {
    fill: unset !important;
}

.uk-navbar-container {
    background: #ffffff;
}

.uk-logo {
    padding: 0 52px 0 0 !important;
    color: #4A8C85 !important;
}

.content-item .el-nav {
    padding: 13px 16px;
    transition: .1s ease-in-out;
    border-radius: 106px;
    box-shadow: 0px 0px 4px 0px #0000000F;
    background: #ffffff;
}

.content-item .el-nav:hover {
    color: #ffffff !important;
    background: #4A8C85 !important;
}

.uk-navbar-container .uk-navbar-item {
    margin-left: 52px;
}

.uk-navbar-container .uk-navbar-item:hover svg {
    fill: #ffffff;
}

.uk-navbar-container {
    background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 61.54%, rgba(255, 255, 255, 0) 100%) !important;
    padding-bottom: 32px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateZ(0); 
}

@media (min-width: 1201px) {
    .uk-navbar-container {
        padding-bottom: 32px;
    }
}

.uk-navbar-container.uk-navbar-sticky {
    background: #ffffff !important;
    padding-bottom: 0;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
    transform: translateY(0);
}

.uk-navbar-sticky .uk-logo {
    transition: transform 0.3s ease;
}

/* Button animation khi sticky */
.uk-navbar-sticky .uk-navbar-nav > li,
.uk-navbar-sticky .btn-animation {
    animation: fadeInDown 0.5s ease 0.1s backwards;
}


@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ========= dành cho custom form wc7 ========*/

/* Placeholder cho time và date */
input[type="time"]::before,
input[type="date"]::before {
  content: attr(placeholder);
  font-weight: 400;
  font-size: 15px;
  color: #6B7280;
  position: absolute;
  left: 12px;
  transform: translate(12%,-50%);
  pointer-events: none;
}

@media (max-width: 460px) {
    input[type="time"]::before,
    input[type="date"]::before {
    left: 20px;
    transform: none;
    }
}

/* Ẩn placeholder text ::before khi có giá trị */
input[type="time"]:valid::before,
input[type="date"]:valid::before {
  display: none;
}

/* Ẩn các field mặc định */
input[type="time"]::-webkit-datetime-edit-text,
input[type="time"]::-webkit-datetime-edit-hour-field,
input[type="time"]::-webkit-datetime-edit-minute-field,
input[type="time"]::-webkit-datetime-edit-ampm-field {
  display: none;
}

input[type="date"]::-webkit-datetime-edit-text,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-year-field {
  display: none;
}

/* Hiển thị lại khi focus HOẶC có giá trị */
input[type="time"]:focus::-webkit-datetime-edit-text,
input[type="time"]:focus::-webkit-datetime-edit-hour-field,
input[type="time"]:focus::-webkit-datetime-edit-minute-field,
input[type="time"]:focus::-webkit-datetime-edit-ampm-field,
input[type="time"]:valid::-webkit-datetime-edit-text,
input[type="time"]:valid::-webkit-datetime-edit-hour-field,
input[type="time"]:valid::-webkit-datetime-edit-minute-field,
input[type="time"]:valid::-webkit-datetime-edit-ampm-field {
  display: inline;
}

input[type="date"]:focus::-webkit-datetime-edit-text,
input[type="date"]:focus::-webkit-datetime-edit-day-field,
input[type="date"]:focus::-webkit-datetime-edit-month-field,
input[type="date"]:focus::-webkit-datetime-edit-year-field,
input[type="date"]:valid::-webkit-datetime-edit-text,
input[type="date"]:valid::-webkit-datetime-edit-day-field,
input[type="date"]:valid::-webkit-datetime-edit-month-field,
input[type="date"]:valid::-webkit-datetime-edit-year-field {
  display: inline;
}



@media (max-width: 1200px) {
    .uk-navbar-container {
        padding-bottom: 0px;
    }
    .tm-header-mobile {
        position: fixed;
        /* top: 16px; */
        width: 100%;
        z-index: 1000;
    }

    .tm-header-mobile .uk-navbar-container {
        /* margin: 0 30px; */
        /* border-radius: 24px; */
        box-shadow: 0px 0px 16px 0px #0000001A;
    }
}