/*.tooltip-keyword {*/
/*    position: absolute;*/
/*    z-index: 999999999;*/
/*    background-color: white;*/
/*    padding: 10px;*/
/*    display: none;*/
/*    top: auto;*/
/*    left: 400px;*/
/*    width: 25%;*/
/*    box-shadow: -6px 4px 52px -14px rgba(0,0,0,0.83);*/
/*    -webkit-box-shadow: -6px 4px 52px -14px rgba(0,0,0,0.83);*/
/*    transform: translate(84%, -3%);*/
/*}*/

/*.tooltip-keyword::before {*/
/*    content: "";*/
/*    position: absolute;*/
/*    top: 50%;*/
/*    right: 100%;*/
/*    margin-top: -5px;*/
/*    border-width: 5px;*/
/*    border-style: solid;*/
/*    border-color: transparent black transparent transparent; / Màu sắc của mũi tên *!*/
/*}*/

.keyword:hover + .tooltip-keyword {
    display: block;
}

/*div.content-keyword {*/
/*    color: black;*/
/*}*/

/*css new*/
/* START tooltip-keyword STYLES */
.keyword:hover + .tooltip-keyword,
.tooltip-keyword:hover {
    display: block;
}
.tooltip-container:hover .tooltip-keyword {
    display: block;
}
.tooltip-container {
    position: relative;
    display: inline-block;
}
.keyword{
    position: relative; /* opinion 1 */
}

/* Applies to all tooltip-keywords */
.keyword::before,
.keyword::after {
    text-transform: none; /* opinion 2 */
    font-size: .9em; /* opinion 3 */
    line-height: 1;
    user-select: none;
    pointer-events: none;
    position: absolute;
    display: none;
    opacity: 0;
}
.keyword::before {
    content: '';
    border: 5px solid transparent; /* opinion 4 */
    z-index: 1001; /* absurdity 1 */
}
.tooltip-keyword{
    position: absolute;
    z-index: 999999999;
    width: 25%;
    -webkit-box-shadow: -6px 4px 52px -14px rgba(0,0,0,0.83);
    display: none;
    min-width: 3em;
    max-width: 21em;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 1ch 1.5ch;
    border-radius: .3ch;
    background-color: white;
    color: black;
}

/* Make the tooltip-keywords respond to hover */
.keyword:hover::before,
.keyword:hover::after {
    display: block;
}

/* don't show empty tooltip-keywords */
[tooltip-keyword='']::before,
[tooltip-keyword='']::after {
    display: none !important;
}

/* FLOW: UP */
.keyword:not([flow])::before,
.keyword[flow^="up"]::before {
    bottom: 100%;
    border-bottom-width: 0;
    border-top-color: #333;
}
.keyword:not([flow])::after,
.keyword[flow^="up"]::after {
    bottom: calc(100% + 5px);
}
.keyword:not([flow])::before,
.keyword:not([flow])::after,
.keyword[flow^="up"]::before,
.keyword[flow^="up"]::after {
    left: 50%;
    transform: translate(-50%, -.5em);
}

/* FLOW: DOWN */
.keyword[flow^="down"]::before {
    top: 100%;
    border-top-width: 0;
    border-bottom-color: #333;
}
.keyword[flow^="down"]::after {
    top: calc(100% + 5px);
}
.keyword[flow^="down"]::before,
.keyword[flow^="down"]::after {
    left: 50%;
    transform: translate(-50%, .5em);
}

/* FLOW: LEFT */
.keyword[flow^="left"]::before {
    top: 50%;
    border-right-width: 0;
    border-left-color: #333;
    left: calc(0em - 5px);
    transform: translate(-.5em, -50%);
}
.keyword[flow^="left"]::after {
    top: 50%;
    right: calc(100% + 5px);
    transform: translate(-.5em, -50%);
}

/* FLOW: RIGHT */
.keyword[flow^="right"]::before {
    top: 50%;
    border-left-width: 0;
    border-right-color: #333;
    right: calc(0em - 5px);
    transform: translate(.5em, -50%);
}
.keyword[flow^="right"]::after {
    top: 50%;
    left: calc(100% + 5px);
    transform: translate(.5em, -50%);
}

/* KEYFRAMES */
@keyframes tooltip-keywords-vert {
    to {
        opacity: .9;
        transform: translate(-50%, 0);
    }
}

@keyframes tooltip-keywords-horz {
    to {
        opacity: .9;
        transform: translate(0, -50%);
    }
}

/* FX All The Things */
.keyword:not([flow]):hover::before,
.keyword:not([flow]):hover::after,
.keyword[flow^="up"]:hover::before,
.keyword[flow^="up"]:hover::after,
.keyword[flow^="down"]:hover::before,
.keyword[flow^="down"]:hover::after {
    animation: tooltip-keywords-vert 300ms ease-out forwards;
}

.keyword[flow^="left"]:hover::before,
.keyword[flow^="left"]:hover::after,
.keyword[flow^="right"]:hover::before,
.keyword[flow^="right"]:hover::after {
    animation: tooltip-keywords-horz 300ms ease-out forwards;
}