:root {
    --green-mode: rgb(0, 171, 85);
    --purple-mode: rgb(118, 53, 220);
    --blue-mode: rgb(32, 101, 209);
    --yellow-mode: rgb(253, 169, 45);
    --red-mode: rgb(255, 48, 48);

    --current-mode: var(--green-mode);
}

html,
body {
    box-sizing: border-box;
    padding: 0px;
    margin: 0px;
    font-family: Tahoma, sans-serif;
    background-color: rgb(22, 28, 36);
}

/* HEADER STYLES */
header {
    height: 88px;
    padding: 0 144px 0 144px;
    /* background-color: rgb(44 50 58); */
    color: white;
    display: flex;
    align-items: center;
}
.header-logo {
    width: 69px;
    height: 40px;
    justify-content: center;
    align-items: center;
}
.header-logo img {
    width: 100%;
    height: 100%;
}
.header-version {
    height: 22px;
    min-width: 22px;
    line-height: 0;
    border-radius: 6px;
    cursor: default;
    align-items: center;
    white-space: nowrap;
    display: inline-flex;
    justify-content: center;
    padding: 0px 8px;
    color: rgb(12, 83, 183);
    font-size: 0.75rem;
    font-family: Tahoma, sans-serif;
    background-color: rgba(24, 144, 255, 0.16);
    font-weight: 700;
    margin-left: 8px;
}
.header-right-items {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
}
.header-right-items span {
    font-weight: 600;
    line-height: 1.57143;
    font-size: 0.875rem;
    font-family: Tahoma, sans-serif;
    transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}
.dashboard {
    color: var(--current-mode) !important;
}
.header-gdvietnam-button {
    font-weight: 700;
    font-size: 0.875rem;
    color: white;
    border-radius: 8px;
    background-color: var(--current-mode);
    cursor: pointer;
    border: none;
    width: 120px;
    height: 35px;
}
/* END HEADER STYLES */

/* PROFILE 1 STYLES */
.profile1 {
    height: 720px;
    width: 520px;
    margin-left: 144px;
    display: flex;
    flex-direction: column;
    color: white;
    /* align-items: center; */
    /* background-color: rgb(44 50 58); */
    padding-top: 6px;
    gap: 40px;
}
.profile1-title {
    width: 100%;
    height: 192px;
}
.profile1-title span {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.33333;
    font-family: Tahoma, sans-serif;
}
.profile1-specification {
    width: 100%;
    height: 48px;
    align-items: center;
    justify-content: center;
    display: flex;
}
.profile1-specification p {
    line-height: 1.5;
    font-size: 1rem;
    font-family: Tahoma, sans-serif;
    font-weight: 400;
}
.profile1-interact {
    width: 100%;
    height: 22px;
    display: flex;
    gap: 20px;
    flex-direction: row;
    align-items: center;
}
.iteract-item {
    display: flex;
    gap: 8px;
    align-items: center;
}
.iteract-item img {
    width: 20px;
    height: 20px;
}
.iteract-item a {
    color: white !important;
    line-height: 1.57143;
    font-size: 0.875rem;
    font-family: Tahoma, sans-serif;
    font-weight: 400;
    text-decoration: none;
    top: 1px;
}
.iteract-item a:hover {
    text-decoration: underline;
}

.profile1-detail {
    width: 100%;
    height: 48px;
    display: flex;
    align-items: center;
}
.detail-btn {
    width: 163.27px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-color: var(--current-mode);
    border-radius: 8px;
    border: none;
    box-sizing: border-box;
    gap: 5px;
}
.detail-btn:hover {
    background-color: rgb(0, 123, 85);
}
.detail-btn img {
    width: 20px;
    height: 20px;
    filter: invert(1);
}
.detail-btn span {
    font-weight: 550;
    line-height: 1.71429;
    font-size: 0.9375rem;
    text-transform: capitalize;
    color: white;
    font-family: Tahoma, sans-serif;
}
.profile1-devices {
    display: flex;
    width: 100%;
    height: 74px;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}
.devices-title {
    display: flex;
    width: 100%;
    height: 24px;
    align-items: center;
}
.devices-title span {
    margin: 0px;
    font-weight: 700;
    line-height: 1.5;
    font-size: 0.75rem;
    text-transform: uppercase;
    font-family: Tahoma, sans-serif;
    color: rgb(91, 229, 132);
}
.devices-icons {
    display: flex;
    width: 100%;
    height: 30px;
    gap: 20px;
}
.devices-icons img {
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
}
.profile1-pcbackground {
    position: absolute;
    right: 550px;
    top: 200px;
    width: 50px;
    height: 50px;
}
.profile1-pcbackground img {
    width: auto;
    height: 48vh;
    filter: brightness(30%);
}
/* END PROFILE 1 STYLES */

