@import url('style_main/original.css');

/* header */

.back-bg {
    height: 250px;
    background-color: var(--bg2-hover);
}

/* carousel */

.parent-carousel-caption {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

.img-carousel-item {
    height: 170px;
    overflow: hidden;
}

.h-carousel-caption {
    height: 130px;
}

/* quick */

.p-img {
    /* width: 125px; */
    width: 100px;
}

.p-text p {
    color: var(--text-white) !important;
    max-width: 100px;
}

.quick {
    grid-template-columns: repeat(2, auto);
    column-gap: 20px;
    row-gap: 20px;
}

.quick article {
    cursor: pointer;
    transition: transform .2s, box-shadow .2s;
}

.quick article:hover {
    box-shadow: 0px 20px 20px -10px var(--bg2);
    transform: translateY(-4px) scale(1.03);
}

/* history */

.img-history {
    box-shadow: -20px -10px 10px 0px rgba(255, 255, 255, 0.4);
    width: 200px;
    /* height: 300px; */
}

.img-back-history {
    background-image: url('image/computer/image-2/IMG_20230916_173333_274.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-origin: padding-box;
    background-position: center center;
    position: relative;
    /* z-index: 1; */
    /* height: 600px; */
}

.img-back-history::before {
    content: '';
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.35);
    border-radius: 1rem;
}

.text-history {
    background-color: rgba(255, 255, 255, 0.6);
}

/* pride */

.img-card-pride {
    width: 100px;
    margin-right: 0;
}

/* notification */

.notification {
    display: grid;
    grid-template-columns: auto;
}

.notification .card-text {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.notification .card {
    box-shadow: -7px 7px 10px 0px #ccc;
}

.notification .card div:last-of-type {
    width: 65px;
}

.notification .card .card-text small{
    color: var(--bottom-text) !important;
}

/* student and teacher*/

.img-person {
    transition: transform .2s ease;
}

.person article>div:hover .img-person {
    transform: scale(1.1);
}

.person article>div div:first-of-type {
    width: 95px;
    box-shadow: -10px 10px 15px 0px rgb(204, 204, 204);
}

/* gallery */

.gallery {
    grid-template-rows: repeat(3, 150px);
    grid-template-columns: auto auto;
}

.gallery article {
    transition: .3s ease;
    cursor: pointer;
}

.gallery article::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.35);
    transition: .3s ease;
}

.gallery article:hover::after {
    background-color: rgba(0, 0, 0, 0.18);
}

.gallery article p {
    bottom: 12px;
    right: 12px;
    color: var(--text-white) !important;
}

/* consultant */

.consultant .card-body p {
    text-align: justify !important;
}

/* statistics */

.statistics {
    background-color: var(--bg-gray);
    color: var(--text-gray) !important;
}

.statistics div h2,
.statistics div p {
    color: var(--text-gray) !important;
}

.statistics h2 {
    font-family: var(--font-number) !important;
}

/* facilities */

.facilities {
    grid-template-rows: repeat(2, 200px);
    grid-template-columns: auto auto;
}

.facilities article:not(article:last-of-type) {
    cursor: pointer;
}

.facilities article:last-of-type {
    height: 200px;
    width: 50%;
    box-shadow: 0px 0px 20px 3px;
}

.facilities article:not(article:last-of-type)::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.35);
    transition: .3s ease;
}

.facilities article:not(article:last-of-type):hover::after {
    background-color: rgba(0, 0, 0, 0.18);
}

.facilities article:nth-of-type(2n-1) p {
    right: 12px;
    color: var(--text-white) !important;
}

.facilities article:nth-of-type(2n) p {
    left: 12px;
    color: var(--text-white) !important;
}

.facilities article:nth-of-type(1) p,
.facilities article:nth-of-type(2) p {
    top: 12px;
}

.facilities article:nth-of-type(3) p,
.facilities article:nth-of-type(4) p {
    bottom: 12px;
}

/* register */

.register::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0) -5%, var(--bg2) 100%);
    z-index: 1;
}

/* survey */

.iconsSurvey {
    max-width: 175px;
}

.iconSurvey1 {
    color: #1ea855 !important;
    cursor: pointer;
}

.iconSurvey2 {
    color: #72cf8c !important;
    cursor: pointer;
}

.iconSurvey3 {
    color: #f6cc0e !important;
    cursor: pointer;
}

.iconSurvey4 {
    color: #fea121 !important;
    cursor: pointer;
}

.iconSurvey5 {
    color: #fa4b53 !important;
    cursor: pointer;
}

.iconsSurvey i {
    transition: transform .2s ease;
}

.iconsSurvey i:hover {
    transform: scale(1.19);
}

.survey .card-body,
.survey .card-footer {
    background-color: rgba(255, 255, 255, 0.6) !important;
    /* box-shadow: 0px 10px 5px 0px rgba(255, 255, 255, 0.6); */
}

.survey .card-body::after {
    content: '';
    width: 200px;
    height: 200px;
    position: absolute;
    top: -50px;
    right: -50px;
    background-color: var(--bg2);
    border-radius: 50%;
    z-index: -1;
}

.survey .card-body::before {
    content: '';
    width: 200px;
    height: 200px;
    position: absolute;
    bottom: -50px;
    left: -50px;
    background-color: var(--bg2);
    border-radius: 50%;
    z-index: -1;
}

/* /////////////////////////////////////scroll///////////////////////////////////////// */
body > section.container.bg-white.shadow{
    overflow: hidden;
}
.quick article:nth-of-type(even){
    transform: translateX(-50%);
    opacity: 0;
    transition: .5s;
}
.quick article:nth-of-type(odd){
    transform: translateX(50%);
    opacity: 0;
    transition: .5s;
}
.quick-show{
    transform: none !important;
    opacity: 1 !important;
}

.person>article:nth-of-type(even)>div>div:first-of-type {
    transform: rotate(-45deg) translate(-65px,40px);
    transition: .5s;
}
.person>article:nth-of-type(odd)>div>div:first-of-type {
    transform: rotate(45deg) translate(65px,40px);
    transition: .5s;
}
.person-show{
    transform: none !important;
}

.pride article:nth-of-type(even){
    transform: translateX(-150%);
    transition: .7s;
}
.pride article:nth-of-type(odd){
    transform: translateX(150%);
    transition: .7s;
}
.pride-show{
    transform: none !important;
}

.notification>article{
    margin-left: 100%;
    width: 70px;
    transition: .5s;
    overflow: hidden;
}
.notification>article small{
    white-space: nowrap;
}
.notification>article div:last-of-type{
    display: none;
}
.notification-show{
    margin-left: 0 !important;
    width: 100% !important;
}
.notification-show div:last-of-type{
    display: block !important;
}