/* PROFILE 2 STYLES */
.profile2 {
    height: 738px;
    /* background-color: bisque; */
    padding: 0 144px 0 144px;
    display: flex;
    flex-direction: column;
    color: white;
}
.profile2-title {
    width: 100%;
    height: 98px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* gap: 16px; */
    display: flex;
    margin-bottom: 100px;
}
.profile2-title span {
    font-weight: 700;
    line-height: 1.5;
    font-size: 0.75rem;
    text-transform: uppercase;
    font-family: Tahoma, sans-serif;
    color: rgb(99, 115, 129);
}
.profile2-title h2 {
    margin: 16px;
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.33333;
    font-family: Tahoma, sans-serif;
    align-items: center; /* Đảm bảo căn giữa theo chiều dọc */
}
.profile2-containers {
    display: flex;
    justify-content: space-between;
    gap: 80px;
}
.container-lighthub {
    width: 330px;
    height: 440px;
    background-color: rgb(33, 43, 54);
    border-radius: 16px;
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.container-interaction {
    width: 330px;
    height: 440px;
    border-radius: 16px;
    background-color: rgb(33, 43, 54);
    display: flex;
    flex-direction: column;
    align-items: center;
}
.container-modeling {
    width: 330px;
    height: 440px;
    border-radius: 16px;
    background-color: rgb(33, 43, 54);
    margin-top: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.container-picture {
    width: 60px;
    height: 60px;
    margin-top: 80px;
}
.container-content {
    margin-top: 80px;
    width: 250px;
    height: 170px;
    display: flex;
    align-items: center;
    flex-direction: column;
}
.content-title {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.5;
    font-family: Tahoma, sans-serif;
}
.container-content p {
    margin: 0;
    text-align: center;
}
.content-paragraph {
    line-height: 1.5;
    font-size: 1rem;
    font-family: Tahoma, sans-serif;
    font-weight: 400;
    padding-top: 16px;
}
/* END PROFILE 2 STYLES */

/* PROFILE 3 STYLES */
.profile3 {
    height: 550px;
    margin-top: 192px;
    padding: 0 144px 0 144px;
    display: flex;
    gap: 40px;
}
.profile3-content {
    height: 100%;
    width: 33.3333%;
    background-color: rgb(22, 28, 36);
    padding-top: 100px;
    display: flex;
    flex-direction: column;
}
.profile3-content-child-title {
    width: 100%;
    height: 18px;
}
.profile3-content-child-title span {
    font-weight: 700;
    line-height: 1.5;
    font-size: 0.75rem;
    text-transform: uppercase;
    font-family: Tahoma, sans-serif;
    color: rgb(99, 115, 129);
}
.profile3-content-title {
    width: 100%;
    height: 128px;
    margin-top: 16px;
}
.profile3-content-title h2 {
    margin: 0;
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.3333;
    color: white;
}
.profile3-content-paragraph {
    width: 100%;
    height: 48px;
    margin-top: 24px;
}
.profile3-content-paragraph p {
    margin: 0;
    color: white;
    line-height: 1.5;
    font-size: 1rem;
    font-weight: 400;
}
.profile3-content-btn-detail {
    width: 100%;
    height: 48px;
    margin-top: 40px;
}
.profile3-content-btn-detail button {
    height: 100%;
    width: 140px;
    cursor: pointer;
    border-radius: 8px;
    background-color: transparent;
    color: white;
    border: 1px solid rgba(145, 158, 171, 0.32);
    font-weight: 700;
    line-height: 1.71429;
    font-size: 0.9375rem;
}
.profile3-pictures {
    height: 100%;
    width: 66.6667%;
    display: flex;
    justify-content: center;
}
.profile3-pictures-container {
    align-items: center;
    position: relative;
    width: 350px;
    height: 350px;
}
.profile3-pictures-container img {
    width: 300px; /* Ảnh sẽ chiếm toàn bộ width của container */
    height: auto; /* Đảm bảo tỉ lệ khung hình không bị thay đổi */
    position: absolute;
    border-radius: 12px;
    box-shadow: rgba(0, 0, 0, 0.48) 80px -40px 80px;
}
.profile3-pictures-earth {
    z-index: 3;
    position: absolute;
    transform: translateX(-50%) translateY(40px) scaleX(0.86) scaleY(1)
        skewX(0deg) skewY(8deg) translateZ(0px);
    width: 200px;
    height: 400px;
    border-radius: 12px;
}
.profile3-pictures-gen {
    opacity: 1;
    z-index: 2;
    position: absolute;
    transform: translateX(0px) translateY(0px) scaleX(0.86) scaleY(1)
        skewX(0deg) skewY(8deg) translateZ(0px);
    width: 200px;
    height: 400px;
    border-radius: 12px;
}
.profile3-pictures-heart {
    opacity: 1;
    z-index: 1;
    position: absolute;
    transform: translateX(50%) translateY(-40px) scaleX(0.86) scaleY(1)
        skewX(0deg) skewY(8deg) translateZ(0px);
    width: 200px;
    height: 400px;
    border-radius: 12px;
}
/* END PROFILE 3 STYLES */

/* PROFILE 4 STYLES */
.profile4 {
    margin-top: 300px;
    padding: 0 144px 0 144px;
    height: 482px !important;
    position: relative;
    color: white;
    /* background-color: yellowgreen; */
}
.profile4-content {
    display: flex;
    width: 100%;
    height: 100%;
    gap: 130px;
    position: relative;
}
.profile4-content-images {
    width: 66%;
    height: 100%;
    overflow: hidden;
    position: relative;
}
.profile4-content-images img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin: 0 auto;
    position: absolute;
    top: 0;
    left: 0;
}
.profile4-content-information {
    width: 34%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.information-child-title {
    width: 100%;
    height: 34px;
}
.information-child-title span {
    font-weight: 700;
    line-height: 1.5;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: rgb(99, 115, 129);
}
.information-title {
    width: 100%;
    height: 88px;
}
.information-title h2 {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.33333;
    margin: 0;
}
.information-paragraph {
    width: 100%;
    height: 64px;
}
.information-paragraph p {
    line-height: 1.5;
    font-size: 1rem;
    font-weight: 400;
}
.profile4-background {
    width: 720px;
    height: 720px;
    position: absolute;
    top: -150px;
    right: 110px;
    opacity: 0.48;
}
.profile4-background img {
    width: 100%;
    height: 100%;
}
/* END PROFILE 4 STYLES */

/* PROFILE 5 STYLES */
.profile5 {
    margin-top: 300px;
    height: 960px;
    padding: 0px 144px 0px 144px;
    display: flex;
    flex-direction: column;
    text-align: center;
    color: white;
}
.profile5-child-title {
    width: 100%;
    height: 18px;
}
.profile5-child-title span {
    font-weight: 700;
    line-height: 1.5;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: rgb(99, 115, 129);
}
.profile5-title {
    margin-top: 16px;
    width: 100%;
    height: 64px;
    margin-bottom: 24px;
}
.profile5-title h2 {
    margin: 0;
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.33333;
}
.profile5-paragraph p {
    margin: 0;
    line-height: 1.5;
    font-size: 1rem;
    font-weight: 400;
}
.profile5-images {
    margin-top: 10px;
    width: 100%;
    height: 750px;
    position: relative;
}
.profile5-images img {
    width: 100%;
    height: 100%;
    display: block;
    margin: 0 auto;
    position: absolute;
    top: 0;
    left: 0;
}
.profile5-radio-colors {
    margin-top: 60px;
    display: flex;
    flex-flow: column wrap;
    height: 0px;
    width: 100%;
}
.profile5-radio {
    position: absolute;
    right: 112px;
    width: 32px;
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.input-toggle-color {
    width: 20px;
    height: 20px;
    background-color: bisque;
    cursor: pointer;
    margin: 0;
    position: relative;
}

.label-radio {
    position: relative;
}

.display-color {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    position: absolute;
    top: 10px;
    left: 10px;
    transform: translate(-50%, -50%); /* Dịch chuyển chỉ báo để căn giữa chính xác */

}
/* end profile 5 styles */

/* footer styles */
footer {
    margin-top: 100px;
    height: 66px;
    padding: 0px 144px 0px 144px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    gap: 8px;
    margin-bottom: 40px;
}
.footer-logo {
    width: 69px;
    height: 40px;
}
.footer-logo img {
    width: 100%;
    height: 100%;
}
.footer-cation p {
    margin: 0px;
    line-height: 1.5;
    font-size: 0.75rem;
    font-weight: 400;
}